HTML+CSS仿BMW官网

看着苹果官网使劲敲代码。

我的期末作业。

先看看两张参考图片。。。

再来一个参考视频。。。。。

乐爷宝马 - 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>车型售价&yen;999,999</h3><br/><br/><p>&gt;预约试驾</p><p>&gt;了解详情</p></a></li><li><a href="#"><img src="img/2.png" ><h2>BMWi系运动轿车</h2><h3>车型售价&yen;999,999</h3><br/><br/><p>&gt;预约试驾</p><p>&gt;了解详情</p></a></li><li><a href="#"><img src="img/3.png" ><h2>BMWi系运动轿车</h2><h3>车型售价&yen;999,999</h3><br/><br/><p>&gt;预约试驾</p><p>&gt;了解详情</p></a></li><li><a href="#"><img src="img/4.png" ><h2>BMWi系运动轿车</h2><h3>车型售价&yen;999,999</h3><br/><br/><p>&gt;预约试驾</p><p>&gt;了解详情</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="#">&gt;了解详情</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>&copy;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: 552pxwidth: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: 200color:#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，尽快搞个动态的来。

好好学习，天天向上！

HTML+CSS仿BMW官网相关推荐

HTML5期末大作业：网站——仿游戏官网(龙之谷)HTML+CSS+JavaScript
HTML5期末大作业:网站--仿游戏官网(龙之谷)HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网 ...
前端学习之仿小米官网HTML+CSS
一个简单的仿小米官网 index.css /* 主页index.html样式表 */ .topbar-wrapper{width: 100%;background-color:#333;height: ...
html制作小米官网代码,仿小米官网(html+js+css)
[实例简介] 学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码 [实例截图] [核心代码] 小米官网(高仿) └── xiaomi ├── css_1 │ ├── financ ...
仿Apple官网首页 HTML+CSS+JS
WEB前端开发实践仿Apple官网首页 HTML+CSS+JS 一.前言静态页面,没有后端数据,只是单一的HTML 自写的APPLE.小米源码,严禁盗用二.图片资源这里用了一些iconfont ...
HTML期末网页作业-仿QQ官网QQ注册网页
HTML期末作业-仿QQ官网QQ注册网页(HTML+CSS+JavaScript) 学生作业仿QQ官网部分代码截图 <!DOCTYPE html> <html lang=" ...
高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下: http://www.demodashi.com/demo/12302.html 插件介绍这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公 ...
仿猫眼官网静态页面（纯HTML）
仿猫眼官网静态页面(纯HTML) 准备工作正文 HTML CSS 小结准备工作用到的图片如下,具体可以去官网下面截取(这里就不上传图片了,供参考) 界面效果正文 HTML <!DOCTY ...
Web前端仿小米官网实战总结
Web前端仿小米官网实战总结自学前端至今实在是感慨万千,一个人学习太累,自律能力不太够,学习速度跟不上技术更新速度,所以学习技术是一定不能偷懒的,更不能沉迷游戏,要坚持学习,最好有人带,实在不行就报 ...
仿Apple官网导航条
仿Apple官网导航条效果在线预览使用flex布局和媒体查询实现了响应式的Apple的中文官网导航条,仿做的动画,字体不一致不会CSS动画,未有学习 flex掌握感觉还可以媒体查询也懂得了一小部 ...

HTML+CSS仿BMW官网

看着苹果官网使劲敲代码。

总结

HTML+CSS仿BMW官网相关推荐

最新文章

热门文章