一、无障碍操作
<div id="barrierfree_container">
<div class="oldStyle container">
</div>
</div>
<script id="barrierfree" src="/module/jslib/accessiblereading/load.js"></script>
二、引用
<link rel="stylesheet" href="images/common.css">
<link rel="stylesheet" href="images/index.css">
<script src="images/jquery.js"></script>
三、块居中
.w {
width: 1200px;
margin: 0 auto;
}
四、banner
/*banner*/
.banner_bg {
width: 100%;
height: 300px;
background("banner.jpg") no-repeat;
background-size: 100% 100%;
五、三角
/*三角图标*/
.sanjiao {
width: 0;
height: 0;
border-top: 7px solid #2053e4;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid transparent;
六、小圆点
/*小圆点*/
.element::before {
position: absolute;
content: '';
width: 6px;
height: 6px;
background-color: #acc2d4;
left: 0;
top: 33px;
border-radius: 50%;
}
七、手机端适配
/*手机端适配*/
/*500px以下显示的*/
@media only screen and (max-width:500px) {
}
/* 480 768 992 1220 1920 */
/*320px以上显示的*/
@media screen and (min-width: 320px) {
}
/*480px以上显示的*/
@media screen and (min-width: 480px) {
}
/*768px以上显示的*/
@media screen and (min-width: 768px) {
}
/*992px以上显示的*/
@media screen and (min-width: 992px) {
}
/*1200px以上显示的*/
@media screen and (min-width: 992px) {
}
八、列表结构
<ul>
<li>
<a href="#">
<span class="list_name"></span>
<span class="list_time"></span>
</a>
</li>
</ul>
九、列表样式
.element ul li {
width: 100%;
height: 60px;
line-height: 60px;
padding: 0 10px;
border-bottom: 1px dashed #2577ff;
}
.element ul li a {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.list_name {
color: #404040;
width: 75%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
