CSS：仿写博客园写一个静态网页

Posted 2020-08-04 程序猿

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS：仿写博客园写一个静态网页相关的知识，希望对你有一定的参考价值。

要求：一个小时仿照博客园的格局，写一个静态的网页，主要采用html+CSS+DIV的布局方式，

新建两个文件:website.html、website.css

website.html代码如下：

<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="ansi">
        <meta name="description" content="this is a website">
        <meta name="keywords" content="website,html,css">
            
        <title>这是一个网页website</title>
        
        <link rel="stylesheet" style="text/css" href="website.css">
        
    </head>
    <body>
        <div id="head">
            <div class="logo_title">
                <h1>this is a example webSite</h1>
                <h2>这是一个website Demo，展示的是博客园页面</h2>
            </div>
            
            <div class="naviBar">
                <ul>
                    <li><a href="">首页</a></li>
                    <li><a href="">闲言碎语</a></li>
                    <li><a href="">我是谁</a></li>
                </ul>
            </div>
            <div class="clearfloat"></div>
        </div>
        
        <div id="wrapper">
            <div class="main">
                <div class="item">
                    <div class="item_image">
                        <img src="leftImage.jpg" alt="this is a contentImage">
                    </div>
                    <div class="item_content">
                        <h3>website Demo测试标题测试标题测试标题测试标题</h3>
                        <p class="item_info">作者:夏远全  发表于:2016年8月28日</p>
                        <p class="item_descri">website Demo测试内容，website Demo测试内容，website Demo测试内容，website Demo测试内容</p>
                    </div>
                </div>
                
                <div class="item">
                    <div class="item_image">
                        <img src="leftImage.jpg" alt="this is a contentImage">
                    </div>
                    <div class="item_content">
                        <h3>website Demo测试标题测试标题测试标题测试标题</h3>
                        <p class="item_info">作者:夏远全  发表于:2016年8月28日</p>
                        <p class="item_descri">website Demo测试内容，website Demo测试内容，website Demo测试内容，website Demo测试内容</p>
                    </div>
                </div>
                
                <div class="item">
                    <div class="item_image">
                        <img src="leftImage.jpg" alt="this is a contentImage">
                    </div>
                    <div class="item_content">
                        <h3>website Demo测试标题测试标题测试标题测试标题</h3>
                        <p class="item_info">作者:夏远全  发表于:2016年8月28日</p>
                        <p class="item_descri">website Demo测试内容，website Demo测试内容，website Demo测试内容，website Demo测试内容</p>
                    </div>
                </div>
                
                <div class="item">
                    <div class="item_image">
                        <img src="leftImage.jpg" alt="this is a contentImage">
                    </div>
                    <div class="item_content">
                        <h3>website Demo测试标题测试标题测试标题测试标题</h3>
                        <p class="item_info">作者:夏远全  发表于:2016年8月28日</p>
                        <p class="item_descri">website Demo测试内容，website Demo测试内容，website Demo测试内容，website Demo测试内容</p>
                    </div>
                </div>
                
                <div class="item">
                    <div class="item_image">
                        <img src="leftImage.jpg" alt="this is a contentImage">
                    </div>
                    <div class="item_content">
                        <h3>website Demo测试标题测试标题测试标题测试标题</h3>
                        <p class="item_info">作者:夏远全  发表于:2016年8月28日</p>
                        <p class="item_descri">website Demo测试内容，website Demo测试内容，website Demo测试内容，website Demo测试内容</p>
                    </div>
                </div>
            </div>
            
            <div class="side">
                <div class="author_info">
                    <div class="author_Image">
                        <img src="authorImage.jpg" alt="this is a author image">
                    </div>
                    
                    <div class="author_descri">
                        <h4>xiayuanquan</h4>
                        <p>website Demo创始人，重度果粉一枚，开源文化的爱好者</p>
                    </div>
                </div>
                
                <div class="top_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>访客:321548名</p>
                    <p>文章:1000篇</p>
                </div>
            
            </div>
            
            <div class="clearfloat"></div>
        </div>
        
        <div id="footer">
            <div class="copyRight">
              <p>2016-2050 CopyRight website Demo Site</p>
            </div>
            
            <div class="site_link">
                <ul>
                    <li><a href="">关于我们</a></li>
                    <li><a href="">联系我们</a></li>
                    <li><a href="">使用条款</a></li>
                    <li><a href="">意见反馈</a></li>
                <ul>
            </div>
        </div>
        
    </body>
</html>

website.css代码如下：

#head{
    color:white;
    width:960px;
    margin:auto;
    border-bottom:dashed 1px white;
    margin-bottom:5px;
}
body{
    font-family:\'Helvetica Neue\',Arial,\'liberation Sans\',FreeSans,\'Hiragino Sans GB\',sans-serif;
    background-image:url(bg.jpg);
}

a{
    color:gray;
    text-decoration:none;
}

.clearfloat{
    clear:both;/*清除左右浮动*/
}

#wrapper{
    width:960px;
    margin:auto;
    margin-top:10px;
}

.main{
    width:650px;
    background-color:white;
    float:left;/*往左浮动*/
    margin-right:20px;
    border-radius:6px;
    padding:15px;
}

.side{
    width:240px;
    background-color:white;
    float:right;/*往右浮动*/
    border-radius:6px;
    padding:10px;
    padding-bottom:10px;
    padding-top:10px;
}

#footer{
    width:960px;
    height:70px;
    margin:auto;
    border-top:dashed 1px white;
    margin-top:20px;
}

.logo_title{
    float:left;
}
.logo_title h1{
    font-size:30px;
}

.logo_title h2{
    font-size:20px;
}

.naviBar{
    float:right;
}
.naviBar ul{
    list-style:none;
    margin-top:78px;
}
.naviBar ul li{
    display:inline-block;
    margin-right:20px;
}

.naviBar ul li a{
    color:white;
    border: solid 1px white;
    padding:4px;
    padding-left:15px;
    padding-right:15px;
    border-radius:4px;
    font-size:10px;
}
.item{
    border-bottom:dashed 1px #ccc;
    padding-bottom:10px;
    margin-top:14px;
}

.item_image{
    float:left;
    width:100px;
}

.item_image img{
    width:80px;
    padding-top:8px;
}
    
.item_content{
    padding-left:100px;
    margin:0;
}

.item_content h3{
    font-size:16px;
    color:#a5612d;
    margin:0;
}

.item_info{
    font-size:10px;
    color:#999;
    font-style:italic;
    margin:0;
}
.item_descri{
    font-size:14px;
    color:gray;
    margin:0;
    margin-top:20px;
    border-left:solid 1px #ccc;
    padding-left:10px;
}

.author_Image{
    width:120px;
    margin:auto;
}

.author_Image img{
    width:120px;
    border:solid 1px #ccc;
    border-radius:6px;
}

.author_descri{
    text-align:center;
    border:solid 1px #ccc;
    border-radius:6px;
    background-color:#eee;
    padding-bottom:15px;
    padding-top:10px;
    margin-top:5px;
}

.author_descri h4{
    margin:0;
    margin-bottom:10px;
}

.author_descri p{
    margin:0;
    font-size:14px;
}

.top_article h3{
    font-size:18px;
    font-style:italic;
    border-bottom:dashed 1px #ccc;
    color:999;
    padding-bottom:5px;
}
.top_article ul{
    margin:0;
    margin-top:10px;
    padding-left:14px;
    list-style:none;
}

.top_article ul li{
    margin:0;
    padding-bottom:8px;
    font-size:14px;
    color:gray;
}

.site_info{
    margin-top:20px;
    border-top:solid 1px #ccc;
}

.site_info p{
    font-size:14px;
    color:gray;
    padding-left:60px;
    margin:0;
    margin-top:10px;
}

.copyRight{
    float:left;
    color:white;
}

.copyRight p{
    margin:0;
    float:left;
    font-size:14px;
    padding-top:10px;
}

.site_link ul{
    margin:0;
    float:right;
    list-style:none;
    padding-top:8px;
}

.site_link ul a {
    color:white;
    font-size:14px;
}

.site_link ul li{
    display:inline-block;
    padding-right:10px;
}

效果图如下：

以上是关于CSS：仿写博客园写一个静态网页的主要内容，如果未能解决你的问题，请参考以下文章

怎么样仿写已知网址的网页？

静态页面复习--用semantic UI仿写豆瓣主页

知乎首页的简单仿写

创建博客园写博客

超文本标记语言

炫酷 CSS 背景效果的 10 个代码片段