zoukankan      html  css  js  c++  java

  • 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;
}
    复制代码

    效果图如下：

    程序猿神奇的手，每时每刻，这双手都在改变着世界的交互方式！
    本文转自当天真遇到现实博客园博客，原文链接：http://www.cnblogs.com/XYQ-208910/p/5814814.html，如需转载请自行联系原作者
  • 相关阅读:
    BZOJ2821 作诗(Poetize) 【分块】
    BZOJ2724 蒲公英 【分块】
    Codeforces 17E Palisection 【Manacher】
    BZOJ2565 最长双回文串 【Manacher】
    Codeforces 25E Test 【Hash】
    CODEVS3013 单词背诵 【Hash】【MAP】
    HDU2825 Wireless Password 【AC自动机】【状压DP】
    HDU2896 病毒侵袭 【AC自动机】
    HDU3065 病毒侵袭持续中【AC自动机】
    HDU2222 Keywords Search 【AC自动机】
  • 原文地址：https://www.cnblogs.com/twodog/p/12139169.html
Copyright © 2011-2022 走看看