可以把html頁面上每個標簽看做是一個盒子。
盒子相關(guān)的屬性：
寬度和高度（width和height）： 決定這個盒子的容量
內(nèi)邊距（padding）： 盒子邊框與內(nèi)容的距離
邊框（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;
/*設(shè)置邊框*/
border:3px solid #000;
/*設(shè)置內(nèi)邊距*/
/*左內(nèi)邊距*/
padding-left:10px;
/*上內(nèi)邊距*/
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>
網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)
網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)
網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)容網(wǎng)站內(nèi)
<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;
/*設(shè)置外邊距*/
/*簡寫屬性*/
margin:150px 0 0 420px;
/*設(shè)置背景圖片*/
background-image:url(../05.%E7%B4%A0%E6%9D%90/1.jpg);
background-repeat:no-repeat;
background-position:top center;
}
/*用戶名div*/
#userName{
/*設(shè)置外邊距*/
margin:60px 0 0 100px;
}
/*密碼div*/
#userPwd{
/*設(shè)置外邊距*/
margin:20px 0 0 100px;
}
/*按鈕div*/
#btn{
/*設(shè)置外邊距*/
margin:20px 0 0 150px;
}
/*注冊按鈕*/
#regBtn{
margin-left:30px;
}
/*設(shè)置用戶輸入框的背景*/
#nameInput{
background-image:url(../05.%E7%B4%A0%E6%9D%90/head.png);
background-repeat:no-repeat;
/*設(shè)置左內(nèi)邊距*/
padding-left:30px;
}
/*設(shè)置密碼輸入框的背景*/
#pwdInput{
background-image:url(../05.%E7%B4%A0%E6%9D%90/key.jpg);
background-repeat:no-repeat;
/*設(shè)置左內(nèi)邊距*/
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>
