减小字体
增大字体- ·上一篇站长学习：巧妙运用Dreamweaver进行网页制作技巧
- ·下一篇站长学习：新浪对上海维莱科技技术总监郭佳专访
信手拈来一张截图，教你做XHTML+CSS
第一次做“老师”，希望别误导了。写这个是给新人看。为了认识xhtml和css的入门。没有过高技术含量。请在IE下浏览。我还没有做兼容。到了最后可能会再写兼容的测试和方法。 71站长源码
中国71站长源码
随便找一个网页截图来做个示范。 Www@71code@com
Www@71code@com
我把这张图大概地分了几个部分。 71站长源码,为中文网站提供动力
①处可以看作一个body的背景图。 71站长源码
| body {background:url(images/topbg.gif) #E6F1F5 repeat-x;} |
②,③,④处就是主要部分.我放在一个div为outmain.<div id="outmain">
71code.com
| <div id="header"></div> <div id="emptydiv"></div> <div id="layout"></div> </div> |
</div>div为outmain的作用是定位居中。 Www^71code^com
#outmain {margin:auto;} /* 布局居中 */ Www_71code_com
而div为header的是头部.div为emptydiv为效果用的. 71站长源码
div为layout的是放置内容。
71站长源码
#outmain {margin:auto; width:700px;} /* 布局居中 */
#header {height:350px; width:100px;}
#emptydiv { height:20px; background:url(images/emptydiv.gif) no-repeat;} Www@71code@com
Www_71code_com
这个时候我要往header部分加上LOGO和登陆了。 Www^71code^com
| <div id="outmain"> <div id="header"> <h1></h1> <ul></ul> </div> <div id="emptydiv"></div> <div id="layout"></div> </div> |
h1的作用是什么呢？h1我是用来放置LOGO的。那么很明显ul这个标签是用来放置登陆的。ul是一个无序标签。我们可以把下面的li定义为block。然后放入登陆的窗口。当然。有些人不喜欢用h1和ul实现我的布局。也可以用两个div代替放在里面。不过我习惯了用意思相同或者类似意思的标签去设计页面的元素。 71站长源码,为中文网站提供动力
|
*{margin:0; padding:0} 71站长源码 /* 这个东西就是头部有个突出的地方 */ #emptydiv { height:20px; background:url(images/emptydiv.gif) no-repeat;} /* 内容 */ #layout { width:100%; height:500px;} 71站长源码 |
