Day47 CSS练习

1.需要实现的内容

 

 

 2.代码

 index.html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>第一天综合练习</title>
 6         
 7         <link rel="stylesheet" href="css/mycss.css" />
 8         
 9     </head>
10     <body>
11         <!--描述：网页头部-->
12         <div>
13             <table align="center">
14                 <tr>
15                     <td align="center">
16                         <span>
17                             拒绝4连败!勇士逆转76人回榜首 库里生日夜29分
18                         </span>                        
19                     </td>
20                 </tr>
21                 <tr>
22                     <td align="center">
23                         <font id="one">
24                             2017-03-15 13:06:05　来源: 网易体育 作者：小柳　有 65277 人参与 手机看赛事
25                         </font>
26                     </td>
27                 </tr>
28             </table>
29         </div>
30         <!--描述：中间部分-->
31         <div>
32             <table align="center">
33                 <tr>
34                     <td align="left">
35                         <p>
36                         <font id="two">
37                             网易体育3月15日报道：
38                         </font>
39                         </p>                       
40                     </td>
41                 </tr>
42                 <tr>
43                     <td align="left">
44                         <p>
45                         <font id="two">
46                             金州勇士队（53胜14负）在主场反弹。
47                             库里得到29分、6个篮板和5次助攻，汤普森得到28分，
48                             格林得到20分、8次助攻和6个篮板，他们带领球队逆转16分落后，
49                             他们在主场以106-104险胜费城76人队（24胜43负）。
50                             勇士队结束3连败，他们重返联盟第一，常规赛2-0横扫76人队。
51                         </font>
52                         </p>                        
53                     </td>
54                 </tr>
55             </table>
56         </div>
57         <!--描述：网页底部-->
58         <div>
59             <table width="100%" align="center">
60                 <tr>
61                     <td align="center"><img src="img/kuli.png"/></td>
62                 </tr>
63             </table>    
64         </div>
65         
66     </body>
67 </html>

 

style.css

span{
    font-family: "宋体";
    font-size: 22px;
    font-weight: bolder;
}
font{
    font-family: "微软雅黑";                                
    }
    #one{
    font-size: 11px;
    font-weight: normal;
    }            
    #two{
    font-size: 15px;
    font-weight: normal;
}
P{
    text-indent: 2em;
}

 

3.实现结果

 

 

4. 已经进入JavaWeb阶段 代码仍然写的很糙 还有很多需要学习 加油！

 

posted @ 2020-04-07 21:33  Her4c  阅读(119)  评论(0)    收藏  举报