我正在学习响应式设计,但我仍然坚持让一大堆css响应。这是一个结帐导航,我想列出要叠加的项目。以下是代码:
HTML
<div class="checkout-wrap">
<ul class="checkout-bar" style="text-decoration:none">
<li class="visited"><a style="text-decoration:none !important" href="">Step 1</a></li>
<li class="last">Setp 2</li>
<li class="last active">Setp 3</li>
<li class="last">Setp 4</li>
<li class="last">Setp 5</li>
</ul>
</div>
CSS
.checkout-wrap {
color: #444;
font-family: 'PT Sans Caption', sans-serif;
margin: 40px auto;
/*max-width: 1200px;*/
position: relative;
}
ul.checkout-bar li {
color: #ccc;
display: block;
font-size: 14px;
padding: 5px 5px;
position: relative;
}
ul.checkout-bar li:before {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background: #ddd;
border: 2px solid #FFF;
border-radius: 50%;
color: #fff;
font-size: 14px;
font-weight: 700;
left: 15px;
line-height: 37px;
height: 35px;
position: absolute;
text-align: center;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
top: 4px;
width: 20px;
z-index: 999;
}
ul.checkout-bar li.active {
color: #77AA4E;
font-weight: bold;
text-decoration:none !important;
}
ul.checkout-bar li.active:before {
background: #77AA4E;
z-index: 99999;
text-decoration:none !important;
}
ul.checkout-bar li.next {
background:#ccc;
font-weight: bold;
text-decoration:none !important;
}
ul.checkout-bar li.next:before {
background:#ccc;
z-index: 99999;
text-decoration:none !important;
}
/*ul.checkout-bar li.next:after {
background:#ccc;
}*/
ul.checkout-bar li.visited {
background: #ECECEC;
color: #57aed1;
z-index: 99999;
}
ul.checkout-bar li.visited:before {
background: #57aed1;
z-index: 99999;
}
ul.checkout-bar li:nth-child(1):before {
content: "1";
}
ul.checkout-bar li:nth-child(2):before {
content: "2";
}
ul.checkout-bar li:nth-child(3):before {
content: "3";
}
ul.checkout-bar li:nth-child(4):before {
content: "4";
}
ul.checkout-bar li:nth-child(5):before {
content: "5";
}
ul.checkout-bar li:nth-child(6):before {
content: "6";
}
ul.checkout-bar li:nth-child(7):before {
content: "7";
}
ul.checkout-bar li:nth-child(8):before {
content: "8";
}
ul.checkout-bar li:nth-child(9):before {
content: "9";
}
ul.checkout-bar a {
color: #57aed1;
font-size: 14px;
/*font-weight: 600;*/
text-decoration: none !important;
}
我怎样才能让它适合移动设备?任何建议表示赞赏。我正在阅读一些文章,但我尝试过的文章尚未产生任何内容。