（1）PC端規則常用樣式
HTML
<body>
<div class=”rule”>
<div class=”rule-box”>
<h2></h2 >
</div>
</div>
</body>
CSS
body{
min-width:1333px;
}
背景設置背景圖：
.rule{
height:630px;
background:url(‘xxxxxx’) no-repeat top;
}
背景裏面元素居中：
.rule-box{
width:1120px;
margin: 0 auto;
}
設置背景圖片：
h2{
height:50px;
background:url(‘xxxx’) no-repeat 50% 50%;
}
（2）PC遍歷列表使用ul + li (底部線 hover)
HTML
<ul class=” news-item”>
<li>
<span class=”left”>左邊</span><span class=”right”>右邊</span>
</li>
</ul>
CSS
.news-item {
padding: 23px 40px 10px;
height: 223px;
}
li{
border-bottom: 1px solid #9197ff;
font-size: 14px;
height: 38px;
overflow: hidden;
line-height: 38px;
letter-spacing: .4px;
padding-left: 5px;
transition: all .2s;
&:hover {
border-bottom-color: #ffcd63;
}
}
.left{
width: 950px;
overflow: hidden;
white-space: nowrap;
float: left;
text-overflow: ellipsis;
}
.right{
float: right;
margin-right: 5px;
}
(3)Ul下面的li並排
HTML
<ul>
<li>222i>
<li>333i
</ul>
CSS
u{
li{
display: inline-block;
width: 96px;
padding: 8px 0;
margin: 0 10px;
border-bottom: 2px solid #6e75f0;
transition: all .2s;
&:hover {
border-bottom-color: #ffcd63;
}
}
}
(4)Hover展示另一個對話框
HTML
<ul>
<li>
<i>×1</i>
<div class="tip">
<div class="tip-content">
<p>
<span>三星玄龍騎士CTG7</span>
</p>
</div>
</div>
</li>
<li>
<i>×1</i>
<div class="tip">
<div class="tip-content">
<p>
<span>希捷酷玩520系列 </span>
<span>FireCuda SSD</span>
<span>(ZP2000GM3A002)</span>
<span>PCIe4.0遊戲硬盤</span>
</p>
</div>
</div>
</li>
</ul>
CSS
li {
width: 113px;
height: 126px;
float: left;
margin-right: 6px;
position: relative;
i {
font-size: 15px;
position: absolute;
top: 8px;
right: 8px;
line-height: 100%;
}
&:hover {
.tip {
display: block;
}
}
.tip {
display: none;
position: absolute;
left: -28px;
top: -80px;
z-index: 2;
width: 171px;
height: 103px;
background-image: url(../assets/prize-tip.png);
font-size: 14px;
color: #fff;
.tip-content {
position: relative;
width: 153px;
height: 78px;
top: 6px;
left: 9px;
}
p {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
span {
display: block;
white-space: nowrap;
}
}
}
}