Home >Web Front-end >HTML Tutorial >Play with CSS3 (1) CSS3 realizes page layout_html/css_WEB-ITnose
Play with CSS3 (1) CSS3 realizes page layout_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:03:29966browse
Summary:
CSS3 adds some new layout methods compared to CSS2: multi-column layout and box layout. In this article, we will briefly recall the layout of CSS2 and summarize the layout methods of CSS3.
DIV CSS is actually a wrong name
Regarding the current page layout, many people are used to calling it DIV CSS. In fact, this is A wrong name, the standard name should be called XHTML CSS.
Why is this? The traditional page layout uses Table layout, that is, Table CSS. Later, the layout method using DIV appeared, so people called it DIV CSS, and some people think that pages made with DIV CSS are standard pages. In fact, this sentence The words are relatively narrow.
So what is a standard page? WEB standards consist of three parts: structure, performance and behavior. Among them, the standard languages for structure are XHTML and XML, and the standard language for expression is CSS. Because XML is relatively complex and most browsers do not fully support it, XML is not used to implement page layout. Therefore, the standard page layout should be a page layout that conforms to WEB standards, that is, XHTML CSS.
XHTML not only has DIV tags, but also tags such as a, p, ul, li, dl, dt, etc., so even if DIV tags are not used, the page produced is a standard page. Each tag of XHTML has its own function does not mean that only DIVs can be used to implement page layout (there is a saying in a book: If the whole screen is filled with DIVs, it cannot be considered a standard page)
So, in the future, we must try our best to It is possible to say XHTML CSS, not DIV CSS.
Layout method in the CSS2 era
To put it simply, in the CSS2 era, the floating attribute of float is used. Implement layout.
layout.css
/* CSS Document *//*基本信息*/body{margin:0px; /*外边距*/text-align:center; /*文字居中对齐*/background:#E1D0BB; /*背景色*/}/*页面层容器*/#container{ width:80%;height:100%;margin-left:10%;margin-right:10%;background:#ABE0F1;}/*头部*/#header{width:100%;height:15%;margin:0px;background:#FF0000;}#logo{float:left; /*浮动属性，居左对齐，使其可以在同一行显示*/width:60%;height:80%;margin:0px;background:#E18CDD;clear:left; /*取消左侧浮动*/}#banner{float:right; /*浮动属性，居右对齐，使其可以在同一行显示*/width:38%;height:80%;margin:0px;background:#8376D8;clear:right; /*取消右侧浮动*/}#menu{width:100%;height:5%;margin:0px;background:#00FF00;}#pageBody{width:100%;height:70%;margin:0px;background:#00FFFF;}#footer{width:100%;height:10%;margin:0px;background:#FFFF00;}
<!DOCTYPE><html><head><meta charset="utf-8"><title>布局</title><link href="style/layout.css" rel="stylesheet" type="text/css" /></head><body><div id="container"> <div id="header"> <div id="logo"> logo </div> <div id="banner"> banner </div> container </div> <div id="menu"> menu </div> <div id="pageBody"> </div> <div id="footer"> footer </div></div></body></html>
However, using float to implement layout will have some disadvantages, because each div is mutually exclusive Independent, so adding some content to a div will make it impossible to align. CSS3 provides multi-column layout and box layout to make up for this shortcoming.
Multi-column layout
layout.css
/* CSS Document *//*基本信息*/body{margin:0px; /*外边距*/text-align:center; /*文字居中对齐*/background:#E1D0BB; /*背景色*/}/*页面层容器*/#container{ width:80%;height:100%;margin-left:10%;margin-right:10%;background:#ABE0F1;}/*头部*/#header{width:100%;height:15%;margin:0px;background:#FF0000;}#logo{float:left; /*浮动属性，居左对齐，使其可以在同一行显示*/width:60%;height:80%;margin:0px;background:#E18CDD;clear:left; /*取消左侧浮动*/}#banner{float:right; /*浮动属性，居右对齐，使其可以在同一行显示*/width:38%;height:80%;margin:0px;background:#8376D8;clear:right; /*取消右侧浮动*/}#menu{width:100%;height:5%;margin:0px;background:#00FF00;}#pageBody{width:100%;height:70%;margin:0px;background:#00FFFF;-moz-column-count:4; /*多栏布局：火狐浏览器中需要的格式，表示列数*/-moz-column-gap:10px; /*列之间的间隔*/-moz-column-rule:1px solid red; /*在列之间加一条红色的线*/-webkit-column-count:4; /*多栏布局：safari和chrome需要的格式*/-webkit-column-gap:10px; /*列之间的间隔*/-webkit-column-rule:1px solid red; /*在列之间加一条红色的线*/}#footer{width:100%;height:10%;margin:0px;background:#FFFF00;} layout.html
<!DOCTYPE><html><head><meta charset="utf-8"><title>布局</title><link href="style/layout.css" rel="stylesheet" type="text/css" /></head><body><div id="container"> <div id="header"> <div id="logo"> logo </div> <div id="banner"> banner </div> container </div> <div id="menu"> menu </div> <div id="pageBody"> 内容省略 </div> <div id="footer"> footer </div></div></body></html>
Rendering:
Box layout
hezi.css
/* CSS Document *//*基本信息*/body{margin:0px; /*外边距*/text-align:center; /*文字居中对齐*/background:#E1D0BB; /*背景色*/}/*页面层容器*/#container{ display:-moz-box;display:-webkit-box;}#left_side{width:200px;height:200px;margin:20px;padding:50px;background-color:#FF0000}#center_side{width:200px;height:200px;margin:20px;padding:50px;background-color:#00FF00}#right_side{width:200px;height:200px;margin:20px;padding:50px;background-color:#FFFF00;}#left_side,#center_side,#right_side{ /*实现盒子布局*/-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}#down_left{-moz-box-flex:1; /*可根据内容自动调整大小，实现弹性盒子，此为火狐下的格式*/-webkit-box-flex:1;padding:20px;margin:20px;background-color:blue;}#down_left{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}hexi.html
<!DOCTYPE><html><head><meta charset="utf-8"><title>布局</title><link href="style/hezi.css" rel="stylesheet" type="text/css" /></head><body><div id="container"> <div id="left_side"> 百度 </div> <div id="center_side"> 谷歌 </div> <div id="right_side"> 淘宝 </div> <div id="down_left"> 亚马逊 </div></div></body></html>
Rendering:
If you want the box to be divided vertically, you can After changing the container to:
#container{ display:-moz-box;display:-webkit-box;-moz-box-orient:vertical; /*垂直分布*/-webkit-box-orient:vertical;}