页面练习my blog day51

时间：2022-10-20 21:19:10

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

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

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

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

  2. Laravel 5&period;2&plus; 使用url&lpar;&rpar;全局函数返回前一个页面的地址

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

  3. Python 2&period;7&lowbar;爬取CSDN单页面利用正则提取博客文章及url&lowbar;20170114

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. python运算符重载

    python运算符重载就是在解释器使用对象内置操作前,拦截该操作,使用自己写的重载方法. 重载方法:__init__为构造函数,__sub__为减法表达式 class Number: def __in ...

  2. kvm

    硬件,os,内核模块,用户空间工具,命令行具体参数,日志 [root@localhost ~]# yum install pciutils [root@localhost ~]# lscpu;lspc ...

  3. 剑指Offer 左旋转字符串

    题目描述 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S,请你把其循环左移K位后的序列输出.例如,字符序列S=”abc ...

  4. Servlet连接数据库

    测试连接数据库为MS Sql Server 2008 步骤一:去微软下载sqljdbc_4.0 步骤二:无需安装,解压出来,把sqljdbc4.jar包copy to Tomcat的lib目录下 步骤 ...

  5. fedora19安装jdk

    1.下载安装包 去oracle下载jdk-7u45-linux-i586.rpm 2. 更改权限 #chmod 777jdk-7u45-linux-i586.rpm 3. 安装 #rpm -ivh j ...

  6. &lbrack;LeetCode&rsqb;&lbrack;Python&rsqb;Roman to Integer

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com'https://oj.leetcode.com/problems/roman-t ...

  7. 使用python写天气预告

    先去YY天气注册一个账号,然后就能用API了 http://www.yytianqi.com/ # encoding=utf-8import urllib.requestimport jsonimpo ...

  8. PyCharm安装及使用

    搭建环境 1.win10_X64,其他Win版本也可以. 2.PyCharm版本:Professional-2016.2.3. 搭建准备 1.到PyCharm官网下载PyCharm安装包.   Dow ...

  9. 洛谷 P2671 求和 解题报告

    P2671 求和 题目描述 一条狭长的纸带被均匀划分出了\(n\)个格子,格子编号从\(1\)到\(n\) .每个格子上都染了一种颜色\(color_i\)用\([1,m]\)当中的一个整数表示),并 ...

  10. 第2章—Java内存区域与内存溢出异常

    2.1 概述 总结:本章将从概念上介绍 Java 虚拟机内存的各个区域,讲解这些区域的作用.服务对象以及其中可能产生的问题. 2.2 运行时数据区域 Java 虚拟机在执行 Java 程序的过程中会把 ...

相关文章