查看“盒子模型的实现”的源代码
←
盒子模型的实现
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
== 盒子模型的实现 == === 组成盒子的元素=== *尽管段落p也是盒子,但是在其内部不能放置任何其他块级元素的内容。 *所以页面中使用最多的盒子是可以作为容器的层,尤其是整个网页的布局都是通过div+css来实现的。 *层中可以放置段落、表格、浮动框架等任意其他页面元素,当然也可以放置其他的层。 *层标记'''<nowiki><div>…</div></nowiki>''',对于div的定义通常包含层的宽度width、高度height、填充、边距、边框和背景等等。 === 盒子的宽度 === #固定值,例如:width:700px;width:80%; #auto,盒子的宽度由内部内容的宽度或者浏览器窗口宽度或者该盒子所在父元素的宽度来确定。 width:auto; === 用盒子进行布局 === *布局<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。 *这个例子使用了四个 <nowiki><div></nowiki> 元素来创建多列布局: <nowiki><body> <div id="header"> <h1>City Gallery</h1> </div> <div id="nav"> London<br> Paris<br> Tokyo<br> </div> <div id="section"> <h1>London</h1> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> <p> Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. </p> </div> <div id="footer"> Copyright W3School.com.cn </div> </body></nowiki> *亲自试一试: [http://www.w3school.com.cn/tiy/t.asp?f=html_layout_semantic W3C线上编辑器] *CSS: <nowiki><style> #header { background-color:black; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } </style></nowiki> 返回 [[网页设计与开发]]
返回至
盒子模型的实现
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息