web前端第三次作业

最新推荐文章于 2024-05-21 23:21:19 发布

Vanilla-li

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量81

点赞数

文章标签：前端 css css3

本文链接：https://blog.csdn.net/qq_63890458/article/details/129569338

版权

1、完成下图制作：

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.goods{
				width: 220px;
				height: 360px;
				border: 1px solid #f40;
			}
			img{
				width: 220px;
			}
			.decoration>span{
				margin-top: -30px;
				text-align: center;
				display: none;
				position: absolute;
				width: 109.5px;
				height: 30px;
				background-color: #f40;
				bottom: 0;
				
			}
			.decoration>span:first-child{
				border-right: 1px solid #888;
			}
			.same:hover>.decoration>span:first-child{
				display: block;
				position: relative;
				float: left;
				
			}
			.same:hover>.decoration>span:last-child{
				display: block;
				position: relative;
				float: right;
			}
			.price{
				width: 220px;
				
			}
			.price>span{
				line-height: 20px;
				vertical-align: middle;
			}
			.price>span:first-child{
				color: #f40;
				font-size: 20px;
				font-weight: bold;
				
			}
			.price>span:nth-child(2){
				font-size: 12px;
				background-color:#f40;
				color: white;
				padding-right: 1px;
				padding-left: 1px;
			}
			.price>span:last-child{
				float:right;
				color: #888;
				font-size: 12px;
			}
			.des{
				margin-left: 5px;
				margin-right: 5px;
				
			}
			.des>a{
				color: #444;
				font-size: 12px;
				text-decoration: none;
			}
			.des>a:hover{
				text-decoration: underline;
				color: #f40;
			}
			.store>span:first-child>a{
				color: #444;
				font-size: 12px;
			}
			.store>span:last-child{
				float: right;
				color: #888;
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div id="" class="goods">
				<div class="same">
					<img src="../第一次作业/加州公园巡警.png"/>
					<div class="decoration">
						<span>找同款</span>
						<span>找相似</span>
					</div>
				</div>
				<div class="price">
					<span>￥34.56</span>
					<span>包邮</span>
					<span>1亿+人付款</span>
				</div>
				<div class="des">
					<a href="#" >我家坤坤同款卫衣，穿上唱跳rap篮球</a>
				</div>
				<div class="store">
					<span>
						<a href="#">欧兰微旗舰店</a>
					</span>
					<span>上海</span>
				</div>
			</div>
		</div>
	</body>
</html>

效果如下：
在这里插入图片描述

2、小米官方部分页面

在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.des{
				width: 352px;
				height: 255px;
				margin: 0;
			    padding: 3px;
			    font-size: 12px;
			    text-align: center;
			    background: #5f5750;
				float: left;
    			margin-left: 14px;
    			
			}
			.des>ul>li:hover{
				opacity:.7;
			}
			.des>ul>li{
				width: 100px;
				height: 110px;
				float: left;

			}
			.des>ul{
				margin-left: 0;
			}
			.des>ul>li:before{
				top: -1px;
			    left: 6px;
			    width: 64px;
			    height: 1px;
			}
			.des>ul>li>a{
				    display: block;
				    padding-top: 18px;
				    text-overflow: ellipsis;
				    color: #fff;
				    opacity: .7;
				    text-decoration: none;

			}
			ol,li,ul{
				list-style: none;
			}
			.container>div{
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="container">
			
		
			<div class="des">
				<ul>
					<li>
						<a href="#">
							
							<img src="服务保障.png"/>
							<p>服务保障</p>
						</a>
					</li>
					<li>
						<a href="#">
							
							<img src="企业团购.png"/>
							<p>企业团购</p>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="F码通道.png"/>
							<p>F码通道</p>
						</a>
					</li>
				</ul>
				<ul>
					<li>
						<a href="#">
							<img src="米粉卡.png"/>
							<p>米粉卡</p>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="以旧换新.png"/>
							<p>以旧换新</p>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="话费充值.png"/>
							<p>话费充值</p>
						</a>
					</li>
				</ul>
			</div>
			<div>
				<a href="#">
					<img src="图1.png" alt="" />
				</a>
			</div>
			<div>
				<a href="#">
					<img src="图2.png" alt="" />
				</a>
			</div>
			<div>
				<a href="#">
					<img src="图3.png" alt="" />
				</a>
			</div>
		</div>
	</body>
</html>

效果：
在这里插入图片描述