摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>優(yōu)酷-這世界很酷!</title> <link rel="stylesheet" type="text/css" href="css/f
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>優(yōu)酷-這世界很酷!</title> <link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css"> <style type="text/css" media="screen"> *{ margin: 0px; padding: 0px; } a {color:#000;text-decoration: none;} li {list-style: none; float: left;} /*取消li列表樣式 并且向左浮動(dòng) 浮動(dòng)后自帶區(qū)塊屬性*/ li img:hover {box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);} /*偽類(lèi)鼠標(biāo)移到圖片的陰影效果 X y 模糊度 外延值 顏色*/ .hot_tv img:hover {box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.2);} small {color: #B5B5B5;} /*設(shè)置文字顏色*/ .hotMenu li a:hover {text-decoration: none;color:#2692FF;} /*設(shè)置鼠標(biāo)移上去的顏色,沒(méi)有下劃線*/ .hotMenu li a:hover:after {content: "";background:#2692FF;border-radius: 10px;display: block;width: 20px;height: 3px;margin: 0px auto; } /* 這種并列寫(xiě)法需要一個(gè):hover來(lái)激活, 單獨(dú)用E:after 時(shí)不需要激活 在……之后加上content內(nèi)容(content參數(shù)必須要的) 畫(huà)圓角 轉(zhuǎn)換成區(qū)塊 使他能用寬高參數(shù),然后居中顯示*/ .mr {margin-right:10px;} .mrt{margin-top: 10px;} .clear {clear:both;} /*清楚兩邊的浮動(dòng)*/ .l {float: left;} /* 向左浮動(dòng)*/ .contents { width: 1740px; margin: 10px auto 0px; /*上下 左右 / 上下左右 / 上 左右 下/*/ } .content {width: 100%;margin-top:10px;} .content_hot img {width: 235px;height: 360px;} .contenMenu h2 { height: 70px; line-height: 70px; } .hotMenu li {height: 20px;line-height: 20px;margin-left: 20px;margin-top:28px;} /* .hotMenu {background: red; display: block;width: 400px;height: 70px;}*/ .tv_show {} .hot_tv >a > img {width:583px;height: 334px; } .hot_tv_UL img{ width: 270px;height: 139px; } /* .more { width: 82px; height: 139px; background: red; line-height: 139px; text-align: center; }*/ /* 頭背部背景部分*/ .headers { background: #A1735C; width: 100%; position: relative; } /*導(dǎo)航部分*/ /* 定位 relative=相對(duì)定位 absolute=絕對(duì)定位 fixed=固定 不受瀏覽器滾動(dòng)影響。 一般來(lái)說(shuō) 子絕父相 absolute 以父級(jí)定位標(biāo)簽為參照點(diǎn), 若沒(méi)有找到就用瀏覽器做絕對(duì)定位 脫離文檔流;z-index 表示層級(jí),值越大越高; relative 相對(duì)于自身位置的定位 沒(méi)有脫離文檔流;*/ /*輪播圖和遮罩部分*/ .header_bg {background: url(images/herdimg.jpg) no-repeat;width: 1664px;height: 520px;margin: 0px auto;position: relative;} .bg {background: url(images/bg.png) no-repeat;/*background-size:100% 100%*/;position: absolute;top: 0px;left: 0px;width: 1664px;height: 520px;} .header_menu {position: relative;top:20px;left: 0px;width:100%;} /*logo部分*/ .log{float: left;} .logo img {border: none;width: 120;height: 24px;} /*中間搜索部分*/ .head_bt {margin-left:500px;position: relative;width: 400px; } .head_bt input {border:0px none;width: 400px;height: 30px;border-radius: 100px;background: rgba(234,234,234,0.5);outline:0 none;} .head_bt button {color:#FBDEB5;border: none;width:80px;height: 30px;border-top-right-radius: 30px;border-bottom-right-radius: 30px;background: #B30702;position: absolute;top: 0px;right: 0px;outline:0 none;} /*outline復(fù)合屬性。設(shè)置或檢索對(duì)象外的線條輪廓*/ /*右邊圖標(biāo)部分*/ .beader_bt_r{position: absolute;top: 0px;right: 0px;height: 55px;} .beader_bt_r ul li {width:60px;} .beader_bt_r ul li a {color: #E5E5E5;width: 60px;height: 80px;} .beader_bt_r ul li i:hover {color: #35B5FF;} .beader_bt_r ul li i {position: relative;} .beader_bt_r ul li i span { font-size: 20px;position: absolute;width: 60px;left:-5px; } i{color: #E5E5E5;} .head_bt_r_li { width: 260px;height: 350px;background:rgba(0,0,0,0.5);position: absolute;top: 100px;right:100px;border-radius: 30px; } .head_bt_r_li ul{background:pink;margin-top: 10px;} .head_bt_r_li ul li {width: 210px;border-bottom: 1px solid #ccc;border-bottom-width: ;margin-left: 20px; height: 40px;line-height:40px;margin-bottom: 5px;padding-left: 5px;text-align: center; } .head_bt_r_li ul li a {color: #aaa; padding-bottom: 15px;} .head_bt_r_li ul li a:hover {font-size:18px;} /*下拉框*/ .beader_bt_r_rss {position: relative;} .beader_bt_r_rss_sub { position: absolute;top: 50px;left: 0px;width: 210px;z-index: 2; background: #fff;display: none;} .beader_bt_r_rss_sub li {height: 30px;color: #000;margin-left: 10px;margin-top: 5px;} .beader_bt_r_1:hover .beader_bt_r_rss_sub {display: block;} /*鼠標(biāo)移上去顯示下拉框*/ </style> </head> <body> <div class="headers"> <div class="header_bg"> <div class="bg"></div> <div class="header_menu"><div class="logo l"><img src="images/logo.png" alt=""></div> <div class="head_bt"> <form action="demo_submit" method="get" accept-charset="utf-8"> <input type="text" name="" value=""> <button>搜索</button> </form> </div> <div class="beader_bt_r"> <ul> <li><a href="" class="beader_bt_r_1"><i class="fa fa-cart-plus fa-2x" ><br><span>VIP</span></i> <ul class="beader_bt_r_rss_sub"> <li>菜單1</li> <li>菜單2</li> <li>菜單3</li> <li>菜單4</li> <li>菜單5</li> <li>菜單6</li> </ul></a></li> <li><a href="" class=""><i class="fa fa-rss fa-2x"><br><span>訂閱</span></i> </a> </li> <li><a href=""><i class="fa fa-clock-o fa-2x"><br><span>記錄</span></i></a></li> <li><a href=""><i class="fa fa-arrow-up fa-2x"><br><span>上傳</span></i></a></li> <li><a href=""><i class="fa fa-tv fa-2x" "><br><span>客戶端</span></i></a></li> <li style="margin-left: 15px;><a href=""><i class="fa fa-user-circle-o fa-3x" ></i></a></li> </ul> </div> <div class="head_bt_r_li"> <ul> <li><a href="" >李全權(quán)在PHP中文網(wǎng)學(xué)習(xí)</a></li> <li><a href="" >李全權(quán)在PHP中文網(wǎng)學(xué)習(xí)</a></li> <li><a href="" >李全權(quán)在PHP中文網(wǎng)學(xué)習(xí)</a></li> <li><a href="" >李全權(quán)在PHP中文網(wǎng)學(xué)習(xí)</a></li> <li><a href="" >李全權(quán)在PHP中文網(wǎng)學(xué)習(xí)</a></li> <li><a href="" >李全權(quán)在PHP中文網(wǎng)學(xué)習(xí)</a></li> <li><a href="" >李全權(quán)在PHP中文網(wǎng)學(xué)習(xí)</a></li> </ul> </div> </div> </div> </div> <div class="contents"> <div class="content"> <div class="contenMenu"> <h2>正在熱播</h2> </div> <div class="content_hot"> <ul> <li class="mr libox"><a href=""><img src="images/a.jpg" alt="hot_tv"><br><span>瞰中國(guó):寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li> <li class="mr"><a href=""><img src="images/b.jpg" alt="hot_tv"><br><span>瞰中國(guó):寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li> <li class="mr"><a href=""><img src="images/c.jpg" alt="hot_tv"><br><span>瞰中國(guó):寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li> <li class="mr"><a href=""><img src="images/d.jpg" alt="hot_tv"><br><span>瞰中國(guó):寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li> <li class="mr"><a href=""><img src="images/e.jpg" alt="hot_tv"><br><span>瞰中國(guó):寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li> <li class="mr"><a href=""><img src="images/f.jpg" alt="hot_tv"><br><span>瞰中國(guó):寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li> <li class=""><a href=""><img src="images/g.jpg" alt="hot_tv"><br><span>白蛇:緣起</span></a><br><small>白蛇前世愛(ài)情凄美動(dòng)人</small></li> </ul> </div> </div> <div class="clear"></div> <div class="content"> <div class="contenMenu"> <h2 class="l mr">劇集 </h2> <ul class="hotMenu l"> <li><a href="">最新</a></li> <li><a href="">大陸劇</a></li> <li><a href="">日韓劇</a></li> <li><a href="">歐美劇</a></li> <li><a href="">港臺(tái)劇</a></li> </ul> </div> <div class="clear"> <div class="tv_show"> <div class="hot_tv l mr"> <a href=""><img src="images/tv.jpg" alt=""><br><span>瞰中國(guó):寧夏</span><br><small>低調(diào)的寧夏 美了四季</small></a> </div> <div class="hot_tv_UL"> <ul> <li class="mr"><a href=""><img src="images/tv1.jpg" alt=""><br><span>瞰中國(guó):寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li> <li class="mr"><a href=""><img src="images/tv2.jpg" alt=""><br><span>瞰中國(guó):寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li> <li class="mr"><a href=""><img src="images/tv3.jpg" alt=""><br><span>瞰中國(guó):寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li> <li class=""><a href=""><img src="images/tv4.jpg" alt=""><br><span>瞰中國(guó):寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li> <!-- <li class="mr more"><a href=""><b>更多>></b></li> --> </ul> </div> <div class="hot_tv_UL"> <ul class=""> <li class="mr mrt"><a href=""><img src="images/tv5.jpg" alt=""><br><span>瞰中國(guó):寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li> <li class="mr mrt"><a href=""><img src="images/tv1.jpg" alt=""><br><span>瞰中國(guó):寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li> <li class="mr mrt"><a href=""><img src="images/tv1.jpg" alt=""><br><span>瞰中國(guó):寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li> <li class=" mrt"><a href=""><img src="images/tv1.jpg" alt=""><br><span>瞰中國(guó):寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li> <!-- <li class="mr more"><a href=""><b>更多>></b></li> --> </ul> </div> </div> </div> <div class="clear"></div> </div> </body> </html>
批改老師:查無(wú)此人批改時(shí)間:2019-03-16 09:39:47
老師總結(jié):完成的不錯(cuò),就是看著有點(diǎn)暈。仔細(xì)看了下,這章你確實(shí)學(xué)到不少,繼續(xù)加油