页面练习my blog day51
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的更多相关文章
- SharePoint 2013技巧分享系列 - 隐藏Blog和Apps左侧导航菜单
企业内部网中,不需要员工创建Blog或者创建,安装SharePoint应用,因此需要在员工个人Web页面需要隐藏Blog或者Apps导航菜单, 其步骤设置如下: 该技巧适合SharePoint 201 ...
- Laravel 5.2+ 使用url()全局函数返回前一个页面的地址
注意:文章标题中5.2+表示该文章内容可向上兼容,适用于Laravel版本5.2及更高(目前最新为5.6),但不可向下兼容,即不适用于5.2版本以下.推荐大家花一点点时间,将自己的Laravel更新至 ...
- Python 2.7_爬取CSDN单页面利用正则提取博客文章及url_20170114
年前有点忙,没来的及更博,最近看爬虫正则的部分 巩固下 1.爬取的单页面:http://blog.csdn.net/column/details/why-bug.html 2.过程 解析url获得网站 ...
- vue-蒙层弹窗里的内容滚动。外层大页面禁止滚动
此需求 有两种方法,第一种,这种方法适用于,底层 和弹窗是两个平行的没有关系的两部分.重叠(https://blog.csdn.net/yuhk231/article/details/741717 ...
- 一步步开发自己的博客 .NET版（1、基本显示）
前言 我们每个猿都有一个搭建自己独立博客的梦,我也不例外.以前想 现在想 以后也想.之所以一直迟迟没有着手,是因为难以跨出第一步.每次心里想着,等我以后技术好了再说,然后就没有然后了.以前用过word ...
- 一步步搭建自己的博客 .NET版（2、评论功能）
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- 一步步开发自己的博客 .NET版（3、注册登录功能）
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- 一步步开发自己的博客 .NET版（4、文章发布功能）百度编辑器
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做个插件,任何网站上的技术 ...
- 一步步开发自己的博客 .NET版（5、Lucenne.Net 和 必应站内搜索）
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
随机推荐
- LeetCode OJ 60. Permutation Sequence
题目 The set [1,2,3,-,n] contains a total of n! unique permutations. By listing and labeling all of th ...
- [PHP]PHP的session机制，配置与高级应用
---------------------------------------------------------------------------------------------------- ...
- 最邻近算法（KNN）识别数字验证码
应用场景 对于简单的数字型验证码的自动识别.前期已经完成的工作是通过切割将验证码图片切割成一个一个的单个数字的图片,并按照对应的数字表征类别进行分类(即哪些图片表示数字7,哪些表示8),将各种数字 ...
- IE （第一部分） 浏览器 中 关于浏览器模式和文本模式的困惑
什么是浏览器模式和文本模式? 经常使用IE开发者工具的同学,肯定见过浏览器模式和文本模式,对于这两个名词,综合相关文档解释如下: 浏览器模式(Browser Mode),用于切换IE针对该网页的默认文 ...
- struts2与spring整合时需要注意的点
首先我们需要明白spring整合struts2中的什么东西,spring中的核心就是IOC和AOP,IOC是对象的容器,AOP是处理动态代理的;比如spring与hibernate整合时就要用到aop ...
- 吴裕雄 13-MySQL UPDATE 查询
以下是 UPDATE 命令修改 MySQL 数据表数据的通用 SQL 语法:UPDATE table_name SET field1=new-value1, field2=new-value2[WHE ...
- WIN7系统 如何上传文件到FTP服务器中
https://zhidao.baidu.com/question/214644671.html
- canvas画布内部重复画圆
<!DOCTYPE html><html><head> <title>canvas example</title> <meta cha ...
- ofstream和ifstream
ofstream(输出流)是从内存到硬盘,ifstream(输入流)是从硬盘到内存. //#include<iostream> #include<fstream> using ...
- depth: working copy\infinity\immediates\files\empty
depth: working copy\infinity\immediates\files\empty 有时间,需要整理下,svn 合并深度这四项:具体的意思.