信手拈来一张截图，教你做XHTML+CSS

第一次做“老师”，希望别误导了。写这个是给新人看。为了认识xhtml和css的入门。没有过高技术含量。请在IE下浏览。我还没有做兼容。到了最后可能会再写兼容的测试和方法。 站长.站

 

中国站.长站

 

随便找一个网页截图来做个示范。

 

  Www@Chinaz@com

我把这张图大概地分了几个部分。 中国站长_站,为中文网站提供动力

①处可以看作一个body的背景图。 中国.站.长站

body {background:url(images/topbg.gif) #E6F1F5 repeat-x;}

中.国站长站

②,③,④处就是主要部分.我放在一个div为outmain.<div id="outmain">

Chinaz.com

 

<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;}

 

 

Www_Chinaz_com

 

这个时候我要往header部分加上LOGO和登陆了。 Www^Chinaz^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代替放在里面。不过我习惯了用意思相同或者类似意思的标签去设计页面的元素。 中国站长_站,为中文网站提供动力

*{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;} 中国站.长.站

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有