<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="lianxi.css"> </head> <body> <div> <div class="left"> <div class="avatar"> <img src="http://pic.qiantucdn.com/58pic/25/99/75/58aa857a493da_1024.jpg" alt=""> </div> <div class="blog-title">我的头像</div> <div class="blog-info">大羊</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-tag"> <ul> <li><a href="">#JavaScript</a></li> <li><a href="">#Python</a></li> <li><a href="">#Golang</a></li> </ul> </div> </div> </div> <div class="right"> <div class="article-list"> <div class="article"> <div class="article-top"> <div class="article-title">海燕<span class="article-date">2018-09-01</span></div> </div> <div class="article-middle"> <p>在苍茫的大海上,狂风卷积这乌云</p> </div> <div class="article-bottom"> <span># HTML</span> <span># CSS</span> </div> </div> </div> <div class="article-list"> <div class="article"> <div class="article-top"> <div class="article-title">海燕<span class="article-date">2018-09-01</span></div> </div> <div class="article-middle"> <p>在苍茫的大海上,狂风卷积这乌云</p> </div> <div class="article-bottom"> <span># HTML</span> <span># CSS</span> </div> </div> </div> <div class="article-list"> <div class="article"> <div class="article-top"> <div class="article-title">海燕<span class="article-date">2018-09-01</span></div> </div> <div class="article-middle"> <p>在苍茫的大海上,狂风卷积这乌云</p> </div> <div class="article-bottom"> <span># HTML</span> <span># CSS</span> </div> </div> </div> <div class="article-list"> <div class="article"> <div class="article-top"> <div class="article-title">海燕<span class="article-date">2018-09-01</span></div> </div> <div class="article-middle"> <p>在苍茫的大海上,狂风卷积这乌云</p> </div> <div class="article-bottom"> <span># HTML</span> <span># CSS</span> </div> </div> </div> <div class="article-list"> <div class="article"> <div class="article-top"> <div class="article-title">海燕<span class="article-date">2018-09-01</span></div> </div> <div class="article-middle"> <p>在苍茫的大海上,狂风卷积这乌云</p> </div> <div class="article-bottom"> <span># HTML</span> <span># CSS</span> </div> </div> </div> </div> </body> </html>
实现一个个人博客主页的简单编辑,css文件如下
body { margin: 0; } /* 消除原网页的默认格式*/ a { text-decoration: none; } /*消除a标签默认的下划线*/ ul { list-style-type: none; margin: 0; padding: 0; } /*清楚ul标签的默认格式*/ .left { position: fixed; left: 0; top: 0; background-color: #4d4d4d; height: 100%; width: 20%; } /*设置左边框栏的样式*/ .avatar { height: 100px; width: 100px; border: 3px solid greenyellow; border-radius: 50%; overflow: hidden; margin: 20px auto;/*设置头像框居中*/ } .avatar>img { width: 100%; height: 100%; }/*将图片在avatar标签中居中显示*/ .blog-title { text-align: center; color: rgb(238,238,238); font-weight: bold; } /*设置名字的位置居中,颜色,加粗*/ .blog-info { text-align: center; margin: 25px 0; font-size: 12px; color: rgb(238,238,238); } /*设置简介字体的位置居中,上下间隔,字体大小和颜色 */ .blog-link li, .blog-tag li { text-align: center; } /*设置(关于,链接)的位置居中 */ .blog-link a, .blog-tag a{ color: rgb(136,136,136); font-size: 14px; } /*设置(关于,链接)的字体颜色,大小*/ .blog-tag { margin-top: 15px; } /*设置(关于)和(链接)直接的间隔大小*/ .blog-link a:hover, .blog-tag a:hover{ color: white; } /*设置(关于)和(链接)的鼠标移动效果*/ .right { width: 80%; float: right; background-color: #eeeeee; } /*设置右边框的位置,颜色*/ .article-list { margin: 20px 10% 20px 20px; } /*设置右边框的外边框与边框距离*/ .article { background-color: white; margin-bottom: 20px; } .article:hover { box-shadow: 0 5px 10px rgba(0,0,0, 0.2); transform: translate3d(0,-3px,0); transition: all 300ms linear; } /*设置没一个海燕标签的阴影属性,3d动画效果,延时显示*/ .article-date { float: right; font-size: 16px; font-weight: normal; } /*设置日期的位置靠右,大小和宽度*/ .article-title { border-left: 5px solid darkred; font-size: 24px; font-weight: bold; padding: 15px 20px; } /*设置(海燕)标题的左边框宽度,实线,颜色,海燕字体大小,距边框距离 */ .article-middle { padding: 10px 20px; } /*设置文字在标签内部中间显示*/ .article-bottom { border-top: 1px solid #eeeeee; margin: 0 20px; padding: 15px 0; } /*设置标签下(#HTML)的顶部是实线,距离边框的位置 */ .article-bottom>span { font-size: 12px; } /*设置#HTML的大小