关于div+css网站结构问题

2023-02-21 16:05:02html-css017

关于div+css网站结构问题,第1张

我一般用浮动，不改变display

你尝试把宽度都固定为某个值，但和要小于1002试一下

<style>

.w1002{width:1002px}

.w200{width:200px} /* 不考虑IE6 */

.w760{min-width:760px} / * 不考虑IE6 */

.clear{height:1%overflow:hidden} /* 清除浮动 */

.float{float:left}

</style>

</div>

我一般这么用，没测试，有问题再问我

大神求帮忙！用dw里的div＋css布局做一个网站！急！定有酬谢！

你可以直接把你们老师的具体要求发出来，根据你们老师的要求来做，可以自己提供素材，可以线上预览效果。

怎么看一个网站是div+css布局的

最简单看法是在中<div class=""></div>或者<div ID=""></div>这种结构形式存在的,这是它的程式码的写法,如果在程式码中看到<table></table>那就是table结构！

DIV+CSS的程式码特点

1、程式码少，比较容易整理

2、利于搜寻引擎SEO

3、本人觉得建网站模版用DIV+CSS最好，但做表格我觉得还是table比较好。可以随机应变。

4、最大发挥效果一般能把div用在互动上也就是”div+CSS+FLASH+MXL+JS+PHP“。

5、更加便易结合CSS使用

哪个网站采用div css布局

网站现在都用了 div+css 进行布局，由于这里不能发网址，如果要网站可以直接给我私信

望采纳

我会div+css。想做一个档案型别是.aspx的网站，请问我可以用div+css布局编写吗？

可以。关键你要会asp程式

找一些用div+css布局的简易网站？

我的邮箱307242944@qq. 给我发个邮件我可以给你一整套网站用div+css做的

请简述div+css布局网站流程

整理网站需求

UE设计网站框架

UI完成网站效果图

web前端开发者切图

用div+css实现网页效果

div+css和表格+css布局网站哪个好？

当然是div+css,在网站整体布局上是首选,因为如果你在表格上使用CSS不如DIV那么容易,不仅继承性差,甚至有很多属性是无效的,比如对于一个单元格,PADDING和MARGIN就不起作用了. 这些只是在设计上的麻烦,表格的程式码冗长,不易于更新,下载速度慢,相容性差等问题更是突出,所以,W3C也不建议使用表格来给网站作布局. 而div+css对于表格不足做出的改善当然还有便于各大搜索引擎的机器人及爬虫对于程式码的快速检索及评价网站的功劳.这也是表格布局一点点在被抛弃的原因.

DIV+CSS布局问题。请高手帮忙。

试试这个就能理解了

<div>

</div>

</body>

网站使用DIV+CSS布局有什么好处

业界越来越关注DIV+CSS的标准化设计，在其影响下，网页设计人员已经把这一要求作为行业标准。DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文字和其它的HTML程式码；CSS是CascADIng style Sheets的简称，中文译作“层叠样式表单”，在主页制作时采用CSS技术，可以有效地对页面的布局、字型、颜色、背景和其它效果实现更加精确的控制。只要对相应的程式码做一些简单的修改，就可以改变同一页面的不同部分，或者所有页数的网页的外观和格式。Div+CSS标准具有以下优点:1、因为采用CSS布局，不象表格布局充满各种各样的属性和数字，而且很多css档案通常是共用的，从而大大缩减页面程式码，提高页面浏览速度。2、结构清晰，对搜寻引擎更加友好。更容易被搜寻引擎收录，具备搜寻引擎SEO的先天条件，配合优秀的内容和一些SEO处理，可以获得更好的网站排名。3、相容性更好，符合web标准规范的发展趋势，可以在几乎所有的浏览器上都可以使用，不会出现在不同的浏览器中效果差距很大的情况。4、缩短网站改版时间，因为网站的布局都是通过外部的css档案来控制，只要简单的修改几个CSS档案就可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS档案进行控制，只要修改这个CSS档案中相应的行，那么整个站点的所有页面都会随之发生变动。5、强大的字型控制和排版能力，CSS控制字型的能力比糟糕的FONT标签好多了，CSS不再需要用FONT标签或者透明的1px图片来控制标题、改变字型颜色、字型样式等等。6、提高易用性，使用CSS可以结构化HTML，例如：p标签只用来控制段落，h1-h6标签只用来控制标题，table标签只用来表现格式化的资料等等。你可以增加更多的使用者而不需要建立独立的版本。7、更好的扩充套件性。你的设计不仅仅用于web浏览器，也可以释出在其他装置上，比如PowerPoint等。8、更灵活控制页面布局，通常页面的下载是按照程式码的排列顺序，而表格布局程式码的排列代表从上向下，从左到右，无法改变。而通过CSS控制，您可以任意改变程式码的排列顺序，比如将重要的右边内容先加载出来。9、表现和内容相分离，干净利落，将设计部分剥离出来放在一个独立样式档案中，而网页主要来放置您的内容，你可以减少未来网页无效的可能。10、更方便搜寻引擎收录，并获得更高的评价。用只包含结构化内容的HTML代替巢状的标签，主次分明，搜寻引擎将更有效地搜寻到你的内容，并可能给你一个较高的评价(ranking)。11、Table表格布局灵活性不大，你只能遵循 table tr td 的格式。而div你可以 div ul li 也可以 ol li 还可以 ul li......12、Table表格布局中，垃圾程式码会很多，一些修饰的样式及布局的程式码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。

DIV＋CSS网页布局:

第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。

另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对应的什么CSS语句。当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。

结构化HTML

我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。

如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。

外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。

HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。

开始思考

首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。

如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：

标志和站点名称

主页面内容

站点导航(主菜单)

子菜单

搜索框

功能区(例如购物车、收银台)

页脚(版权和有关法律声明)

我们通常采用DIV元素来将这些结构定义出来，类似这样：

＜div id="header"＞＜/div＞

＜div id="content"＞＜/div＞

＜div id="globalnav"＞＜/div＞

＜div id="subnav"＞＜/div＞

＜div id="search"＞＜/div＞

＜div id="shop"＞＜/div＞

＜div id="footer"＞＜/div＞

这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。

根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。

使用选择器是件美妙的事

id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的图片规则。

另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如，通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络设备中(PDA还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。

一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p 加一个CSS的margin规则就可以实现缩进目的。p是结构化标签，margin是表现属性，前者属于HTML，后者属于CSS。(这就是结构于表现的相分离.)

良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码＜table width="80%" cellpadding="3" border="2" align="left"＞，现在可以只在HTML中写＜table＞，所有控制表现的东西都写到CSS中去，在结构化的HTML中， table就是表格，而不是其他什么(比如被用来布局和定位)。

亲自实践一下结构化

上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到"container"层中又有其它层，结构类似这样：

＜div id="navcontainer"＞

＜div id="globalnav"＞

＜ul＞a list＜/ul＞

＜/div＞

＜div id="subnav"＞

＜ul＞another list＜/ul＞

＜/div＞

嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：你可以给#navcontainer一个规则让列表居右，再给#globalnav一个规则让列表居左，而给#subnav的list另一个完全不同的表现。

用CSS替换传统方法

下面的列表将帮助你用CSS替换传统方法：

HTML属性以及相对应的CSS方法

HTML属性

CSS方法说明

align="left"

align="right" float: left

float: right使用CSS可以浮动任何元素:图片、段落、div、标题、表格、列表等等

当你使用float属性，必须给这个浮动元素定义一个宽度。

marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的，你可以分别指定元素的top, right, bottom和left的margin值。

vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff

a:visited: #339

a:hover: #999

a:active: #00f

在HTML中，链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器，页面不同部分的链接样式可以不一样。

bgcolor="#FFFFFF" background-color: #fff在CSS中，任何元素都可以定义背景颜色，不仅仅局限于body和table元素。

bordercolor="#FFFFFF" border-color: #fff任何元素都可以设置边框(boeder)，你可以分别定义top, right, bottom和left

border="3"cellspacing="3" border-width: 3px用CSS，你可以定义table的边框为统一样式，也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。

你可以使用 table, td or th 这些选择器.

如果你需要设置无边框效果，可以使用CSS定义： border-collapse: collapse

＜br clear="left"＞

＜br clear="right"＞