html&css静态页面
状态不好，整晚未眠。
想着敲点代码，遇着复杂的又自己生气，所以就敲了博客园的，总是很纠结“哪样的文字算标题算段落或要用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;
}
想想好可怕，竟然一天只干了这么点活，你这样太怠惰了。
虽然你很菜，但是我还是很爱你的呢，恩，我只能爱你。
今天是重新开始的第一天，往后还有第二天，第三天，，，希望你能不忘初心的坚持下去。
html&css静态页面的更多相关文章
- mvc伪静态<四> 伪静态后静态页面或者引用的css和图片失效
引用的css和图片失效的解决办法 把样式引用文件的相对路径改成绝对路径就可以了 比如原先的引用路径为:<link href="~/Content/css/style.css" ...
- 用手机自带uc浏览器查看静态页面，css样式不显示
问题描述: 这个问题是一个同事在写手机页面用UC浏览器测试以后遇到的,其他浏览器静态页面显示正常,唯独UC浏览器不显示页面样式. 我测试过代码是没有问题的,因为临时没有找到安卓手机,就猜想PC端的应该 ...
- html+css实现小米商城首页静态页面
学了一个星期的html和css,用新学的东西写点东西,仿照小米商城的首页按照它的页面布局盗用它的图片写了个小米商城的静态页面. 源代码:链接:https://pan.baidu.com/s/1qf63 ...
- 浅谈php生成静态页面
一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...
- 用 Smarty 生成静态页面入门介绍
why Smarty? 随着公司首页(以下简称首页)流量越来越大,最近开始考虑使用后台语言生成静态页面的技术. 我们知道,一个简单页面一般是一个 .html(或者 .htm ..shtml)后缀的文件 ...
- 比较详细PHP生成静态页面教程
一,PHP脚本与动态页面. PHP脚本是一种服务器端脚本程序,可通过嵌入等方法与HTML文件混合, 也可以类,函数封装等形式,以模板的方式对用户请求进行处理.无论以何种方式,它的基本原理是这样的.由客 ...
- .NET生成静态页面的方案总结
转载自:http://www.cnblogs.com/cuihongyu3503319/archive/2012/12/06/2804233.html 方法一:在服务器上指定aspx网页,生成html ...
- asp.net之动态页面和静态页面的区别
asp.net之动态页面和静态页面的区别 当我开始接触web开发的时候,首先学到的是html.css.js这一类网页语言,通过布局可以搭建出一个静态网站,效果也跟我们上网时经常看到的一些网站一样了.于 ...
- .NET生成静态页面例子
主要做法如下: 1.创建网站,并创建一个模板页,template.htm 2.添加一个web窗体Default.aspx 3.在网站下新建文件夹htm,设置该文件夹的属性,确保该文件夹具有可写权限 详 ...
随机推荐
- bootStrap modal无法滚动处理
bug:在大显示器上,模态框无法滚动,改变浏览器窗口大小,模态框可以滚动. 处理:模态框显示后,执行resize.或者直接调用handleUpdate 'shown.bs.modal #orderDe ...
- Js制作点击输入框时默认文字消失的效果
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-02-17) 为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢 ...
- git强制覆盖本地文件
git fetch --all git reset --hard origin/master
- Adobe Photoshop CC 14.0简体中文特别版32位和64位下载
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- UML精粹学习 - 订单类结构图
Order Class Diagram of Martin Fowler's UML Distilled
- (转)用AGG实现高质量图形输出（二）
本文上接<用AGG实现高质量图形输出(一)>,分别介绍了AGG显示流程中的各个环节. 上次讲了AGG的显示原理并举了一个简单的例子,这一篇文章开始讲AGG工作流程里的每个环节.为了方便对照 ...
- JavaScript实现http地址自动检测并添加URL链接
一.天生我材必有用 给http字符自动添加URL链接是比较常见的一项功能.举两个我最近常用到的自动检测http://地址并添加链接的例子吧,首先是QQ邮箱,在使用QQ邮箱时,如果输入了URL地址(ht ...
- VS2010中文/vs2008英文版/vs2005下载地址
ed2k://|file|cn_visual_studio_2010_ultimate_x86_dvd_532347.iso|2685982720|4AE6228933DDE49D9BFA4C3467 ...
- Cassandra在CQL语言层面支持多种数据类型
Cassandra在CQL语言层面支持多种数据类型. CQL类型 对应Java类型 描述 ascii String ascii字符串 bigint long 64位整数 blob ByteBuffer ...
- 表ADT
表一般不用简单数组来实现,通常将其实现为链表.在链表中要不要使用表头则属于个人兴趣问题.在下面的例程中我们都使用表头. 按照C的约定,作为类型的List(表)和Position(位置)以及函数的原型都 ...