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:0;
}a{text-decoration: none;
}/*在css页面中改变ul标签 样式*/
ul {list-style-type:none;padding: 0;
}.clearfix:after{content: '';display:block;clear: both;
}/*blog页面左边栏区*/
.left{width: 20%;background-color: #4d4d4d;float: left;color: #eeeeee;height: 100%;position: fixed;bottom: 0;
}
.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:0;
}.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;
}

效果图：

转载于:https://www.cnblogs.com/chongdongxiaoyu/p/8822984.html

页面练习my blog day51相关推荐

代号记忆之数字和英文总结
0 鸭蛋铃铛 1 蜡烛树衣服 2 鸭子眼镜蛇 3 耳朵 (形状) 山 4 红旗丝寺石 (别和10 搞混) 5 钩子(形状) 老虎 6 口哨袖子 xiu 6谐音 7 拐杖镰刀红旗不能 ...
JavaScript 页面跳转的几种方式
第一种: <script language="JavaScript" type="text/javascript"> ...
html页面跨域提交数据,前端跨域的整理
跨域整理 1. 跨域资源共享 CORS 对于web开发来讲,由于浏览器的同源策略,我们需要经常使用一些hack的方法去跨域获取资源,但是hack的方法总归是hack.直到W3C出了一个标准-CORS- ...
Mezzanine怎样为BLOG创建分级目录
使用Mezzanine制作个人BLOG时,进入ADMIN页面会发现只能简单的添加Blog Post, 所有添加的Blog Post都会在Blog这个页面下显示,但实际情况下,我们往往希望将BLOG进行 ...
傲游浏览器页面广告过滤自定义过滤规则及使用方法不定时更新
使用方法: 1.打开傲游浏览器,打开以下列表中需要过滤广告的域名 2.单击傲游浏览器右下角广告猎手,点击编辑过滤规则 3.将以下列表的规则粘贴到右侧输入框中 4.点击完成,页面会自动刷新,完成后页面广 ...
windows服务器署站点,Windows Server配置学习心得-web服务器的搭建和部署，配置一个BLOG站点...
上星期我们讲了关于windows服务器上常用服务的配置. 为了巩固大家的学习成果,制定了以下一个练习. 要求如下: 1.在虚拟机上,安装一台windows的服务器 4.客户机使用域账号登录 5.svn ...
VUE 返回上一页不刷新页面、重复进入同一页面created重复执行、每次进入页面时都执行created、vue单页面多路由，前进刷新，返回不刷新
每次进入页面时都执行created.前进刷新,返回不刷新思路: 利用 keep-alive与vue-router配合使用 ,判断哪些页面需要每次进入刷新,哪些页面不需要每次进入刷新: keepAli ...
微信小程序之绝对路径、相对路径、返回到某个页面抛弃../../
** 1.绝对路径.相对路径 ** 小程序写了好久了还停留在图片-/-/时代真是out了...抛弃-/-/ 直接写 /images 就OK了! "./":代表目前所在的路径 & ...
next.js_Next.js手册
next.js I wrote this tutorial to help you quickly learn Next.js and get familiar with how it works. ...

页面练习my blog day51

html端：

CSS端：

效果图：

页面练习my blog day51相关推荐

最新文章

热门文章