看著蘋果官網使勁敲代碼，
我的期末作業，
先看看兩張參考圖片，，，
再來一個參考視頻，，，，，
<iframe id="0laVzaQE-1608208422887" src="https://player.bilibili.com/player.html?aid=713197292" allowfullscreen="true" data-mediaembed="bilibili"></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，盡快搞個動態的來，
好好學習，天天向上！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/236605.html
標籤：其他
下一篇：前端代碼合集