静态网页作品之一汽大众

学生静态网页作品——大众汽车

文章目录

  • 学生静态网页作品——大众汽车
      • 作品介绍
      • 作品效果
      • 代码演示
          • 首页代码
          • 热门品牌代码
      • CSS演示
          • 首页CSS
          • 热门品牌CSS

作品介绍

该作品使用vscode制作,采用div+css基本模式编辑,运用img、video、 a、:hover等相关代码实现,以外联的形式引入CSS,对网页的样式进行设置,利用简单的代码,使整体网页代码更加容易了解,符合学生期间的制作水平。以800px为主,使页面显示较为清晰,排版简单,通俗,在品牌车型页面中,当光标停留在某个图片时,该图片将放大2倍,使图片更加清晰。

作品效果

静态网页作品之一汽大众_第1张图片
静态网页作品之一汽大众_第2张图片
静态网页作品之一汽大众_第3张图片
静态网页作品之一汽大众_第4张图片
静态网页作品之一汽大众_第5张图片

代码演示

首页代码
 <div class="box1">
        <div id="navigation">
            <li><a href="index.html">首页a>li>
            <li><a href="develop.html">公司发展a>li>
            <li><a href="hot.html">热门品牌a>li>
            <li><a href="innovate.html">品牌创新a>li>
            <li><a href="car.html">品牌车型a>li>
            <li><a href="story.html">品牌故事a>li>
        div>
        <div id="img">
            <img src="photos\8.jpg">
        div>
        <div id="img">
            <img src="photos\9.jpg">
        div>
        <div id="img">
            <img src="photos\10.jpg">
        div>
        <div id="img">
            <img src="photos\11.jpg">
        div>
        <div id="img">
            <img src="photos\12.jpg">
        div>
        <div id="img">
            <img src="photos\13.jpg">
        div>
        <div id="img">
            <img src="photos\14.jpg">
        div>
        <div id="img">
            <img src="photos\15.jpg">
        div>
        <div id="img">
            <img src="photos\16.jpg">
        div>
        <div id="img">
            <img src="photos\17.jpg">
        div>
        <div id="img">
            <img src="photos\18.jpg">
        div>
        <div id="img">
            <img src="photos\19.jpg">
        div>
        <div id="img">
            <img src="photos\20.jpg">
        div>
        <div id="img">
            <img src="photos\21.jpg">
        div>
        <div id="img">
            <img src="photos\22.jpg">
        div>
        <div id="img">
            <img src="photos\23.jpg">
        div>
        <div id="img">
            <img src="photos\24.jpg">
        div>
        <div id="img">
            <img src="photos\25.jpg">
        div>
        <div id="img">
            <img src="photos\26.jpg">
        div>
        <div id="img">
            <img src="photos\27.jpg">
        div>
        <div class="clear">div>
        <div class="footer">
            一汽-大众汽车 © 2021.3.3
        div>
    div>
热门品牌代码
<div class="box1">
        <div id="navigation">
            <li><a href="index.html">首页a>li>
            <li><a href="develop.html">公司发展a>li>
            <li><a href="hot.html">热门品牌a>li>
            <li><a href="innovate.html">品牌创新a>li>
            <li><a href="car.html">品牌车型a>li>
            <li><a href="story.html">品牌故事a>li>
        div>
        <div id="video">
            <video width="800px" controls>
                <source src="video\1.mp4" type="video/mp4">
            video>
        div>
        <h2>外观设计h2>
        <hr>
        <div id="box1">
            <div id="produce">
                <h3>首发限量版专属设计h3>
                <p>• 首发限量版专属车色——曜夜蓝,只为敢于尝鲜的你。p>
                <p>• 首发限量版专属标识,彰显你的先锋气质。p>
                <p>• 首发限量版专属琉光金铝轮毂,非凡魅力始于足下。p>
            div>
            <div id="img">
                <img src="photos\3.jpg">
            div>
        div>
        <div class="clear">div>
        <div id="box2">
            <div id="produce1">
                <h3>IQ. Light 智能LED大灯h3>
                <p>聪明的大灯,为每一条路定制一束光。p>
                <p>IQ. Light矩阵式 LED 大灯,可依据车速及转向角度,自动调节灯光高度及宽度,让科技感和安全性完美结合。p>
            div>
            <div id="img1">
                <img src="photos\2.gif">
            div>
        div>
        <div class="clear">div>
        <div id="box1">
            <div id="produce">
                <h3>ID. Welcome light 灯光交互h3>
                <p>ID. Welcome light 让交互更具仪式感。当你出发或者回家时,宛如灵眸的前大灯通过迎宾(Welcome)和再见(Goodbye)模式和你亲密互动。p>
            div>
            <div id="img3">
                <img src="photos\3.gif">
            div>
        div>
        <div class="clear">div>
        <h2>卓越性能h2>
        <hr>
        <div id="box2">
            <div id="produce1">
                <h3>360°全场景充电服务h3>
                <p>•家庭充电,呵护到家
                    免费提供4G款大众品牌智能充电墙盒及40米基础安装服务。p>
                <p> •公共充电,全面覆盖
                    整合国家电网、CAMS、特来电、星星充电等公共充电运营商资源。 CAMS超级充电站,独享免费预约、车位预留等VIP专属服务。2021年底将实现7大核心城市5公里超充站覆盖半径。p>
                <p>•应急充电,后顾无忧
                    通过一汽-大众超级APP“一键加电”服务,第三方将 通过移动充电车或上门取送车提供紧急充电服务。p>
            div>
            <div id="img4">
                <img src="photos\1.gif">
            div>
        div>
        <div class="clear">div>
        <div id="box1">
            <div id="produce">
                <h3>84.8kWh大容量电池h3>
                <p>•配合高效BMS能量管理系统,为您带来NEDC 550km真续航里程。p>
                <p>•高速快充模式,电量从30%充至80%大约需要30分钟。p>
            div>
            <div id="img">
                <img src="photos\1.png">
            div>
        div>
        <div class="clear">div>
        <div class="footer">
            一汽-大众汽车 © 2021.3.3
        div>
    div>

CSS演示

首页CSS
.box1{
    width: 800px;
    height: 565px;
    margin: auto;
}
#img{
    width: 800px;
    height: 310px;
}
#img img{
    width: 800px;
}
#navigation{
    width: 800px;
    height: 30px;
    background-color: black;
    margin:0;
}
#navigation li{
    float: left;
    list-style: none;
    margin-left: 65px;
}
#navigation li a{
    color: cornsilk;
    text-decoration: none;
    line-height: 30px;
} 
#navigation li a:hover{
    color: crimson;
}
#box1 .one{
    width: 250px;
    height: 217px;
    float: left;
}
#login{
    text-align: center;
    margin: 0px;
    font-size: 20px;
    padding: 10px;
    box-shadow: 5px 5px 5px #888888;
    border-radius: 10px;
}
#login input{
    width: 170px;
    height: 25px;
}
h2{
    margin: auto;
    font-family: 方正舒体;
    width: 230px;
    height: 32px;
    background-color: dimgrey;
}
.button{
    width: 200px;
    height: 40px;
    margin: auto;
}
.button button{
       width: 200px;
       height: 40px;
       font-size: 25px;
       border: none;
       color: turquoise;
       background-color: rgb(62, 67, 75);
}
.two{
    width: 540px;
    height: 217px;
    margin-left: 10px;
    float: left;
}
.two .cont{
    font-size: 20px;
    color: rgb(62, 67, 75);
    padding: 0px 10px;
}
.two .cont1{
    text-indent: 10px;
    line-height: 30px;
    padding: 0px 10px;
}
.clear{
    clear: both;
}
.footer{
    width: 800px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: rgb(44, 39, 39);
    margin:auto;
    color: ivory;
}
热门品牌CSS
#box1,#box2{
    width: 800px;
}
#produce{
    width: 300px;
    float: left;
}
#img img{
    width: 450px;
    float: right;
}
.clear{
    clear: both;
}
#produce1{
    width: 310px;
    float: right;
}
#img1 img{
    width: 450px;
    float: left;
}
#img3 img{
    width: 450px;
    float: right;
    margin-top: 5px;
}
#img4 img{
    width: 450px;
    float: left;
    margin-top: 5px;
}

静态网页作品之一汽大众_第6张图片
静态网页作品之一汽大众_第7张图片

ps:该作品内容截取于各网站,由于代码跟页面较多,无法一一展示,请见谅。

你可能感兴趣的:(css,html,html5,css3,网页设计)