【HTML】CSS基础学习之float浮动块级元素行内元素

| | | | 426

CSS基础学习之float浮动块级元素行内元素

image-20210709114945420

demo8（margin设置代码）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html> 
<head>
    <meta charset="UTF-8">  <!--字符集 -->
    <title>demo8</title>
    <!--float浮动 块级元素 行内元素-->
  	<style>

  		ul{
  			list-style: none;
  		}
  		/*浮动一般做导航*/
  		.nav-left,.nav-left li{
  			float: left;
  			margin-left: 10px;
  		}
  		.nav-right{
  			float: right;
  		}
  		.nav-right li{
  			float: left;
  			margin-left: 10px;
  		}
  		a{text-decoration: none;}
  		/*清楚浮动 clear*/

  	</style>
</head>
<body>
	<ul class="nav-left">
		<li><a href="#">首页</a></li>
		<li><a href="#">新闻</a></li>
		<li><a href="#">工具</a></li>
		<li><a href="#">更新</a></li>
	</ul>
	<ul class="nav-right">
		<li><a href="#">登录</a></li>
		<li><a href="#">注册</a></li>
	</ul>
 </body>
</html>

demo9（行内元素和块级元素display）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html> 
<head>
    <meta charset="UTF-8">  <!--字符集 -->
    <title>demo9</title>
    <!--float浮动 块级元素 行内元素-->
    <style>
    	.demo9,.demo10{
    		height: 100px;
    		width: 100px;
    		border: 1px solid red;
    		display: inline;
    	}
    	span{
    		border: 1px solid red;
    		height: 100px;
    		padding-left: 10px;
    		display: inline-block;
    	}
    </style>
</head>
<body>
	<div class="demo9">
		demo9
	</div>
	<div class="demo10">
		demo10
	</div>
	<!--行内元素-->
	<span>span</span>
	<span>span</span>
	<span>span</span>
	<span>span</span>
	<span>span</span><a href="#">超级链接</a>
 </body>
</html>

我的个人博客

孤桜懶契：http://gylq.github.io

本文标题:【HTML】CSS基础学习之float浮动块级元素行内元素

文章作者:孤桜懶契

发布时间:2021年07月09日 - 11:48:07

最后更新:2021年07月09日 - 11:51:07

原始链接:https://gylq.gitee.io/2021/07/09/%E3%80%90HTML%E3%80%91CSS%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E4%B9%8Bfloat%E6%B5%AE%E5%8A%A8%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------
欢迎光临
❤️
孤桜懶契
请多关照
❤️
❤️