搜索
首页web前端html教程Div+CSS布局入门教程_html/css_WEB-ITnose

页面布局与规划
在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。

所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。

下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分:

  1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;
  2、内容部分又可分为侧边栏、主体内容;
  3、底部,包括一些版权信息。
  有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:

根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。

  DIV结构如下:
  │body {} /*这是一个HTML元素,具体我就不说明了*/
  └#Container {} /*页面层容器*/
     ├#Header {} /*页面头部*/
     ├#PageBody {} /*页面主体*/
     │ ├#Sidebar {} /*侧边栏*/
     │ └#MainBody {} /*主体内容*/
     └#Footer {} /*页面底部*/

至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。

写入整体层结构与CSS
接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容:

 






无标题文档 title >

head >


body >
html >


这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。

下面,我们在

标签对中写入DIV的基本结构,代码如下:

 

[color=#aaaaaa] [/color]
   [color=#aaaaaa] [/color]
   div >
   [color=#aaaaaa] [/color]
     [color=#aaaaaa] [/color]
     div >
     [color=#aaaaaa] [/color]
     div >
   div >
   [color=#aaaaaa] [/color]
   div >
div >

为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:

 


/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

/*页面层容器*/
#container {width:100%}

/*页面头部*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

/*页面主体*/
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}

/*页面底部*/
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}


把以上文件保存,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的框架了。

关于以上CSS的说明(详细请参考CSS2.0中文手册,网上有下载):

1、请养成良好的注释习惯,这是非常重要的;

2、body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了;

3、讲解一些常用的CSS代码的含义:

font:12px Tahoma;
这里使用了缩写,完整的代码应该是:font-size:12px;font-family:Tahoma;说明字体为12像素大小,字体为Tahoma格式;

margin:0px;
也使用了缩写,完整的应该是:

margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px

margin:0px 0px 0px 0px

顺序是 上 / 右 / 下 / 左,你也可以书写为margin:0(缩写);
以上样式说明body部分对上右下左边距为0像素,如果使用auto则是自动调整边距,

另外还有以下几种写法:
margin:0px auto;
说明上下边距为0px,左右为自动调整;
我们以后将使用到的padding属性和margin有许多相似之处,他们的参数是一样的,
只不过各自表示的含义不相同,margin是外部距离,而padding则是内部距离。

text-align:center
文字对齐方式,可以设置为左、右、中,这里我将它设置为居中对齐。

background:#FFF
设置背景色为白色,这里颜色使用了缩写,完整的应该是background:#FFFFFF。
background可以用来给指定的层填充背景色、背景图片,以后我们将用到如下格式:
background:#ccc url('bg.gif') top left no-repeat;
表示:使用#CCC(灰度色)填充整个层,使用bg.gif做为背景图片,
top left
表示图片位于当前层的左上端,no-repeat表示仅显示图片大小而不填充满整个层。
top/right/left/bottom/center
用于定位背景图片,分别表示 上 / 右 / 下 / 左 / 中;还可以使用
background:url('bg.gif') 20px 100px;
表示X座标为20像素,Y座标为100像素的精确定位;
repeat/no-repeat/repeat-x/repeat-y
分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。

height / width / color
分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。

4、如何使页面居中?

大家将代码保存后可以看到,整个页面是居中显示的,那么究竟是什么原因使得页面居中显示呢?
是因为我们在#container中使用了以下属性:
margin:0 auto;
按照前面的说明,可以知道,表示上下边距为0,左右为自动,因此该层就会自动居中了。
如果要让页面居左,则取消掉auto值就可以了,因为默认就是居左显示的。
通过margin:auto我们就可以轻易地使层自动居中了。

5、这里我只介绍这些常用的CSS属性了,其他的请参看CSS2.0中文手册。

当我们写好了页面大致的DIV结构后,我们就可以开始细致地对每一个部分进行制作了。

页面顶部制作之一
在上一章中我们写入了一些样式,那些样式是为了预览结构而写入的,我们把css.css中的样式全部清除掉,重新写胍韵卵?酱?耄?/p>

 


/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}

/*页面层容器*/
#container {width:800px;margin:10px auto}


样式说明:

a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover {}

这两项分别是控制页面中超链接的样式,具体我就不说明了,请大家参阅手册。

#container {width:800px;margin:10px auto}

指定整个页面的显示区域。
width:800px指定宽度为800像素,这里根据实际所需设定。
margin:10px auto,则是页面上、下边距为10个像素,并且居中显示。
上一章中我们讲过,对层的margin属性的左右边距设置为auto可以让层居中显示。

接下来,我们开始制作TOP部分,TOP部分包括了LOGO、菜单和Banner,首先我们要做的就是对设计好的图片进行切片,以下是在FW下完成的切片:

我将TOP部分切片为两部分,第一部分包括了LOGO和一条横线。由于LOGO图片并没有太多的颜色,这里我于是将这一部分保存为GIF格式,调色板选择为精确,选择Alpha透明度,色版为白色(此处颜色应与背景色相同),导出为logo.gif,图像宽度为800px。

到这里,有的朋友就说了,* 为什么要使用GIF格式?使用JPEG不是更好吗?
因为GIF格式的图片文件更小,这样能使页面载入的速度更快,当然使用此格式之前必须确定图片并没有使用太多的颜色,当我们使用了GIF格式时,从肉眼上并不能看出图片有什么太大的变化,因此这是可行的。

* 接下来的Banner部分还能使用GIF格式吗?
答案是不能,因为Banner部分是一个细致的图片,如果使用GIF格式颜色会有太大的损失,所以必须使用JPEG格式,将文件导出为banner.jpg。

* 合理的切片是非常之重要的,因为切片的方法正确与否决定了CSS书写的简易程度以及页面载入速度。

切好片后,我们还需要对TOP部分进行分析并将DIV结构写入Header中代码如下:

 

  
   
     首页 a > li >
     li >
     博客 a > li >
     li >
     设计 a > li >
     li >
     相册 a > li >
     li >
     论坛 a > li >
     li >
     关于 a > li >
    ul >
   div >
  
   div >

 

为什么要这么写呢,因为对菜单使用列表

  • 形式,可以在以后方便对菜单定制样式。

    而为什么要添加以下代码呢?

  • 制作菜单

    开始此节的学习前,请确认你已经参照之前的几节内容写入了DIV、CSS到index.htm和css.css文件中。

    这一节我将告诉大家如何用列表

  • 来制作菜单。


        
           首页 a > li >
        li >
        博客 a > li >
        li >
        设计 a > li >
        li >
        相册 a > li >
        li >
        论坛 a > li >
        li >
        关于 a > li >
         ul >
       div >

    以上是这部分的结构,有关于

    • 这两个HTML元素大家自己去参考相关的内容吧,它们最主要的作用就是在HTML中以列表的形式来显示一些信息。

      还有一点需要大家一定要分清楚的,当在HTML中定义为id="divID"时,在CSS对应的设置语法则是#divID{} ,如果在HTML中定义为class="divID"时,则在CSS中对应的设置语法是.divID。

      如果id="divID"这个层中包括了一个Div+CSS布局入门教程_html/css_WEB-ITnose,则这个img在CSS中对应的设置语法应该是#divID img {},同样,如果是包含在class="divID"这个层中时,则设置语法应该是.divID img {},这一点希望大家要分清楚了。

      另外,HTML中的一切元素都是可以定义的,例如table、tr、td、th、form、img、input...等等,如果你要在CSS中设置它们,则直接写入元素的名称加上一对大括号{}就可以了。所有的CSS代码都应该写在大括号{}中。

      按照上面的介绍,我们先在css.css中写入以下代码:

      #menu ul {list-style:none;margin:0px;}
      #menu ul li {float:left;}

      解释一下:

      #menu ul {list-style:none;margin:0px;}
      list-style:none,这一句是取消列表前点,因为我们不需要这些点。
      margin:0px,这一句是删除UL的缩进,这样做可以使所有的列表内容都不缩进。

      #menu ul li {float:left;}
      这里的 float:left 的左右是让内容都在同一行显示,因此使用了浮动属性(float)。

      到这一步,建议大家先保存预览一下效果,我们再添加下面的内容,效果如下:

      这时,列表内容是排列在一行,我们在#menu ul li {}再加入代码margin:0 10px

      #menu ul {list-style:none;margin:0px;}
      #menu ul li {float:left;margin:0 10px}

      margin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左:10px,右:10px),预览的效果如下:

      现在,雏形已经出来了,我们再来固定菜单的位置,把代码改成如下:

      #menu {padding:20px 20px 0 0}
      /*利用padding:20px 20px 0 0来固定菜单位置*/
      #menu ul {float:right;list-style:none;margin:0px;}
      /*添加了float:right使得菜单位于页面右侧*/
      #menu ul li {float:left;margin:0 10px}

      这时,位置已经确定了,可是构思图中,菜单选项之间还有一条竖线,怎么办呢?
      别忘了,我们早就已经留好了一个空的

    • 声明
      本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
      公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?Mar 04, 2025 pm 12:32 PM

      公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

      如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

      本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

      HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

      文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

      如何高效地在网页中为PNG图片添加描边效果?如何高效地在网页中为PNG图片添加描边效果?Mar 04, 2025 pm 02:39 PM

      本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

      < datalist>的目的是什么。 元素?< datalist>的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

      本文讨论了html< datalist>元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

      > gt;的目的是什么 元素?> gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

      本文讨论了HTML< Progress>元素,其目的,样式和与< meter>元素。主要重点是使用< progress>为了完成任务和LT;仪表>对于stati

      我如何使用html5< time> 元素以语义表示日期和时间?我如何使用html5< time> 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

      本文解释了HTML5< time>语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

      < meter>的目的是什么。 元素?< meter>的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

      本文讨论了HTML< meter>元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了< meter>从< progress>和前

      See all articles

      热AI工具

      Undresser.AI Undress

      Undresser.AI Undress

      人工智能驱动的应用程序,用于创建逼真的裸体照片

      AI Clothes Remover

      AI Clothes Remover

      用于从照片中去除衣服的在线人工智能工具。

      Undress AI Tool

      Undress AI Tool

      免费脱衣服图片

      Clothoff.io

      Clothoff.io

      AI脱衣机

      AI Hentai Generator

      AI Hentai Generator

      免费生成ai无尽的。

      热门文章

      R.E.P.O.能量晶体解释及其做什么(黄色晶体)
      2 周前By尊渡假赌尊渡假赌尊渡假赌
      仓库:如何复兴队友
      4 周前By尊渡假赌尊渡假赌尊渡假赌
      Hello Kitty Island冒险:如何获得巨型种子
      3 周前By尊渡假赌尊渡假赌尊渡假赌

      热工具

      SublimeText3 Mac版

      SublimeText3 Mac版

      神级代码编辑软件(SublimeText3)

      SublimeText3 Linux新版

      SublimeText3 Linux新版

      SublimeText3 Linux最新版

      SecLists

      SecLists

      SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

      WebStorm Mac版

      WebStorm Mac版

      好用的JavaScript开发工具

      SublimeText3 英文版

      SublimeText3 英文版

      推荐:为Win版本,支持代码提示!