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. C# DataTable使用方法详解--删除表数据

    在项目中常常常使用到DataTable,假设DataTable使用得当,不仅能使程序简洁有用,并且可以提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结. 1.添加引用 1 u ...

  2. Android忽略文件

    转自我自己的博客...Android Studio上传项目到GitHub

  3. 3.AOP入门1.md

    目录 1.定义 1.1基本概念 2. 1.定义 1.1基本概念 AOP:aspect object programing面向切面编程 aop编程的要点在于关注点和切入点 关注点:指的是代码中的重复部分 ...

  4. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  5. SVN 报错“Previous operation has not finished; run 'cleanup' if it was interrupted” 原因及解决方案

    今天遇到的问题 svn无论是执行checkout,commit,update的时候提示需要cleap up,但 svn执行clean up命令时报错“Previous operation has no ...

  6. echart生成饼状图

    //绘制图表. echarts.init(document.getElementById('main')).setOption({ tooltip : { trigger: 'item', //触发类 ...

  7. Eclipse git 冲突合并

    Eclipse有一个git的插件叫EGit,用于实现本地代码和远程代码对比.合并以及提交.但是在本地代码和远程代码有冲突的时候,EGit的处理方案还是有点复杂.今天就彻底把这些步骤给理清楚,并公开让一 ...

  8. 仿造mongodb的存储方式存一些假数据

    //存入数据 $data = json_encode($row); // 过滤 $data = addslashes($data); //读取数据 $falseData = stripslashes( ...

  9. Functional and Class Components

    [Functional and Class Components] The simplest way to define a component is to write a JavaScript fu ...

  10. Shared Preferences

    [Shared Preferences] 1.SharedPreferences  class. Interface for accessing and modifying preference da ...