HTML——浮动布局案例

最新推荐文章于 2024-04-17 16:01:10 发布

Jhinhua

最新推荐文章于 2024-04-17 16:01:10 发布

阅读量1.2k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/piduocheng0577/article/details/104906061

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 去除所有标签默认的编剧 */
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				/* background-color: palegoldenrod; */
				border: solid 1px white;
			}
			#box > h3{
				margin: 10px 0;
			}
			#box .item{
				/* 浮动布局 */
				float: left;
				width: 290px;
				/* background-color: purple; */
				margin-left: 10px;
			}
			#box .clear_float{
				/* background-color: palevioletred;
				height: 50px; */
				/* 清除浮动 */
				clear: both;
			}
			.item_list{
				/* 有一个具体的宽度 再去auto  浏览器才会根据自身的宽度 与该元素的宽度
				 进行自适应距离的*/
				width: 1200px;
				margin: 0 auto;
				/* background-color: plum; */
			}
			/* item中的布局 */
			.item img{
				/* 跟父标签等宽 */
				width: 100%;
			}
			.item h4{
				margin: 10px 0;
				font-size: 20px;
			}
			.item .detail{
				margin-bottom: 10px;
				color: rosybrown;
				font-size: 17px;
			}
			.item .click_num{
				color: blue;
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<h3>热播</h3>
			<div class="item_list">
				<div class="item">
					<img src="../img/img1.png" />
					<h4>太阳的后裔</h4>
					<p class="detail">宋仲基欧巴</p>
					<p class="click_num">点击次数：23456567次</p>
				</div>
				<div class="item">
					<img src="../img/img2.png" />
					<h4>太阳的后裔</h4>
					<p class="detail">宋仲基欧巴</p>
					<p class="click_num">点击次数：23456567次</p>
				</div>
				<div class="item">
					<img src="../img/img3.png" />
					<h4>太阳的后裔</h4>
					<p class="detail">宋仲基欧巴</p>
					<p class="click_num">点击次数：23456567次</p>
				</div>
				<div class="item">
					<img src="../img/img4.png" />
					<h4>太阳的后裔</h4>
					<p class="detail">宋仲基欧巴</p>
					<p class="click_num">点击次数：23456567次</p>
				</div>
				<div class="clear_float"></div>
			</div>
		</div>
	</body>
</html>

Jhinhua

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML——浮动布局案例

案例 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> /* 去除所有标签默认的编剧 */ *{ margin: 0; padding: 0; } ...
复制链接

扫一扫