上機1
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>花樣鏈接卡</title> <style> div{ border: solid red 2px; width: 300px; height: 300px; padding: 10px; } a { color: white; display: inline-block; height: 100px; width: 100px; background:pink ; text-align: center; line-height:100px; text-decoration: none; } a:hover{ background:deepskyblue ; } a:nth-of-type(2){ position: relative; left: 100px; } a:nth-of-type(3){ position: relative; top: 200px; right: 200px; } a:nth-of-type(4){ position: relative; left: 200px; top: 100px; } </style> </head> <body> <div> <a href="">鏈接1</a><a href="">鏈接2</a><a href="">鏈接3</a><a href="">鏈接4</a><a href="">鏈接5</a> </div> </body> </html>
上機2
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>帶按鈕的圖片橫幅廣告</title> <style> #adverImg{ width: 430px; height: 130px; position: relative; } #number{ position: absolute; right: 5px; bottom: 2px; } li{ float: left; margin-right: 5px; width: 20px; height: 20px; border: 1px #666 solid; text-align: center; line-height: 20px; font-size: 12px; list-style: none; background: #FFF; } </style> </head> <body> <div id="adverImg"> <img src="image/adver-01.jpg" alt="夏日商品促銷"/> <div id="number"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </body> </html>
上機3
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>獎多多安全購彩頁面</title> <style> body{ margin: 0 auto; width: 1012px; position: relative; } img:nth-of-type(2){ position: absolute; left: -250px; top: 200px; } img:nth-of-type(3){ position: absolute; right: -165px; top: 200px; } img:nth-of-type(4){ position: fixed; right: 0; top: 230px; } img:nth-of-type(5){ position: fixed; right: 0; bottom: 0; } </style> </head> <body> <img src="image/1.bmp"/> <img src="image/2.bmp"/> <img src="image/3.bmp"/> <img src="image/4.bmp"/> <img src="image/5.bmp"/> </body> </html>
上機4
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>當當圖書榜</title> <style> body { padding: 5px; margin: 0 auto; width: 960px; position: relative; } header img:nth-of-type(2){ position: absolute; top: 15px; right: 190px; } header > ul { padding: 5px 8px; position: absolute; top: 15px; right: 5px; border-top: solid 1px #b5ffe3; border-left: solid 1px #b5ffe3; border-right: solid 1px #b5ffe3; background: #e6fff1; font-size: 12px; } header > ul > li { float: left; list-style: none; } header > ul > li a{ color: #6c6c6c; text-decoration: none; } header > ul > li a:hover{ color: #f03c3d; } nav ul{ position: absolute; top: 45px; right: 5px; border: solid 1px #ff7133; width: 958px; height: 40px; padding: 0; background: #ff6c1d; } nav li{ float: left; list-style: none; line-height: 40px; width: 40px; padding-left: 15px; font-size: 15px; } nav a{ color: white; text-decoration: none; } nav a:hover{ text-decoration: underline; } section>img:nth-of-type(1){ position: absolute; top: 112px; } section div{ position: absolute; top: 250px; border: solid 2px #4bff9c; width: 956px; height: 370px; } section>img:nth-of-type(2){ position: absolute; top: 266px; left: -6px; } div img:nth-of-type(1) { position: absolute; top: 90px; } div img:nth-of-type(2) { position: absolute; top: 90px; left: 560px; } div img:nth-of-type(3) { position: absolute; top: 230px; left: 560px; } div img:nth-of-type(4) { position: absolute; top: 85px; left: 20px; } div img:nth-of-type(5) { position: absolute; top: 85px; left: 560px; } div img:nth-of-type(6) { position: absolute; top: 230px; left: 560px; } p{ font-family:Verdana,"宋體"; font-size: 12px; line-height: 26px; } #p1{ position: absolute; top: 90px; left: 260px; width: 280px; height: 250px; } #p2{ position: absolute; top: 80px; left: 660px; width: 280px; height: 250px; } section a{ color: #3e78ed; font-size: 15px; text-decoration: none; } section a:hover{ color: green; } .s1{ color: #cf150a; font-weight: bold; } .s2{ color: #979993; } footer{ position: absolute; top: 612px; width: 960px; height: 90px; text-align: center; } footer p{ color: #979993; vertical-align: middle; } footer img{ vertical-align: middle; } </style> </head> <body> <header> <img src="image/logo.jpg"/> <ul> <li><a href="">尾品匯</a> </li> <li><a href="">當當優品</a> </li> <li><a href="">數字館</a> </li> <li><a href="">都看閱器</a></li> </ul> <img src="image/icon_count.png"/> <nav> <ul> <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> <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> <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> </nav> </header> <section> <img src="image/banner.png"/> <div> <img src="image/book-01.jpg"/> <img src="image/book-02.jpg"/> <img src="image/book-03.jpg"/> <img src="image/bookNo1.gif"/> <img src="image/bookNo2.gif"/> <img src="image/bookNo3.gif"/> <p id="p1"> <a href="">偷影子的人</a><br/> 作 者：[法] 馬克·李維（Marc Levy）著,段韻靈 譯<br/> 出版社：湖南文藝出版社<br/> 當當價：<span class="s1">￥ 17.90</span><br/> 不知道姓氏的克蕾兒。這就是你在我生命里的角色，我童年時的小女孩，今日蛻變成了女人，一段青梅竹馬的回憶，一個時間之神沒有應允的願望。一個老是受班上同學欺負的瘦弱小男孩，因為擁有一種特殊能力而強大：他能“偷別人的影子”，因而能看見他 </p> <p id="p2"> <a href="">看見(央視知名記者、主持人柴靜：十年個人成長的告白，中國社會變遷的備忘</a><br/> 作 者：柴靜 著<br/> 出版社：廣西師范大學出版社<br/> <span class="s1">￥ 29.40</span> <span class="s2">7.4折</span><br/> <a href="">改變孩子先改變自己</a><br/> 作 者：賈容韜 賈毅 著<br/> 出版社：作家出版社<br/> <span class="s1">￥ 22.20</span> <span class="s2">7.4折</span> </p> </div> <img src="image/bg_bang.gif"/> </section> <footer> <p>Copyright (C) 當當網 2004-2017, All Rights Reserved<img src="image/validate.gif">京ICP證041189號出版物經營許可證 新出發京批字第直0673號</p> </footer> </body> </html>
課后3
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>美食今日推薦</title> <style> *{ margin: 0; } div{ margin: 50px auto; height: 373px; width: 280px; border: 1px solid #04e7ff; border-radius: 10px; position: relative; } h4{ color: red; margin-top: 22px; margin-left: 32px; } h4 span { color: black } div>a{ position: absolute; right: 10px; top: 22px; } #first{ float: left; padding-left: 20px; margin-top: 10px; } #second{ float: right; padding-left: 0; margin-top: 10px; margin-right: 30px; } h5 a{ color: #b80613; line-height: 28px; font-size: 8px; } p{ line-height: 17px; font-size:10px; color: #525050; } span{ color: #989595; } li{ list-style: none; height: 77px; text-align: left; } div>img{ position: absolute; left: 80px; top: 43px; } </style> </head> <body> <div> <h4>SHOP<span> 今日推薦</span></h4> <a href=""><img src="image/more.gif"></a> <ul id="first"> <li><img src="image/img9.gif"/></li> <li><img src="image/img7.gif"/></li> <li><img src="image/img8.gif"/></li> <li><img src="image/img7.gif"/></li> </ul> <ul id="second"> <li><h5><a href="">漢來國際美食百貨</a></h5><p><span>口味：</span>創意中餐<br/><span>區域：</span>朝陽/CBD</p></li> <li><h5><a href="">漢來國際美食百貨</a></h5><p><span>口味：</span>創意中餐<br/><span>區域：</span>朝陽/CBD</p></li> <li><h5><a href="">漢來國際美食百貨</a></h5><p><span>口味：</span>創意中餐<br/><span>區域：</span>朝陽/CBD</p></li> <li><h5><a href="">漢來國際美食百貨</a></h5><p><span>口味：</span>創意中餐<br/><span>區域：</span>朝陽/CBD</p></li> </ul> <img src="image/shen.png"/> </div> </body> </html>
課后4
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>京東輪播圖</title> <style> #background{ position: relative; height: 454px; width: 1200px; text-align: center; margin-top: 40px; } #number{ position: absolute; left: 545px; bottom: 10px; } a{ float: left; margin-right: 5px; width: 16px; height: 16px; border-radius: 50%; border: 1px #666 solid; line-height: 14px; font-size: 12px; list-style: none; background: #666; text-decoration: none; color: white; } a:hover{ background: orange; border: 1px orange solid; } </style> </head> <body> <div id="background"><img src="image/focus.jpg"/> <div id="number"> <a href="">1</a> <a href="">2</a> <a href="">3</a> <a href="">4</a> <a href="">5</a> </div> </div> </body> </html>
課后5
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>新東方頂部導航菜單</title> <style> *{ margin: 0; } #first{ background: url("image/logo.gif") no-repeat 10px,url("image/open_icon.gif") no-repeat 558px,url("image/top_bg.gif"); border-bottom: dotted 1px #c3c3b8; height: 26px; width: 600px; position: relative; } p{ position: absolute; left: 140px; float: left; list-style: none; height: 26px; text-align: center; font-size: 12px; line-height: 26px; color: #818181; } span{ color: #d1d1d1; } #second{ border: 1px solid #b9b9b9; position: absolute; left: 343px; top: 20px; width: 200px; padding: 0 10px; background: white; } ul{ padding: 10px 6px ; float: left; width: 185px; } li{ list-style: none; font-size: 12px; line-height: 22px; color: #989898; float: left; margin-right: 14px; } ul:nth-of-type(1),ul:nth-of-type(2){ border-bottom: solid 1px #dbdbdb; } </style> </head> <body> <div id="first"> <p> 購物車 <span>|</span> 優惠券 <span>|</span> 快速注卡 <span>|</span> 各地購課 <span>|</span> 手機報 <span>|</span> 網站導航 </p> </div> <div id="second"> <ul> <li>托福</li> <li>雅思</li> <li>考研</li> <li>職稱英語</li> <li>初中</li> <li>日語</li> </ul> <ul> <li>網絡課堂</li> <li>資訊中心</li> <li>知識堂</li> <li>大師講壇</li> <li>學習論壇</li> <li>學詞</li> <li>考研搜校</li> </ul> <ul> <li>M-Zone</li> <li>手機報</li> <li>時時英語</li> </ul> </div> </body> </html>