Css制作博客首页

温习CSS+DIV,制作一个简单的博客首页,参考su老师资料。

Html代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
<meta name="description" content="this is  a  test ">
<meta  name="keywords" content="key">
<link rel="stylesheet" type="text/css" href="index.css">
<title>have a test </title>
 
</head>
 
<body>
    <div id="head">
        <div class="logo_title">
            <h1>www.howdoit.net site</h1>
            <h2>不积跬步无以至千里,不积小流无以成江海<h2>
        </div>
 
        <div class="navi">
            <ul>    
                <li><a href="">IT</a></li>
                <li><a href="">留言</a></li>
                <li><a href="">关于我们</a></li>
            </ul>
        </div>
 
        <div class="clear"></div>
    </div>
 
    <div id="wrapper">
        <div id="left">
            <div class="item">
                    <div class="item_img">
                        <img src="../item_img.jpg" alt="www.howdoit.net">
                    </div>
                    <div class="item_content">
                        <div class="item_title">
                            WAF—简单问题回答
                        </div>
                        <p class="item_info">Category: Waf问答 标签:WAF的问题</p>
                        <p class="item_desc">1. 问:WAF的网页加速,的缓冲是多少 答:500G划100G放WAF的东西 
2 问:WAF是否支持跨VLA […]</p>
 
                </div>
 
            </div>
 
                <div class="item">
                    <div class="item_img">
                        <img src="../item_img.jpg" alt="www.howdoit.net">
                    </div>
                    <div class="item_content">
                        <div class="item_title">
                            WAF—简单问题回答
                        </div>
                        <p class="item_info">Category: Waf问答 标签:WAF的问题</p>
                        <p class="item_desc">1. 问:WAF的网页加速,的缓冲是多少 答:500G划100G放WAF的东西
 2 问:WAF是否支持跨VLA […]</p>
 
                </div>
 
            </div>
                <div class="item">
                    <div class="item_img">
                        <img src="../item_img.jpg" alt="www.howdoit.net">
                    </div>
                    <div class="item_content">
                        <div class="item_title">
                            WAF—简单问题回答
                        </div>
                        <p class="item_info">Category: Waf问答 标签:WAF的问题</p>
                        <p class="item_desc">1. 问:WAF的网页加速,的缓冲是多少 答:500G划100G放WAF的东西
 2 问:WAF是否支持跨VLA […]</p>
 
                </div>
 
            </div>
 
                <div class="item">
                    <div class="item_img">
                        <img src="../item_img.jpg" alt="www.howdoit.net">
                    </div>
                    <div class="item_content">
                        <div class="item_title">
                            WAF—简单问题回答
                        </div>
                        <p class="item_info">Category: Waf问答 标签:WAF的问题</p>
                        <p class="item_desc">1. 问:WAF的网页加速,的缓冲是多少 答:500G划100G放WAF的东西
 2 问:WAF是否支持跨VLA […]</p>
 
                </div>
 
            </div>
                <div class="item">
                    <div class="item_img">
                        <img src="../item_img.jpg" alt="www.howdoit.net">
                    </div>
                    <div class="item_content">
                        <div class="item_title">
                            WAF—简单问题回答
                        </div>
                        <p class="item_info">Category: Waf问答 标签:WAF的问题</p>
                        <p class="item_desc">1. 问:WAF的网页加速,的缓冲是多少 答:500G划100G放WAF的东西
 2 问:WAF是否支持跨VLA […]</p>
 
                </div>
 
            </div>
                <div class="item">
                    <div class="item_img">
                        <img src="../item_img.jpg" alt="www.howdoit.net">
                    </div>
                    <div class="item_content">
                        <div class="item_title">
                            WAF—简单问题回答
                        </div>
                        <p class="item_info">Category: Waf问答 标签:WAF的问题</p>
                        <p class="item_desc">1. 问:WAF的网页加速,的缓冲是多少 答:500G划100G放WAF的东西 
2 问:WAF是否支持跨VLA […]</p>
 
                </div>
 
            </div>
 
 
 
 
            </div>
        </div>
 
 
        <div id="right">
            <div class="r_top">
                <div class="r_img">
                    <img src="author.jpg">
                </div>
                <div class="des_author">
                    <div class="zjg">
                        zhao_jg
                    </div>
                    <p>关于安全关注娱乐,安全也是圈</p>
                </div>
 
            </div>
            <div class="r_midd">
                <div class="midd_tj">访问统计</div>
                <ul>
                    <li>WEB防护系统介绍 7 views </li>
                    <li>WAF–部署方式 7 views </li>
                    <li>Apache加密目录方法 - 12 views</li>
                    <li>Php 积累与备忘 - 17 views</li>
                    <li>CSS定位 - 7 views - 17 views</li>
                    <li>异常问题  - 17 views</li>
 
 
                </ul>
            </div>
            <div class="r_foot">
                <p>访客 :123123名</p>
                <p>文章:234篇</p>
            </div>
        </div>
        <div class="clear">
        </div>
    </div>
 
    <div id="footer">
        <div class="siteabout">
            <a href="http://www.howdoit.net">Copyright zhaojg的博客 2013</a>
 
        </div>
        <div class="siteinfo">
            Custom Text Right
        </div>
        <div class="clear">
        </div>
    </div>
</body>
</html>

CSS代码如下:

/* CSS Document */
body{
    background-image:url(12.jpg);
    font:"Times New Roman", Times, serif
 
}
.clear{
    clear:both;  
    }
a{
    color:gray;
    text-decoration:none;
}   
#head{
    width:960px;
    margin:auto;
    color:#FFFFFF;
    border-bottom:dashed 1px;
    }
 
#wrapper{
    margin:auto;
    width:960px;
 
 
 
}   
 
#left{
    width:600px;
    background-color:#FFFFFF;
    float:left;
    margin-right:20px;
    border-radius:8px;
    padding:20px;
    }
#right{
    width:300px;
    background-color:#FFFFFF;
    float:left;
    border-radius:8px;
    }
#footer{
    width:960px;
    height:60px;
    margin:auto;
    border-top:dashed 1px white;
    margin-top:20px;
 
 
    }
.logo_title{
    float:left;
    }
.logo_title h1{
font-size:30xp;
 
}   
.logo_title h2{
    font-size:20px;
 
}
 
.navi{
    float:right;
    }   
.navi ul{
    list-style:none;
    margin-top:65px;
        }
.navi ul li{
    display: inline;
    margin-left:20px;
        }   
.navi ul li a{
    color:white;
    border:solid 2px white;
    padding:4px;
    padding-left:15px;
    padding-right:15px;
    border-radius:6px;
    }
.item{
    border-bottom:solid 1.5px #ccc;
    padding-bottom:10px;
    margin-top:15px;
}   
.item_img{
    float:left;
    width:100px;
    }   
 
.item_img img{
    width:80px;
    padding-top:10px;
}   
.item_content{
    padding-left:100px;
 
    }
.item_title{
    font-size:16px;
    color:#a5612d;
    margin:0px;
   }    
.item_info{
    font-size:12px;
    font-style:italic;
    margin:0px;
    color:#999;
}   
.item_desc{
    font-size:14px;
    margin:0px;
    color:gray;
    margin-top:10px;
    border-left:solid 1px #ccc;
    padding-left:10px;
}   
.r_img {
    width:120px;
    margin:auto;
    padding:10px;
 
}
.r_img img{
    width:120px;
    border:solid 1px #ccc;
    border-radius:6px;
}   
.des_author{
    text-align:center;
    border:solid 1px #ccc;
    border-radius:6px;
    background-color:#ddd;
    margin:10px;
 
}
.des_author p{
    font-size:14px;
}
 
.midd_tj{
    font-size:20px;
    font-style:italic;
    border-bottom:dashed 1px #ccc;
 
}
.r_midd ul{
    list-style:none;
 
}
.r_midd ul li{
    color:#777;
    font-size:17px;
    margin-top:10px;
}
.r_foot{
margin:30;
text-align:center;
border-top:solid 1px #ddd;
}
.r_foot p{
    margin:0px;
    margin-top:10px;
    margin-bottom:10px;
    color:gray;
    font-size:15px;
 
}
.siteabout{
    float:left;
    color:white;
}   
.siteinfo{
    float:right;
}

效果图:
31.jpg

图片素材:
32.jpg

33.jpg

标签: css, div