html5网页设计分享之新能源汽车网页设计
网页运行效果图：
html首页代码：
新能源汽车
新能源汽车是指采用非常规的车用燃料作为动力来源（或使用常规的车用燃料、采用新型车载动力装置），综合车辆的动力控制和驱动方面的先进技术，形成的技术原理先进、具有新技术、新结构的汽车。 [1] 新能源汽车包括纯电动汽车、增程式电动汽车、混合动力汽车、燃料电池电动汽车、氢发动机汽车等。
2020年11月，国务院办公厅印发《新能源汽车产业发展规划（2021—2035年）》，要求深入实施发展新能源汽车国家战略，推动中国新能源汽车产业高质量可持续发展，加快建设汽车强国。
2021年，全年新能源汽车产量367.7万辆，比上年增长152.5% [25] ，结束了连续三年的负增长；中国汽车工业协会最新统计显示，2022年中国新能源汽车产销分别完成705.8万辆和688.7万辆，同比分别增长96.9%和93.4%，连续8年保持全球第一。
2023年2月28日，国家统计局发布《中华人民共和国2022年国民经济和社会发展统计公报》显示：2022年全年新能源汽车产量700.3万辆，比上年增长90.5%。
新能源汽车
特斯拉 - Model Y
比亚迪 - 汉 DM-i
五菱汽车 - 宏光MINIEV
css代码：
#contain{
position: relative;
width:1002px; background-color:#fff;
margin: 0px auto;
padding: 0px auto; -moz-border-radius:5px;border-radius:5px;
}
#header{
width:1002px;
height:90px;
margin:0 auto;
}
.logo{
float:left;
width:500px;
padding-left:10px;
text-shadow: 2px 1px 1px #fff;
}
.logo .en{
font-family: Arial, Helvetica, sans-serif;
}
.logo a{
font-size:30px;
color:#119592;
font-family:"黑体";
font-weight:bold;
float:left;
text-decoration:none;
}
.logo img { width:200px}
/*menu*/
.i_nav {
height: 40px;
background: url("../Images/nav_bg.jpg") repeat-x scroll left top transparent;
}
.mauto {
width: 1002px;
margin: 0px auto;
}
.ddsmoothmenu {
font-size: 14px;
margin: 0px auto;
}
.ddsmoothmenu ul {
margin:0 auto;
padding: 0px;
list-style-type: none;
z-index: 2000;
width: 785px;
}
.i_nav li.navline {
width: 110px;
height: 40px;
font-size: 14px;
color: rgb(255, 255, 255);
display: block;
line-height: 40px;
text-align: center;
padding-right: 2px;
background: url("../images/nav_line.jpg") no-repeat scroll right top transparent;
}
.ddsmoothmenu ul li {
position: relative;
display: inline;
float: left;
text-align: center;
}
.ddsmoothmenu a {
text-align: center;
color: rgb(255, 255, 255);
}
.navactive, .navactive:hover, .nava:hover, .nava.selected {
display: block;
line-height: 40px;
width: 110px;
color: rgb(255, 255, 255);
text-decoration: none;
font-size: 14px;
background: url("../images/nav_abg.jpg") repeat-x scroll left top transparent;
}
.nava {
width: 110px;
height: 40px;
font-size: 14px;
color: rgb(255, 255, 255);
display: block;
line-height: 40px;
text-align: center;
}
/*banner*/
.banner{
width:982px;
margin:0 auto;
height:400px;
background:#fff;
padding:10px 10px 10px 10px;
}
.banner img{
width:982px;
height:400px;
}
.i_banner{
position:relative;
float:left;
width:770px;
}
.i_banner1{
position:relative;
float:left;
width:982px;
}
#banner_list img {
border:0px;
height:200px;
width:770px;
border:1px solid rgb(215, 215, 215);
}
#banner_list1 img {
border:0px;
height:200px;
width:100%;
border:1px solid rgb(215, 215, 215);
}
#banner_bg {
position:absolute;
top:170px;
height:30px;
filter: Alpha(Opacity=30);
opacity:0.3;
z-index:1000;
cursor:pointer;
width:770px;
}
#banner_bg1 {
position:absolute;
top:170px;
height:30px;
filter: Alpha(Opacity=30);
opacity:0.3;
z-index:1000;
cursor:pointer;
width:982px;
}
#banner_info{
position:absolute;
bottom:4px;
left:5px;
height:22px;
color:#fff;
z-index:1001;
cursor:pointer
}
#banner_text {
position:absolute;
width:120px;
z-index:1002;
right:3px;
bottom:3px;
}
.banner ul {
position:absolute;
list-style-type:none;
filter: Alpha(Opacity=80);
opacity:0.8;
z-index:1002;
margin:0;
padding:0;
top:176px;
right:5px;
height:20px
}
.banner ul li {
padding:0 8px;
line-height:18px;
float:left;
display:block;
color:#FFF;
border:#e5eaff 1px solid;
background-color:#666;
cursor:pointer;
margin:0;
font-size:12px;
}
#banner_list a{
position:absolute;
}
.i_login{
position:relative;
float:right;
width:200px;
}
.i_news01 {
float: right;
width: 200px;
height: 200px;
border: 1px solid rgb(215, 215, 215);
overflow: hidden;
}
.i_news01 span{font-size: 24px;color:#000000}
.title01 {
height: 35px;
border-bottom: 1px solid rgb(236, 236, 236);
line-height: 35px;
background: url("../images/title_bg01.jpg") no-repeat scroll left top transparent;
}
.title01 h3 {
float: left;
display: inline;
color: rgb(255, 255, 255);
font-size: 14px;
margin-left: 18px;
padding: 0px 106px 0px 10px;
background: url("../images/title_bg01_l.jpg") no-repeat scroll right top rgb(18, 146, 139);
}
.title01 span {
display: block;
float: right;
padding: 12px 10px 0px 0px;
}
.i_news01_l {
width: 250px;
}
/*login*/
.mail {
position: relative;
text-align: center;
width: 200px;
}
#inputs,#actions{
border:none;
}
#inputs input{
border:1px solid #ccc;
margin-top:10px;
width:150px;
height:25px;
}
#submit{
border:1px solid #054e49;
width:100px;
height:25px;
cursor:pointer;
background: #13928b;
color:#fff;
}
.i_content{
width: 1002px;
height: auto;
background: #fff;
margin: 10px auto;
}
.i_border{
width: 982px;
height:auto;
margin: 0 auto;
text-align: left;
}
.i_border p{
padding: 0 10px;
line-height:25px;
font-family:"宋体";
font-size:12px;
}
.i_border h2{
padding-left:15px;
font-size: 24px;
}
.kuaixun{width: 950px;
height: auto;
background: #fff;
margin: 10px auto;}
.riqi{ font-size:12px;color: red}
.biaoti{ font-size:20px; font-weight: bold}
.neirong{font-size:16px; background: #CCC9C9;
}
.tuji li{width:300px;
height: 300px;
float: left;
margin: 10px;
}
.tuji li img {width:300px;
height: 240px;
}
.tuji1 li{width:400px;
height: 200px;
float: left;
margin: 10px;
}
.bofang{ position:absolute;margin-top: -40px;margin-left: 20px;
background:url("../images/play.png");
background-size: 27px 27px;
width: 27px; height: 27px;
}
.bofang:hover{ position:absolute;margin-top: -40px;margin-left: 20px;
background:url("../images/playhover.png");
background-size: 27px 27px;
width: 27px; height: 27px;
}
.i_footer{
width:1002px;
height:40px;
background:#fff;
text-align:center;
margin: 0 auto;
margin-top: 10px;
padding-top:20px;
background: url("../images/footer_bg.jpg") repeat-x scroll left top rgb(240, 240, 240);
}
.clear {
clear: both;
font-size: 1px;
width: 1px;
height: 0px;
visibility: hidden;
overflow: hidden;
}
.jd-fankuibox { width: 100%; margin-top: 60px;height: auto; }
.jd-fankuibox h3 { margin:60px auto; text-align: center; font-size: 2.5rem; }
.jd-fankuibox form {width: 70%; margin: 0 auto; display: flex;flex-wrap: wrap; }
.jd-fankuibox form dd { width: 100%; margin-top: 10px; display: flex; align-items: center; }
.jd-fankuibox form dd span { width: 180px; display: inline-block;}
.jd-fankuibox form dd input , .jd-fankuibox form dd textarea { width: 100%;
padding: 0 8px; height: 35px; margin-right: 10px;
outline: none;
background: #F9FAF9;
border: 1px solid #E0E1E0;
border-radius: 4px;
vertical-align: middle;}
.jd-fankuibox form dd textarea { height:222px; font-size: 1.8rem; padding: 10px; }