版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/54837849
最近学习了HTML和CSS的一些简答的语法，今天写了一个简单的项目，其实也算不上什么项目，只是一个静态博客，效果图如下： 
这个页面使用了所谓的HTML+CSS+div来完成，看起来比之前写的hao123要好看的多，但是其实也写起来也不是很麻烦。视频中的老师说他录这节视频只用了一个多小时的时间，而我写这个网页却写了将近一天的时间。这这是最简单的网页，很多效果都还没有用到，只是在编写这个网页的同时可以了解一些设计网页的思路。
可以从github下载该网页的源码网页源码
下面附上这个网页的源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="博客实战">
<meta name="description" content="htmlcss实战">
<meta name="autor" content="twilight">
<title>css实战1</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<!--头部-->
<div id="header">
<div class="logo_title">
<h3>LinuxCast.net Demo Site</h3>
<p>LinuxCast.net演示页面，Linux学习不再晦涩难懂</p>
</div>
<div class="navi">
<ul>
<li><a href="">首页</a></li>
<li><a href="">闲言碎语</a></li>
<li><a href="">我是谁</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--中部-->
<div id="wrapper">
<div class="main">
<div class="item">
<div class="item_img">
<img src="素材/1.png" alt="image"/>
</div>
<div class="item_content">
<h3>示例标题示例标题</h3>
<p class="item_info">作者:twilight 日期：2017-2-2</p>
<p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
</div>
</div>
<div class="item">
<div class="item_img">
<img src="素材/1.png" alt="image"/>
</div>
<div class="item_content">
<h3>示例标题示例标题</h3>
<p class="item_info">作者:twilight 日期：2017-2-2</p>
<p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
</div>
</div>
<div class="item">
<div class="item_img">
<img src="素材/1.png" alt="image"/>
</div>
<div class="item_content">
<h3>示例标题示例标题</h3>
<p class="item_info">作者:twilight 日期：2017-2-2</p>
<p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
</div>
</div>
<div class="item">
<div class="item_img">
<img src="素材/1.png" alt="image"/>
</div>
<div class="item_content">
<h3>示例标题示例标题</h3>
<p class="item_info">作者:twilight 日期：2017-2-2</p>
<p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
</div>
</div>
<div class="item">
<div class="item_img">
<img src="素材/1.png" alt="image"/>
</div>
<div class="item_content">
<h3>示例标题示例标题</h3>
<p class="item_info">作者:twilight 日期：2017-2-2</p>
<p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
</div>
</div>
<div class="item">
<div class="item_img">
<img src="素材/1.png" alt="image"/>
</div>
<div class="item_content">
<h3>示例标题示例标题</h3>
<p class="item_info">作者:twilight 日期：2017-2-2</p>
<p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
</div>
</div>
</div>
<div class="sidebar">
<div class="author">
<div class="author_img">
<img src="3.jpg"/>
</div>
<div class="author_info">
<h4>twilight</p>
<p>cease to struggle and you cease to live</p>
</div>
</div>
<div class="article">
<h3>推荐文章</h3>
<ul>
<li>推荐文章1</li>
<li>推荐文章2</li>
<li>推荐文章3</li>
<li>推荐文章4</li>
<li>推荐文章5</li>
<li>推荐文章6</li>
</ul>
</div>
<div class="site_info">
<p>访客100</p>
<p>文章数100</p>
</div>
</div>
<div class="clear"></div>
</div>
<!--尾部-->
<div id="footer">
<div class="left">Copyright © 1999-2016, balalalalal, All Rights Reserved</div>
<div class="right">
<ul>
<li>关于我们</li>
<li>联系我们</li>
<li>使用条款</li>
<li>意见反馈</li>
</ul>
</div>
</div>
</body>
</html>CSS样式文件：
body{
background-image:url("2.jpg");
}
/*-------------头部-------------*/
#header{
width:960px;
color:white;
border-bottom:dashed 1px white;
margin:0 auto;
margin-bottom:10px;
}
.logo_title{
float:left;
}
.logo_title h3{
font-size:30px;
margin-top:14px;
font-family:"Adobe Garamond Pro Bold" "宋体";
}
.logo_title p{
font-size:20px;
}
/*---------------------------------*/
.navi{
float:right;
margin-top:66px;
}
.navi a{
color:white;
text-decoration:none;
}
.navi ul {
list-style:none;
}
.navi ul li{
display:inline;
margin-right:8px;
border:1px solid white;
padding:4px 8px;
border-radius:6px;
background-color:rgba(255,255,255,0.15);
}
.clear{
clear:both;
}
/*----------------主体-----------------*/
#wrapper{
width:960px;
margin:0 auto;
margin-bottom:15px;
}
.main{
width:610px;
background-color:white;
border-radius:8px;
float:left;
padding:20px;
}
.item_img{
float:left;
margin:10px;
margin-top:4px;
}
.item_img img{
width:80px;
height:80px;
}
.item_content{
margin-left:100px;
}
.item_content h3{
font-size:22px;
color:#a5612d;
margin:0;
}
.item_info{
font-size:12px;
font-style:italic;
margin:0;
color:#999;
}
.item_desc{
font-size:14px;
margin:0;
color:gray;
margin-top:10px;
padding-left:5px;
border-left:solid 1px #999;
}
.item{
border-bottom:dashed 1px #999;
padding :20px;
}
.sidebar{
width:300px;
background-color:white;
border-radius:8px;
float:right;
padding-top:10px;
}
.author_img img{
width:120px;
height:120px;
border-radius:10px;
}
.author_img{
width:120px;
height:120px;
margin: 0 auto;
}
.author_info{
margin: 10px 10px;
padding:0;
border:solid #ddd 1px;
border-radius:8px;
background-color:#eee;
}
.author_info h4{
margin:0;
padding:0;
text-align:center;
font-weight:bold;
}
.article h3{
font-style:italic;
margin-left:10px;
border-bottom:dashed 1px #aaa;
padding-bottom:4px;
}
.article ul {
list-style:none;
padding:0;
margin-left:40px;
}
.site_info{
border-top :dashed 1px #aaa;
}
.site_info p {
text-align:center;
font-size:12px;
color:gray;
}
/*---------------尾部-----------------*/
#footer{
width:960px;
height:100px;
margin:0 auto;
background-color:bluee;
border-top:dashed white 1px;
}
#footer .left{
color:white;
float:left;
margin-top:10px;
}
#footer .right{
color:white;
float:right;
font-size:14px;
}
#footer .right ul {
margin-top:10px;
list-style:none;
}
#footer .right ul li {
display:inline-block;
margin-right:5px;
}