search

Home >Web Front-end >HTML Tutorial >css layout ?human?ladder

css layout ?human?ladder

WBOY
WBOYOriginal
2016-06-24 12:27:331349browse

Div commonly used

absolute: Positioning

relative: relative positioning, absolute matching, relative is usually the concept of the parent

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: If the div is determined by nature, the following text is text, and the float above the clear below is normal, and the float must be determined. To set the width property

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: the gap between the container and the container set width 100% When , the margin is ?, which means that the container has a distance from the following container to the value of the previous container

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>

From: css layout ?人的ladder

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：DIV CSS layout compatibility issue_html/css_WEB-ITnoseNext article：DIV CSS layout compatibility issue_html/css_WEB-ITnose

Related articles

See more