yui grid css 1/6-1/6-1/6-1/6-1/3

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

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

文章标签：

#YUI #CSS #HTML

web 专栏收录该内容

5 篇文章

订阅专栏

本文展示了一个使用YUI框架进行网页布局的例子，包括头部、主体及尾部区域的构建方式，通过简单的表单元素展示了如何进行基本的HTML元素设置。

<!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">
</head>
<body>
<div id="doc3" class="yui-t7">
   <div id="hd"><h1>Header</h1></div>
   <div id="bd">
		<div class="yui-gb">
        	<div class="yui-g first">
        		<div class="yui-u first"><label>test One 1/6</label></div>
        		<div class="yui-u"><input type="text" name="some_name" value="1/6" id=""/></div>
        	</div>
        	<div class="yui-g"> 
        		<div class="yui-u first"><label>test One Two Tree Four 1/6</label></div>
        		<div class="yui-u"><input type="text" name="some_name" value="1/6" id=""/></div>
        	</div>
        	<div class="yui-g"><input type="reset" value="reset 1/3" id="" /></div>
		</div>
	</div>
   <div id="ft"><p>Footer</p></div>
</div>
</body>
</html>