css(语法--块级,行级,行级块标签)

最新推荐文章于 2024-06-06 16:07:06 发布

boude

最新推荐文章于 2024-06-06 16:07:06 发布

阅读量1k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/boude/article/details/109390644

版权

css语法

块级,行级,行级块标签概念

什么是块级标签？
块级标签：无论内容多少都会独自占据一行的。
例如

、

、
、
、
等。
什么是行级标签？
行级标签：只占自身大小的标签，不会占一行。
例如、、、等。
什么是行级块标签？
例如等

标签类型修改

block ：设置标签为块标签
inline ：设置标签为行级标签
inline-block ：设置标签为行级块标签
none ：隐藏标签（标签将在页面中完全消失）

两种纯净的标签解释(网页布局通常所使用的标签)

div标签
div是块级标签，可以放置任何标签。
div没有任何附加功能，给了什么属性就能变成什么样。
div主要的作用是被用来布局网页。

span标签
span是行级标签
span 没有任何附加功能，给了什么属性就能变成什么样。
span标签被用来选中文档中的文字。

语法实现及示例 div实现百度注册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				background: url(./img/reg_bg_min.jpg);
				width: 100rem;
				height: 900px;
				padding: 100px;
			}
			#div2{
				background-color: white;
				width: 500px;
				
				opacity: 0.8;
				height: 500px;
				margin-left:800px ;
				
				
				border-radius: 10px;
			}
			.class2{
				width: 50px;
			}
			tr{
				font-weight: 300;
			}
			.class4{
				border-radius: 5px;
				width:300px;
				height: 20px;
				padding: 5px;
			}
			.class5{
				height: 35px;
				width: 100px;
			}
			.class6{
				height: 35px;
				width: 300px;
			}
			tr{
				height: 60px;
			}
			a{
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				<table>
					<tr class="class1"style="font-size: 1.875rem;">
						<td colspan="3">欢迎注册</td>
						
					</tr>
					<tr class="class1">
						<td colspan="3" style="font-size: 12px;">已有账号?<a href=""> 登录</a></td>
						
					</tr>
					<tr>
						<td class="class2">用户名</td>
						<td colspan="2" class="class3"><input type="type"placeholder="请设置用户名"class="class4" /></td>
						
					</tr>
					<tr>
						<td class="class2">手机号</td>
						<td colspan="2" class="class3"><input type="type"placeholder="可用于登录和召回密码"class="class4"  /></td>
						
					</tr>
					<tr>
						<td class="class2">密码</td>
						<td colspan="2"class="class3"><input type="password"placeholder="设置登录密码"class="class4"  /></td>
						
					</tr>
					<tr>
						<td class="class2"width="30px">验证码</td>
						<td class="class3" ><input type="type"placeholder="请输入验证码"class="class4" style="width: 180px;" ></input></td>
						<td><input type="button" name="" id="" value="验证码"class="class5" /></td>
						
					</tr>
					<tr align="center">
						
						<td colspan="3"><input type="button" value="注册" class="class6"/></td>
						
					</tr>
					<tr style="font-size: 12px;">
						
						<td colspan="3" ><input type="checkbox"/>
						阅读并接受<a href="../">《百度自带协议》</a><a href="">《百度隐私权保护协议》</a></td>
						
					</tr>
				</table>
			
			
		</div>
		</div>
	</body>
</html>

boude

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css(语法--块级,行级,行级块标签)

css语法块级,行级,行级块标签概念什么是块级标签？块级标签：无论内容多少都会独自占据一行的。例如、、、、等。什么是行级标签？行级标签：只占自身大小的标签，不会占一行。例如、、、等。什么是行级块标签？例如等标签类型修改block ：设置标签为块标签inline ：设置标签为行级标签inline-block ：设置标签为行级块标签none ：隐藏标签（标签将在页面中完全消失）两种纯净的标签解释(网页布局通常所使用的标签)div标签div是块级标签，可以放置任何标签。d
复制链接

扫一扫