HTML+CSS仿BMW官网
作者：互联网
看着苹果官网使劲敲代码。
我的期末作业。
先看看两张参考图片。。。
再来一个参考视频。。。。。
<iframe allowfullscreen="true" data-mediaembed="bilibili" id="0laVzaQE-1608208422887" src="https://player.bilibili.com/player.html?aid=713197292"></iframe>乐爷宝马 - 360极速浏览器 12.0 2020-12-17 20-14-05
再来看看我敲的东东。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>乐爷宝马</title>
<link rel="icon" href="img/tb.png">
<link rel="stylesheet" type="text/css" href="css/bass.css"/>
<link rel="stylesheet" type="text/css" href="css/head.css"/>
<link rel="stylesheet" type="text/css" href="css/footer.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div class="tonbu" id="dw">
<div class="beijin" title="乐爷的老爷车" >
<img src="img/beijin.jpg" class="bg" width="1348" height="603px" >
</div>
<div class="nav">
<ul>
<li class="line"><a href="#">全部车型</a></li>
<li class="line"><a href="#">购车支持</a></li>
<li class="line"><a href="#">BMW电动未来</a></li>
<li class="line"><a href="#">BMW服务</a></li>
<li class="line"><a href="#">BMW天地</a></li>
<div class="r_ine">
<li class="rine"><a href="#" class="s"><img src="img/sous.png"></a></li>
<li crass="rine"><a href="#" class="r"><img src="img/renw.png"></a></li>
<li crass="rine"><a href="#" class="w"><img src="img/weiz.png"></a></li>
</div>
</ul>
</div>
<div class="logo"><a href="#"><img src="img/logo.png"><a></div>
<div class="the">
<h2>THE iX</h2>
<h3>乐爷的老爷车BMW iX</h3>
<a href="#"><span>了解详情</span></a>
</div>
<div class="xx"><a href="#dw"><img src="img/xx.png"></a></div>
</div>
<div class="box">
<div class="dian">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="xiati">
<div class="tou">
<ul>
<li><a href="#">按车系查看</a></li>
<li><a href="#">按类别查看</a></li>
</ul>
</div>
<div class="shen">
<ul>
<li><a href="#">全部车型</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">X</a></li>
<li><a href="#">M</a></li>
<li><a href="#">Z</a></li>
<li><a href="#">BMW i</a></li>
<li><a href="#">插电式</a></li>
</ul>
</div>
<div class="xia">
<ul>
<li>
<a href="#">
<img src="img/1.png" >
<h2>BMWi系运动轿车</h2>
<h3>车型售价¥999,999</h3>
<br/>
<br/>
<p>>预约试驾</p>
<p>>了解详情</p>
</a>
</li>
<li>
<a href="#">
<img src="img/2.png" >
<h2>BMWi系运动轿车</h2>
<h3>车型售价¥999,999</h3>
<br/>
<br/>
<p>>预约试驾</p>
<p>>了解详情</p>
</a>
</li>
<li>
<a href="#">
<img src="img/3.png" >
<h2>BMWi系运动轿车</h2>
<h3>车型售价¥999,999</h3>
<br/>
<br/>
<p>>预约试驾</p>
<p>>了解详情</p>
</a>
</li>
<li>
<a href="#">
<img src="img/4.png" >
<h2>BMWi系运动轿车</h2>
<h3>车型售价¥999,999</h3>
<br/>
<br/>
<p>>预约试驾</p>
<p>>了解详情</p>
</a>
</li>
</ul>
</div>
</div>
<div class="x_iati" .clearfix>
<div class="s_ti">
<h1>活动悦享与金融礼遇</h1>
</div>
<div class="z_ti">
<ul>
<li><a href="#">创新BMW i8s</a></li>
<li><a href="#">创新BMW i8s</a></li>
<li><a href="#">创新BMW i8s</a></li>
</ul>
</div>
<div class="x_ti">
<ul>
<li>
<img src="img/right.jpg">
</li>
<li>
即日起至2020年12月31日，为您带来全新BMW 3系融资租赁方案：悦享48期0首付；
<br>
或可享金融贷款方案：“日付”45元轻松购。
<br>
<br>
<br>
*以上融资租赁方案由先锋国际融资租赁有限公司（宝马集团企业）提供，有效期为即
<br>
即日起至2020年12月31日。
<br>
*以上金融政策信息即日起至2020年12月31日有效。购车贷款的还款须以月度为单位，
<br>
每月还款，以上“日付”描述仅为展示月度还款金额若平摊至每日所需负担金额之目的，
<br>
该等金额均为按照建议零售价并依据固定金融产品选择参数进行计算所得，仅作示例
<br>
之用，实际还款金额取决于与BMW授权经销商达成的实际零售价以及客户选择的金融
<br>
产品参数，与以上示例金额可能不同。
<br>
*具体方案内容请详询BMW授权经销商。
<br>
<br>
<a href="#">>了解详情</a>
</li>
</ul>
</div>
</div>
<div class="xi_ati">
<ul>
<li>
<img src="img/r_ight.png">
<h1>BMW客户服务中心</h1>
<p>立即扫码关注</p>
</li>
<li>
<img src="img/l.png">
<h1>BMW官方商城小程序</h1>
<p>立即扫码关注</p>
</li>
</ul>
</div>
<div class="footer">
<div class="kb"></div>
<div class="zanzhu">
<ul>
<h1>联系我们</h1>
<li><a href="#">加入我们吧</a></li>
<li><a href="#">加入我们吧</a></li>
<li><a href="#">加入我们吧</a></li>
<li><a href="#">加入我们吧</a></li>
<li><a href="#">加入我们吧</a></li>
<li><a href="#">加入我们吧</a></li>
</ul>
<ul>
<h1>快速链接</h1>
<li><a href="#">加入我们吧</a></li>
<li><a href="#">加入我们吧</a></li>
<li><a href="#">加入我们吧</a></li>
<li><a href="#">加入我们吧</a></li>
<li><a href="#">加入我们吧</a></li>
<li><a href="#">加入我们吧</a></li>
</ul>
<ul>
<h1>BMW天地</h1>
<li><a href="#">加入我们吧</a></li>
<li><a href="#">加入我们吧</a></li>
<li><a href="#">加入我们吧</a></li>
</ul>
<ul>
<h1>其它宝马官网</h1>
<li><a href="#">加入我们吧</a></li>
<li><a href="#">加入我们吧</a></li>
<li><a href="#">加入我们吧</a></li>
</ul>
<ul>
<h1>社交新天地</h1>
<li><a href="#">加入我们吧</a></li>
<li><a href="#">加入我们吧</a></li>
<li><a href="#">加入我们吧</a></li>
</ul>
</div>
</div>
<div class="dibu">
<div class="r_ight">
<i>©BMW 中国 2021</i>
</div>
<div class="l_eft">
<ul>
<li><a href="#">联系我们</a></li>
<li><a href="#">法律声明</a></li>
<li><a href="#">粤ICP010292019号</a></li>
<li><a href="#">粤公网安备22111231号</a></li>
</ul>
</div>
</div>
</body>
</html>
bass.css
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd{
margin:0;
padding:0;
list-style:none;
font-size:12px;
color:#444444;
font-weight:700;
font-family: Arial,Helvetica,"Noto Sans CJK SC","Noto Sans",sans-serif;
}
body {
background-color:#F6F6F6;
}
a {
color:#444444;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:underline;
}
i,s,em {
font-style:normal;
text-decoration:none;
}
input,img {
border:0 none;
outline-style:none;
margin:0;
padding:0;
vertical-align:middle;
}
/*清除浮动*/
.clearfix:after {
content:"";
height:0;
line-height:0;
display:block;
clear:both;
visibility:hidden;
}
.clearfix {
zoom:1;
}
head.css
div .bg {
position:relative;
top:0;
left:0;
}
.nav {
height:1px;
line-height:97px ;
width:100%;
}
.nav ul {
width:1085px;
position: absolute;
top:0;
left:85px;
border-bottom: 1px solid #fff;
}
.nav li {
float:left;
margin:0 12px;
font-size:15px;
}
.nav li a {
color:#fff;
width:100%;
height:93px;
display:block;
text-decoration: none;
}
.nav li a:hover {
border-bottom: 4px solid #1C69D4;
}
.nav .r_ine {
width:202px;
height:97px;
float:left;
margin:0 200px;
}
.nav .line {
}
.nav .rine {
}
.logo img {
position: absolute;
top:20px;
right:185px;
}
.the h2 {
font-size:50px;
color:#fff;
}
.the h3 {
font-size:25px;
color:#fff;
}
.the span {
width:285px;
height:50px;
display:block;
background-color:#1C69D4;
text-align:center;
line-height: 50px;
font-size: 1em;
}
.the a {
width:285px;
height:50px;
text-decoration: none;
color:#fff;
}
.the span:hover{
background-color:#0066B1;
}
.the {
position: absolute;
top:140px;
left:66px;
}
.xx img {
background-color:#1C69D5;
cursor: pointer;
border-radius: 6px;
}
.xx {
position: fixed;
top:200px;
right:0;
}
.xiati {
height: 550px;
}
index.css
.box {
width:100%;
height:66px;
background-color:#fff;
}
.dian {
width: 250px;
height:20px;
margin: 0 auto;
border-radius:10px
}
.dian li {
float: left;
width:12px;
height:12px;
background-color:#8E8E8E;
border-radius: 6px;
margin-top:16px;
margin-left:24px;
}
.dian li:nth-child(2){
background-color:#1C69D4;
width:14px;
height:14px;
}
.dian li:hover {
width:15px;
height:15px;
background-color:#1C69D4;
}
.tou {
width:1190px;
height:60px;
border-bottom: 1px solid #E6E6E6;
margin: 0 auto;
}
.tou ul {
}
.tou li {
float:left;
display: block;
height:60px;
width:104px;
line-height: 60px;
text-align: center;
font-size: 15px;
}
.tou a {
text-decoration: none;
color:#666;
display: block;
height:56px;
width:104px;
}
.tou a:hover{
color:#262626;
border-bottom: 4px solid #1C69D4;
}
.shen {
width:1190px;
height:54px;
border-bottom: 1px solid #E6E6E6;
margin: 0 auto;
}
.shen li {
float: left;
display: block;
height:54px;
width:auto;
line-height: 54px;
text-align: center;
font-size: 15px;
}
.shen ul {
margin-left: 33px;
}
.shen a {
text-decoration: none;
color:#666;
display: block;
height:50px;
width:70px;
}
.shen a:hover{
color:#262626;
border-bottom: 4px solid #1C69D4;
}
.xia {
width:100%;
}
.xia img {
width:100%;
}
.xia li {
float:left;
display: block;
width:25%;
text-align: center;
}
.xia h2 {
font-size: 23px;
}
.xia h3 {
font-size:16px;
}
.xia p {
font-size: 16px;
}
.xia a {
text-decoration:none;
}
.xia p:hover {
font-size: 18px;
color:#1C69D4;
}
.x_iati {
height: 400px;
}
.x_iati h1 {
font-size: 24px;
color:#262626;
margin-left: 82px;
cursor: pointer;
}
.z_ti {
width:1000px;
margin-left: 83px;
height:65px;
border-bottom: 1px solid #E6E6E6;
}
.z_ti li {
float: left;
display: block;
height:66px;
width:214px;
text-align: center;
line-height: 66px;
}
.z_ti a {
font-size: 16px;
text-decoration:none;
color:#898989;
display: block;
height:61px;
width:214px;
}
.z_ti a:hover {
color:#262626;
border-bottom: 4px solid #1C69D4;
}
.x_ti {
width:100%;
height:500px;
}
.x_ti li {
float: left;
display: block;
height:326px;
width: :1200px;
padding:0 10px;
}
.x_ti ul {
width: 1200px;
margin: 0 auto;
}
.x_ti li {
font-size: 15px;
cursor: pointer;
}
.x_ti a {
text-decoration: none;
}
.x_ti a:hover {
color:#0A3AB6;
}
.x_iati {
height:550px;
}
.xi_ati {
width:100%;
height:550px;
margin-top:20px;
}
.xi_ati ul {
margin: 0 auto;
width: 1200px
}
.xi_ati li {
display: block;
float: left;
height: 552px
width:580px;
margin: 0 5px;
}
.xi_ati h1 {
font-size: 26px;
padding:22px 33px;
cursor: pointer;
}
.xi_ati p {
font-size: 16px;
cursor: pointer;
}
footer.css
.footer {
background-color:#E6E6E6;
height:423px;
width:100%;
}
.footer .zanzhu ul {
float: left;
margin: 7px 77px;
}
.footer .kb {
height:105px;
}
.zanzhu {
width:1201px;
border-top: 2px solid #BBBBBB;
margin: 0 auto;
}
.zanzhu h1 {
padding: 30px 0;
font-size: 17px;
font-family: bmwTypeWebLightAll,Arial,Helvetica,sans-serif;
font-weight: 200
color:#000;
cursor: pointer;
}
.zanzhu li {
padding: 3px 0;
}
.zanzhu a {
font-size: 13px;
}
.zanzhu a:hover {
text-decoration: none;
color:#000;
}
.dibu {
width:100%;
height:100px;
position: relative;
}
.r_ight {
position: absolute;
top:18px;
left: 68px;
font-size: 24px;
}
.r_ight i {
color:#000;
}
.l_eft {
position: absolute;
top: 18px;
right:33px;
}
.l_eft li {
float: left;
display: block;
padding: 0 15px;
font-size: 16px;
}
.l_eft a {
color:#1366D7;
}
.l_eft a:hover {
color:#000;
text-decoration: none;
}
这学期的期末作业完成了~
总结
1.开头用的列表写的导航出了问题，懒得改就随随便便搞上去了。
2.目前还只能搞静态的。
3.多磕javascript，尽快搞个动态的来。
好好学习，天天向上！
标签：font,color,height,width,HTML,BMW,left,官网,size 来源： https://blog.csdn.net/weixin_50926516/article/details/111329343