信手拈来一张截图，教你做XHTML+CSS
点击次数：35 次 发布日期：2008-11-21 11:22:14 作者：源代码网
|
源代码网推荐源代码网整理以下第一次做“老师”，希望别误导了。写这个是给新人看。为了认识xhtml和css的入门。没有过高技术含量。请在IE下浏览。我还没有做兼容。到了最后可能会再写兼容的测试和方法。
源代码网整理以下
源代码网整理以下随便找一个网页截图来做个示范。
源代码网整理以下
源代码网整理以下我把这张图大概地分了几个部分。
源代码网整理以下①处可以看作一个body的背景图。
源代码网整理以下
| body {background:url(images/topbg.gif) #E6F1F5 repeat-x;} |
源代码网整理以下②,③,④处就是主要部分.我放在一个div为outmain.<div id="outmain">
源代码网整理以下
<div id="header"></div>
<div id="emptydiv"></div>
<div id="layout"></div>
</div> |
源代码网整理以下
</div>div为outmain的作用是定位居中。
源代码网整理以下#outmain {margin:auto;} /* 布局居中 */
源代码网整理以下而div为header的是头部.div为emptydiv为效果用的.
源代码网整理以下div为layout的是放置内容。
源代码网整理以下#outmain {margin:auto; width:700px;} /* 布局居中 */
#header {height:350px; width:100px;}
#emptydiv { height:20px; background:url(images/emptydiv.gif) no-repeat;}
源代码网整理以下
源代码网整理以下这个时候我要往header部分加上LOGO和登陆了。
源代码网整理以下
<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代替放在里面。不过我习惯了用意思相同或者类似意思的标签去设计页面的元素。
源代码网整理以下
|
源代码网整理以下*{margin:0; padding:0}
body {background:url(images/topbg.gif) #E6F1F5 repeat-x;}
/* 布局居中 */
#outmain {margin:auto; width:700px;}
/* 头部，因为背景图的高是350，为了视觉，头部的高为350 */
#header {height:350px; width:100%;}
/* 头部LOGO我用h1定义一个长和宽。并且使用背景图。 */
#header h1 {margin-top:100px; width:250px; height:50px; background:url(images/logo.gif) no-repeat; float:left;}
/* 头部的登陆和注册区域 */
#header ul {float:right;margin-top:50px; margin-right:10px; width:200px; color:#FFFFFF;}
#header ul h2 {font-family:"Courier New", Courier, monospace; font-size:18px; font-weight:900; color:#FFFF00;}
/* 这个东西就是头部有个突出的地方 */
#emptydiv { height:20px; background:url(images/emptydiv.gif) no-repeat;}
/* 内容 */
#layout { width:100%; height:500px;}
|
待续源代码网供稿. |
