第一题：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>美食今日推荐</title> <style> #b{ width: 300px; height: 380px; padding: 10px; border: 2px solid blue; border-radius: 20px; } #a{ color: red; } li{ list-style: none; color: #999999; } img{ position: relative; left: -25px; } div ul li:nth-of-type(1){ position: relative; left: 100px; top: -70px; } div ul li:nth-of-type(2){ position: relative; left: 100px; top: -120px; } div ul li:nth-of-type(3){ position: relative; left: 100px; top: -170px; } div ul li:nth-of-type(4){ position: relative; left: 100px; top: -223px; } .a{ position: relative; top: -50px; left:-70px; } .b{ position: relative; top: -102px; } .c{ position: relative; top: -155px; } .d{ position: relative; top: -170px; left: 30px; } .e{ position: relative; top: -40px; left: 250px; } a{ color: red; } span{ position: relative; top: -40px; } </style> </head> <body id="b"> <div> <h3><strong id="a">SHOP</strong> 今日推荐</h3> <img class="e" src="图片/more.gif"> <span> <ul> <img src="图片/img9.gif"> <li> <a href="">汉来国际美食百货</a><br> 口味：创意中餐<br> 区域：朝阳/CBD </li> <img class="d" src="图片/shen.png"> <img class="a" src="图片/img7.gif"> <li> <a href="">汉来国际美食百货</a><br> 口味：创意中餐<br> 区域：朝阳/CBD </li> <img class="b" src="图片/img8.gif"> <li> <a href="">汉来国际美食百货</a><br> 口味：创意中餐<br> 区域：朝阳/CBD </li> <img class="c" src="图片/img7.gif"> <li> <a href="">汉来国际美食百货</a><br> 口味：创意中餐<br> 区域：朝阳/CBD </li> </ul> </span> </div> </body> </html>
第二题：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京东轮播图</title> <style> li{ color:#FFF; font-size: 5px; font-weight:bold; margin-right:3px; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: #373b3c; line-height: 20px; text-align: center; } ul{ position: absolute; left: 265px; top: 405px; } a:hover{ color: #FAA53B; text-decoration:none; } </style> </head> <body> <div style="position: relative"> <img src="图片/focus.jpg"width="730" height="454"> <ul> <a href=""><li>1</li></a> <a href=""><li>2</li></a> <a href=""><li>3</li></a> <a href=""><li>4</li></a> <a href=""><li>5</li></a> </ul> </div> </body> </html>
第三题：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ padding: 0px;margin: 0px; } .div{ border: 1px solid gray; height: 40px; border-bottom: 1px dotted gray; background-color: #EFEFED; position: relative } .div a{ text-decoration: none; color: gray; } a:hover{ text-decoration: underline } li{ display: inline-block; margin-top: 5px; padding-right: 15px; padding-left: 12px; border-right: 1px gray solid; } .div ul{ display: inline-block; position: absolute; top: -15px; right: 50px; height: 30px; } #pic{ position: absolute; right: -10px; top: 10px } .div2{ width: 310px; font-size: 14px; color: gray; border: 1px solid; position: absolute; right: 0; top: 20px; z-index: 1; background-color: whitesmoke; } .div2 dd{ display: inline-block; margin-right: -10px; margin-bottom:5px ; } .div2 dl{ display: inline-block; margin: 0px auto; padding: 15px 0px; width: 280px; border-bottom: 1px solid gray; margin-left: 15px; } .div2{ display: none } .a:hover div{ display: block; } </style> </head> <body> <div class="div" style="border-right: none;border-left: none"> <img src="图片/logo.gif" width="60px" height="36px" style="float: left;margin-left: 20px"> <ul> <li><a href="images">购物车</a> </li> <li><a href="images">优惠券</a> </li> <li><a href="images">快速注卡</a> </li> <li><a href="images">各地购课</a> </li> <li><a href="images">手机报</a> </li> <li style="border-right: none;position: relative"><a href="images">网站导航</a> </li> <a href="#" class="a"><img id="pic" src="图片/open_icon.gif"> <div style="border-left: 1px solid;" class="div2"> <dl> <dd>托福</dd> <dd>雅思</dd> <dd>考研</dd> <dd>职称英语</dd> <dd>初中</dd> <dd>日语</dd> </dl> <dl> <dd>网络课堂</dd> <dd>资讯中心</dd> <dd>知识堂</dd> <dd>大师讲坛</dd> <dd>学习论坛</dd> <dd>学词</dd> <dd>考研搜校</dd> </dl> <dl style="border: none;margin-bottom: 5px"> <dd>M-Zone</dd> <dd>手机报</dd> <dd>时时英语</dd> </dl> </div> </a> </ul> </div> </body> </html>