div css布局 实验心得（网页制作div+css实验报告）

本文目录

• 网页制作div+css实验报告
• css和div布局到底怎么布局啊，需要经常使用哪些元素呢
• 请问专业人士css+div 注意什么，说说心得经验
• div+ css的好处
• CSS中怎么让DIV居中亲自实验得出的结论
• html中的布局有多种方法，其中最常用的是div加css进行页面布局，这种布局的优缺点是什么
• DIV＋ CSS布局的优点是什么
• 关于div+css布局

网页制作div+css实验报告

DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。SEO是指搜索引擎优化，主要就是通过对网站的结构、标签、排版,关键字等各方面的优化，使搜索引擎更容易抓取网站的内容，并且让网站的各个网页在等搜索引擎中获得较高的评分，从而获得较好的排名。DIV+CSS网页布局对SEO有很重要的影响。具体来看到底有什么好处呢? DIV+CSS的网页布局对SEO的好处一、不存在表格的嵌套问题 很多“网站如何推广”的文章中称，搜索引擎一般不抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎相关的官方证实。我的几项实验结果没有完全出来，但根据目前掌握的情况来看，Spider爬行Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。 使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，蜘蛛(Spider)爬行时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。 DIV+CSS的网页布局对SEO的好处二、精简的代码 使用DIVCSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。观看更多的HTML教程内容。 代码精简所带来的直接好处有两点：一是提高蜘蛛(Spider)爬行效率，能在最短的时间内爬完整个页面，这样对收录质量有一定好处;二是由于能高效的爬行，就会受到蜘蛛(Spider)欢迎，这样对收录数量有很大好处。 而DIV+CSS布局基本上不会存在这样的问题，从技术角度来说，XHTML在控制样式时也不需要过多的嵌套。 这虽然没有得到确认，但还是建议使用Table布局的朋友们，在设计时尽可能的不要使用多层表格嵌套，SEOer(seo工作者们)们在文章中说明了这一点，相信他们也不是没有依据。 DIV+CSS的网页布局对SEO的好处三、对搜索引擎的排名 基于XTHML标准的DIV+CSS布局，一般在设计完成后会尽可能的完善到能通过W3C验证。截止目前没有搜索引擎表示排名规则会倾向于符合W3C标准的网站或页面，但事实证明使用XTHML架构的网站排名状况一般都不错。 DIV+CSS的网页布局对SEO的好处四、提高网页的访问速度 DIV+CSS布局较Table布局减少了页面代码，加载速度得到很大的提高，这在蜘蛛(Spider)爬行时是非常有利的。过多的页面代码可能造成爬行超时，蜘蛛(Spider)就会认为这个页面无法访问，影响收录及权重。 真正的SEOer(seo工作者们)不只是为了追求收录、排名，快速的响应速度是提高用户体验度的基础，这对整个搜索引擎优化及营销都是非常有利的。 换一个角度抛开DIV+CSS对SEO的有利影响.单独来讲这种div+css布局也是很有益的,可以说是实下是最流行的网页布局方式.可是加快我们网站的速度,便于管理与修改.当然div+css布局也有不完善的方面,比如说,他的css样式表与各种浏览器之间的不兼容问题.当然如果你是div+css高手的话相信这个不难吧!

css和div布局到底怎么布局啊，需要经常使用哪些元素呢

所谓的DIV+CSS，主要是使用CSS来控制HTML中的各种元素对页面进行布局排版。在这里写上DIV是为了强调：过去的网页布局主要是使用table标签进行的，而使用table布局不够灵活，所以现在的网站大多数都使用div标签对网页进行整体的布局。使用CSS和div布局，你可以先把整个网页划分成几块，然后在html里每一块用一个div框起来，然后对相应的div定义CSS，将其放置到网页中相应的位置，完成整体布局。比如你要要做一个现在你看到的百度知道的页面：页面基本分为了3部分，上面是百度知道的logo、百度的跳转链接、搜索框和按钮；下面的左边是百度知道的当前问题和其回答；右边是用户信息、广告等内容。（这里被我简化了，其实最上面有用户信息条，中间有当前页面在百度知道的路径，最下面还有footer网站信息）我们就可以在html里写4个div:《div id="wrap"》《div id="top"》《/div》《div id="left"》《/div》《div id="right"》《/div》《/div》然后给他们定义cssbody{text-align:center;}/*为了使网页的内容全部显示在中间*/#wrap{width:960px;margin:0 auto;}/*为了让1024*768的用户能看全，定义了网页的宽度*/#top{width:100%;height:100px;}/**/#left{width:660px;float:left}/*向左浮动*/#right{width:290px;float:right;}/*向右浮动*/这样网站的整体布局就完成了。（这部分代码我没有验证，嘻嘻）注：事实上我给这三个div的命名方式并不是很好，不应该使用它的样式类型或者位置进行定义，而要使用该网页元素的实际内容进行定义。一般来说要以这个div里面放的内容来定义。比如百度给最上方的用户信息条起名usrbar。这样在给网站改版或者做调整的时候可以明确每个div的意义。完成整体布局以后，就可以对网页中的每一个区域进行具体的排版。每一部分的排版，是使用一楼提到的标题、段落、列表、表格、超链接等网页标签，然后使用CSS对标签进行相应的定义，使其达到你预期的效果。注意：div这类标签也是可以使用的，但是具体用什么标签要看具体情况。（其实你全部使用div都是可以的，如果你不嫌麻烦的话。）使用正确的标签，可以让你的网页代码更容易阅读和修改。比如一般看到网页中出现ul li标签，就可以知道这里定义了列表。用到h1-h7标签一般就是定义不同等级的标题。具体如何使用CSS布局网页，建议你先学习HTML，然后看一看CSS。这些内容你不一定要背过，但是一定要了解，HTML和CSS都可以做到什么。以后在使用的过程中遇到不懂的就查。没事找几个简单的页面，自己模仿着做下来，多练练手就好了。推荐教程：你可以去我下面写的网站看看，这里是最基本的教程。CSS部分等你熟悉了最基本的用法后，可以把《精通CSS》看看，这本书的帮助很大，强烈推荐（我自己学这本的）。

请问专业人士css+div 注意什么，说说心得经验

呵呵！！！多个浏览器多测试！符合web标准！不要被对象、属性、方法等词汇所迷惑；最根本的是先了解最基础知识； 不要放过任何一个看上去很简单的小问题--他们往往并不那么简单，或者可以引伸出很多知识点；不会举一反三你就永远学不会； 知道一点东西，并不能说明你会全部，需要经验积累； 看再多的书是学不全的，要多实践； 把时髦的技术挂在嘴边，还不如把过时的技术记在心里； 学习的最好方法之一就是多练习； 在任何时刻都不要认为自己手中的书已经足够了； 看得懂的书，请仔细看；看不懂的书，请硬着头皮看； 别指望看第一遍书就能记住和掌握什么——请看第二遍、第三遍……； 请把书上的例子亲手到电脑上实践，即使配套光盘中有源文件； 把在书中看到的有意义的例子扩充；并将其切实的运用到自己的工作中； 不要漏掉书中任何一个练习——请全部做完并记录下思路； 别心急，写代码确实不容易；水平是在不断的实践中完善和发展的； 每学到一个难点的时候，尝试着对别人讲解这个知识点并让他理解----你能讲清楚才说明你真的理解了；记录下在和别人交流时发现的自己忽视或不理解的知识点； 保存好你做过的所有的源文件----那是你最好的积累之一； 对于网络，还是希望大家能多利用一下，你要学会自己找答案，比如google、百度都是很好的搜索引擎，你只要输入关键字就能找到很多相关资料，别老是等待别人给你希望，看的出你平时一定也很懒！ 虽然不是打击初学者，但是这句话还是要说：群是大家讨论的地方，如果你总期望有高手总无偿指点你，除非他是你亲戚！群内的讨论者，起码是水平相当的才有讨论的说法，如果水平真差距太远了，连基本操作都需要别人给解答，谁还跟你聊下去呢； 浮躁的人容易问：我到底该学什么；----别问，学就对了； 浮躁的人容易问：CSS有钱途吗；----建议你去抢银行； 浮躁的人容易说：我要中文版！我英文不行！----不行？学呀！ 浮躁的人分两种：只观望而不学的人；只学而不坚持的人； 浮躁的人永远不是一个高手。请不要做浮躁的人！ 2008！新的一年，新的开始！与各位共勉！

div+ css的好处

使用 div 和 CSS 的好处包括:可维护性:

1.使用 div 和 CSS 可以使页面结构更加清晰，代码更易于维护。

2.可重用性: CSS 可以被多个页面重用，减少了代码冗余。

3.易于修改: 使用 CSS 可以轻松地更改页面的布局和样式。

4.提高加载速度: 使用 CSS 可以减少 HTML 代码的冗余，提高页面加载速度。

5.增强用户体验: 使用 CSS 可以制作出美观、交互性强的页面，提高用户体验。

CSS中怎么让DIV居中亲自实验得出的结论

CSS如何使DIV层水平居中今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align:center然后嵌套一层DIV来解决问题.可是事实上这样的方法科学吗?经过网络搜索和亲自实验得出以下结论:正确的也是对页面构造没有影响的设置如下:对需要水平居中的DIV层添加以下属性: 复制代码代码如下:margin-left:auto;margin-right:auto;经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中!郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模一样.问题到底出在哪里呢?感谢网友乐天无用帮忙找出了这个邪门问题的原因.原来是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档.问题并不在CSS而在XHTML网页本身.需要加上这样的代码才能使得上述设置有效果:《!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"***隐藏网址***如果您希望更为严格的XHTML1.0Strict或者XHTML1.1请查阅相关文档.以上测试均基于WindowsXPSP2版IE6和FireFox1.0最终版.如何使DIV居中主要的样式定义如下：复制代码代码如下:body{TEXT-ALIGN:center;}#center{MARGIN-RIGHT:auto;MARGIN-LEFT:auto;}说明：首先在父级元素定义TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto;MARGIN-LEFT:auto;”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT:auto;MARGIN-LEFT:auto;就可以了。如何使图片在DIV中垂直居中，用背景的方法。举例：body{BACKGROUND:***隐藏网址***#FFFno-repeatcenter;}关键就是最后的center,这个参数定义图片的位置。还可以写成“topleft”(左上角)或者"bottomright"等，也可以直接写数值"5030"如何使文本在DIV中垂直居中如果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下：复制代码代码如下:《html》《head》《style》body{TEXT-ALIGN:center;}#center{MARGIN-RIGHT:auto;MARGIN-LEFT:auto;height:200px;background:#F00;width:400px;vertical-align:middle;line-height:200px;}《/style》《/head》《body》《divid="center"》《p》testcontent《/p》《/div》《/body》《/html》说明：vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。CSS+DIV控制页面中元素垂直居中代码全局和区域垂直居中复制代码代码如下:《styletype="text/css"media=screen》body{text-align:center;}#a{width:200px;height:400px;background:#000;}#b{margin-top:expression((a.clientHeight-50)/2);width:50px;height:50px;background:#FFF;}#c{position:absolute;left:expression((body.clientWidth-50)/2);top:expression((body.clientHeight-50)/2);width:50px;height:50px;background:#F00;}《/style》《divid="a"》《divid="b"》《/div》《/div》《divid="c"》《/div》另一方法:复制代码代码如下:《divstyle="background:blue;position:absolute;left:expression((body.clientWidth-50)/2);top:expression((body.clientHeight-50)/2);width:50;height:50"》《/div》

html中的布局有多种方法，其中最常用的是div加css进行页面布局，这种布局的优缺点是什么

　　优点：　　第一、利于搜索引擎蜘蛛爬行　　根据总结和经验，div+css布局有利于蜘蛛的爬行，拿html的table布局和div+css布局的网页来做对比，很显然table的字节大于div+css的，字节小就有益于搜索引擎蜘蛛下载页面所用的时间，而且也有益于蜘蛛爬行到网站深处。　　第二、易于修改　　在一般情况下，div+css布局的网站，都是将html页面和css文件分开的，div+css的特点就是能将网页的内容和表现形式分离，所以，假如你要修改网站整站布局的话，一般只需要修改css文件里的的个别属性即可，而这种特点是table不具备的。　　第三、减少网页加载时间　　前面就提到过，div+css是将css文件和html文件分开的，当用户点击网站时，是在同时下载css文件和html文件，所以可以提高打开网页的速度。　　缺点：　　第一、开发技术高　　众所周知，div+css要兼容各种浏览器，这样增加了div+css开发的难度。　　第二、开发时间长　　div+css布局相对于table布局来说，div+css的耗费时间要比table布局的时间长很多，另外考虑到浏览器兼容的问题，各种浏览器间的测试也是一个费时的事情。　　第三、开发成本高　　就上两点所说，高技术和长时间决定了他的成本。

DIV＋ CSS布局的优点是什么

【答案】：优点：1。CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码（其真正意义在于，增加了有效关键词占网页总代码的比重），因此使用CSS＋DIV的web标准制作的网站具有搜索引擎友好的一定优势。2。CSS+DIV制作的网站使得网站改版相对简单，很多问题只需要改变CSS而不需要改动程序，从而降低了网站改版的成本。缺点：1。对于CSS的高度依赖使得网页设计变得比较复杂。相对于HTML4.0中的表格布局（table），CSS+DIV尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了，这在一定程度上影响了XHTML网站设计语言的普及应用。 2。CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在几个l外部文件中，这一个或几个文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。 3。对于CSS网站设计的浏览器兼容性问题比较突出。基于HTML4.0的网页设计在IE4.0之后的版本中几乎不存在浏览器兼容性问题，但CSS+DIV设计的网站在IE浏览器里面正常显示的页面，到火狐浏览器（FireFox ）中却可能面目全非（这也是为什么建议网络营销人员使用火狐浏览器的原因所在）。CSS+DIV还有待于各个浏览器厂商的进一步支持。4。CSS+DIV对搜索引擎优化与否取决于网页设计的专业水平而不是CSS+DIV本身。CSS+DIV网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

关于div+css布局

讲真，我觉着这个是最简单了。布局，你做一个静态页面的时候在脑子里构思，主要分为几块。一般是头部，导航，主题，脚部。好，就有这四个div，先写上并且给他们一个id。用一个大的div包起来，这样好固定上面四个盒子的布局。写CSS，规定大小，用绝对定位相对定位，浮动之类的固定好布局。最后给他们填充上背景色，然后直观看一下哪里不合适整体把握好，最后就是里面的小细节了，无非就是，字体，浮动，这些东西多写几次就会了。其实这静态网页就是好看，最重要的就是div布局，头脑中有了结构，多敲几次就容易多了。