简单的图片布局

最新推荐文章于 2020-06-04 14:52:08 发布

mwb310

最新推荐文章于 2020-06-04 14:52:08 发布

阅读量385

点赞数

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/mwb310/article/details/49615415

版权

HTML/CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

图片布局

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	*{margin: 0px;padding: 0px;font-family: "微软雅黑";}
	body{ background: #F2F4ED;}
	/*大秀场*/
	.box{width: 1190px;height: 260px;margin: 0 auto;background: #fff;/*为方便看清布局而添加的背景颜色，可删除*/}
	.showhd h3{float: left;height: 60px;line-height: 60px;padding-right:20px;}
	.showhd h3 a{font-size: 26px;color: #eea400;text-decoration: none;}
	.showhd nav{float: left;margin-top: 25px;}
	.showhd nav a{font-size: 14px;color: #eea400;text-decoration: none;padding-right:10px;}
	.showhd a:hover{text-decoration: underline;}
	.showimg{width: 1190px;height: 180px;overflow: hidden;}
	.showimg div{width: 220px;height: 180px;background: #f90;float: left;margin-right:22.5px; position: relative;}
	.showimg .imgright{width: 220px;height: 180px;background: #f90;float: left; margin-right: 0px;}
	.showimg div img{width: 220px;height: 180px;}
	.showimg div p{background:rgba(0,0,0,0.3);height: 30px;width: 200px;line-height: 30px;font-size:14px;padding: 0 10px;overflow: hidden;bottom: 0px;left: 0px;position: absolute;text-align: center;}
	.showimg div p a{color: #fff;text-decoration: none;}
	.showimg div p a:hover{text-decoration: underline;}
	</style>
</head>
<body>
<section class="box">
<div class="showhd">
	<h3><a href="">大秀场</a></h3>
	<nav>
		<a href="">美食</a><a href="">小苹果</a><a href="">小李子</a><a href="">小葡萄</a>
	</nav>
</div>
<div style="clear:both"></div>
<div class="showimg">
	<div>
		<a href=""><img src="http://p5.qhimg.com/t01260bd7896d75b642.jpg"></a>
		<p><a href="#">我是呀你的小苹果我是呀你的小苹果我是</a></p>
	</div>
	<div>
		<a href=""><img src="http://p5.qhimg.com/t01260bd7896d75b642.jpg"></a>
		<p><a href="#">我是呀你的小苹果我是呀你的小苹果我是</a></p>
	</div>
	<div>
		<a href=""><img src="http://p5.qhimg.com/t01260bd7896d75b642.jpg"></a>
		<p><a href="#">我是呀你的小苹果我是呀你的小苹果我是</a></p>
	</div>
	<div>
		<a href=""><img src="http://p5.qhimg.com/t01260bd7896d75b642.jpg"></a>
		<p><a href="#">我是呀你的小苹果我是呀你的小苹果我是</a></p>
	</div>

	<div class="imgright">
		<a href=""><img src="http://p5.qhimg.com/t01260bd7896d75b642.jpg"></a>
		<p><a href="#">我是呀你的小苹果我是呀你的小苹果我是</a></p>
	</div>
</div>
</section>
</body>
</html>