一点点css

再看了一遍vitnamese class网站~发现虽然结构简单,但就是这种简单体现出设计者的功力!不像我自己写的css,乱糟糟的,嗨……

  1. 做整体layout时,每个部分先wrapper,wrapper里设定padding,然后再创建真正内容框。
  2. wrapper的width:100%,真正内容框的width自定义,不过各个宽度(header,Menu,content,footer)应该保持consistency。
  3. 做Menu的时候,ul嵌套li,在ul可以float在parent div的左侧,li中设定display:inline保证他们在一行。然后li的<a>可以float:left,然后在a中仔细定义需要显示的风格。#menu li a:hover中设定切换图片(换background应该就可以了)以及颜色。
  4. 做头部或者底部的阴影效果,可以直接在css中定义一class,background就是此阴影图,然后保持宽度与要修饰的div相同就可以,高度自定义,margin-bottom应该设一点
  5. 使用float经常问题多多,建一class解决此问题:  .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  },在每个用了float地方的后面就加上这样一个div来让wired float安静
  6. footer会覆盖content,永远的麻烦,折衷办法还是让html和body的height都为100%,让footer处于body内,这样比较保险。
  7. footer中建Menu同样可以用ul加li,小技巧是可以设定 border-right: 1px solid #333333; 来让右侧出现隔离的 “|”, 只需为最后一个li建个class设定为border: none;来消除最后元素的|。 当然li中应该设定一点左padding,不然Menu都挤在一起了。
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s