css页面布局和导航示例
2010-05-06 10:43
302 查看
<html> <head> <mce:style type="text/css"><!-- div.container { width:100%; margin:0px; border:1px solid gray; line-height:150%; } div.header,div.footer { padding:0.5em; color:white; background-color:gray; clear:left; } h1.header { padding:0; margin:0; } div.left { float:left; width:160px; margin:0; padding:1em; } div.content { margin-left:190px; border-left:1px solid gray; padding:1em; } --></mce:style><style type="text/css" mce_bogus="1">div.container { width:100%; margin:0px; border:1px solid gray; line-height:150%; } div.header,div.footer { padding:0.5em; color:white; background-color:gray; clear:left; } h1.header { padding:0; margin:0; } div.left { float:left; width:160px; margin:0; padding:1em; } div.content { margin-left:190px; border-left:1px solid gray; padding:1em; }</style> </head> <body> <div class="container"> <div class="header"><h1 class="header">W3School.com.cn</h1></div> <div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div> <div class="content"> <h2>Free Web Building Tutorials</h2> <p>At W3School.com.cn you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p> <p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div> <div class="footer">Copyright 2008 by YingKe Investment.</div> </div> </body> </html>
<html> <head> <mce:style type="text/css"><!-- ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } a { float:left; width:7em; text-decoration:none; color:white; background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; } a:hover {background-color:#ff3300} li {display:inline} --></mce:style><style type="text/css" mce_bogus="1">ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } a { float:left; width:7em; text-decoration:none; color:white; background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; } a:hover {background-color:#ff3300} li {display:inline}</style> </head> <body> <ul> <li><a href="#" mce_href="#">Link one</a></li> <li><a href="#" mce_href="#">Link two</a></li> <li><a href="#" mce_href="#">Link three</a></li> <li><a href="#" mce_href="#">Link four</a></li> </ul> <p> 在上面的例子中,我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素(元素前后没有换行)。这样就可以使列表排列成一行。ul 元素的宽度是 100%,列表中的每个超链接的宽度是 7em(当前字体尺寸的 7 倍)。我们添加了颜色和边框,以使其更漂亮。 </p> </body> </html>
相关文章推荐
- CSS导航布局中当前页面的具体实现demo示例
- css页面左中右分栏布局示例
- DIV+CSS页面布局示例
- 使用CSS格式化页面布局示例(附图)
- DIV+CSS页面布局示例 遮罩层
- DIV+CSS布局入门示例(一)页面布局与规划
- DIV+CSS布局入门示例(一)页面布局与规划
- DIV+CSS页面布局示例 遮罩层
- DIV+CSS布局入门示例(三)页面顶部制作
- DIV+CSS布局入门示例(三)页面顶部制作
- css页面左中右分栏布局两种方式示例代码
- DIV+CSS布局入门示例(四)页面顶部 列表<li>制作菜单
- DIV+CSS布局入门示例(四)页面顶部 列表制作菜单
- DIV+CSS固定页面布局
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
- CSS左右两列自适应高布局示例代码
- CSS之页面布局之三(凝胶布局)
- CSS网页布局入门教程9:用CSS设计网站导航――横向导航
- 一小时搞定DIV+CSS布局-固定页面开度布局