寒假第20页作业

最新推荐文章于 2019-08-18 16:11:03 发布

原创最新推荐文章于 2019-08-18 16:11:03 发布 · 229 阅读

CC 4.0 BY-SA版权

1.网页元素排列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品分类列表页</title>
		<style>
			.text1{
				border: 2px solid orange;
				width: 200px;
				height: 700px;
				border-radius:8px;
			}
			a:hover{
				color: red;
			}
			a{
				line-height: 40px;
				font-size: 15px;
				height: 5px;
				font-weight: bold;
				padding-left:60px ;
				box-sizing: border-box;
			}
			a{
				text-decoration: none;
			}
			span{
				border: 1px gray dashed;
				display: block;
				width: 180px;
				border-style: none none dashed none;
				margin: 0 auto;
			}
			div p:nth-of-type(1){
				background: url(img/icon_01.jpg) no-repeat;
				background-position: 5px -4px;
			}
			div p:nth-of-type(2){
				background: url(img/icon_02.jpg) no-repeat;
				background-position: 5px -4px;
			}
			div p:nth-of-type(3){
				background: url(img/icon_03.jpg) no-repeat;
				background-position: 5px -4px;
			}
			div p:nth-of-type(4){
				background: url(img/icon_04.jpg) no-repeat;
				background-position: 5px -4px;
			}
			div p:nth-of-type(5){
				background: url(img/icon_05.jpg) no-repeat;
				background-position: 5px -4px;
			}
			div p:nth-of-type(6){
				background: url(img/icon_06.jpg) no-repeat;
				background-position: 5px -4px;
			}
			div p:nth-of-type(7){
				background: url(img/icon_07.jpg) no-repeat;
				background-position: 5px -2px;
			}
			div p:nth-of-type(8){
				background: url(img/icon_08.jpg) no-repeat;
				background-position: 5px -4px;
			}
			div p:nth-of-type(9){
				background: url(img/icon_09.jpg) no-repeat;
				background-position: 5px -4px;
			}
			div p:nth-of-type(10){
				background: url(img/icon_10.jpg) no-repeat;
				background-position: 5px -4px;
			}
		</style>
	</head>
	<body>
		<div class="text1">
			<p><a href="" class="text2">酒水、饮料</a></p>
			<span></span>
			<p><a href="">进口食品</a></p>
			<span></span>
			<p><a href="">休闲零食</a></p>
			<span></span>
			<p><a href="">地方特产</a>
			<span></span>
			<p><a href="">保健、冲调</a></p>
			<span></span>
			<p><a href="">粮油、生鲜</a></p>
			<span></span>
			<p><a href="">美容洗护</a></p>
			<span></span>
			<p><a href="">清洁洗涤</a></p>
			<span></span>
			<p><a href="">母婴、纸品</a></p>
			<span></span>
			<p><a href="">家居百货</a></p>
			
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品分类列表页</title>
		<style>
			.text1{
				border: 2px solid orange;
				width: 200px;
				height: 700px;
				border-radius:8px;
			}
			a:hover{
				color: red;
			}
			a{
				line-height: 40px;
				font-size: 15px;
				height: 5px;
				font-weight: bold;
				padding-left:60px ;
				box-sizing: border-box;
			}
			a{
				text-decoration: none;
			}
			span{
				border: 1px gray dashed;
				display: block;
				width: 180px;
				border-style: none none dashed none;
				margin: 0 auto;
			}
			div p:nth-of-type(1){
				background: url(img/icon_01.jpg) no-repeat;
				background-position: 5px -4px;
			}
			div p:nth-of-type(2){
				background: url(img/icon_02.jpg) no-repeat;
				background-position: 5px -4px;
			}
			div p:nth-of-type(3){
				background: url(img/icon_03.jpg) no-repeat;
				background-position: 5px -4px;
			}
			div p:nth-of-type(4){
				background: url(img/icon_04.jpg) no-repeat;
				background-position: 5px -4px;
			}
			div p:nth-of-type(5){
				background: url(img/icon_05.jpg) no-repeat;
				background-position: 5px -4px;
			}
			div p:nth-of-type(6){
				background: url(img/icon_06.jpg) no-repeat;
				background-position: 5px -4px;
			}
			div p:nth-of-type(7){
				background: url(img/icon_07.jpg) no-repeat;
				background-position: 5px -2px;
			}
			div p:nth-of-type(8){
				background: url(img/icon_08.jpg) no-repeat;
				background-position: 5px -4px;
			}
			div p:nth-of-type(9){
				background: url(img/icon_09.jpg) no-repeat;
				background-position: 5px -4px;
			}
			div p:nth-of-type(10){
				background: url(img/icon_10.jpg) no-repeat;
				background-position: 5px -4px;
			}
		</style>
	</head>
	<body>
		<div class="text1">
			<p><a href="" class="text2">酒水、饮料</a></p>
			<span></span>
			<p><a href="">进口食品</a></p>
			<span></span>
			<p><a href="">休闲零食</a></p>
			<span></span>
			<p><a href="">地方特产</a>
			<span></span>
			<p><a href="">保健、冲调</a></p>
			<span></span>
			<p><a href="">粮油、生鲜</a></p>
			<span></span>
			<p><a href="">美容洗护</a></p>
			<span></span>
			<p><a href="">清洁洗涤</a></p>
			<span></span>
			<p><a href="">母婴、纸品</a></p>
			<span></span>
			<p><a href="">家居百货</a></p>
			
		</div>
	</body>
</html>