4.1css样式表之浮动

最新推荐文章于 2022-07-05 23:46:45 发布

不戴眼镜的眼镜男

最新推荐文章于 2022-07-05 23:46:45 发布

阅读量262

点赞数

分类专栏：前端文章标签： css样式表之浮动

本文链接：https://blog.csdn.net/BossHAO/article/details/101012646

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

4.1css样式表之浮动

描述：元素的浮动
需求：JD登录页面最底部，对超链接进行元素移动，使纵向变为横向！
技能：元素的浮动 float

1.浮动的格式
在style样式表当中，编写float left左浮动以及right右浮动
例如：
2.对无序列表当中的黑点去掉
针对ul标签进行设置 list-style : none
3.针对网页添加空格 ---- 不要直接敲击空格键
特殊字符： 
4.应用的场景
当块级元素(div)以及无序列表等，会按照纵向表示时，可以更改方向，变为横向！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动</title>
		<style type="text/css">
			#div_bottom{
				height: 150px;
				/*border: 1px solid red;*/
			}
			  #bottom_list{
			  	 height: 50px;
			  	/* border: 1px solid blue;*/
			  	 position: relative;
			  	 top: 1px;
			  	 left: 140px;
			  }
			  
		    ul{
		    	list-style: none;
		    }
		    a{
		    	color: #999999;
		    	text-decoration: none;
		    	margin-right: 10px;
		    	font-size: 10px;
		    }
		      a:hover{
		      	 color: red;
		      	 text-decoration: underline;
		      }
		    li{
		    	float: left;
		    }
		    #bottom_content{
		    	font-size: 10px;
		    	color: #999999;
		    	text-align: center;
		    }
		</style>
	</head>
	<body>
		<!--底部最大的div元素-->
		<div id="div_bottom">
			<!--嵌套第一个小div   存储：11个超链接-->
			<div id="bottom_list">
				<!--编写超链接-->
				<ul>
					<li><a href="#">关于我们</a>|&nbsp;&nbsp;&nbsp;</li>
					<li><a href="#">联系我们</a>|&nbsp;&nbsp;&nbsp;</li>
					<li><a href="#">人才招聘</a>|&nbsp;&nbsp;&nbsp;</li>
					<li><a href="#">商家入驻</a>|&nbsp;&nbsp;&nbsp;</li>
					<li><a href="#">广告服务</a>|&nbsp;&nbsp;&nbsp;</li>
					<li><a href="#">手机京东</a>|&nbsp;&nbsp;&nbsp;</li>
					<li><a href="#">友情链接</a>|&nbsp;&nbsp;&nbsp;</li>
					<li><a href="#">销售联盟</a>|&nbsp;&nbsp;&nbsp;</li>
					<li><a href="#">京东社区</a>|&nbsp;&nbsp;&nbsp;</li>
					<li><a href="#">京东工艺</a>|&nbsp;&nbsp;&nbsp;</li>
					<li><a href="#">English Site</a></li>
				</ul>
			</div>
			<!--嵌套第二个小div   存储: 网站的版权信息-->
			<div id="bottom_content">
				Copyright © 2004-2019  京东JD.com 版权所有
			</div>
		</div>
	</body>
</html>

不戴眼镜的眼镜男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4.1css样式表之浮动

4.1css样式表之浮动描述：元素的浮动需求：JD登录页面最底部，对超链接进行元素移动，使纵向变为横向！技能：元素的浮动 float1.浮动的格式在style样式表当中，编写float left左浮动以及right右浮动例如： 2.对无序列表当中的黑点去掉针对ul标签进行设置 list-style : none3.针对网页添加空格 ---- 不要直接敲击空格键特...
复制链接

扫一扫