页面练习my blog day51
2024-06-09 18:44:40
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. ...
最新文章
- 关于解决arduino SHT1x诸多问题
- 【OI】WERTYU UVa 10082
- 软件构架实践读书笔记二
- iOS地图定位(Map)
- ckeditor回显带标签_Spring Boot中带有CKEditor的AJAX
- vue props 传值 触发事件方法
- xcode左侧不显示工程文件目录，提示NO Filter Results
- 2021新职业教育行业发展研究报告
- es6 原生构造函数的继承
- android数据存放map_Android存储数据到本地文件
- 手机浏览器被强制跳转_Azure front door 强制http redirect to https
- android重写view和viewgroup的区别
- Web编程学习一: 使用JSF来创建Web应用
- c语言if语句判断ab大小,C语言条件语句ifppt课件
- 智慧城管拓展业务系统建设方案
- eclipse没有jsp选项怎么办_电脑鼠标右键没有新建选项 鼠标右键没有新建怎么办
- css3动画正弦曲线,css动画之模拟正余弦曲线的实例分享
- redis事件通知(notify-keyspace-events Ex)
- MQTT消息大小流量消耗测试
- python装饰器–原来如此简单