学生静态网页作品——大众汽车
作品介绍
该作品使用vscode制作，采用div+css基本模式编辑，运用img、video、 a、:hover等相关代码实现，以外联的形式引入CSS，对网页的样式进行设置，利用简单的代码，使整体网页代码更加容易了解，符合学生期间的制作水平。以800px为主，使页面显示较为清晰，排版简单，通俗，在品牌车型页面中，当光标停留在某个图片时，该图片将放大2倍，使图片更加清晰。
作品效果
代码演示
首页代码
<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;
}
ps：该作品内容截取于各网站，由于代码跟页面较多，无法一一展示，请见谅。