yui grid css 1/8 – 1/8 – 1/8 – 1/8 – 1/6 – 1/6 – 1/6

YUI栅格系统示例

最新推荐文章于 2021-06-01 03:13:15 发布

最新推荐文章于 2021-06-01 03:13:15 发布 · 142 阅读

文章标签：

#YUI #CSS #HTML

web 专栏收录该内容

5 篇文章

订阅专栏

本文档展示了YUI栅格系统的布局应用实例，通过不同类别的组合实现灵活的页面分区，如.yui-gp、.yui-up等类定义了背景颜色和文字颜色，而.yui-g、.yui-gfirst、.yui-u等类则用于划分页面区域。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>YUI Base Page</title>
   <link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
   <style type="text/css" media="screen">
   /* <![CDATA[ */
   	.yui-g p,.yui-u p {
   		background-color:#585A55;
   		color:#fff;
   	}
   /* ]]> */
   </style>
</head>
<body>
<div id="doc3" class="yui-t7">
   <div id="hd"><h1>Header</h1></div>
   <div id="bd">
		<div class="yui-g">
			<div class="yui-g first">
				<div class="yui-g first">
					<div class="yui-u first"><p>1/8</p></div>
					<div class="yui-u"><p>1/8</p></div>
				</div>
				<div class="yui-g">
					<div class="yui-u first"><p>1/8</p></div>
					<div class="yui-u"><p>1/8</p></div>
				</div>
			</div>
			<div class="yui-gb">
				<div class="yui-u first"><p>1/6</p></div>
				<div class="yui-u"><p>1/6</p></div>
				<div class="yui-u"><p>1/6</p></div> 
			</div>
		</div>
   <div id="ft"><p>Footer</p></div>
</div>
</body>
</html>