css 框架 grid的困惑 Using Nesting Grids
不懂他网格如何原理
\Using Nesting Grids
YUI Grids CSS provides a system for subdividing sections of your page with nestable grids. Use this technique to easily create complex layouts that go beyond the two column layouts offered by the template presets. The picture below shows, for example, how a two-column grid is "nested" within the main block:
The Basic Idea
The basic idea is that "grids" are holders of "units". The standard grid holder is a div with a class of "yui-g" (g is for grid). The contained units are divs with a "yui-u" class (u is for unit). Except in special cases we'll examine later, a grid holds two units and instructs each unit to take up half the available space. Here's what a basic nested two-unit grid looks like:
HTML code:
1 ...
2 <div id="yui-main">
3 <div class="yui-b">
4 <div class="yui-g">
5 <div class="yui-u first"></div>
6 <div class="yui-u"></div>
7 </div>
8 </div>
9 </div>
10 ...
view plain | print | ?
... <div id="yui-main"> <div class="yui-b"> <div class="yui
相关问答:
皮肤和样式表都可以设置控件的外观,具体有什么区别呢?
skin 是asp.net 体系的 就相当于<asp:TextBox> 对应于<input type="text">
你把皮肤当成衣服,把样式表当成化妆品就容易理解了
......
Java code:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = reque ......
比如我做的一张图 里面包含了N个小图片
CSS这样写:
.a{background:url('/images/theme-hotgoods.gif') no-repeat left -130px;}
.b{background:url('/images/theme-hotgoods.gif') no ......
直接看不到的话,http://hiphotos.baidu.com/%CB%AE%CC%EC/pic/item/bd10cdfc07c1c4d2fc037f24.jpg
要实现图片中的三种效果:
1、button的样式
2、改变下拉列表框 样式
3、就是鼠标放到字体上时显示 ......
CSS code:
body{
width:100%;
font-size:12px;
font-family:tahoma,arial,'宋体';
color:#666666;
float:none;
background: url(/images/bg.gif) left top repeat-y;
text-align:center;
margin:0 auto; ......