页面练习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,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
随机推荐
- Linux性能测试分析命令_top
top命令动态展示系统整体资源和各个进程资源占用状况,是Linux下常用的性能分析工具. top命令语法 使用格式:top [-] [d] [b] [H] [p] [q] [c] [C] [S] [s ...
- GIS案例学习笔记-明暗等高线提取地理模型构建
GIS案例学习笔记-明暗等高线提取地理模型构建 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:针对数字高程模型,通过地形分析,建立明暗等高线提取模型,生成具有 ...
- C++ MFC 改变控件大小和位置
用CWnd类的函数MoveWindow()或SetWindowPos()可以改变控件的大小和位置. void MoveWindow(int x,int y,int nWidth,int nHeight ...
- SQL Server 2008读取域帐户信息
参考:http://www.pawlowski.cz/2011/04/querying-active-directory-sql-server-t-sql/ 1.建立 link server . u ...
- C# 反射赋值
tb_Projects model = new tb_Projects(); model.OwnerId = ; string FieldName = "OwnerId";//字段 ...
- PowerDesigner 设置code不等于name
设置 code不等于name: 工具 - 常规选项 - “Dialog” - "code不等于name",取消选中
- 零基础用Docker部署微服务
1. docker架构 这里的Client和DOCKER_HOST(docker server)都是在本地的,docker仓库Registry是在远程的: Client的docker命令通过Docke ...
- svn转git
在Git Bash 中输入 git-svn clone http://devsvnread.uuzuonline.net/GOT_PRIVATE/server/ --no-metadata -T tr ...
- video 播放本地视屏
var file = document.getElementById('file_video').files[0]; var url = URL.createObjectURL(file); docu ...
- Unity&UGUI
UI:User Interface 用户交互接口,处理用户与程序直接的交互 新建一个UI控件,都会同时新建两个物体: --Canvas:画布,所有的UI控件都必须放到画布上 --EnventSyste ...