html5网页设计分享之新能源汽车网页设计

最新推荐文章于 2024-06-15 15:41:01 发布

猿猿网页设计(yywyss365)

最新推荐文章于 2024-06-15 15:41:01 发布

阅读量847

点赞数

分类专栏：汽车网页设计文章标签：汽车 html5 html css 前端

本文链接：https://blog.csdn.net/u011955860/article/details/130800010

版权

汽车网页设计专栏收录该内容

1 篇文章 0 订阅

订阅专栏

网页运行效果图：

html首页代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新能源汽车</title>
<link href="style/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contain">
<div id="header">
<div class="logo">
<h1><a href="index.html" class="en"><img src="images/logo.png"></a></h1>
</div>
</div>
<div class="clear"> </div>
<div class="i_nav mauto clearfix" id="com_mainmenu" editok="online">
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li class="navline"> <a href="index.html" class="navactive">首页</a> </li>
<li class="navline"> <a href="xinche.html" class="nava">新车</a> </li>
<li class="navline"> <a href="kuaixun.html" class="nava">快讯</a> </li>
<li class="navline"> <a href="shipin.html" class="nava">视频</a> </li>
<li class="navline"> <a href="lianxi.html" class="nava">联系我们</a> </li>
</ul>
</div>
</div>
<div class="banner">





<a href="#" target="_blank"><img src="images/9.jpg"></a> </div>
<div class="i_content">
<div class="i_border">
<h2>新能源汽车</h2>
<img src="images/about.jpeg" border="0" usemap="#Map" style="float: left;width: 400px;margin: 5px 30px; ">
<p> 新能源汽车是指采用非常规的车用燃料作为动力来源（或使用常规的车用燃料、采用新型车载动力装置），综合车辆的动力控制和驱动方面的先进技术，形成的技术原理先进、具有新技术、新结构的汽车。 [1] 新能源汽车包括纯电动汽车、增程式电动汽车、混合动力汽车、燃料电池电动汽车、氢发动机汽车等。 </p>
<p> 2020年11月，国务院办公厅印发《新能源汽车产业发展规划（2021—2035年）》，要求深入实施发展新能源汽车国家战略，推动中国新能源汽车产业高质量可持续发展，加快建设汽车强国。 </p>
<p> 2021年，全年新能源汽车产量367.7万辆，比上年增长152.5% [25] ，结束了连续三年的负增长；中国汽车工业协会最新统计显示，2022年中国新能源汽车产销分别完成705.8万辆和688.7万辆，同比分别增长96.9%和93.4%，连续8年保持全球第一。 </p>
<p> 2023年2月28日，国家统计局发布《中华人民共和国2022年国民经济和社会发展统计公报》显示：2022年全年新能源汽车产量700.3万辆，比上年增长90.5%。 </p>
</div>
<div class="cleaner"> </div>
<div class="tuji">
<h2>  新能源汽车</h2>
<ul>
<li><img src="images/xinyi1.jpeg">
<h2>特斯拉 - Model Y </h2>
</li>
<li><img src="images/xinyi2.jpeg">
<h2> 比亚迪 - 汉 DM-i </h2>
</li>
<li><img src="images/xinyi3.jpeg">
<h2>五菱汽车 - 宏光MINIEV </h2>
</li>
</ul>
</div>
</div>
<div class="cleaner"> </div>
<div class="i_footer">新能源汽车 </div>
</div>
</body>
</html>

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; }