HTML自我总结(二)
简单列表页面展示
代码
HTML:
<div class="pricing-table">
<div class="col">
<div class="table">
<h2>Regular</h2>
<div class="pop">Popular</div>
<div class="price">
$10
<span>Per Month</span>
</div>
<ul>
<li><strong>2</strong>Websites</li>
<li><strong>10</strong>Email</li>
<li><strong>100 CB</strong>Storage</li>
<li><strong>1</strong>Account</li>
</ul>
<br/>
<a href="#">Buy Now</a>
</div>
</div>
<div class="col">
<div class="table">
<h2>Regular</h2>
<div class="pop">Popular</div>
<div class="price">
$10
<span>Per Month</span>
</div>
<ul>
<li><strong>2</strong>Websites</li>
<li><strong>10</strong>Email</li>
<li><strong>100 CB</strong>Storage</li>
<li><strong>1</strong>Account</li>
</ul>
<br/>
<a href="#">Buy Now</a>
</div>
</div>
<div class="col">
<div class="table">
<h2>Regular</h2>
<div class="pop">Popular</div>
<div class="price">
$10
<span>Per Month</span>
</div>
<ul>
<li><strong>2</strong>Websites</li>
<li><strong>10</strong>Email</li>
<li><strong>100 CB</strong>Storage</li>
<li><strong>1</strong>Account</li>
</ul>
<br/>
<a href="#">Buy Now</a>
</div>
</div>
<div class="col">
<div class="table">
<h2>Regular</h2>
<div class="pop">Popular</div>
<div class="price">
$10
<span>Per Month</span>
</div>
<ul>
<li><strong>2</strong>Websites</li>
<li><strong>10</strong>Email</li>
<li><strong>100 CB</strong>Storage</li>
<li><strong>1</strong>Account</li>
</ul>
<br/>
<a href="#">Buy Now</a>
</div>
</div>
</div>
CSS:
/*列表页模板css*/
.pricing-table{
padding-top: 10%;/*调节与顶部位置*/
max-height: 900px;
margin:auto;
display: flex;/*父div设置该属性,意味弹性布局*/
justify-content: center;/*设置或检索弹性盒子元素在主轴(横轴)方向上左对齐*/
text-align: center;
flex-wrap: wrap;/*规定灵活的项目在必要的时候拆行或拆列*/
}
.col{
flex: 25%;
padding:20px;
max-width:217px;
box-sizing: border-box;/*令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中*/
}
.table{
background: #ffffff;
padding: 30px 10px;
position: relative;
overflow: hidden;
box-shadow: 0 15px 25px rgba(0,0,0,.5);/*产生盒子阴影:x轴偏移,y轴偏移,模糊度,透明色*/
border-radius: 10px;/*使矩形四边圆滑*/
}
.table h2{
text-transform: uppercase;/*字体大写*/
}
.table ul{
margin: 0;
padding: 0;
}
.table ul li{
padding: 10px 0;
list-style: none;/*可去掉li产生的圆点*/
}
.price{
font-size: 40px;
margin-bottom: 20px;/*设置下外距*/
}
.price span{
display: block;/*此元素将显示为块级元素,此元素前后会带有换行符*/
font-size: 14px;
}
.table a{
text-decoration: none;
color: #2c3e50;
border: 2px solid #2c3e50;
font-size: 14px;
padding: 8px 4px;
margin: 10px 0;
border-radius: 10px;/*使矩形四边圆滑*/
transition: 0.5s linear;/**/
}
.table a:hover{
background: #2c3e50;
color: #ffffff;
}
.pop{
background: #2c3e50;
color: #ffffff;
transform: rotate(45deg);/*将div旋转*/
padding: 10px 40px;
position: absolute;
top: 15px;
right: -36px;
}
/*设置屏幕大小改变时,分块比例*/
@media screen and(max-width: 980px){
.col{
flex: 50%;
}
}
@media screen and(max-width: 700px){
.col{
flex: 100%;
}
}
结果