html&css静态页面
状态不好,整晚未眠。
想着敲点代码,遇着复杂的又自己生气,所以就敲了博客园的,总是很纠结“哪样的文字算标题算段落或要用span”“什么时候用div比较好”“用很多id是不是不好”,恩,可能我的阅读理解能力真的很差吧,感觉就很有挫败感呀。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>willYKYao - 博客园</title> 6 <link rel="stylesheet" href="css/new_file.css" /> 7 </head> 8 <body> 9 <div id="wrap"> 10 <!--头部开始--> 11 <div id="header"> 12 <h1><a href="#">willYKYao</a></h1> 13 <p> 14 随笔- <span>0</span> 15 文章- <span>0</span> 16 评论- <span>0</span> 17 </p> 18 <ul> 19 <li><a href="#">博客园</a></li> 20 <li><a href="#">首页</a></li> 21 <li><a href="#">新随笔</a></li> 22 <li><a href="#">联系</a></li> 23 <li><a href="#">订阅</a></li> 24 <li><a href="#">管理</a></li> 25 </ul> 26 </div> 27 <!--头部结束--> 28 <!--主体开始--> 29 <div id="mainbody"> 30 <!--公告--> 31 <div id="news" class="haha"> 32 <h3 class="head">公告</h3> 33 <ul> 34 <li>昵称:<a href="#">willYKYao</a></li> 35 <li>园龄:<a href="#">1天</a></li> 36 <li>粉丝:<a href="#">0</a></li> 37 <li>关注:<a href="#">0</a></li> 38 <li><a href="#">+加关注</a></li> 39 </ul> 40 </div> 41 <!--日历--> 42 <div id="time"> 43 <h3> 44 <span class="left"><a href=""><</a></span> 45 <span class="right"><a href="">></a></span> 46 2016年10月 47 </h3> 48 <table> 49 <thead> 50 <tr> 51 <td>日</td> 52 <td>一</td> 53 <td>二</td> 54 <td>三</td> 55 <td>四</td> 56 <td>五</td> 57 <td>六</td> 58 </tr> 59 </thead> 60 <tbody> 61 <tr> 62 <td>25</td> 63 <td>26</td> 64 <td>27</td> 65 <td>28</td> 66 <td>29</td> 67 <td>30</td> 68 <td>1</td> 69 </tr> 70 <tr> 71 <td>2</td> 72 <td>3</td> 73 <td>4</td> 74 <td>5</td> 75 <td>6</td> 76 <td>7</td> 77 <td>8</td> 78 </tr> 79 <tr> 80 <td>9</td> 81 <td>10</td> 82 <td class="active">11</td> 83 <td>12</td> 84 <td>13</td> 85 <td>14</td> 86 <td>15</td> 87 </tr> 88 <tr> 89 <td>16</td> 90 <td>17</td> 91 <td>18</td> 92 <td>19</td> 93 <td>20</td> 94 <td>21</td> 95 <td>22</td> 96 </tr> 97 <tr> 98 <td>23</td> 99 <td>24</td> 100 <td>25</td> 101 <td>26</td> 102 <td>27</td> 103 <td>28</td> 104 <td>29</td> 105 </tr> 106 <tr> 107 <td>30</td> 108 <td>31</td> 109 <td>1</td> 110 <td>2</td> 111 <td>3</td> 112 <td>4</td> 113 <td>5</td> 114 </tr> 115 </tbody> 116 </table> 117 </div> 118 </div> 119 <!--搜索--> 120 <div id="search"> 121 <h3 class="head">搜索</h3> 122 <div> 123 <input class="txt" type="text" /> 124 <input type="button" value="找找看"/><br /> 125 <input class="txt" type="text" /> 126 <input type="button" value="谷歌搜索"/> 127 </div> 128 </div> 129 <div id="link" class="haha"> 130 <h3 class="head">常用链接</h3> 131 <ul> 132 <li><a href="#">我的随笔</a></li> 133 <li><a href="#">我的评论</a></li> 134 <li><a href="#">我的参与</a></li> 135 <li><a href="#">最佳评论</a></li> 136 <li><a href="#">我的标签</a></li> 137 </ul> 138 </div> 139 <!--主体结束--> 140 <!--尾部开始--> 141 <div id="footer"> 142 <p>Copyright©2016 willYKYao</p> 143 </div> 144 <!--尾部结束--> 145 </div> 146 </body> 147 </html>
写样式的时候,前前后后回复着,感觉越写越乱了
1 body,h1,h2,h3,h4,h5,h6,p,ul,table,tbody{ 2 margin:0; 3 padding:0; 4 } 5 a{ 6 text-decoration:none; 7 } 8 li{ 9 list-style-type:none; 10 } 11 12 body{ 13 font-size:12px; 14 font-family:"宋体",arial,sans-serif; 15 background:#c7cbbd url(../img/header-bg.jpg) no-repeat; 16 color:#6a6352; 17 } 18 #wrap{ 19 width:950px; 20 margin:0 auto; 21 } 22 23 /*头部*/ 24 #header{ 25 height:300px; 26 } 27 #header h1{ 28 padding-top:136px; 29 font-family:arial; 30 } 31 #header h1 a{ 32 font-size:38px; 33 font-weight:normal; 34 color:#000; 35 } 36 #header h1 a:hover{ 37 text-decoration:underline; 38 } 39 #header p{ 40 color:#666; 41 margin:45px 0 0 810px; 42 } 43 #header ul{ 44 margin:10px 0 0 40px; 45 } 46 #header ul li{ 47 font-family: "微软雅黑"; 48 float:left; 49 text-align: center; 50 } 51 #header ul li a{ 52 display:inline-block; 53 width:70px; 54 font-size:14px; 55 color:#555; 56 } 57 #header ul li a:hover{ 58 font-size:18px; 59 color:#222; 60 } 61 62 /*主体公告*/ 63 .head{ 64 color:#55626e; 65 font-size:14px; 66 font-family:"宋体"; 67 padding:5px 166px 3px 10px; 68 display:inline-block; 69 border-bottom:1px solid #d6dddc; 70 } 71 .haha{ 72 margin-top:10px; 73 } 74 .haha ul{ 75 padding:15px 0px 0px 10px; 76 } 77 .haha ul li{ 78 font-size:12px; 79 line-height:18px; 80 } 81 .haha ul li a{ 82 font-family:arial; 83 color:#6a6352; 84 } 85 .haha ul li a:hover{ 86 text-decoration:underline; 87 } 88 89 /*日历*/ 90 #time{ 91 margin-top:34px; 92 position:relative; 93 font-size:14px; 94 font-family:arial; 95 } 96 #time h3{ 97 font-size:13px; 98 margin:0 0 8px 63px; 99 letter-spacing:1px; 100 } 101 #time span a{ 102 font-weight:normal; 103 color:#6a6352; 104 } 105 #time span a:hover{ 106 text-decoration:underline; 107 } 108 #time table{ 109 height:145px; 110 text-align: center; 111 width:207px; 112 } 113 #time table thead{ 114 font-weight:bold; 115 } 116 .active{ 117 color:red; 118 } 119 #time .left{ 120 position:absolute; 121 left:6px; 122 top:0px; 123 } 124 #time .right{ 125 position:absolute; 126 left:192px; 127 top:0px; 128 } 129 130 /*搜索*/ 131 #search div{ 132 padding-left:10px; 133 } 134 #search .txt{ 135 width:102px; 136 height:20px; 137 margin-top:5px; 138 } 139 140 /*链接*/ 141 #link li{ 142 line-height:20px; 143 } 144 145 /*尾部*/ 146 #footer{ 147 height:90px; 148 line-height:90px; 149 font-family:arial; 150 text-align: center; 151 font-size:14px; 152 }
想想好可怕,竟然一天只干了这么点活,你这样太怠惰了。
虽然你很菜,但是我还是很爱你的呢,恩,我只能爱你。
今天是重新开始的第一天,往后还有第二天,第三天,,,希望你能不忘初心的坚持下去。