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

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

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

website.html代码如下：

<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="ansi">
        <media name="description" content="this is a website">
        <media 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;
}

效果图如下：

时间： 2024-10-10 07:05:36

CSS：仿写博客园写一个静态网页的相关文章

(转载)记：从百度空间搬家到博客园--写博客要写的舒服

转自http://www.cnblogs.com/syxchina/archive/2011/10/03/2198468.html 一直都有把百度空间搬家的想法,但由于百度空间我将就的用了快3年了,也写了很多文章,交了很多朋友,实在舍不得,但最近实在忍不住百度空间的限制,字数限制.无代码格式化.不支持windows live writer,每次写博客格式图片处理很是伤心,很多时候甚至不写博客,直接记录在doc文件来的方便省心!但想想平时很多只是汲取与互联网谷歌,不贡献点实在说不过去!下定决心,搬

发现一个骗粉丝的人后发现博客园的一个bug

发现一个骗粉丝的人后发现博客园的一个bug 当你点开这篇文章的时候,如果你已经登录博客园账号,那么你自动回成为我的博客园粉丝,因为我加了自动关注的js,这里并不是想骗粉丝,希望博客园能重视这个bug(当然博客园肯定知道这个bug的).明天早上我会删除掉这段js的. 起因>发现一个骗粉丝的人 经过>他是如何实现骗粉丝的 我的一些思考 1.发现一个骗粉丝的人 今天下班,打开博客园的时候看到这篇文章,点了进去,感觉排版不错,自定义的界面体验非常不错,职业性地点击了主页看了看,发现了一个问题,于是乎有

（今天是第一天开始写博客）写一下java集合类使用中容易出现的错误，慢慢积累

java中经常使用到的集合类有:Set,Map,List 关于Set,我犯了好几次的错误: ①Set1=Set2,实际上是让Set1也指向Set2了,如果此时Set2改变,那么Set1也会改变.算是一种地址赋值吧~ 如果想要让Set1中的元素与Set2中的元素相同,应该使用Set1.addAll(Set2). 其实,还有字符串也是一样的. if(str=="#"){...} 这样的写法,是不对的,条件不会成立的,因为"#"的地址与str的地址不一样. 正确:if(s

在博客园写博客

感觉博客园还是不错的,比CSDN看着要舒服些. 在这里写吧~ int main(){ return 0; } int main(){ return 0; } int main(){ return 0; } 1 int main(){ 2 return 0; 3 } 1 int main(){ 2 return 0; 3 }

创建博客园写博客

一.注册: 二.首次[登录]并激活 三.申请书写博客: 点击我的博客 书写开通博客理由:书写完成后,等着通过.开通了就可以写博客了. 原文地址:https://www.cnblogs.com/yclizq/p/11198697.html

博客园添加一个分享的

给自己的博客添加一个分享的按钮吧!! 可以遇见更多志同道合的人呀!!! 使用百度的一键生成按钮就可以了:http://share.baidu.com/code 或者自己写一个也是一样的 <!-- 分享 --> <!-- JiaThis Button BEGIN --> <script type="text/javascript" > var jiathis_config={ siteNum:15, sm:"copy,qzone,tsina,

Word 写 博客园 的文章

飞机迪斯科浪费就但是JFK大量时间付款的老师JFK第十六届付款的老师加分的考生了飞机快点说啦降幅扩大撒赖附近考虑到JFK的历史解放开绿灯是JFK的历史解放开绿灯是JFK的历史JFK但是解放开绿灯是就飞机打瞌睡了激发了肯定是肌肤抵抗力是JFK的历史尽快发了多少解放开绿灯是JFK大家快乐的事激发了肯定是JFK的洛杉矶发了是 原文地址:https://www.cnblogs.com/newber/p/11254507.html

今天突然觉得应该要写博客园了，若干年以后，说不定也是一方大佬，哈哈哈

1: BeanUtils.populate(user,map)直接将map集合里面的数据封存进User对象,极大的简化了操作步骤 2: BeanUtils.populate 出现了丢失存储数据的现象,原因是jsp里面for的值与封存对象的名字不一样 3:${pageContext.request.contextPath} 动态获取资源路径 4:request.setCharacterEncoding("utf-8") 完美的解决了中文乱码问题 5:index.html与index.js

使用博客园写随笔时如何添加超链接

为 PyTorch官网 添加超链接 https://pytorch.org/ PyTorch官网,选中PyTorch官网添加链接, 常规属性,目标 选择「在目前窗口打开超链接」,其他可不填 弹窗属性,勾选 JavaScript 弹出,弹窗URL地址输入 https://pytorch.org/ 高级属性,样式 输入:cursor:pointer; 最后点击插入即可. 原文地址:https://www.cnblogs.com/booturbo/p/11837948.html