状态不好,整晚未眠。
想着敲点代码,遇着复杂的又自己生气,所以就敲了博客园的,总是很纠结“哪样的文字算标题算段落或要用span”“什么时候用div比较好”“用很多id是不是不好”,恩,可能我的阅读理解能力真的很差吧,感觉就很有挫败感呀。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>willYKYao - 博客园</title>
<link rel="stylesheet" href="css/new_file.css" />
</head>
<body>
<div id="wrap">
<!--头部开始-->
<div id="header">
<h1><a href="#">willYKYao</a></h1>
<p>
随笔- <span>0</span>
文章- <span>0</span>
评论- <span>0</span>
</p>
<ul>
<li><a href="#">博客园</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">新随笔</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">订阅</a></li>
<li><a href="#">管理</a></li>
</ul>
</div>
<!--头部结束-->
<!--主体开始-->
<div id="mainbody">
<!--公告-->
<div id="news" class="haha">
<h3 class="head">公告</h3>
<ul>
<li>昵称:<a href="#">willYKYao</a></li>
<li>园龄:<a href="#">1天</a></li>
<li>粉丝:<a href="#">0</a></li>
<li>关注:<a href="#">0</a></li>
<li><a href="#">+加关注</a></li>
</ul>
</div>
<!--日历-->
<div id="time">
<h3>
<span class="left"><a href=""><</a></span>
<span class="right"><a href="">></a></span>
2016年10月
</h3>
<table>
<thead>
<tr>
<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
</thead>
<tbody>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td class="active">11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--搜索-->
<div id="search">
<h3 class="head">搜索</h3>
<div>
<input class="txt" type="text" />
<input type="button" value="找找看"/><br />
<input class="txt" type="text" />
<input type="button" value="谷歌搜索"/>
</div>
</div>
<div id="link" class="haha">
<h3 class="head">常用链接</h3>
<ul>
<li><a href="#">我的随笔</a></li>
<li><a href="#">我的评论</a></li>
<li><a href="#">我的参与</a></li>
<li><a href="#">最佳评论</a></li>
<li><a href="#">我的标签</a></li>
</ul>
</div>
<!--主体结束-->
<!--尾部开始-->
<div id="footer">
<p>Copyright©2016 willYKYao</p>
</div>
<!--尾部结束-->
</div>
</body>
</html>
写样式的时候,前前后后回复着,感觉越写越乱了
body,h1,h2,h3,h4,h5,h6,p,ul,table,tbody{
margin:;
padding:;
}
a{
text-decoration:none;
}
li{
list-style-type:none;
} body{
font-size:12px;
font-family:"宋体",arial,sans-serif;
background:#c7cbbd url(../img/header-bg.jpg) no-repeat;
color:#6a6352;
}
#wrap{
width:950px;
margin:0 auto;
} /*头部*/
#header{
height:300px;
}
#header h1{
padding-top:136px;
font-family:arial;
}
#header h1 a{
font-size:38px;
font-weight:normal;
color:#000;
}
#header h1 a:hover{
text-decoration:underline;
}
#header p{
color:#666;
margin:45px 0 0 810px;
}
#header ul{
margin:10px 0 0 40px;
}
#header ul li{
font-family: "微软雅黑";
float:left;
text-align: center;
}
#header ul li a{
display:inline-block;
width:70px;
font-size:14px;
color:#555;
}
#header ul li a:hover{
font-size:18px;
color:#222;
} /*主体公告*/
.head{
color:#55626e;
font-size:14px;
font-family:"宋体";
padding:5px 166px 3px 10px;
display:inline-block;
border-bottom:1px solid #d6dddc;
}
.haha{
margin-top:10px;
}
.haha ul{
padding:15px 0px 0px 10px;
}
.haha ul li{
font-size:12px;
line-height:18px;
}
.haha ul li a{
font-family:arial;
color:#6a6352;
}
.haha ul li a:hover{
text-decoration:underline;
} /*日历*/
#time{
margin-top:34px;
position:relative;
font-size:14px;
font-family:arial;
}
#time h3{
font-size:13px;
margin:0 0 8px 63px;
letter-spacing:1px;
}
#time span a{
font-weight:normal;
color:#6a6352;
}
#time span a:hover{
text-decoration:underline;
}
#time table{
height:145px;
text-align: center;
width:207px;
}
#time table thead{
font-weight:bold;
}
.active{
color:red;
}
#time .left{
position:absolute;
left:6px;
top:0px;
}
#time .right{
position:absolute;
left:192px;
top:0px;
} /*搜索*/
#search div{
padding-left:10px;
}
#search .txt{
width:102px;
height:20px;
margin-top:5px;
} /*链接*/
#link li{
line-height:20px;
} /*尾部*/
#footer{
height:90px;
line-height:90px;
font-family:arial;
text-align: center;
font-size:14px;
}
想想好可怕,竟然一天只干了这么点活,你这样太怠惰了。
虽然你很菜,但是我还是很爱你的呢,恩,我只能爱你。
今天是重新开始的第一天,往后还有第二天,第三天,,,希望你能不忘初心的坚持下去。