HTML浮动标签练习

最新推荐文章于 2023-07-23 21:47:25 发布

_xixi_nn

最新推荐文章于 2023-07-23 21:47:25 发布

阅读量434

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_56674431/article/details/120810594

版权

html css js 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

浮动，为了把内容可以横向排列。

float：left | right | none;

每个水平排列的版块，都要浮动！！因为浮动标签不占位！！

因此要清除浮动，防止页面混乱

clear:none | left | right | both ;

常用清除浮动方法：

html:<div class="clears"><\div>

css: .clears{ clear: both;height: 0; line-height: 0; overflow: hidden; font-size:0; }

浮动时，要注意顺序！特别是多张图片在一排时。

（多列，一般左浮动，顺序要排列正确）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="CSS/public.css">
		<link rel="stylesheet" href="CSS/fdstyle.css">
	</head>
	<body>
		<div class="floatclass">
			<div class="title">
				<img src="img/title.jpg"alt="标题" >
			</div>
			<div class="word">
				<div class="word_title">
					重庆泷邦盛汇科技有限公司
				</div>
				<p class="content">重庆泷邦盛汇科技有限公司成立于2014年，以移动互联网产品研发与市场推广，及新型企业投资为主体的企业。旗下拥有华夏消费商平台，微信摇周边等平台。</p>
				<p class="content">信息时代的经济竞争是以消费者为核心，作为一个有眼光和能力的消费者就有必要把自己身边的消费者组织起来，带领大家一起与生产商享财富分配。助人达成目标，创业成就梦想。泷邦盛汇做资源整合者，找到更多的优惠的消费渠道，帮助更多的消费者成为消费商，并且成就他们的创业梦想。</p>
				<div class="word_kuang">
					查看详情
				</div>
			</div>
			<div class="tu">
				<img src="img/company.jpg"alt="右边图" >
			</div>
			<div class="clear">				
			</div>
		</div>
	</body>
</html>

.floatclass{
	width: 1256px;
	height: 461px;
}
.title{
	margin-left: 285px;
}
.word{
	width: 590px;
	height: 263px;
	margin-top: 56px;
	margin-left: 33px;
	float: left;
}
.content{
	font-size: 15px;
	color: #959595;
	text-indent: 2em;
}
.word>.word_title{
	margin-bottom: 31px;
	font-size: 25px;
	font-weight: bolder;
}
.word>.word_kuang{
	width: 79px;
	height: 22px;
	padding: 14px 54px 15px 56px;
	margin-top: 29px;
	background: #f58400;
	color: #fff;
}
.tu{
	margin-top: 39px;
	float: right;
}
.clear{
	clear:both;
}

_xixi_nn

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML浮动标签练习

浮动，为了把内容可以横向排列。float：left |right | none;每个水平排列的版块，都要浮动！！因为浮动标签不占位！！因此要清除浮动，防止页面混乱clear:none | left | right | both ;常用清除浮动方法：html:<div class="clears"><\div>css: .clears{ clear: both;height: 0; line-height: 0; overflow: hidden...
复制链接

扫一扫