```
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="怪默啊">
<title>blog home</title>
<style>
*{
padding: 0;
margin: 0;
}
#bg-pho{
background-image: url("home-bg-2-dark.jpg");
position:fixed;
top: 0;left: 0;
width:100%;height:100%;
z-index:-10;
background-size: cover;
}
h1{
padding-top: 25px;
padding-left: 104px;
font-size: 30px;
color: aliceblue;
}
h2{
padding-top: 10px;
padding-left: 180px;
font-size: 15px;
color:aliceblue;
}
.allBox{
margin-left: auto;
margin-right: auto;
margin-top: 60px;
width: 1110px;
}
.navi{
border-top-left-radius: 15px;
border-top-right-radius: 15px;
margin-left: auto;
margin-right: auto;
margin-top: 27px;
font-size: 13px;
background: #101F26;
height: 60px;
}
.td1{
display: block;
padding-right: 50px;
margin-top: 20px;
margin-left: 30px;
float: left;
}
a{
text-decoration: none;
color: white;
}
ul a{
color:black;
}
Ol a{
color:black;
}/* 这里为什么不可以用相邻选择器*/
.artical a{
color: dimgrey;
}
a:hover{
color:red;
}
.content{
display: flex;
}
.text{
width:70%;
background: white;
}
.artical{
height: 18.8%;
width: 100%;
background:hsla(0,0%,90%,1.00);
margin: 10px;
border-radius: 15px;
}
.titleStyle{
display: flex;
padding-top: 10px;
padding-left: 20px;
}
.aheadTitle{
width: 4.5px;
height: 30px;
background-color:dimgrey;
}
hr{
margin-left: 20px;
}
.textTitle{
margin-left: 40px;
}
.textBody{
font-size: 15px;
margin-top: 10px;
margin-left: 50px;
margin-right: 30px;
}
.textFooter{
font-size: 12px;
float: right;
margin-right: 30px;
margin-top: 20px; /*这里为什么不可以用margin-bottom*/
}
.sideBox{
float: left;
width:30%;
background-color: azure;
}
.readingList{
margin: 40px;
padding: 40px;
width: 100%;
padding-right: 50px;
}
.recommendList{
margin: 40px;
padding: 40px;
width: 100%;
padding-right: 50px;
}
.data{
margin: 40px;
padding: 40px;
width: 100%;
padding-right: 50px;
}
.listText{
margin-top: 5px;
margin-left: 40px;
}
.datamore{
margin-right: 170px;
float:right;
}
.footer{
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
height: 50px;
font-size:13px;
background: #101F26;
}
.footerText{
color: aliceblue;
text-align: center;
padding-top: 15px;
}
.whiteReserve{
height: 40px;
width: auto;
margin-bottom: 10px;
}
.link-to-top-pho{
width: 50px;
height: 50px;
}
.backTop{
position: fixed;
bottom: 30px;
right: 10px;
}
html{
overflow-x: hidden;
}
::-webkit-scrollbar{
width:5px;
}
::-webkit-scrollbar-track{
background-color: azure;
}
::-webkit-scrollbar-thumb{
background-color: gray;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="banner" id="link-to-top">
<h1 id="title1"><a href="#">北方的国</a></h1>
<h2>身体和灵魂总要有一个在路上</h2>
</div>
<div class="allBox">
<div class="navi" >
<table>
<tr>
<td class="td1"><a href="#">首页</a></td>
<td class="td1"><a href="#">标签</a></td>
<td class="td1"><a href="#">分类</a></td>
<td class="td1"><a href="#">关于我</a></td>
</tr>
</table>
</div>
<div class="mainly">
<div class="content">
<div class="text">
<div class="artical">
<div class="titleStyle">
<div class="aheadTitle"></div>
<h3 class="textTitle"><a href="#">容器折叠与清除浮动</a></h3>
</div>
<hr>
<p class="textBody">摘要：过去，浮动的行为经常受到浏览器bug的干扰，特别是在IE6和IE7中。幸亏这些浏览器已经淡出市场，我们不必再担心那些bug了。现在我们可以保证各种浏览器对浮动的处理是一致的。但是浮动仍有一些行为会让你措手不及。这些并不是bug，而是因为浮动严格遵循了标准。让我们看看浮动如何工作，以及怎么调整浮动的行为来实现理想的布局。<a href="#">>>></a></p>
<div class="textFooter">
<span>2020-09-21 </span><span>© 怪默 </span>
<span>阅读(9565) </span><span>收藏(753)</span>
</div>
</div>
<div class="artical">
<div class="titleStyle">
<div class="aheadTitle"></div>
<h3 class="textTitle"><a href="#">出乎意料的浮动陷阱</a></h3>
</div>
<hr>
<p class="textBody">摘要：现在页面里的白色容器已经能够包含浮动的媒体元素了，但是出现了另一个问题：四个媒体盒子没有如与预期那样均匀地占据两行。虽然前两个盒子("Strength"和"Cadence"符合预期，但是第三个盒子("Change it up")出现再了右边，也就是第二个盒子的下方，导致第一个盒子下面出现了一片非常大的空白。这是因为浏览器会将浮动元素<a href="#">>>></a></p>
<div class="textFooter">
<span>2020-09-23 </span><span>© 怪默 </span>
<span>阅读(8346) </span><span>收藏(634)</span>
</div>
</div>
<div class="artical">
<div class="titleStyle">
<div class="aheadTitle"></div>
<h3 class="textTitle"><a href="#">网格系统</a></h3>
</div>
<hr>
<p class="textBody">摘要：现在整个页面的布局已经创建好了，但是还存在一些不足。最重要的问题是，无法轻松地复用样式表中的内容。现在媒体对象的宽度是50%，因此一行有两个元素。如果想要复用前面的设计，但需要一行放三个元素，那又该怎么办呢？一种比较普遍的做法是借助网格系统提高代码的可复性。网格系统提供了一系列的类名，可添加到标记中，<a href="#">>>></a></p>
<div class="textFooter">
<span>2020-09-24 </span><span>© 怪默 </span>
<span>阅读(6357) </span><span>收藏(345)</span>
</div>
</div>
<div class="artical">
<div class="titleStyle">
<div class="aheadTitle"></div>
<h3 class="textTitle"><a href="#">流式布局</a></h3>
</div>
<hr>
<p class="textBody">摘要：响应式设计的第三个也是最后一个原则是流式布局(fluid layout)。流式布局，有时候被称作液体布局(liquid layout)，指的是使用的容器随视口宽度而变化。它跟固定布局相反，固定布局的列都是用px或者em单位定义。固定容器(比如，设定了width: 800px的元素)在小屏上回超出视口范围，导致需要水平滚动条，而流式布局<a href="#">>>></a></p>
<div class="textFooter">
<span>2020-09-26 </span><span>© 怪默 </span>
<span>阅读(5348) </span><span>收藏(283)</span>
</div>
</div>
<div class="artical">
<div class="titleStyle">
<div class="aheadTitle"></div>
<h3 class="textTitle"><a href="#">显示和隐式网格</a></h3>
</div>
<hr>
<p class="textBody">摘要：在某些场景下，你可能不清楚把元素放在网格的哪个位置上。当处理大量的网格元素时，挨个指定元素的位置未免不太方便。当元素是从数据库获取时，元素的个数可能时未知的。在这些情况下，以一种宽松的方式定义网格可能更合理，剩下的交给布局算法来放置网格元素。这事需要用到隐式网格(implicit grid)。使用gid-template- * 属性定义网格轨道时，<a href="#">>>></a></p>
<div class="textFooter">
<span>2020-09-29 </span><span>© 怪默 </span>
<span>阅读(3546) </span><span>收藏(234)</span>
</div>
</div>
</div>
<div class="sideBox">
<div class="readingList">
<h4><b>阅读排行榜</b></h4>
<ol>
<li class="listText"><a href="#">容器折叠与清除浮动</a></li>
<li class="listText"><a href="#">出乎意料的"浮动陷阱"</a></li>
<li class="listText"><a href="#">媒体对象和BFC</a></li>
<li class="listText"><a href="#">网格系统</a></li>
<li class="listText"><a href="#">流式布局</a></li>
<li class="listText"><a href="#">响应式图片</a></li>
<li class="listText"><a href="#">CSS方法论</a></li>
<li class="listText"><a href="#">非动画属性</a></li>
</ol>
</div>
<div class="recommendList">
<h4><b>推荐排行榜</b></h4>
<ul>
<li class="listText"><a href="#">容器折叠与清除浮动</a></li>
<li class="listText"><a href="#">显示与隐式网格</a></li>
<li class="listText"><a href="#">出乎意料的"浮动陷阱"</a></li>
<li class="listText"><a href="#">CSS方法论</a></li>
</ul>
</div>
<div class="data">
<h4><b>日期索引</b></h4>
<ul>
<li class="listText"><a href="#">2020.09.29</a></li>
<li class="listText"><a href="#">2020.09.26</a></li>
<li class="listText"><a href="#">2020.09.24</a></li>
<li class="listText"><a href="#">2020.09.23</a></li>
<li class="listText"><a href="#">2020.09.21</a></li>
<li class="listText"><a href="#">2020.09.17</a></li>
<p class="datamore"><a href="#"><sub>>>></sub></a></p>
</ul>
</div>
</div>
</div>
<div class="footer">
<p class="footerText">Copyright © 2020 <a href="#">怪默</a> 版权所有</p>
</div>
</div>
</div>
<div id="bg-pho"></div>
<div class="whiteReserve"></div>
<div class="backTop"><a href="#link-to-top"><img class="link-to-top-pho" src="link-to-top.png" alt="#"></a></div>
</body>
</html>
```
