列表截图.jpg
<a href='https://codepen.io/lip90/pen/rmPpEY/'>查看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;
}
／*左边橙色的竖条用左边框制作*／
简单的列表，没有利用复杂属性，效果却很可爱。
