实例
仿博客页面
HTML代码css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿博客界面</title> <link rel="stylesheet" href="test.css"> </head> <body> <!--左边界面--> <div class="left-interface"> <!--头像--> <div class="header-img"> <img src="12.jpg" alt=""> </div> <!--博客名称--> <div class="blog-name">若惜together</div> <!--博客信息--> <div class="blog-info">good good study, day day up.</div> <!--博客连接--> <div class="blog-href"> <ul> <!--无序列表--> <li><a href="">关于我</a></li> <li><a href="">微博</a></li> <li><a href="">公众号</a></li> </ul> </div> <!--技能展现--> <div class="blog-skill"> <ul> <li>JavaScript</li> <li>Python</li> <li>Golang</li> </ul> </div> </div> <!--右边界面--> <div class="right-interface"> <!--创建一个div标签，包含全部的内容--> <div class="article-list"> <!--单个的内容--> <div class="article"> <!--内容标题，包含标题和时间两个信息--> <div class="article-title"> <!--标题--> <h1 class="article-name">既然活着，不别抱怨</h1> <!--时间--> <span class="article-date">2019-04-15</span> </div> <!--内容的一些信息--> <div class="article-info"> 一我的活着，何任什么时候，是不能无所事事，更不可枸人忧天，怨声载道，必需要有他该作的事情，惟有那样他的内心才会有所寄托，他才会真正的得到快乐。 </div> <!--内容的属性，归类--> <div class="article-tag"> #HTML #CSS </div> </div> <div class="article"> <!--内容标题，包含标题和时间两个信息--> <div class="article-title"> <!--标题--> <h1 class="article-name">既然活着，不别抱怨</h1> <!--时间--> <span class="article-date">2019-04-15</span> </div> <!--内容的一些信息--> <div class="article-info"> 一我的活着，何任什么时候，是不能无所事事，更不可枸人忧天，怨声载道，必需要有他该作的事情，惟有那样他的内心才会有所寄托，他才会真正的得到快乐。 </div> <!--内容的属性，归类--> <div class="article-tag"> #HTML #CSS </div> </div> <div class="article"> <!--内容标题，包含标题和时间两个信息--> <div class="article-title"> <!--标题--> <h1 class="article-name">既然活着，不别抱怨</h1> <!--时间--> <span class="article-date">2019-04-15</span> </div> <!--内容的一些信息--> <div class="article-info"> 一我的活着，何任什么时候，是不能无所事事，更不可枸人忧天，怨声载道，必需要有他该作的事情，惟有那样他的内心才会有所寄托，他才会真正的得到快乐。 </div> <!--内容的属性，归类--> <div class="article-tag"> #HTML #CSS </div> </div> <div class="article"> <!--内容标题，包含标题和时间两个信息--> <div class="article-title"> <!--标题--> <h1 class="article-name">既然活着，不别抱怨</h1> <!--时间--> <span class="article-date">2019-04-15</span> </div> <!--内容的一些信息--> <div class="article-info"> 一我的活着，何任什么时候，是不能无所事事，更不可枸人忧天，怨声载道，必需要有他该作的事情，惟有那样他的内心才会有所寄托，他才会真正的得到快乐。 </div> <!--内容的属性，归类--> <div class="article-tag"> #HTML #CSS </div> </div> <div class="article"> <!--内容标题，包含标题和时间两个信息--> <div class="article-title"> <!--标题--> <h1 class="article-name">既然活着，不别抱怨</h1> <!--时间--> <span class="article-date">2019-04-15</span> </div> <!--内容的一些信息--> <div class="article-info"> 一我的活着，何任什么时候，是不能无所事事，更不可枸人忧天，怨声载道，必需要有他该作的事情，惟有那样他的内心才会有所寄托，他才会真正的得到快乐。 </div> <!--内容的属性，归类--> <div class="article-tag"> #HTML #CSS </div> </div> <div class="article"> <!--内容标题，包含标题和时间两个信息--> <div class="article-title"> <!--标题--> <h1 class="article-name">既然活着，不别抱怨</h1> <!--时间--> <span class="article-date">2019-04-15</span> </div> <!--内容的一些信息--> <div class="article-info"> 一我的活着，何任什么时候，是不能无所事事，更不可枸人忧天，怨声载道，必需要有他该作的事情，惟有那样他的内心才会有所寄托，他才会真正的得到快乐。 </div> <!--内容的属性，归类--> <div class="article-tag"> #HTML #CSS </div> </div> </div> </div> </body> </html>
CSS代码html
/*公用样式*/ * { /* 通配符选择器，能和任何元素匹配*/ font-family: ".PingFang SC", "Microsoft Yahei", serif ; font-size: 14px; margin: 0; /*用于控制元素与元素之间的距离*/ padding: 0; /*用于控制内容与边框之间的距离*/ } /*去掉a标签的下划线*/ a { text-decoration: none; } /*左边栏 样式*/ .left-interface { width: 20%; /*宽度占20%*/ background-color: #767776; height: 100%; /*高度占100%*/ position: fixed; /*固定左边栏*/ left: 0; top: 0; } /*头像样式*/ .header-img { height: 128px; width: 128px; /*设置边框为5像素，实线，白色的线条*/ border: 5px solid white; /*将border-radius设置为长或高的一半便可获得一个圆形*/ border-radius: 50%; /*将溢出来的多余图片隐藏掉*/ overflow: hidden; /*并将其下移20像素按顺序top,right,bottom,left，这里只用了一个元素，默认后三项为0， 将图片居中*/ margin: 20px auto 0; } /*儿子选择器，header-img下面的img标签*/ .header-img>img { /*设置他们的最大宽度和最大高度，为header-img的宽度和高度*/ max-width: 100%; max-height: 100%; } /*博客名称*/ .blog-name { color: white; font-size: 24px; /*设置加粗字体，设置字体的粗细*/ font-weight: bold; /*对齐元素中的文本，left，right，center(居中)，justify(两端对齐)*/ text-align: center; margin-top: 15px; } /*博客介绍*/ .blog-info { color: white; text-align: center; /*边框虚线*/ border: 2px dashed white; margin: 20px 15px; } /*博客连接和技能*/ .blog-href, .blog-skill { /*分组*/ text-align: center; border: 2px solid white; margin: 20px 20px; } /*去除li标签前面的那个点*/ .blog-href li, .blog-skill li{ list-style-type: none; } .blog-href a { color: #eee; } /*后代选择器*/ /*伪元素选择器，在li标签以前添加内容*/ .blog-skill li:before { content: "#"; } /*右边栏 样式*/ .right-interface { width: 80%; background-color: #dddddd; /*最好让他自适应， 别固定死了*/ height: 100%; float: right; /*让有边栏向右漂，由于左边栏已经固定了，因此不用漂了*/ } /*内容*/ .article { background-color: white; margin-top: 20px; margin-left: 20px; margin-right: 5%; } /*内容标题*/ .article-name { /*使元素同时具备行内元素和块级元素的特色*/ display: inline-block; padding: 15px; border-left: 3px solid red; } /*文章发布时间*/ .article-date { float: right; /*将日期的位置和标题的位置水平对齐*/ margin-top: 15px; margin-right: 10px; } /*内容信息*/ .article-info { background-color: white; /*top, right, bottom, left*/ padding: 10px 10px 5px 20px; } /*内容的属性，归类*/ .article-tag { margin: 10px; padding: 10px; border-top: 1px solid #dddddd; }