css栅格样式and简单页脚样式

最新推荐文章于 2025-05-02 00:23:02 发布

痘哥.

最新推荐文章于 2025-05-02 00:23:02 发布

阅读量51

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_50864176/article/details/129542019

版权

css 专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/Css1.css">
</head>
<body>
<div id="Continer">
	<div class="Continer-nav">
		<div class="Continer-Raster">

			<div class="item"><img src="img/1.jpg"><p>1</p></div>
			<div class="item1"><img src="img/1.jpg"><p>2</p></div>
			<div class="item2"><img src="img/1.jpg"><p>3</p></div>
			<div class="item3"><img src="img/1.jpg"><p>4</p></div>
			<div class="item4"><img src="img/1.jpg"><p>1</p></div>
			<div class="item5"><img src="img/1.jpg"><p>2</p></div>
			<div class="item6"><img src="img/1.jpg"><p>3</p></div>
			<div class="item7"><img src="img/1.jpg"><p>4</p></div>

		</div>
	</div>
</div>

<div id="foot">
	<div class="footer">
		<p>版本号 v6.0</p>
	</div>
</div>
</body>
</html>

#Continer {
	width: 100%;
	height: 30%;
}

#Continer .Continer-nav {
	width: 1200px;
	height: 30%;
	margin: 0 auto;
}

#Continer .Continer-Raster {
	/*display：使用grid 将 .Container-Raster 类的元素变为栅格布局*/
	display: grid;
	/*grid-tempalte-columns 设置所需要列*/
	grid-template-columns: 250px 250px 250px 250px;
	/*设置每一项之间的间隔*/
	grid-gap: 5%;
	/*设置行的高度*/
	grid-template-rows: 200px;
	margin: 5%;
	padding: 5%;
	margin: 0 auto;
}

.Continer-Raster img {
	width: 250px;
	height: 200px;
	position: relative;
	top: 0;
	/*transition过渡*/
	transition: .5s;
	border-radius: 2px;
	/*左浮动*/
	float: left;
	margin: 0 auto;
}

.Continer-Raster img:hover {
	top: -3px;
	/*阴影效果*/
	box-shadow: 0px 5px 10px 3px;
}

.Continer-Raster p {
	text-align: center;
}

#foot {
	width: 100%;
	height: 30%;
	min-height: 100px;
	position: relative;
}

#foot .footer {
	width: 100%;
	height: 30%;
	position: absolute;
	bottom: 0px;
	left: 0px;
	border-radius: 3px;
	background: #ddd;
	text-align: center;
}