html端：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>我的Blog</title>

    <link rel="stylesheet" href="coler.css">

</head>

<body>

<!--博客页面的左边栏 开始-->

<div class="left">

    <!--头像区域 开始-->

    <div class=" ">

        <div class="head-img">

            <img src="car.jpg" alt="">

        </div>

        <h3>我的Blog</h3>

        <p>这个人很懒，什么都没有留下！</p>

    </div>

    <!--头像区域结束-->

    <!--链接区域 开始-->

    <div class="blog-link">

        <ul>

            <li><a href="">关于我</a></li>

            <li><a href="">微信</a></li>

            <li><a href="">微博</a></li>

        </ul>

    </div>

    <!--链接区域 结束-->

    <!--标签区域 开始-->

    <div class="blog-tags">

        <ul>

            <li><a href="">#HTML</a></li>

            <li><a href="">#CSS</a></li>

            <li><a href="">#JS</a></li>

        </ul>

    </div>

    <!--标签区域 结束-->

</div>

<!--博客以页面的左边栏 结束-->

<!--博客区域的右边栏 开始-->

<div class="right">

    <div class="blog-list">

        <div class="blog-item">

            <!--blog标题-->

            <div class="blog-item-head clearfix">

                <h1 class="blog-title">海燕</h1>

                <span class="blog-date">2018-04-13</span>

            </div>

            <!--blog内容-->

            <div class="blog-item-content">

                在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔！

            </div>

            <!--blog标签区-->

            <div CLASS="blog-item-tag">

                <span>#HTML</span>

                <span>#CSS</span>

            </div>

        </div>

        <div class="blog-item">

            <!--blog标题-->

            <div class="blog-item-head clearfix">

                <h1 class="blog-title">海燕</h1>

                <span class="blog-date">2018-04-13</span>

            </div>

            <!--blog内容-->

            <div class="blog-item-content">

                在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔！

            </div>

            <!--blog标签区-->

            <div CLASS="blog-item-tag">

                <span>#HTML</span>

                <span>#CSS</span>

            </div>

        </div>

        <div class="blog-item">

            <!--blog标题-->

            <div class="blog-item-head clearfix">

                <h1 class="blog-title">海燕</h1>

                <span class="blog-date">2018-04-13</span>

            </div>

            <!--blog内容-->

            <div class="blog-item-content">

                在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔！

            </div>

            <!--blog标签区-->

            <div CLASS="blog-item-tag">

                <span>#HTML</span>

                <span>#CSS</span>

            </div>

        </div>

        <div class="blog-item">

            <!--blog标题-->

            <div class="blog-item-head clearfix">

                <h1 class="blog-title">海燕</h1>

                <span class="blog-date">2018-04-13</span>

            </div>

            <!--blog内容-->

            <div class="blog-item-content">

                在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔！

            </div>

            <!--blog标签区-->

            <div CLASS="blog-item-tag">

                <span>#HTML</span>

                <span>#CSS</span>

            </div>

        </div>

        <div class="blog-item">

            <!--blog标题-->

            <div class="blog-item-head clearfix">

                <h1 class="blog-title">海燕</h1>

                <span class="blog-date">2018-04-13</span>

            </div>

            <!--blog内容-->

            <div class="blog-item-content">

                在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔！

            </div>

            <!--blog标签区-->

            <div CLASS="blog-item-tag">

                <span>#HTML</span>

                <span>#CSS</span>

            </div>

        </div>

        <div class="blog-item">

            <!--blog标题-->

            <div class="blog-item-head clearfix">

                <h1 class="blog-title">海燕</h1>

                <span class="blog-date">2018-04-13</span>

            </div>

            <!--blog内容-->

            <div class="blog-item-content">

                在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔！

            </div>

            <!--blog标签区-->

            <div CLASS="blog-item-tag">

                <span>#HTML</span>

                <span>#CSS</span>

            </div>

        </div>

        <div class="blog-item">

            <!--blog标题-->

            <div class="blog-item-head clearfix">

                <h1 class="blog-title">海燕</h1>

                <span class="blog-date">2018-04-13</span>

            </div>

            <!--blog内容-->

            <div class="blog-item-content">

                在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔！

            </div>

            <!--blog标签区-->

            <div CLASS="blog-item-tag">

                <span>#HTML</span>

                <span>#CSS</span>

            </div>

        </div>

        <div class="blog-item">

            <!--blog标题-->

            <div class="blog-item-head clearfix">

                <h1 class="blog-title">海燕</h1>

                <span class="blog-date">2018-04-13</span>

            </div>

            <!--blog内容-->

            <div class="blog-item-content">

                在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔！

            </div>

            <!--blog标签区-->

            <div CLASS="blog-item-tag">

                <span>#HTML</span>

                <span>#CSS</span>

            </div>

        </div>

        <div class="blog-item">

            <!--blog标题-->

            <div class="blog-item-head clearfix">

                <h1 class="blog-title">海燕</h1>

                <span class="blog-date">2018-04-13</span>

            </div>

            <!--blog内容-->

            <div class="blog-item-content">

                在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔！

            </div>

            <!--blog标签区-->

            <div CLASS="blog-item-tag">

                <span>#HTML</span>

                <span>#CSS</span>

            </div>

        </div>

    </div>

</div>

<!--博客区域的右边栏结束-->

<!--结束内容-->

</body>

<!--结束html-->

</html>

CSS端：

/*

这是Blog页面的CSS文件

2018-04-13

*/

/*公用样式区*/

body {

    margin:;

}

a{

    text-decoration: none;

}

/*在css页面中改变ul标签 样式*/

ul {

    list-style-type:none;

    padding:;

}

.clearfix:after{

    content: '';

    display:block;

    clear: both;

}

/*blog页面左边栏区*/

.left{

    width: 20%;

    background-color: #4d4d4d;

    float: left;

    color: #eeeeee;

    height: 100%;

    position: fixed;

    bottom:;

}

.left a {

    color: rgb(136,136,136);

    font-weight: bold;

}

/*头像*/

.head-img{

    width:128px;

    height:128px;

    border: 5px solid white;

    border-radius: 50%;

    overflow:hidden;

    margin: 20px auto 20px;

}

.head-img>img{

    width:200%;

}

/*left下的所有东西都居中*/

.left *{

    text-align:center;

}

/*link和tags区域*/

.blog-link,

.blog-tags{

    padding:20px 0;

}

.blog-link,

.blog-tags{

    margin: 5px 0;

}

.blog-link a:hover,

.blog-tags a:hover{

    color:white;

}

/*Blog页面右侧区域*/

.right{

    width:80%;

    float:right;

    background-color: #eeeeee;

}

/*blog-list区域*/

.blog-list{

    padding: 0px 20px 15px;

}

.blog-item{

    background-color:white;

    margin:20px 60px 0 0;

}

.blog-item h1{

    margin:;

}

.blog-title{

    float: left;

}

.blog-date{

    float: right;

}

.blog-item-head{

    border-left: 3px solid red;

    padding: 15px;

}

.blog-item-content{

    padding: 15px;

}

.blog-item-tag{

    border-top: 1px solid #eeeeee;

    margin: 15px;

    padding:15px 0;

}

效果图：

页面练习my blog day51的更多相关文章

  1. SharePoint 2013技巧分享系列 - 隐藏Blog和Apps左侧导航菜单

    企业内部网中,不需要员工创建Blog或者创建,安装SharePoint应用,因此需要在员工个人Web页面需要隐藏Blog或者Apps导航菜单, 其步骤设置如下: 该技巧适合SharePoint 201 ...

  2. Laravel 5.2+ 使用url()全局函数返回前一个页面的地址

    注意:文章标题中5.2+表示该文章内容可向上兼容,适用于Laravel版本5.2及更高(目前最新为5.6),但不可向下兼容,即不适用于5.2版本以下.推荐大家花一点点时间,将自己的Laravel更新至 ...

  3. Python 2.7_爬取CSDN单页面利用正则提取博客文章及url_20170114

    年前有点忙,没来的及更博,最近看爬虫正则的部分 巩固下 1.爬取的单页面:http://blog.csdn.net/column/details/why-bug.html 2.过程 解析url获得网站 ...

  4. vue-蒙层弹窗里的内容滚动。外层大页面禁止滚动

      此需求 有两种方法,第一种,这种方法适用于,底层 和弹窗是两个平行的没有关系的两部分.重叠(https://blog.csdn.net/yuhk231/article/details/741717 ...

  5. 一步步开发自己的博客 .NET版（1、基本显示）

    前言 我们每个猿都有一个搭建自己独立博客的梦,我也不例外.以前想 现在想 以后也想.之所以一直迟迟没有着手,是因为难以跨出第一步.每次心里想着,等我以后技术好了再说,然后就没有然后了.以前用过word ...

  6. 一步步搭建自己的博客 .NET版（2、评论功能）

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  7. 一步步开发自己的博客 .NET版（3、注册登录功能）

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  8. 一步步开发自己的博客 .NET版（4、文章发布功能）百度编辑器

    前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做个插件,任何网站上的技术 ...

  9. 一步步开发自己的博客 .NET版（5、Lucenne.Net 和 必应站内搜索）

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

随机推荐

  1. 22.struts2-拦截器.md

    目录 1.执行的流程时序图 1.执行的流程时序图 回顾: Struts配置: * 通配符.动态方法调用 * 全局跳转配置.配置的默认值.常量配置 * Struts核心业务 * 请求数据的自动封装 (p ...

  2. Hibernate学习笔记3.2（Hibernate组建映射）

    1.组建映射 可以存在一个表里面 Husband.java package com.bjsxt.hibernate; import javax.persistence.Embedded; import ...

  3. VC++ 自定义控件的建立及使用方法

    一.VC++定义自定义控件与delphi,VB有些差异. delphi,vb在 file-new-other中建立.vc++在工具栏中就有自定义控件,但必须加入控件类型. 许多书籍都在类向导中建立.我 ...

  4. 使用 COM 类库创建链接桌面快捷方式

    用到的 COM 类库: Windows Script Host Object Model --> Interop.IWshRuntimeLibrary.dll 示例代码: private sta ...

  5. java的特点

    java是一种跨平台.适合于分布式计算机环境的面向对象编程语言.具有以下特性:简单性.面向对象.分布性.解释性.可靠.安全.平台无关.可移植性.高性能.多线程.动态性等特点. 面向过程和面向对象可以用 ...

  6. NTKO OFFICE文档控件

    目录 前言 什么是ntko 准备工作 实战演练 总结 一.前言 Web开发中经常需要用到在线处理office文档的功能,现在市面上有一些常用的Web页面调用显示Office的控件技术,用起来很方便. ...

  7. Parallax Mapping

    [Parallax Mapping] Parallax mapping belongs to the family of displacement mapping techniques that di ...

  8. SVN获取最新代码，完成后续开发

    1.新建一个文件夹,鼠标右键点击文件夹,点击Checkout 2.填写两个路径(项目路径和下载到路径),并确认“ok”

  9. Spring启动异常: cvc-elt.1: Cannot find the declaration of element 'beans'(转)

    Spring启动异常: cvc-elt.1: Cannot find the declaration of element 'beans' 2008-09-07 22:41 今天把在线聊天室代码改了下 ...

  10. oracle学习--循环语句

    oracle学习--循环语句  loop循环: create or replace procedure pro_test_loop is i number; begin i:=0; loop i:=i ...