本文摘自PHP中文网,作者V,侵删。
css中的流体布局是指当网页缩小或放大时,网页布局会随着浏览器的大小而改变。流体布局的优势是如果用户的窗口很小,页面就会收缩以适应窗口,而不必横向滚动。
流体布局:
简单来说就是网页缩小和放大时网页布局会随着浏览器的大小而改变!
(学习视频分享:css视频教程)
优势:
页面会伸展到整个浏览器窗口,所以即使在大屏幕上,页面的周围 也没有空白;
如果用户的窗口很小,页面就会收缩以适应窗口,而不必横向滚动;
即使用户设置的字体比设计人预设的更大,这种设计也可以适应(因为页面可以伸展)。
劣势:
如果不对页面各个部分的宽度加以控制,那么页面设计会和预期的效果大相径庭,例如某些项目或元素挤压到一起,其周围出现意想不到的空隙;
如果用户的窗口非常宽,文本行就会很长,以至于难以阅读;
如果用户的窗口非常窄,单词可能会被挤压,导致每行只有几个单词;
如果一个固定宽度的元素位于一个不能容纳它的盒子里,那么这个元素就会溢出盒子。
举例:
下面的代码演示了流体布局,关键技术是设置宽度单位为百分比。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <!DOCTYPE html>
< html >
< head >
< title >Liquid Layout</ title >
< style type = "text/css" >
* {
color: #fff;
text-align: center;}
body {
width: 90%;
margin: 0 auto;}
#content {
overflow: auto;}
#nav, #feature, #footer {
margin: 1%;}
.column1, .column2, .column3 {
width: 31.3%;
float: left;
margin: 1%;}
.column3 {
margin-right: 0%;}
li {
display: inline;
padding: 0.5em;}
#nav, #footer {
padding: 0.5em 0;}
#feature, .article {
color:#fff;
height: 10em;
margin-bottom: 1em;
}
</ style >
</ head >
< body >
< h1 style = "color:#706fd3" >软件开发,成就梦想</ h1 >
< h2 >< a href = "https://www.liyongzhen.com/" style = "color:#000" >学编程,上利永贞网</ a ></ h2 >
< div id = "header" >
< h1 >Logo</ h1 >
< div id = "nav" >
< ul >
< li >< a href = "" >首页</ a ></ li >
< li >< a href = "" >产品</ a ></ li >
< li >< a href = "" >服务</ a ></ li >
< li >< a href = "" >关于我们</ a ></ li >
< li >< a href = "" >联系我们</ a ></ li >
</ ul >
</ div >
</ div >
< div id = "content" >
< div id = "feature" >
< p >功能</ p >
</ div >
< div class = "article column1" >
< p >第一列</ p >
</ div >
< div class = "article column2" >
< p >第二列</ p >
</ div >
< div class = "article column3" >
< p >第三列</ p >
</ div >
</ div >
< div id = "footer" >
< p >© Copyright 2019</ p >
</ div >
</ body >
</ html >
|
相关推荐:CSS教程
以上就是css中的流体布局是什么的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css的语法规则是什么
css sprites如何使用?
css怎么使用外部艺术字
css怎么让图片向左移动
css中什么是外部样式表?
css如何设置div垂直居中
html怎样把div放在底部
css怎么给字体加阴影效果
怎么在jsp中打css代码
css中的单选怎么做
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css中的流体布局是什么