一、HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主页</title> <link rel="stylesheet" href="css.css"> </head> <body> <div class="blog-left"> <div class="blog-avatar"> <img src=" https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575131916&di=592a828eec171b3954c17ff4da4865f1&imgtype=jpg&er=1&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201303%2F17%2F20130317151109_JseYa.thumb.700_0.jpeg " alt=""> </div> <div class="blog-title"> <p>银魂</p> </div> <div class="blog-info"> <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-tag"> <ul> <li><a href="">二次元</a></li> <li><a href="">动漫</a></li> <li><a href="">Jump</a></li> </ul> </div> </div> <div class="blog-right"> <div class="article-list"> <div class="article-title"> <span class="title">你们这群混蛋！！就这样还能叫“银魂”吗！ 前篇</span> <span class="date">2004/4/2</span> </div> <div class="article-content"> <p>在与天人共处的江户，有一个叫“万事屋”的地方，由拥有武士之魂的男人坂田银时所经营，外加员工志村新八、神乐、以及宠物定春，从做家务到寻人样样精通。有一天，穷困潦倒的加藤健找万事屋帮忙，讲述了自己一半的悲惨经历，接着以欲知后事如何，请先完成委托的方式，让万事屋接下了委托。</p> </div> <div class="article-bottom"> <span>#动漫  </span> <span>#二次元</span> </div> </div> </div> </body> </html>
二、CSS
/*银魂主页*/ /*通用样式*/ body { margin: 0; background-color: #eeeeee; } a { text-decoration: none; } ul { list-style: None; padding-left: 0; } /*左侧样式*/ .blog-left { float: left; width: 20%; height: 100%; background-color: #4e4e4e; position: fixed; top: 0; left: 0; } .blog-avatar { border: 3px solid white; border-radius: 50%; height: 150px; width: 150px; margin: 20px auto; overflow: hidden; } .blog-avatar img { height: 100%; position: relative; left: -20px; } .blog-info, .blog-title { font-size: 14px; color: darkgray; text-align: center; } .blog-title { font-size: 24px; color: darkgray; text-align: center; } .blog-link a, .blog-tag a { color: darkgray; } .blog-link a:hover, .blog-tag a:hover { color: white; } .blog-link ul, .blog-tag ul{ text-align: center; margin: 100px 0; } /*右侧样式*/ .blog-right { float: right; width: 80%; height: 1000px; } .article-list { background-color: white; margin: 20px 40px 20px 10px; box-shadow: 5px 5px 5px rgba(39, 40, 34, 0.5) } .article-title { border-left: 5px solid red; } .article-title .title { font-size: 30px; margin-left: 10px; } .article-title .date { float: right; margin-top: 20px; margin-right: 20px; } .article-content p { margin-left: 10px; text-indent: 24px; } .article-content { border-bottom: 1px solid black; } .article-bottom { padding: 10px 20px 10px; }