在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享学习CSS布局网页的一些实例,希望可以对大家能有小小的帮助。
【 tulaoshi.com - Web开发 】
CSS布局中,一个重要的标签DIV,DIV是XHTML所支持的标签,DIV是一个容器,所有的XHTML标签对象都可以称为是一个容器.如divcontent/div,h1titles/h1....
div代码的书写格式:
注:同一个名称的id值,在当前的XHTML页面中,只日须使用一次,class名称可以重复使用.
1.一列布局
XHTML CODE:
(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)div id="layout"一列固定宽度width:300px;height:300px;/divCSS CODE:
#layout{XHTML CODE:
(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)div id="layout"一列自适应宽度width:80%/divCSS CODE:
#layout{注:自适应的优势是,当扩大或缩小浏览器窗口大小时,其宽度将维持在与浏览器当前宽度比例的80%。
一列固定宽度居中XHTML CODE:
(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)div id="layout"一列固定宽度居中/divCSS CODE:
#layout{注:margin:0px auto;margin属性用于控制对象的上右下左4个方向的外边距,当margin使用两个参数时,第一个参数表示上下边距,第二个表示左右边距。auto值是让浏览器自动判断边距,浏览器将会使div对象的左右边距设为相同,从而实现居中效果。
2.二列布局
XHTML CODE:
(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)div id="left"left/div
CSS CODE:
注:float属性是CSS布局中非常重要的一个属性,用于控制对象的浮动布局方式,DIV布局基本上都通过FLOAT的控制来实现布局。float用于设置对象是否浮动显示,以及设置具体的浮动方式,可用值none,left,right。
二列宽度自适应XHTML CODE:
(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)div id="left"left/div
CSS CODE:
注:在CSS布局中,一个对象的宽度,不仅仅是由WIDTH值来决定,一个对象的真实宽度是由对象本身的宽、对象的左右外边距,以及左右边框,还有内边距这些属性相加而成。有关宽度计算的问题,是CSS布局中相当重要的被成为盒模型问题。
右列宽度自适应XHTML CODE:
(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)div id="left"left/div
CSS CODE:
XHTML CODE:
(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)div id="layout"
CSS CODE:
XHTML CODE:
(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/) div id="left"left/div
CSS CODE:
最后,网页教学网提醒大家请自行演示学习.
来源:https://www.tulaoshi.com/n/20160219/1629614.html
看过《学习CSS布局网页的一些实例》的人还看了以下文章 更多>>