css练习
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>练习</title>
<style type="text/css">
a{color:#630;font-size:12px;margin:0 8px;text-decoration:none;}
a:hover{color:#c60;text-decoration:underline;cursor: point}
.buy-box{
padding-left:30px;
width:80px;
height:35px;
border:1px #dfdfdf solid;
line-height:35px;
font-size:14px;
background:url(img/buy.png) no-repeat #f9f9f9 10px center;
}
ul li{
/* list-style-type: circle; */
list-style-position:outside;
}
ol li{
list-style-image: url("img/arrow.png");
list-style-position:inside;
}
/* 仿京东左侧菜单 */
div *{padding:0;margin:0;}
div a{text-decoration:none;color:#fff;}
.nav-top{
height:45px;
font-size:16px;
line-height:45px;
padding:0 10px;
background:#B1191A;
color:#fff;
}
div ul{background:#c81623;list-style:none;}
div li{
height:30px;
line-height:30px;
font-size:14px;
padding-left:8px;
color:#fff;
background:url(img/bg.png) no-repeat 195px center;
}
</style>
</head>
<body>
<h4>CSS超链接</h4>
<p><a href="">社科经典</a><a href="">文学名著</a><a href="">政治军事</a></p>
<p><a href="">经济管理</a></p>
<p><a href="">计算机工程</a></p>
<br/>
<h4>CSS超链接，鼠标的样式设置</h4>
<p style="cursor:wait;">等待的结果</p>
<br/>
<h4>背景样式设置</h4>
<div class="buy-box">我的购物车</div>
<br/>
<h4>无序列表</h4>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>西红柿</li>
<li>菠萝</li>
</ul>
<h4>有序列表</h4>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>西红柿</li>
<li>菠萝</li>
</ol>
<br/>
<h4>仿京东左侧菜单</h4>
<div class="nav-box">
<div class="nav-top">全部商品分类</div>
<ul>
<li><a href="">家用电器</a></li>
<li><a href="">手机</a>、<a href="">数码</a>、<a href="">京东通信</a></li>
<li><a href="">电脑</a>、<a href="">办公</a></li>
<li><a href="">家居</a>、<a href="">家具</a>、<a href="">家装</a>、<a href="">厨具</a></li>
<li><a href="">男装</a>、<a href="">女装</a>、<a href="">珠宝</a></li>
<li><a href="">个护化妆</a></li>
<li><a href="">鞋靴</a>、<a href="">箱包</a>、<a href="">钟表</a>、<a href="">奢侈品</a></li>
<li><a href="">运动户外</a></li>
</ul>
</div>
</body>
</html>