CSS+DIV 实现个人网页简单样板

实现如图:

 HTML:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="博客实战">
    <meta name="description" content="htmlcss实战">
    <meta name="autor" content="twilight">

    <title>罗毅峰的作业</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:gray;
    border-bottom:dashed 1px white;
    margin:0 auto;
    margin-bottom:10px;
}

.logo_title{
    float:left;
}

.logo_title h3{
    font-size:30px;
    margin-top:14px;
} 
.logo_title p{
    font-size:20px;
}

/*---------------------------------*/
.navi{
    float:right;
    margin:0 auto;
    margin-top:66px;
    color: red;
}
.navi a{
    color:grey;
    text-decoration:none;
}

.navi ul {
    list-style:none;
}
.navi ul li{
    display:inline;
    margin-right:8px;
    border:1px solid grey;
    padding:4px 8px;
    border-radius:6px;
}
.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:blue;
    border-top:dashed white 1px;
}

#footer .left{
    color:grey;
    float:left;
    margin-top:10px;
}

#footer .right{
    color:grey;
    float:right;
    font-size:14px;

}

#footer .right ul {
    margin-top:10px;
    list-style:none;
}

#footer .right ul li {
    display:inline-block;
    margin-right:5px;
}

 

 

©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页