寒假第8页作业

原创于 2019-02-12 20:20:03 发布 · 189 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				border: 1px solid blue;
			}
			.text1{
				border: 1x solid gray;
				display: inline-block;
				width: 100%;
				height: 100px;
				background-color: gray;
			}
			ul li{
				list-style: none;
				display: inline-block;
			}
			li a{
				border: 1px solid pink;
				text-decoration: none;
				padding: 20px;
				margin: 15px;
				color: white;
			}
			li a:hover{
				color: blue;
				
			}
			span a{
				border: 1px solid yellow;
				border-radius:20px ;
				font-size: 10px;
			}
			li img{
				border: 1px solid red;
				height: 100px;
				vertical-align: middle;
				margin-right: 80px;
				padding-bottom: ;
			}
		</style>
	</head>
	<body>
		<div class="text1">
			<ul>
				<li><img src="img/logo.png"/></li>
				<li><a href="">功能特权</a></li>
				<li><a href="">游戏特权</a></li>
				<li><a href="">生活特权</a></li>
				<li><a href="">会员活动</a></li>
				<li><a href="">成长体系</a></li>
				<li><a href="">年费专区</a></li>
				<li><a href="">超级会员</a></li>
				<li><span><a>登陆</a></span><button>开通超级会员</button></li>
			</ul>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>彩妆热卖产品列表</title>
		<style>
			body, p, ul, li {
					margin:0;
					padding:0;
			}
			ul, li {
					list-style-type:none;
					background-color: white;
			}
			body{
					background-color:pink;
					font-size:12px;
					width: 270px;
			}
			a{
					text-decoration: none;
					color:gray;
			}
			a span{
					color:white;
					font-weight:bold;
					margin-right: 10px;
					display: inline-block;
					width: 20px;
					height: 20px;
					border-radius: 50%;
					background: grey;
					line-height: 20px;
					text-align: center;
			}
			li{
				border-bottom:1px gray dashed;
				line-height:30px;
				padding-left:2px;
			}
			.title{
					font-size:14px;
					font-weight:bold;
					color:white;
					background-color:red;
					height:35px;
					line-height:35px;
					padding-left:10px;
			}
			li div{
				display: none;
				width:270px;
				background-color:white;
				text-align: center;
				
			}
			a:hover div{
				display: block; 
				color:pink;	
			}
			a:hover span{	
				background: pink;
			}
			a:hover strong{
				color: pink;
			}
			
		</style>
	</head>
	<body>
		<div id="cosmetics">
			<p class="title">大家都喜欢的彩妆</p>
			<ul>
				<li><a href=""><span>1</span><strong>Za姬芮新能真皙美白隔离霜 35g</strong>
				<div><img src="img/icon-1.jpg"alt="Za姬芮新能真皙美白隔离霜"/>
				<p>￥62.0 最近69122人购买</p>
				</div>
				</a></li>
				<li><a href=""><span>2</span><strong>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml</strong>
				<div><img src="img/icon-2.jpg" alt="2 美宝莲精纯矿物奇妙新颜乳霜BB霜"/>
				<p>￥89.00 最近13610人购买</p>
				</div>
				</a></li>
				<li><a href=""><span>3</span><strong>菲奥娜水漾CC霜 40g </strong>
				<div><img src="img/icon-3.jpg" alt="菲奥娜水漾CC霜" />
				<p>￥59.90 最近13403人购买</p>
				</div>
				</a></li>
				<li><a href=""><span>4</span><strong>DHC 蝶翠诗橄榄卸妆油 200ml</strong>
				<div><img src="img/icon-4.jpg" alt="DHC 蝶翠诗橄榄卸妆油"/>
				<p>￥169.00 最近16757人购买</p>
				</div>
				</a></li>
			</ul>
		</div>
	</body>
</html>