• 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="">&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 }

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

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

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

  • 相关阅读:
    angularjs中的jqlite的认识理解及操作使用
    轻谈Normalize.css
    oppo R9 WLAN使用代理图解
    前端小炒的win7使用笔记(收藏篇)
    git操作方便,简单使用的客户端sourcetree 安装配置所遇问题总结
    关于js中对事件绑定与普通事件的理解
    IT最新最火的网络词汇*2*(文章来源电商)
    Git笔记之初识vi编辑器
    番茄钟工作法--我们天生爱分享
    探讨"点"语法的奥秘
  • 原文地址:https://www.cnblogs.com/willYKYao/p/5949864.html
Copyright © 2020-2023  润新知