5.1.3
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>吃货节</title> 6 <link type="text/css" rel="stylesheet" href="css/5.1.3.css" /> 7 </head> 8 <body> 9 <table class="goods"> 10 <tr> 11 <td colspan="4"><h2>麻辣小龙虾</h2></td> 12 </tr> 13 <tr> 14 <td> 15 <div id="tupian"><img src="img/shrimp_1.jpg" /></div> 16 <a href="#" id="jieshao">洪湖食客 小龙虾生鲜熟食 麻辣4-6钱</a></div><br /> 17 <span id="danjia">¥108</span> 18 <span id="gdanjia">¥128</span> 19 </td> 20 <td> 21 <div id="tupian"><img src="img/shrimp_2.jpg" /></div> 22 <a href="#" id="jieshao">红功夫 麻辣小龙虾4-6钱 1kg</a></div><br /> 23 <span id="danjia">¥109</span> 24 <span id="gdanjia">¥118</span> 25 </td> 26 <td> 27 <div id="tupian"><img src="img/shrimp_3.jpg" /></div> 28 <a href="#" id="jieshao">品鲜猫 潜江麻辣小龙虾尾1000g</a></div><br /> 29 <span id="danjia">¥98</span> 30 <span id="gdanjia">¥138</div> 31 </td> 32 <td> 33 <div id="tupian"><img src="img/shrimp_4.jpg" /></div> 34 <a href="#" id="jieshao">红功夫 麻辣小龙虾6-8钱 750g</a></div><br /> 35 <span id="danjia">¥108</span> 36 <span id="gdanjia">¥138</span> 37 </td> 38 </tr> 39 </table> 40 </body> 41 </html>
css
1 .goods tr td h2{ 2 text-align: center;/*标题居中*/ 3 color: red;/*标题颜色*/ 4 letter-spacing: 10px;/*标题字符间隔*/ 5 } 6 a{ 7 color: gray;/*a标签中的字起初为灰色*/ 8 text-decoration: none;/*取消下划线*/ 9 font-size: 12px;/*字体大小为12px*/ 10 } 11 .goods #jieshao:hover{ 12 color: red;/*鼠标悬浮在介绍上时字体为红色*/ 13 text-decoration: underline; /*鼠标悬浮在介绍上时显示下划线*/ 14 } 15 #danjia{ 16 font-size: 24px;/*单价的字体大小为24px*/ 17 font-weight: bold;/*单价字体加粗*/ 18 color: red;/*单价字体颜色为红色*/ 19 } 20 .goods{ 21 font-family: "微软雅黑";/*所有字体都为微软雅黑*/ 22 } 23 #gdanjia{ 24 text-decoration: line-through;/*原价加中划线*/ 25 color: gray;/*原价的字体颜色*/ 26 font-size: 12px;/*原价的字体大小*/ 27 } 28 #jieshao,#danjia{ 29 line-height: 40px;/*介绍和单价的行高*/ 30 }
5.2.3
html
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>商品信息列表</title> 6 <link type="text/css" rel="stylesheet" href="css/5.2.3.css"/> 7 </head> 8 9 <body> 10 <div id="goods"> 11 <table> 12 <tr> 13 <td> 14 <div class="photo"> 15 <img src="img/adv_1.jpg"/> 16 <div class="images">华硕(ASUS)飞行堡垒五代<br>FX80 15.6英寸游戏笔记本</div> 17 <div class="money">￥5999.00</div> 18 </div> 19 </td> 20 <td> 21 <div class="photo"> 22 <img src="img/adv_2.jpg"/> 23 <div class="images">武极 新i7 8700/华硕<br>GTX1060-6G/Z370水冷</div> 24 <div class="money">￥6499.00</div> 25 </div> 26 </td> 27 <td> 28 <div class="photo"> 29 <img src="img/adv_3.jpg"/> 30 <div class="images">英商海盗船（USCorsair）额<br>定650W RM650x电源</div> 31 <div class="money">￥869.00</div> 32 </div> 33 </td> 34 <td> 35 <div class="photo"> 36 <img src="img/adv_4.jpg"/> 37 <div class="images">联想(Lenovo)杨飞M4000e<br>(PLUS)商用办公台式</div> 38 <div class="money">￥3299.00</div> 39 </div> 40 </td> 41 <td> 42 <div class="photo"> 43 <img src="img/adv_5.jpg"/> 44 <div class="images">惠普（HP）星14-ce0016TU<br>14英寸轻薄笔记本电脑</div> 45 <div class="money">￥4799.00</div> 46 </div> 47 </td> 48 </tr> 49 </table> 50 </div> 51 </body> 52 </html>
css
1 /* CSS Document */ 2 #goods{ 3 width: 1100px;/*表格的宽度为950px*/ 4 height: 260px;/*表格的高度为240px*/ 5 background-color: #7C64D0;/*表格的背景颜色为浅蓝色*/ 6 text-align: center; 7 } 8 /*清楚图片样式*/ 9 table tr td img{ 10 margin: 0px; 11 padding: 0px; 12 border: 0px; 13 list-style-type: none; 14 } 15 .photo{ 16 width: 200px;/*图片的宽度为160px*/ 17 background-color: white; 18 margin: 8px; 19 } 20 td{ 21 margin: 5px;/*每一列表的的间距为5px*/ 22 } 23 .money{ 24 color: red; 25 font-weight: bold; 26 font-size: 25px; 27 margin-top: 5px; 28 margin-bottom: 5px; 29 } 30 .images{ 31 font-weight: bold; 32 font-size: 15px; 33 }
5.3.3
html
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>热卖排行榜</title> 6 <link type="text/css" rel="stylesheet" href="css/5.3.3.CSS"/> 7 </head> 8 9 <body> 10 <div id="big"> 11 <div id="title"><span id="biaoti">热卖排行榜</span></div> 12 <div class="xinxi"><span class="number1">1</span><span class="xiangqing"><a href="#">惠普（HP）Envy X360 13-ag0007AU</a></span></div> 13 <div class="xinxi"><span class="number1">2</span><span class="xiangqing"><a href="#">惠普（HP）EliteBook 745G5 14英寸</a></span></div> 14 <div class="xinxi"><span class="number1">3</span><span class="xiangqing"><a href="#">Apple MacBook Air 13.3英寸笔记本</a></span></div> 15 <div class="xinxi"><span class="number2">4</span><span class="xiangqing"><a href="#">戴尔DELL灵越然7000 II 14.0英寸轻薄本</a></span></div> 16 <div class="xinxi"><span class="number2">5</span><span class="xiangqing"><a href="#">华硕(ASUS)灵耀U4000UQ 14英寸合金本</a></span></div> 17 <div class="xinxi"><span class="number2">6</span><span class="xiangqing"><a href="#">小米(MI)Air 12.5英寸全金属超轻薄</a></span></div> 18 <div class="xinxi"><span class="number2">7</span><span class="xiangqing"><a href="#">联想(Lenovo)小新潮7000 2018款 15.6英寸</a></span></div> 19 </div> 20 </body> 21 </html>
css
1 /* CSS Document */ 2 #big{ 3 border-radius: 5px;/*给整个列表一个圆角边框*/ 4 width: 270px;/*这个列表的宽度为270px*/ 5 padding: 5px;/*列表的填充为5px*/ 6 border: 1px solid gray;/*边框厚度1px 实线 颜色为灰色*/ 7 font-family: "微软雅黑";/*整个列表中的字体为微软雅黑*/ 8 margin: 5px;/*页边距为5px*/ 9 } 10 #title{ 11 line-height: 40px;/*标题的行高为40x*/ 12 background-color: #5979D0;/*标题的颜色为浅蓝色*/ 13 font-weight: bold;/*标题加粗显示*/ 14 } 15 #big #title #biaoti{ 16 margin-left: 10px;/*标题左边距为10px*/ 17 font-size: 18px;/*标题字体大小为18px*/ 18 } 19 /*前三个数字左右边距为10px 加粗显示 颜色为红色 大小为20px*/ 20 #big .xinxi .number1{ 21 margin-left: 10px; 22 margin-right: 10px; 23 font-weight: bold; 24 color: red; 25 font-size: 20px; 26 } 27 /*设置a标签中的字大小为12px 下划线不显示 颜色为黑色*/ 28 #big .xinxi .xiangqing a{ 29 font-size: 12px; 30 color: black; 31 text-decoration: none; 32 } 33 /*当鼠标悬浮在a标签上的字时显示为红色且显示下划线*/ 34 #big .xinxi .xiangqing a:hover{ 35 color: red; 36 text-decoration: underline; 37 } 38 /*每一行的下边框为虚线 粗细1px 颜色灰色*/ 39 .xinxi{ 40 border-bottom: 1px dashed gray; 41 } 42 /*4-7行的数字为浅蓝色 左右边距为10px 粗体 大小20px*/ 43 #big .xinxi .number2{ 44 margin-left: 10px; 45 margin-right: 10px; 46 font-weight: bold; 47 color: #5572E3; 48 font-size: 20px; 49 }