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,设置该文件夹的属性,确保该文件夹具有可写权限 详 ...
随机推荐
- 【绝密外泄】风哥Oracle数据库DBA高级工程师培训视频教程与内部资料v0.1
[绝密外泄]风哥Oracle数据库DBA高级工程师培训视频教程与内部资料v0.1 由于是[绝密外泄]资料,防止被查,需要的小伙伴赶紧下载附件中的课件文档.由于视频太大了,已放在百度网盘了,已经在附中说 ...
- 常见错误：Apple Mach-O Linker Error
常见错误描述: Apple Mach-O Linker Error这类错误的错误信息最后一行通常如下: Command /Developer/Platforms/iPhoneOS.platform/D ...
- 关于form.submit()不能提交表单的错误原因
来源:http://www.ido321.com/948.html 直接上代码把: 1: <div id="register"> 2: <h4>会员注冊&l ...
- HDU 4282 A very hard mathematic problem 二分
A very hard mathematic problem Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/sh ...
- 如何选择Javascript模板引擎（javascript template engine)？
译者 jjfat 日期:2012-9-17 来源: GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: ...
- 【JavaScript】Understanding callback functions in Javascript
Callback functions are extremely important in Javascript. They’re pretty much everywhere. Originally ...
- CGAffineTransformMakeTranslation和CGAffineTransform
摘要: CGAffineTransformMakeTranslation和CGAffineTransformTranslate的区别 1.CGAffineTransformMakeTranslatio ...
- MVC验证01-基础、远程验证
本文体验MVC服务端和客户端验证.主要涉及:※ 基础验证※ 远程验证1个或多个属性及注意点 基础体验 创建MVC4的Internet项目,本身包含了基本的Model,Views,Controller. ...
- 判断浏览器是否IE10
项目中做打印预览时,在IE10中出现兼容性问题,需要针对IE10做特殊处理. 在网上搜了一下,有三种方法可以实现 一.特性检测:@cc_on <!--[if !IE]><!--> ...
- Transact-SQL三值逻辑
/*===========================<一>========================== 在SQL中逻辑表达式的值有三种: 1.TRUE 2.FALSE 3.U ...