你的位置:首页 > 网页设计

[网页设计]htmlcss静态页面


状态不好,整晚未眠。

想着敲点代码,遇着复杂的又自己生气,所以就敲了博客园的,总是很纠结“哪样的文字算标题算段落或要用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="">&lt;</a></span> 45             <span class="right"><a href="">&gt;</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&copy;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 }

想想好可怕,竟然一天只干了这么点活,你这样太怠惰了。

虽然你很菜,但是我还是很爱你的呢,恩,我只能爱你。

今天是重新开始的第一天,往后还有第二天,第三天,,,希望你能不忘初心的坚持下去。