列表截圖.jpg
<a >查看demo</a>
<html>結構
<body>
<div class="menu-container">
<div class="nav">
<div class="settings"></div>
</div>
<div class="menu">
<ul>
<li><a href="#" target="_blank"><p>Search</p></a></li>
<li><a href="#" target="_blank"><p>Upload</p></a></li>
<li><a href="#" target="_blank"><p>Location</p></a></li>
<li><a href="#" target="_blank"><p>Contacts</p></a></li>
</ul>
</div>
</div>
</body>
<css>樣式
* {
margin:0;
padding:0;
border: 0;
}
body {
background: #A3CABD;
}
.menu-container {
display: block;
width: 300px;
margin: 60px auto ;
background: #ED6B3A; /*設置頭部的橙色為背景色*/
border-radius: 6px;
box-shadow: 3px 3px 15px rgba(0, 0, 0, .1);
position: relative;
}
ul {
list-style: none;
}
.menu-container .nav {
height: 40px; /*橙色部分高度*/
}
.menu-container .nav .settings {
width: 20px;
height: 20px;
background: url(http://i.imgur.com/CLs7u.png);
float: right;
margin: 10px;
}
整個menu-containe的背景色設置為頭部的顏色，往下列表部分利用padding撐開高度并重新設置背景色。
.menu-container .menu ul li {
padding: 11px 10px; ／*撐開列表高度*／
background: #F3F0EF;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 1);
border-top:1px solid rgba(0,0,0,0.1);
cursor: pointer;
text-indent: 10px;
}
.menu-container .menu ul li:last-child {
border-radius: 0 0 6px 6px; ／*恢復底部的圓角*／
}
.menu-container .menu ul li a {
text-decoration: none;
color: #A4A3A3;
font-size: 13px;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 1)
}
.menu-container .menu ul li img {
float: left; ／*圖標向左浮動，其后的文字就可以與圖標在行內對齊*／
margin: -2px 0 0 0 ;
}
.menu-container .menu ul li:hover {
background: #EEEBEA;
border-left: 3px solid #ED6B3A;
}
／*左邊橙色的豎條用左邊框制作*／
簡單的列表，沒有利用復雜屬性，效果卻很可愛。
