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数据库多语言文字存储解决方案
一.关于字符集 字符集(也称字元集,Character Set)就是字符编码表(codepage),一个字符不论英文.中文.韩文等在计算机系统内存或硬盘中通过二进制的字节(Byte)保存,这个二进制的 ...
- javascrpt随笔
function member(name, gender) { this.name = name; this.gender = gender; this.display = display; //指定 ...
- 计算Excel中的Sheet个数
$strpath="d:\ee.xlsx"$excel=new-object -comobject excel.application$WorkBook = $excel.Work ...
- CSS Sprites图片处理
简介: CSS Sprites是一个网页图片处理方式,在国内都叫CSS精灵,css Sprites允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像 ...
- C#的WinForm中制作饼状图和柱状图
using System; using System.IO;//用于文件存取 using System.Data;//用于数据访问 using System.Drawing;//提供画GDI+图形的基 ...
- openldap 安装 配置 使用
1.安装 #安装 yum install -y openldap-servers openldap-clients openldap-devel 2.复制配置文件 #复制配置文件 cp /usr/sh ...
- URL路由规则实例
1.设置支持路由和写路由规则
- 苹果iOS手机暗藏间谍软件的揭秘者：扎徳尔斯基
大家知道,苹果iOS手机的短消息server(SMS)是用硬件加密的,看起来非常安全.可是,Jonathan Zdziarski发现苹果公司有意地放进去一个"文件转发server" ...
- java Date比较
package com.horizon.test; import org.apache.commons.lang.time.DateUtils; public class Hello3 { publi ...
- install root certificate failed, Please run as administrator/root/sudo
在钥匙窜中导入 证书就可以了