可以把html页面上每个标签看做是一个盒子。
盒子相关的属性：
宽度和高度（width和height）： 决定这个盒子的容量
内边距（padding）： 盒子边框与内容的距离
边框（border）： 盒子的厚度
外边距（margin）： 盒子与盒子之间的距离
屏幕快照 2017-02-06 上午10.40.31.png
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盒子模型</title>
<style type="text/css">
div{
/*宽度和高度*/
width:100px;
height:100px;
/*设置边框*/
border:3px solid #000;
/*设置内边距*/
/*左内边距*/
padding-left:10px;
/*上内边距*/
padding-top:20px;
}
#div1{
/*下外边距*/
/*margin-bottom:10px;*/
}
#div2{
/*上外边距*/
margin-top:10px;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>
屏幕快照 2017-02-06 上午10.40.59.png
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主页面</title>
</head>
<frameset rows="10%,*,10%">
<frame src="header.html" name="header"/>
<frameset cols="20%,*">
<frame src="menu.html"/>
<frame src="main.html" name="main"/>
</frameset>
<frame src="footer.html"/>
</frameset>
<body>
<!--
frameset 框架集
属性：
cols: 按照列的方向来划分框架
rows: 按照行的方向来划分框架
以上两个属性的值填每个框架的比例或者长度
*号表示其他框架分配完之后剩下的比例
frame 表示一个框架，框架中包含一个html页面
有2个或2个以上的frame就会包含在frameset当中。
注意：
框架标签不能放在body标签中，否则无法显示！！！
-->
</body>
</html>
屏幕快照 2017-02-06 上午10.40.48.png
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css定位</title>
<style type="text/css">
div{
width:100px;
height:100px;
border:3px solid #000;
}
#div1{
background-color:#F00;
}
#div2{
background-color:#00F;
}
#div3{
background-color:#0F0;
/*相对定位*/
/*
position:relative;
left:10px;
top:10px;
*/
/*绝对定位*/
position:absolute;
left:20px;
top:20px;
}
#adv1{
width:300px;
height:300px;
border:3px solid #00F;
background-color:#09F;
/*绝对定位*/
/*position:absolute;*/
/*固定定位*/
position:fixed;
left:450px;
top:200px;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内
网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内
网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="adv1">立刻咨询立刻咨询立刻咨询立刻咨询立刻咨询立刻咨询立刻咨询</div>
</body>
</html>
屏幕快照 2017-02-06 上午10.40.24.png
<head>
<meta http-equiv="Content-Type" content="text/html; 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(../05.%E7%B4%A0%E6%9D%90/1.jpg);
background-repeat:no-repeat;
background-position:top center;
}
/*用户名div*/
#userName{
/*设置外边距*/
margin:60px 0 0 100px;
}
/*密码div*/
#userPwd{
/*设置外边距*/
margin:20px 0 0 100px;
}
/*按钮div*/
#btn{
/*设置外边距*/
margin:20px 0 0 150px;
}
/*注册按钮*/
#regBtn{
margin-left:30px;
}
/*设置用户输入框的背景*/
#nameInput{
background-image:url(../05.%E7%B4%A0%E6%9D%90/head.png);
background-repeat:no-repeat;
/*设置左内边距*/
padding-left:30px;
}
/*设置密码输入框的背景*/
#pwdInput{
background-image:url(../05.%E7%B4%A0%E6%9D%90/key.jpg);
background-repeat:no-repeat;
/*设置左内边距*/
padding-left:30px;
}
</style>
</head>
<body>
<div id="main">
<form>
<div id="userName">
用户名：<input id="nameInput" type="text" name="userName"/>
</div>
<div id="userPwd">
密 码：<input id="pwdInput" type="password" name="userPwd"/>
</div>
<div id="btn">
<input type="submit" value="登陆"/><input type="button" value="立即注册" id="regBtn"/>
</div>
</form>
</div>
</body>
</html>
网友评论