2020前端练习 —— 超级无敌简易版博客园
2020-05-14 16:03:13来源:博客园 阅读 ()
@ 2020.5.14
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>welcomeTo大诚小铺</title> <link rel="stylesheet" href="博客园样式.css"> </head> <body> <!-- 先用div划分布局 --> <!-- 左侧栏 --> <div class="blog-left"> <!-- 头像 --> <div class="blog-image"> <img src="鸢尾花.jpg" alt="鸢尾花呀鸢尾花"> </div> <div class="blog-title"> <p>??大橙猫??</p> </div> <div class="blog-info"> <p>人见人爱,花见花开</p> </div> <div class="blog-link"> <ul> <li><a href="https://mp.weixin.qq.com/s/5-VfKF9jlrMIN2NvTOxO7A" title="欢迎光临小铺">大诚小铺</a></li> <li><a href="https://www.cnblogs.com/bigorangecc/" title="一枚假理工女写的博客">博客·园</a></li> <li><a href="https://member.bilibili.com/v2?timestamp=1584441340153#/upload-manager/audios" title="别听我瞎逼逼">B站在此</a></li> </ul> </div> <div class="blog-tag"> <ul> <li>爱沾花惹草的文艺女汉子</li> <li>琴棋书画都不精通</li> <li>想搞开发的假理工女</li> <li>头发茂密数学不好</li> </ul> </div> </div> <!-- 右侧主要内容栏 --> <div class="blog-right"> <div class="article"> <div class="article-title"> <span class="title"><a href="https://mp.weixin.qq.com/s/9PkCZtjt4El5Hsk85zUAEw"> 旧的童年</a></span> <span class="date">2020-3-4</span> </div> <div class="article-body"> <p>曾经热闹一时的果园小屋,如今成为了野草挡风的屏障。</p> </div> <hr> <div class="article-bottom"> <p>[大诚的解忧杂货铺·原创 @作者 铲屎官]</p> </div> </div> <div class="article"> <div class="article-title"> <span class="title"><a href="https://mp.weixin.qq.com/s/2sJQIHEMhLaLWf41IBOh1A"> 星空</a></span> <span class="date">2020-2-26</span> </div> <div class="article-body"> <p>星空之下,仰望繁星的我们,仍是孤独的</p> </div> <hr> <div class="article-bottom"> <p>[大诚的解忧杂货铺·原创 @作者 锦蝶生]</p> </div> </div> <div class="article"> <div class="article-title"> <span class="title"><a href="https://mp.weixin.qq.com/s/2oxSm-3WDwFVXEaKeZSx6Q"> 春天里的人间烟火</a></span> <span class="date">2020-2-15</span> </div> <hr> <div class="article-body"> <p>这是春暖花开的人间烟火</p> </div> <div class="article-bottom"> <p>[大诚的解忧杂货铺·原创 @作者 锦蝶生]</p> </div> </div> <div class="article"> <div class="article-title"> <span class="title"><a href="https://mp.weixin.qq.com/s/ndJqAcrtprDzDNYeCLs6zQ"> 立春一日</a></span> <span class="date">2020-3-4</span> </div> <div class="article-body"> <p>旧物焕新芽,百花待争艳</p> </div> <hr> <div class="article-bottom"> <p>[大诚的解忧杂货铺·原创 @作者 锦蝶生]</p> </div> </div> </div> </body> </html>HTML
/* 这是博客园山寨版的CSS */ /* 通用样式 */ body { margin: 0; background-color: whitesmoke; } a { text-decoration: none; } ul { list-style-type: none; padding-left: 0; } /* 左侧样式 */ .blog-left { float: left; width: 20%; height: 100%; position: fixed; background-color:cadetblue; } .blog-image { height: 200px; width: 200px; border-radius: 50%; border: 5px solid white; /* 控制头像圈的位置 */ margin: 20px auto; /* 溢出属性--防止图像过大,盖住侧栏 */ overflow: hidden; } .blog-image img { /* 完全填充 */ max-width: 100%; } .blog-title,.blog-info { color:whitesmoke; font-size: 14px; text-align: center; } .blog-link,.blog-tag { font-size: 14px; } .blog-link a,.blog-tag a { color: wheat; } .blog-link a:hover,.blog-tag a:hover { color:pink; } .blog-link ul,.blog-tag ul { text-align: center; margin-top: 50px; } /* 右侧样式 */ .blog-right { float: right; width: 80%; height: 1000px; } .article { background-color:gainsboro; margin: 20px 40px 10px 10px; /* 边框阴影 */ box-shadow: 5px 5px 5px cadetblue; } .title { font-size: 25px; } .title a:link { color:forestgreen; } .title a:hover { color:pink; } .title a:active { color:olivedrab; } .title a:visited { color:black; } .date { /* 让其放置在右边 */ float: right; margin: 20px 20px; font-weight: bolder; } /* 设置标题栏 的头饰 */ .article-title { border-left:8px solid forestgreen; /* 设置标题缩进 */ text-indent: 18px; } .article-body { font-size: 18px; text-indent: 30px; } .article-bottom { padding-left: 30px; padding-bottom: 10px; }CSS
原文链接:https://www.cnblogs.com/bigorangecc/p/12891419.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash