小米卡的css写法

最新推荐文章于 2023-01-02 21:27:42 发布

雕琢时光纸戆

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量225

点赞数

本文链接：https://blog.csdn.net/TISRNW/article/details/101163381

版权

先上图

代码

<head>
		<meta charset="UTF-8">
		<title>小米</title>
		<style type="text/css">
			body {
				background-color: gainsboro;
			}
			
			.wrap {
				background-color: white;
				width: 234px;
				height: 300px;
				padding: 20px 0px;
				box-sizing: border-box;
				margin: 0px auto;
			}
			.wrap:hover{
				z-index: 2;
				box-shadow: 0px 15px 30px  rgba(0,0,0,0.1);
				margin-top: -2px;
				transition: .3s;
				
			}
			.wrap .img1 {
				height: 160px;
				width: 160px;
				display: block;
				margin: 0px auto;
				margin-bottom: 24px;
			}
			
			.wrap a {
				color: rgb(51, 51, 51);
				font-size: 14px;
				line-height: 21px;
				display: block;
				width: 100%;
				text-decoration: none;
				text-align: center;
				margin-bottom: 2px;
			}
			
			.wrap .desc {
				color: rgb(176, 176, 176);
				font-size: 12px;
				text-align: center;
				margin-top: 0px;
				margin-bottom: 10px;
			}
			.wrap .price {
				text-align: center;
			}
			.wrap .price .now-price{
				font-size:14px ;
				color: #ff6700;
			}
			.wrap .price del{
				font-size: 14px;
				color: rgb(176,176,176);
				
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<img class="img1" src="img/111.jpg" / width="" height="">
			<a href="">mate100pro宇霸尊享版 </a>
			<p class="desc">晓龙85555684 360du面屏 </p>
			<p class="price"><span class="now-price">1000元 </span>  <del class="">888元</del></p>
				
			

		</div>
	</body>

</html>

效果图
在这里插入图片描述
由于只用到了css没有js 和页面用的是不一样的