第3题 制作SHOP今日推荐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SHOP今日推荐</title> <style> #div{ width: 260px; border: 1px solid #AACBEE; margin: auto; border-radius: 5px; } span{ color: #D80000; } p{ line-height: 10px; color: #999999; } h1{ text-indent: 1em; font-size: 20px; } .more{ position: relative; float: right; bottom: 30px; right: 10px; } li{ list-style-type: none; font-size: 12px; padding-top: 10px; height: 80px; } ul{ padding-left: 20px; } .div{ position: relative; left: 120px; bottom: 65px; } a{ color: #B80000; } </style> </head> <body> <div id="div"> <h1><span>SHOP</span>今日推荐</h1> <img class="more" src="image/more.gif" alt="更多"/> <ul> <li> <img src="image/img9.gif" alt="鸡腿"/> <div class="div"><a href="#">汉来国际美食百货</a> <p>口味:创意中餐</p> <p>区域:朝阳/CBD</p> </div> </li> <li><img src="image/img7.gif" alt="鸡腿"/> <div class="div"><a href="#">汉来国际美食百货</a> <p>口味:创意中餐</p> <p>区域:朝阳/CBD</p> </div></li> <li><img src="image/img8.gif" alt="鸡腿"/> <div class="div"><a href="#">汉来国际美食百货</a> <p>口味:创意中餐</p> <p>区域:朝阳/CBD</p> </div></li> <li><img src="image/img7.gif" alt="鸡腿"/> <div class="div"><a href="#">汉来国际美食百货</a> <p>口味:创意中餐</p> <p>区域:朝阳/CBD</p> </div></li> </ul> </div> </body> </html>
第4题 制作京东轮播页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京东首页轮播</title> <style> div{ width: 740px; margin: auto; } li{ background: #3E3E3E; color: white; display: block; width: 20px; height: 20px; border-radius: 50%; text-align: center; list-style-type: none; float: left; margin-left: 10px; } ul{ position: relative; left: 250px; bottom: 50px; } li:hover{ background: #F27B05; } </style> </head> <body> <div> <img src="image/focus.jpg"/> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>
第5题 新东方顶部导航菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新东方顶部导航菜单</title> <style> .div1,.div2,.div3,.div4,.div5,.div6{ width: 100px; border-right: #D3D3D3 solid 1px; height: 20px; margin-top: 10px; text-align: center; padding-top: 5px; float: left; } .div1{ margin-left: 250px; } .div6{ border: none; } .img{ padding-left: 20px; padding-top: 5px; float: left; } header{ background: #EEEEEE; font-size: 14px; width: 1024px; height: 40px; } .img1{ padding-top: 20px; position: relative; right: 15px; } li{ list-style-type: none; padding: 10px; border-bottom: 1px solid #E8E8E8; width: 170px; line-height: 20px; color: #878787; } .li{ border: none; } ul{ padding: 0px; position: relative; left: 700px; bottom: 10px; background: white; display: none; } a{ text-decoration: none; } a:hover ul{ width: 190px; height: 180px; border: #BFBFBF 1px solid; display: block; text-decoration: none; } </style> </head> <body> <header> <img src="image/logo.gif" class="img"> <div class="div1">购物车</div> <div class="div2">优惠券</div> <div class="div3">快速注卡</div> <div class="div4">各地购课</div> <div class="div5">手机报</div> <div class="div6">网站导航</div> <div> <a href="#"><img src="image/open_icon.gif" class="img1"> <ul> <li>托福 雅思 考研 职称英语 初中 日语 </li> <li>网络课堂 资讯中心 知识堂 大师讲坛 学习论坛 学词 考研搜校</li> <li class="li">M-Zone 手机报 时时英语</li> </ul> </a> </div> </header> </body> </html>