Web前端期末大作业---HTML+CSS+JS️实现汽车主题官网设计

目录

视频演示： # 大学生Web前端期末大作业--奥迪汽车主题网页设计【附完整源码】.mp4

网页实现截图：文末获取源码

项目组织结构：

主要源码展示：

获取完整源码：

---

 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

视频演示： # 大学生Web前端期末大作业--奥迪汽车主题网页设计【附完整源码】.mp4

网页实现截图：文末获取源码

汽车官网主页：

汽车车型介绍：

奥迪运动基因：

热门赛事介绍：

 驾控体验中心：

 奥迪运动商城：

项目组织结构：

主要源码展示：

奥迪官网主页.html

    
    
    
    
    
    
    
    



    

        

            
            

                
                

                    
首页
                    
运动车型
                    
奥迪运动基因
                    
热门赛事
                    
驾控体验中心
                    
奥迪运动商城
                
                

            
        
        
        

            

                

                    
                
                

                    
                
                

                    
                
                

                    
                
            
            

                

                

                

                

            
        
        
        

            
            

                
            
            
            

                
            
        
        
        

            

                预约试驾
                经销商查询
                一汽-大众奥迪
                联系我们
                版权说明
            
        
    

主页css

.top {
    min-width: 1070px;
    padding-top: 60px;
}

.top1 {
    width: 100%;
    height: 60px;
    line-height: 60px;
    position: fixed;
    background: black;
    min-width: 1070px;
    top: 0px;
    padding: 0 30px;
    box-sizing: border-box;
    z-index: 9999;
    background: url(../img/bg.png);
}

body {
    background: url(../img/bodybg.jpg);
}

.a-icon {
    float: left;
}

.ul-nav {
    float: left;
    height: 60px;
    position: absolute;
    left: 50%;
    margin-left: -464px;
    margin-top: -34px;
}

li {
    list-style-type: none;
}

.li1 {
    padding-left: 24px;
    padding-right: 24px;
}

.topzit {
    color: #ab192d;
    font-style: oblique;
    font-weight: bolder;
    font-size: 15.5px;
    letter-spacing: 1px;
}

.topzit1 {
    color: #838383;
    font-style: oblique;
    font-weight: bolder;
    font-size: 15.5px;
    letter-spacing: 1px;
}

.logo2 {
    float: right;
    margin-top: 14px;
}

/*轮播图*/

.carousel {
    position: relative;
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-item {
    position: relative;
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    transition: -webkit-transform 0.6s ease;
    transition: transform 0.6s ease;
    transition: transform 0.6s ease, -webkit-transform 0.6s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
    display: block;
}

.carousel-item-next,
.carousel-item-prev {
    position: absolute;
    top: 0;
}

.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.banner-img {
    width: 100%;
}

/*图片列表*/

.other {
    padding-top: 47px;
}

.other-1 {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.other-1-img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

.other-2 {
    margin-top: 32px;
    position: relative;
    overflow: hidden;
}

.other-2-img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

/*底部*/

.footer {
    width: 100%;
    height: 80px;
    line-height: 80px;
    background: #1b1b1b;
}

.content {
    height: 100%;
    padding: 0 60px;
    position: relative;
}

.typeface {
    color: #888b85;
    margin-right: 24px;
}

作品来自于网络收集、侵权立删 

获取完整源码：

大家点赞、收藏、关注、评论啦 、查看下方公众号获取联系