html css实验6,(实验六DivCSS网页布局.doc

(实验六DivCSS网页布局

实验6 Div+CSS网页布局在网页制作中，有许多的术语，例如： HTML、CSS、等等。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。

所有的设计第一步就是构思，构思好了，一般来说还需要制作的界面布局简单的构画出来。

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

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

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

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

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

接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局”，在文件夹下新建两个空的记事本文档，输入以下内容：

无标题文档

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

下面，我们在

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

[color=#aaaaaa][/color]　　

为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开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的说明：1、请养成良好的注释习惯，这是非常重要的；

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

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

font:12px Tahoma；这里使用了缩写，完整的代码应

html css实验6,(实验六DivCSS网页布局.doc相关推荐

DivCSS网页布局中CSS无效的十个常见原因
在学习DivCSS网页布局的知识,可是W3C validation有时难以操作,但用它你可以查看由版面设计引起的差错.验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持 ...
css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局语音编辑锁定讨论上传视频上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
Java学习-14 CSS与CSS3美化页面及网页布局
Java学习-14 CSS与CSS3美化页面及网页布局 1. CSS简介什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素, ...
Web开发（一）·期末不挂之第六章·网页布局(浮动定位)
网页布局一.网页布局发展二. float 三.position 属性值 static:默认值 relative: absolute fixed 堆叠顺序 z-index 一.网页布局发展原先:用 ...
css利用什么xhtml标记构建网页布局,css是利用什么XHTML标记构建网页布局
css是利用的XHTML标记构建网页布局:XHTML是相对HTML来说的,比html更严格,指的是网页结构规范等,而css是用来美化各部分结构:html利用div标签实现整体的网页布局,利用css实 ...
html页面排版div,divcss网页布局模板
急CSS布局HTML小编今天和大家分享DIV CSS自适应布局手机网页设计的模版这个模版可以当你缩小浏览器窗口时可以看到它的样式的变化 ~~手机也适用 11. 请用HTML+CSS+Div书写组 ...
前端开发系列（十六）网页布局教程（2）
一. 结构与表现相分离的思想 1.1.微博用户发言信息列表制作代码示例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
css会对网站排名有影响吗,网站是如何推广的？DIVCSS网页相似太多影响排名？
网站是如何推广的?DIVCSS网页相似太多影响排名? 2021-03-07 10:13:50 DIVCSS网页布局有益于SEO优化排名,"网站是如何推广的",搜索引擎一般不会爬到三 ...
week9 day4 CSS网页布局
week9 day4 CSS网页布局一.网页布局方式二.标准流三.浮动流 3.1 什么是脱离文档流? 3.2 什么又是半脱离文档流 3.3 浮动元素贴靠问题 3.4 浮动元素字围现象 3.5 浮 ...
Div CSS网页布局对网站搜索引擎优化的影响
我们都知道DivCSS网页布局的好处,它对网站搜索引擎优化的影响有哪些呢? 网站优化使用 DIV CSS佈局,页面代码精简,这一点相信对XHTML有所瞭解的都知道.代码精简所带来的直接好处有两点:一是 ...

html css实验6,(实验六DivCSS网页布局.doc

html css实验6,(实验六DivCSS网页布局.doc相关推荐

最新文章

热门文章