以qq登录页面为例阐释盒子模型

最新推荐文章于 2024-06-06 14:40:17 发布

xing_ran_ran

最新推荐文章于 2024-06-06 14:40:17 发布

阅读量390

点赞数

本文链接：https://blog.csdn.net/xing_ran_ran/article/details/79732112

版权

什么是盒子模型?

盒子模型即CSS模型框,是用div块标签+css进行网页布局.一个盒子有:外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性.

以qq登录页面为例

分析:(1)此页面可看成一个大的div嵌套3个小的div,如下图所示.

(2)一块标签,要想显示边框的效果,必须指定属性.

一个div显示边框,可以使用boder的简写属性

    border:1px solid #000 ;
    width: 50px;
    height: 50px;

(3)常用的css选择器

1)id选择器

在标签中一定要给定一个id属性,并且指定id属性值

书写格式:

#id属性值{

书写样式;

}

注意事项:

1) 一个标签同时被多个选择器选中,那么id选择器的优先级最高

2)在同一个html页面中,不要给多个标签指定同名id属性,如果指定同名id属性值,那么js的时候,获取标签对象的时候,获取不到:getElementById(“id属性值”) ;

2)类选择器

在一个标签中使用类选择器,要指定一个属性:class属性

书写格式:

.class属性值{

书写样式;

}

注意事项:

在同一个页面下,多个标签可以指定同名的class属性

代码实现如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>qq登录页面</title>
		<style type="text/css">
			/*修饰给主的div*/
			#main{
				
				width: 450px;
				height: 300px;
				/*设置边框*/
				border: 1px solid #000;
				
				/*给它设置它的外边距的简写属性
				 	默认的方向:上 右 下 左
				 * */
				margin: 150px 0 0 420px;
				
				
				/*设置背景图片*/
				background-image: url(img/1.jpg);
				background-repeat: no-repeat;
				background-position: top center;
				
			}
			
			/*给表单用户设置*/
			#userName{
				/*外边距*/
				margin: 60px 0 0 100px;
			}
			
			
			/*给密码宽设置外边距*/
			#userPwd{
				/*外边距*/
				margin: 20px 0 0 100px;
			}
			
			/*给按钮设置*/
			#btn{
				/*外边距*/
				margin: 20px 0 0 150px;
			}
			
			/*给立即注册设置*/
			#InputId{
				/*按钮比较特殊:应该当做一个块,整体设置外边距*/
				margin-left: 30px;
			}
			
			/*给用户名的表单中添加背景图片*/
			#inputUserName{
				background-image: url(img/head.png);
				background-repeat: no-repeat;
				
				/*内边距*/
				padding-left: 30px;
			}
			
			/*给密码框设置背景图片*/
			#inputPwd{
				background-image: url(img/key.jpg);
				background-repeat: no-repeat;
				
				/*内边距*/
				padding-left: 30px;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<form action="#" method="get">
				<div id="userName">
					用户名:<input type="text" id="inputUserName" name="username" />
				</div>
				<div id="userPwd">
					密  码:<input type="password" id="inputPwd" name="pwd" />
				</div>
				<div id="btn">
					<input type="submit" value="提交" /><input type="button" value="立即注册" id="InputId" />
				</div>
			</form>
		</div>
	</body>
</html>

xing_ran_ran

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
以qq登录页面为例阐释盒子模型

什么是盒子模型? 盒子模型即CSS模型框,是用div块标签+css进行网页布局.一个盒子有:外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性.以qq登录页面为例分析:(1)此页面可看成一个大的div嵌套3个小的div,如下图所示.(2)一块标签,要想显示边框的效果,必须指定属性.一个div显示边框,可以使用boder的简写属性 ...
复制链接

扫一扫