状态不好,整晚未眠。
想着敲点代码,遇着复杂的又自己生气,所以就敲了博客园的,总是很纠结“哪样的文字算标题算段落或要用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 }
想想好可怕,竟然一天只干了这么点活,你这样太怠惰了。
虽然你很菜,但是我还是很爱你的呢,恩,我只能爱你。
今天是重新开始的第一天,往后还有第二天,第三天,,,希望你能不忘初心的坚持下去。
原标题:htmlcss静态页面
关键词:HTML