首页html代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>博客</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!--header开始-->
<div id="header">
<div class="header-left">
<a href="#">技术博客空间</a></div>
<div class="header-right">
<a href="#"><img src="images/twitter.png"/></a>
<a href="#"><img src="images/rss.png"/></a>
<div class="header-left-btn">
<input type="text" /><input type="button" value="订阅" />
</div>
</div>
</div>
<!--header结束-->
<!--中间开始-->
<div class="content clear">
<div class="content-menu clear">
<ul>
<li><a href="#" class="current">家</a></li>
<li><a href="#">Web 2.0</a></li>
<li><a href="#">模板</a></li>
<li><a href="#">图像</a></li>
<li><a href="#">灵感</a></li>
<li><a href="#">Flash文件</a></li>
</ul>
</div>
</div>
<div class="content-main clear">
<div class="content-text">
<div class="content-box">
<h1>短信息的<span>网络技术博客</span></h1>
<p>从大众生活。Donec iaculis蚤这样做无论是。目前杂色山雀egestas velit。只要质量Vulputate足排球。索尼和宣传。然而可悲的是，现在的足球需要一只脚。对于很多刚刚释放开发商的资产。明日是一个伟大的愿望，马蒂斯pellentesque，救生钳，feugiat简历，SAPIEN。Fusce交流奥奇condimentum坐阿梅德velit ultrices。整数imperdiet posuere交流，爱欲。这个质量。现在继电器。LOREM箭头和真人娱乐场。</p>
</div>
<div class="post-box">
<div class="post-text">
<h2><a href="#">当拉手光芒甚至</a></h2>
<div class="tag"><strong>标签：</strong><a href="#">音乐</a>，<a href="#">免费的照片</a>，<a href="#">HDR</a></div>
<span class="post-date"><strong>2010年</strong>2月25日</span>
</div>
<img src="images/image_01.jpg" />
<div class="p-right">
<p>清单本地产。前庭ullamcorper存有NEC augue。猫需要恨。现在请，永远值得保留欧盟开发和临床表现大颤动车现在是免费的。即使是质量或胁迫的成员。Mauris最大的开发商和香蕉的影响。</p>
<div class="comment"><a href="#">评论</a></div>
</div>
</div>
<div class="post-box">
<div class="post-text">
<h2><a href="#">每个无颤动</a></h2>
<div class="tag"><strong>标签：</strong><a href="#">音乐</a>，<a href="#">免费的照片</a>，<a href="#">版税</a></div>
<span class="post-date"><strong>2010年</strong>2月25日</span>
</div>
<img src="images/image_02.jpg" />
<div class="p-right">
<p>最新价格门硬件。临床直径胡萝卜温度哀悼营养。有杂乱锅伤心房地产开发商。活酵母临床漫画出版。在伟大的，也没有非常的事已经说了。直到性能和笑声。现在说大众足球方便，担心车辆LOREM，和脚的足球宣传。500</p>
<div class="comment"><a href="#">评论</a></div>
</div>
</div>
<div class="post-box">
<div class="post-text">
<h2><a href="#">每个无颤动</a></h2>
<div class="tag"><strong>标签：</strong><a href="#">闪光</a>，<a href="#">免费文件</a>，<a href="#">AS3</a></div>
<span class="post-date"><strong>2010年</strong>2月25日</span>
</div>
<img src="images/image_02.jpg" />
<div class="p-right">
<p>规划聊天扣除狮子。直到辣椒或辣椒保健地产。但是现在电视。但孩子们投入宣传。Mauris PEDE nisl，placerat NEC，lobortis简历，有人说，但不是，都不是。</p>
<div class="comment"><a href="#">评论</a></div>
</div>
</div>
<div class="post-box post-last">
<div class="post-text">
<h2><a href="#">没有智能手机，但该箭头的价格</a></h2>
<div class="tag"><strong>标签：</strong><a href="#">HTML</a>，<a href="#">模板</a>，<a href="#">CSS</a></div>
<span class="post-date"><strong>2010年</strong>2月25日</span>
</div>
<img src="images/image_03.jpg" />
<div class="p-right">
<p>每个酱只是在员工的后院。从比赛的直播。当拉手光芒超级碗山瞬间。Eget等dapibus sagittis velit QUIS tortor tincidunt aliquet。Vivamus LEO velit，convallis ID，ultrices坐阿梅德，tempor一，自由人。</p>
<div class="comment"><a href="#">评论</a></div>
</div>
</div>
</div>
<div id="content-sidebar">
<div class="sidebar-box">
<h3>标签云</h3>
<div class="sidebar-s">
<a href="#" style="font-size:12px">HTML</a> <a href="#" style="font-size:11px">Cursus</a> <a href="#" style="font-size:16px">Maecenas</a> <a href="#" style="font-size:11px">Aliquam Ligula</a> <a href="#" style="font-size:20px">Egestas</a> <a href="#" style="font-size:16px">Suscipit</a> <a href="#" style="font-size:12px">Sapien</a> <a href="#" style="font-size:28px">Dignissim</a> <a href="#" style="font-size:14px">Vestibulum</a> <a href="#" style="font-size:12px">Lorem</a> <a href="#" style="font-size:14px">Urnain</a> <a href="#" style="font-size:20px">Neque</a> <a href="#" style="font-size:12px">Aenean</a>
</div>
</div>
<div class="sidebar-box">
<h3>类别</h3>
<div class="sidebar-s">
<ul class="sidebar-menu">
<li><a href="#">CSS技巧</a></li>
<li><a href="#">网页设计技巧</a></li>
<li><a href="#">最好的壁纸</a></li>
<li><a href="#">字体</a></li>
<li><a href="#">Photoshop教程</a></li>
<li><a href="#">3D动画教程</a></li>
</ul>
</div>
</div>
<div class="sidebar-box">
<h3>档案</h3>
<div class="sidebar-s">
<ul class="sidebar-menu">
<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="#">3D人物教程</a></li>
</ul>
</div>
</div>
<div class="sidebar-box">
<h3>我们的朋友</h3>
<div class="sidebar-s">
<ul class="sidebar-menu">
<li><a href="#">Flash文件</a></li>
<li><a href="#">免费模板</a></li>
<li><a href="#">网页设计技巧</a></li>
<li><a href="#">闪存XML画廊</a></li>
<li><a href="#">鼓舞人心的Flash网站</a></li>
</ul>
</div>
</div>
</div>
<span class="content-bottom"></span>
</div>
<!--中间结束-->
<!--底部开始-->
<div id="bottom" class="clear">
<div class="bottom-box">
<h5><span>但是到处</span>按摩NIBH</h5>
<p>DUIS简历velit sed的DUI malesuada dignissim。直到软香蕉网络。保护者本科元素本身。</p>
<a href="#">更多信息</a>
</div>
<div class="bottom-box">
<h5><span>Lorem存有</span>胡萝卜</h5>
<p>制造业抵扣，是该雇员排球，生态纯净宣传的那么伤心，现在没有自由。</p>
<a href="#">更多信息</a>
</div>
<div class="bottom-box">
<h5><span>最近的</span>帖子</h5>
<ul class="bottom-menu">
<li><a href="#">DUIS简历velit sed的lesuada资产。</a></li>
<li><a href="#">直到软香蕉网络。</a></li>
<li><a href="#">保护者本科元素本身。</a></li>
</ul>
<a href="#">更多信息</a>
</div>
</div>
<!--底部结束-->
<!--footer开始-->
<div id="footer" class="clear">
<ul class="footer-menu">
<li><a href="#">家</a></li>
<li><a href="#">Web 2.0的</a></li>
<li><a href="#">网站</a></li>
<li><a href="#">图像</a></li>
<li><a href="#">灵感</a></li>
<li><a href="#">赠品</a></li>
</ul>
版权所有 © 2048 <a href="#">你的公司名称</a> | 验证 <a href="#">XHTML</a> 和 <a href="#">CSS</a>
</div>
<!--footer结束-->
</body>
</html>布局什么的都很简单，这属于比较简单的页面。
首页css代码
body{
margin: 0;
padding:0;
color:#b9b9b9;
font-family: Tahoma, Geneva, sans-serif,微软雅黑;
font-size: 12px;
line-height: 1.5em;
background-color: #ccc;
background: url(../images/background.jpg) repeat;
}
a{text-decoration: none;color: #fff;}
p { margin: 0px; padding: 0; }
img { border: none; }
ul { margin: 0; padding: 0; }
ul li { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { color: #000; }
h1 { font-size: 30px; font-weight: normal; margin: 0 0 20px 0; padding: 5px 0; color: #9b9b9b; }
h2 { font-size: 24px; font-weight: normal; margin: 0 0 20px 0; padding: 10px 0 15px 0; color: #fff; }
h3 { font-size: 20px; font-weight: normal; margin: 0 0 15px 0; padding: 0; padding: 0 0 10px 0; }
h4 { font-size: 18px; margin: 0 0 20px 0; padding: 0 0 10px 0; ; }
h5 { font-size: 16px; margin: 0 0 10px 0; padding: 0; }
h6 { font-size: 14px; margin: 0 0 5px 0; padding: 0; }
.clear:after{
content: "";
display: block;
height: 0;
clear: both;
}
span{
color: #20c4d3;
}
/*header开始 */
#header{
width:1024px;
padding: 0;
margin:0 auto 20px auto;
}
div{
display: block;
}
.header-left{
float: left;
width:500px;
height: 160px;
}
.header-left>a{
display: block;
width:500px;
height:30px;
font-size: 16px;
color:#fff;
margin:0;
padding: 130px 0 0 170px;
text-decoration: none;
background: url(../images/logo.png) no-repeat top left;
}
.header-right{
float: right;
width:260px
padding-top:30px;
text-align: right;
}
.header-left-btn{
width:260px;
margin-top:30px;
padding:30px 0 0;
background: url(../images/newsletter.png) no-repeat top left;
}
.header-left-btn>input{
width:180px;
height: 22px;
background: none;
color:#333;
border:1px solid #333;
padding:0 5px;
}
.header-left-btn>input+input{
width:63px;
height: 23px;
cursor: pointer;
margin-left:5px;
border-radius: 3px;
background: #777;
}
/*header结束*/
/*content开始*/
.content{
clear: both;
background: url(../images/menu.jpg) repeat-x;
height:50px;
}
.content-menu{
width:984px;
height: 50px;
padding:0 20px;
margin:0 auto;
background:#262626;
}
.content-menu>ul{
list-style: none;
height:33px;
padding:10px 0 0 0;
}
.content-menu>ul li{
float: left;
margin:0;
padding:0;
display: inline-block;
}
.current{
background: #040404;
border-radius: 4px;
}
.content-menu ul li>a{
float: left;
position: relative;
display: block;
text-decoration: none;
color:#fff;
font-size: 16px;
height:30px;
line-height: 30px;
padding-right: 28px;
padding-left: 28px;
margin-left: 10px;
text-align: center;
}
.content-menu ul li>a:hover{
background: #040404;
border-radius: 4px;
}
.content-main{
clear: both;
position: relative;
width:964px;
margin:0 auto;
padding:0 30px 50px;
background: #262626 url(../images/content_top.jpg) no-repeat top;
}
.content-text{
float: left;
width:600px;
padding:30px 30px 30px 0;
border-right: 1px dashed #363636;
}
.content-box{
border-bottom: 1px dashed #363636;
padding-bottom: 30px;
margin-bottom:30px;
}
.content-box h1>span{
color: #20c4d3;
}
.post-box{
clear: both;
border-bottom: 1px dashed #363636;
padding-bottom: 30px;
margin-bottom:30px;
}
.post-text{
position: relative;
margin-bottom: 10px;
}
.post-text>h2{
margin:0;
padding:5px 0;
}
.tag>a{
color:#777;
}
.post-date{
position: absolute;
top:0;
right: 0;
}
.post-box>img{
width:108px;
height:108px;
border:5px solid #fff;
}
.p-right{
float:right;
width:450px;
}
.p-right .comment>a{
display: block;
color: #da9d0c;
font-weight: bold;
text-decoration:underline;
padding:3px 0 0 25px;
margin-top:15px;
background: url(../images/comment.jpg) no-repeat bottom left;
}
.p-right .comment>a:hover{
text-decoration: none;
color:#66ff00;
}
.post-last{
border:none;
}
.content-bottom{
position: absolute;
bottom:0;
left: 0;
background: url(../images/content_bottom.jpg) no-repeat;
width:1024px;
height: 60px;
}
#content-sidebar{
width:280px;
float:right;
}
.sidebar-box{
clear: both;
}
.sidebar-box>h3{
width:190px;
height:38px;
margin:0;
padding:42px 0 0 90px;
color: #fff;
background: url(../images/site_header.png) no-repeat left top;
}
.sidebar-s{
padding:20px;
}
.sidebar-box a{
color: #b9b9b9;
}
.sidebar-menu{
list-style: none;
}
.sidebar-menu>li{
border-bottom: 1px solid #303030;
margin-bottom:5px;
padding: 3px 0;
}
.sidebar-menu li>a{
display: block;
background: url(../images/li_list.jpg) no-repeat top left;
padding-left: 20px;
}
/*content结束*/
#bottom{
width:1024px;
height: 168px;
background: url(../images/footer.jpg) no-repeat;
padding-top:40px;
margin:0 auto;
}
.bottom-box{
float: left;
width:256px;
margin-left: 20px;
padding:20px 20px 0;
background: url(../images/footer_box.png) no-repeat;
}
.bottom-box>h5{
color:#b3b3b3;
}
.bottom-box>a{
color:#20c4d3;
float: right;
}
.bottom-menu{
margin:20px 0;
list-style: none;
}
.bottom-menu>li{
background: url(../images/footer_list.png) no-repeat left top;
padding:0 0 3px 15px;
margin:0 0 10px;
line-height: 1em;
}
.bottom-menu>li a{
color: #b3b3b3;
text-decoration: underline;
}
.bottom-menu>li a:hover{
text-decoration:none;
}
#footer{
clear: both;
width:1024px;
margin:0 auto;
padding: 10px 0;
text-align: center;
color: #999;
}
.footer-menu{
margin-bottom: 5px;
}
.footer-menu>li{
display: inline-block;
border-left: 1px solid #6b6b6b;
padding: 0 5px;
}
.footer-menu>li:nth-child(1){
border:none;
}
.footer-menu>li a{
color: #999;
text-decoration: underline;
}
.footer-menu>li a:hover{
color:#d9d9d9;
text-decoration: none;
}
#footer>a{
font-weight: normal;
color: #999;
text-decoration: underline;
}
#footer>a:hover{
text-decoration:none;
}就用了一些hover选择器，都是比较简单的css样式，css3还没怎么用到。不是很好，但会慢慢改进。
1622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
