Maison >interface Web >tutoriel HTML >css layout ?人的?梯
css layout ?人的?梯
- WBOYoriginal
- 2016-06-24 12:27:331329parcourir
Div 常用
absolute:??定位
relative:相?定位，?absolute配搭，?定relative通常是父的概念
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW" lang="zh-TW"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=big5" /> 5 <meta http-equiv="Content-Style-Type" content="text/css" /> 6 <title>三?式版面</title> 7 <style type="text/css"> 8 #wrapper { 9 width: 100%; /* ?定???度 */10 }11 #header {12 background-color: #DDDDDD;13 height: 50px;14 }15 #container {16 position: relative;17 margin: 10px 0;18 width: 100%;19 }20 #primary {21 margin: 0 200px; /* ?定左右?界155px */22 background-color: #C7D5ED;23 }24 #secondary {25 position: absolute;26 left: 0px;27 top: 0px;28 width: 145px; /* ?定???度 */29 background-color: #F9CFBA;30 }31 #advertisement {32 position: absolute; /* ?配置方式值指定?absolute */33 right: 0px; /* 指定???右?的距? */34 top: 0px; /* 指定???上方的距? */35 width: 145px; /* ?定???度 */36 background-color: #E5C7ED;37 }38 #footer {39 background-color: #DDDDDD;40 height: 50px;41 }42 </style>43 </head>44 45 <body>46 <div id="wrapper">47 <div id="header"><br /></div>48 <div id="container">49 <div id="primary"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>50 <div id="secondary"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>51 <div id="advertisement"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>52 </div>53 <div id="footer"><br /></div>54 </div>55 </body>56 </html> float: div若是?定者??性，後面的文字?文??，下面的clear上面的float就?正常，?定float就必?要?定 width?性
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW" lang="zh-TW"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=big5" /> 5 <meta http-equiv="Content-Style-Type" content="text/css" /> 6 <title>?作涵?其它??的Box</title> 7 <style type="text/css"> 8 #wrapper { 9 width: 760px;10 }11 #header {12 background-color: #DDDDDD;13 height: 50px;14 }15 #container {16 float: left; /* 指定??向左浮? */17 width: 605px; /* 指定???度 */18 }19 #primary {20 float: right; /* 指定??向右浮? */21 width: 450px;22 margin: 10px 0;23 background-color: #C7D5ED;24 }25 #secondary {26 float: left;27 width: 145px;28 margin: 10px 0 10px 0px; /* 只修改上、下?界的值 */29 background-color: #F9CFBA;30 }31 #advertisement {32 float: right;33 width: 145px;34 margin: 10px 0;35 background-color: #E5C7ED;36 }37 #footer {38 clear: both;39 background-color: #DDDDDD;40 height: 50px;41 }42 </style>43 </head>44 45 <body>46 <div id="wrapper">47 <div id="header"><br /></div>48 <div id="container">49 <div id="primary"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>50 <div id="secondary"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>51 </div>52 <div id="advertisement"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>53 <div id="footer"><br /></div>54 </div>55 </body>56 </html>
margin:容器?的差距，?容器?定width 100%的?候，margin??的，代表容器??有?距到後面的容器?到上一?容器的?值上
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW" lang="zh-TW"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=big5" /> 5 <meta http-equiv="Content-Style-Type" content="text/css" /> 6 <title>以??界?作可自??整?度的??</title> 7 <style type="text/css"> 8 #wrapper { 9 width: 100%; /* 修改??的?度?定 */10 }11 #header {12 background-color: #DDDDDD;13 height: 50px;14 }15 #container {16 float: left;17 width: 100%; /* 修改??的?度?定 */18 margin-right: -145px; /* ?定右?界的值??值 */19 }20 #primary {21 float: right;22 width: 100%; /* 修改??的?度?定 */23 margin: 10px 0 10px -145px; /* ?定左?界的值??值 */24 background-color: #C7D5ED;25 }26 #content {27 margin: 0 155px; /* ?定左右?界 */28 background-color: #CAEDC7;29 }30 #secondary {31 float: left;32 width: 145px;33 margin: 10px 0 10px 0px;34 background-color: #F9CFBA;35 }36 #advertisement {37 float: right;38 width: 145px;39 margin: 10px 0;40 background-color: #E5C7ED;41 }42 #footer {43 clear: both;44 background-color: #DDDDDD;45 height: 50px;46 }47 </style>48 </head>49 50 <body>51 <div id="wrapper">52 <div id="header"><br /></div>53 <div id="container">54 <div id="primary">55 <div id="content"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>56 </div>57 <div id="secondary"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>58 </div>59 <div id="advertisement"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>60 <div id="footer"><br /></div>61 </div>62 </body>63 </html>
出自:css layout ?人的?梯
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：DIV+CSS布局兼容性问题_html/css_WEB-ITnoseArticle suivant：上下左右布局（DIV+CSS）_html/css_WEB-ITnose