2021-8-3 CSS

小李要努力学习

于 2021-08-04 19:56:53 发布

阅读量74

点赞数 1

分类专栏：二阶段

本文链接：https://blog.csdn.net/weixin_48400115/article/details/119346929

版权

二阶段专栏收录该内容

19 篇文章 0 订阅

订阅专栏

css全程叫做层叠样式表stylesheet，修饰HTML网页的一门技术，增强网页的展示能力。

主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。

选择器是指在HTML中帮助我们选中想要修饰的标签。
标签名选择器
class选择器
id选择器
分组选择器（将多个选择器选中的元素组合在一起，统一设置样式）
属性选择器

<style type="text/css">
   /* 选中指定的元素 */
   input[type='text']{
       background-color: #6495ED;
   }
</style>

盒子模型

值的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框已经盒子边框和盒子内容的距离都可以设置。

元素类型的补充

块级元素：

默认情况下，块级元素独占一行（div，p，h1-h6）

可以设置宽和高。不设置，默认填满父元素，而高是由内容控制

行内元素

默认情况下，多个行内元素处在同一行

不能设置宽和高

左右外边距、边框、内边距都可以设置，上下外边距设置无效

用户注册练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> </title>
		<style type="text/css">
			input{
				width: 350px;
				height: 30px;
				margin: 7px;
			}
			input[type='button']{
				background-color: red;
				height: 35px;
				font-size: 0.9375rem;
				margin-top: 20px;
			}
			span{
				font-size: 0.0625rem;
				color:#BDBDBD;
				margin-left: 20px;
			}
			#aa{
				margin-left: 8.75rem;
				font-size:1.5625rem;
				padding-bottom: 20px;
			}
			#bb{
				margin-left: 15px;
			}		
		</style>
	</head>
	<body>
		<table border="0px" cellspacing="" cellpadding="">
			<div id="aa">
				用户注册
			</div>
			<tr><td><input type="text" placeholder="用户名" value="" class="1" /></td></tr>
			<tr><td><span>支持中文、字母、数字、“-”、“_”的组合，4-20个字符</span></td></tr>
			<tr><td><input type="password" placeholder="设置密码" value="" class="1" /></td></tr>
			<tr><td><span>支持中文、字母、数字、“-”、“_”的组合，4-20个字符</span></tr>
			<tr><td><input type="password" placeholder="确认密码" value="" class="1" /></td></tr>
			<tr><td><span>两次密码不一致</span></td></tr>
			<tr><td><input type="text" placeholder="验证手机" value="" class="1" /><a href="#">验证邮箱</a></td>
			</tr>
			<tr><td id="bb"><input type="checkbox" src="" style="width: 50px;"/>我已阅读并同意<a href="#">《京淘用户注册协议》</a></td></tr>
			<tr><td><input type="button" src="" value="立即注册" style="color: aliceblue;border: 0px;"/></td></tr>
		</table>
	</body>
</html>

小李要努力学习

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-8-3 CSS

css全程叫做层叠样式表stylesheet，修饰HTML网页的一门技术，增强网页的展示能力。主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。选择器是指在HTML中帮助我们选中想要修饰的标签。标签名选择器 class选择器 id选择器分组选择器（将多个选择器选中的元素组合在一起，统一设置样式）属性选择器<style type="text/css"> /* 选中指定的元素 */ input[typ...
复制链接

扫一扫

专栏目录