<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="布置作业的css.css"> </head> <body> <div class="left"> <div class="touxian"> <img src="https://c-ssl.duitang.com/uploads/item/201711/10/20171110225150_ym2jw.thumb.700_0.jpeg" alt="" class="touxian2"> </div> <div class="title"> <p>这个人很帅</p> <p>他什么都没有留下</p> </div> <div class="info"> <ul> <li><a href="">关于我</a></li> <li><a href="">我的博客</a></li> <li><a href="">我的微博</a></li> </ul> </div> <div class="info2"> <ul> <li><a href="">#python</a></li> <li><a href="">#javaScript</a></li> <li><a href="">#Mysql</a></li> </ul> </div> </div> <div class="right"> <div class="border2"> <div class="title2"> <span class="today">今天好烦呀</span><span class="time">2019-9-10-17.30</span> </div> <div class="info4"> <span>老子要下课吃饭去了</span> </div> <div class="info3"> <span>#python</span><span>#javascript</span> </div> </div> <div class="border2"> <div class="title2"> <span class="today">今天好烦呀</span><span class="time">2019-9-10-17.30</span> </div> <div class="info4"> <span>老子要下课吃饭去了</span> </div> <div class="info3"> <span>#python</span><span>#javascript</span> </div> </div> </div> </body> </html>
/*通用样式*/ body { margin: 0; } ul { margin: 30px; list-style-type:none; padding-left: 0; text-align: center; } a { text-decoration: none; color: white; font-size: 30px; font-weight: bold; } a:hover { color: yellow; } /*左边样式*/ .left { width: 20%; height: 100%; float: left; background-color: gray; position: fixed; } .touxian { width: 200px; height: 200px; border: 3px white solid; border-radius: 50%; overflow: hidden; margin: 10px auto; } .touxian2 { width:100%; } .title p { margin: 10px; font-size: 25px; color: black; text-align: center; } /*右边样式*/ .right { float: right; width: 80%; height: 1000px; background-color: #ff934c; } .border2 { margin: 20px 20px 20px 20px; background-color: white;} .today { font-size: 30px; border-left: red 3px solid; text-indent: 30px; } .time { font-size: 18px; float: right; } .info4 { font-size: 35px; color: gray; text-indent: 30px; border-bottom: black 2px solid; } .info3 { font-size: 20px; color: red; text-indent: 30px; }