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 }
来源：https://www.cnblogs.com/li01/p/11991617.html