基于CSS DIV方式的网页设计的心得体会

DIV+CSS⽹页布局⼼得我们在⼀直强调交流的重要性，只有通过交流才能发现⾃⼰的不⾜，才能明确的知晓⾃⼰到底掌握了多少知识，哪些地⽅不⾜，哪些地⽅已经掌握，今天与⼤家分享⼀位jb51⽹友的DivCSS⽹页布局⼼得。

DIV+CSS是⽬前互联⽹⽹页制作最热门的⽅法，但对于完全⼿写代码，许多⽹页设计师都望⽽⽌步。

其实DIV+CSS是很简单的⼀种布局⽅式，甚⾄⽐任何⼀种编程语⾔都要简单(虽然它不能算是编程语⾔)。

⾸先你要知道，当你开始学习DIV+CSS的时候，你要把以前所有⽤DW画布局表格的思维⽅法忘的⼀⼲⼆净(如果你以前是⽤TABLE布局的话)，然⽽这项技术更适合刚接触⽹页制作的⼈。

然后你要知道，DIV+CSS是⾼成本开发，速度当然是没有你画TABLE来的快，但是好处更多，相信如果你能看到这⾥，你⼀定对DIV+CSS的好处也有⼀定的了解了。

最后你还得知道，你所⽤的⼯具，你可能认为Dreamweaver很好，没错，它的确不错，但你要认识到，当你熟练使⽤了这门技术，你就可以在任何⽂本编辑器中编写⽹页，甚⾄在记事本中，⽽dreamweaver只是充当⼀个⽂本编辑器的⾓⾊，⽽你所有的⼯作基本都在代码视图中完成，在这⾥我推荐adobe最新的dreamweaver cs4。

当然如果CS5出现了我也会去试⽤它。

切⼊正题，其实DIV+CSS正确的说法应该是XHTML+CSS，说成DIV的原因只是让它能更明确地和TABLE布局⽅法区分开来，并不是说⼀个页⾯⾥没有TABLE，⽽是在什么地⽅使⽤TABLE，你要认识到TABLE是表格，是存放数据⽤的，⽽不是⽤来布局的。

接下来是布局思维⽅式，可能⼤家在接触DIV+CSS的时候⽆从下⼿，我现在向⼤家推荐最著名的盒⼦模型，我也是看了这个模型后⼀下⼦就开窍了。

你可能会说，好多英⽂看不懂，不过我告诉你，很抱歉那三个英⽂你必须记住，⽽且是最重要的三个，你可以把这么个盒⼦看成⼀个DIV，⽽所有标签都带有这三个属性。

网页制作DIV+CSS工作心得体会一、头部的定义1、content=“IE=EmulatEiE7" 这句是把IE8 浏览器强制使用IE7的兼容模式2、头部的DTD定义要根据需要定义（一般不用管它）二、DIV布局1、居中问题：IE通过设置text-align属性为center可以实现，margin:0 auto;可以实现ＤＩＶ居中，但前提是DIV不能再float。

bodydiv id=”wrapper”/divbody#wrapper { Width:720px; Margin:0 auto; }2、Div之间默认是会自动换行的，如果要实现不换行就要应用float或借助绝对定位。

同级的元素尽量同时浮动或者不浮动，这样有利于控制和兼容性。

3、绝对定位问题：如果一个父Div的几个子Div要实现绝对定位，切记父Div的position属性一定要设置为relative，几个子Div的position则设置为absolute。

为了实现子Div的精准定位，子Div的高度和宽度都建议明确规定像素大小。

Z-index属性值为整数，属性值大的在上层。

Left、right、top、bottom、四个属性控制子DIV的位置。

4、外连文件式CSS放在在网页的〈head〉与〈/head〉之间加上一句这样的代码：〈link rel="stylesheet" href="在这里填上你的CSS文件地址（相对路径+文件名）" type="text/css"〉5、首行缩进“text-indent”右面的缩进单位选择框中“em”指的就是字符位（1汉字）。

6、盒子模型虚线内部是内容显示的地方，黄色的地方是算在border里面的，同时背景图片也是计算黄色区域的面积的（padding与背景图片这样经常搭配实现一些效果的）。

三、CSS样式1、CSS权重（优先级）div class="case1" id="case2" style="cloor:red"/divstyle.case2{样式内容}#case2{样式内容}/style以上为例：权重最高的是style="cloor:red"，然后是ID="case2" 最后是class。

DIV+CSS布局使⽤的个⼈⼼得⽹站制作离不开⽹页布局就是说DIV+CSS都会涉及到的，以下是⼯作中总结的⼀些技巧，留下备⽤，也可以学习。

1、ul：默认的ul的margin和padding不是0，如果在导航中⽤到了左浮动的li，往往会把外部的div撑⼤，导致页⾯变形，改成：ul{margin:0px; padding:0px;}2、img：（1）这⾥牵涉的不同浏览器的问题，ie6⾥显⽰的图⽚height总是要⼤于准确值，这⾥就需要我们记住下⾯这⼀点 img{ display：block}；（2）页⾯中最好不要⽤⼤块背景，能平铺的要平铺，否则加载起来会很慢，也不利于以后的优化和扩展，当然也有些⼤的⽹站，现在都尽量把背景统⼀放到⼀张图⽚上，⽤background-postion来取得背景。

（3）最好的格式就是gif格式，即确保了背景透明，在ie6中⼜不会有阴影，有时gif图⽚会有锯齿，这就需要我们保存成web格式，设置⼀下matter，matter的值⽤背景颜⾊的值越相近越好。

3、overflow：有时⼀些公司的注册协议都是很长，这就⽤到了overflow，可以把div的style⾥加上这个：overflow：auto4、float：有时候⼀些div会挤到页⾯的上⽅，这⾥可能就是浮动引起的，可以加上clear：both。

5、div：height等于1px的div，在ie6中可能并不是1px，在这个div的style⾥加上font-size：1px;这样就ok了。

6、id和class：当⼀个样式在页⾯中多次使⽤时，不要⽤id，要⽤class，要使⽤js的时候，样式最好不要⽤id，因为id要留给js使⽤。

7，link：.link：link{}、.link：visited{}、.link：hover{}、.link：active{}。

有⼀点，visited与hover的顺序⼀定不能倒换，否则ie6中会⼤⼤的问题。

实训4 div+css综合运用一、背景介绍在Web开发领域，div和css是两个基础、重要的概念。

div是HTML中的一个标签，用来划分网页的结构和布局；而css是一种样式表语言，用于描述HTML文档的呈现方式。

实训4中涉及到了div 和css的综合运用，旨在帮助学习者掌握这两个技术，并且能够灵活运用于实际项目中。

二、整体评估在实训4中，学习者需要通过实际操作，完成一个包含头部、导航、内容区域和底部的网页布局。

这样的任务要求对div和css的综合运用提出了很高的要求，需要考虑到页面的整体结构、样式和布局。

在评估过程中，我发现学习者需要注意以下几点：1. 结构清晰：div标签应该按照页面的结构和布局来合理地进行划分和嵌套，以确保页面结构清晰、层次分明。

2. 样式统一：css样式应该对整个页面起到统一、协调的作用，保证整体的美观和一致性。

3. 响应式布局：在综合运用中，需要考虑到不同设备上的显示效果，保证页面能够适配不同的屏幕尺寸。

4. 创新设计：除了基本的布局要求，学习者还可以通过css的特效和动画等进行创新设计，提升页面的互动性和吸引力。

三、文章撰写在本次实训4中，我们深入学习了div和css的综合运用，从理论到实践，都有了全面的了解和掌握。

通过对div的合理划分和css的样式设置，我们可以轻松实现一个精美、完善的网页布局。

在整个过程中，我对div和css的重要性有了更深的理解。

div作为网页设计中最基础的组件，它的合理划分和嵌套对于页面的结构和布局起着至关重要的作用。

通过div的灵活运用，我们可以将页面分割成不同的模块，从而更好地呈现页面内容，提高用户的浏览体验。

css则是页面样式的设计师，通过设置各种样式属性，我们可以实现页面的美化和个性化定制。

通过css的盒子模型、浮动布局、弹性布局等特性，我们可以完美定制各种不同风格的网页布局。

在综合运用的过程中，我深刻体会到了对div和css的熟练掌握意味着更自由地实现网页设计的愿景。

Many things in life are not that we can't do it, but that we don't believe it can be done.整合汇编简单易用（页眉可删）页设计的心得体会（通用6篇）页设计的心得体会1页设计伴随着络的快速发展而快速兴起，作为上的主要依托，由于人们使用络的频繁而变得非常重要。

生活中我每天上都要接触到页，原来没有留意过页的设计，但是经过这段时间的学习了解，现在我打开一个页都会习惯性的先看看排版、布局和色彩运用。

通过老师的讲解和对课本的翻阅，我学习到了一些关于建设和制作页的知识，对页制作的基础知识也有了一定的掌握。

通过Dreamweaver制作页，我用到了一些基本的功能：图片插入和对齐设置；文字的格式、颜色、背景颜色的设置等。

但是在自己尝试着做的时候，总是出现这里那里的问题。

不是图片不能固定在自己想要的位置，就是滚动文本的显示区域不知道为什么撑过了页面，还有就是不同分辨率、不同浏览器都会对浏览页产生影响。

而且在CSS方面，我总是不太熟悉各种代码是控制哪些东西的。

除了查找解决问题我还总结了经验。

例如：1、命名站点或者文件夹的的时候一定要注意，最好用相应的英语或者汉语拼音，要见名知意，如图片文件夹用image或者tu，这样可以避免页面调用时不正确的现象发生。

2、调用Style时可以单击鼠标右键选择Custon Style来调用Style标准，也可以在状态栏中的元素列表上单击右键来调用Style。

虽然不同的方法达到的效果看似一样，但实际上产生的HTML代码则完全不同。

在这个过程中，我同样认识到页设计不是一门学科的独秀，而是多种课程的综合，它是Flash、Photoshop 等页软件的综合应用。

例如Flash提供了功能齐全的绘图和编辑图形工具。

可以直接在编辑区里绘画，编辑修改非常灵活，它的另一大特点是“交互性”强。

在动画播放时，可以用鼠标或键盘对动画的播放进行控制，可以很直观的反映出效果。

关于网页设计课程心得体会范文（精选5篇）从某件事情上得到收获以后，心得体会是很好的记录方式，从而不断地丰富我们的思想。

到底应如何写心得体会呢？下面是小编整理的关于网页设计课程心得体会范文（精选5篇），仅供参考，欢迎大家阅读。

网页设计课程心得体会1不知不觉，二个星期的《网页设计与网站建设》课程的实操即将过去，回顾这一段日子，真的令我体会很深，也学会很多东西，懂得很多以前不懂的东西，也明白了一些事情。

自从第一天接触《网页设计与网站建设》课程，我以下定决心要把网页这门课学好，做出一个优秀的网站。

所以我时刻没有错过任何学习的机会，无论在课堂上，还是在课外上。

更何况这一次实操。

回顾今次的实操我觉得我过得很充实，很有意义，因为我可以诚实的说我在实操没有玩过一次游戏，我每时每刻都在设计网站，还记得晚上做网站做到一、二点，可能有人会说我傻，但正因为这个傻的行动，令我学会很多东西，学会别人不懂的东西，做出一个令自己满意的网站，可能跟别人比还需要继续完善，但我不会因为实操结束，就把网页设计抛到九霄云外，我会继续学习网页设计技术，把它变为自己的一项特长。

回顾第一天的《网页设计与网站建设》课程实操，老师叫我们继续完善以前设计的网站，做出留言板、注册的功能。

我很快就完成了，但可能我是一个追求完善的人，所以尽管一个网站做好可以马上交给老师。

但我做出一个别人都不赞同的决定，从头开始做一个网站。

因为我觉得以前那个真的不是太好，尽管实操的时间过去了一半，尽管别人对我说你交原来这个不就行了吗！何必再做一个呢？但真因为我的执著，追求成功，追求完善的人，才会使我今天交出一个令自己满足的答卷。

在制作个人网站时我们首先：一、必需进行个人网站前台功能设计包括个人网站主题的确定，前台功能设计与管理、个人网站主页设计、个人网站留言板、注册、忘记密码、搜索等网页设计与管理。

二、对个人网站后台管理功能设计包括个人网站后台管理功能的设计、后台管理信息系统功能的设计、后台系统权限管理、后台文件管理、个人网站后台管理系统主页设计。

基于DIV+CSS的网页设计技术摘要：本文首先介绍了div和css技术的特点，然后对css盒子模型进行了分析，最后通过具体的实例讲解了div+css网页布局技术的方法和实现流程，实例表明，该技术具有代码简洁、表现和内容相分离等优势。

关键词：div css 网页设计0 引言html[1](hypertext mark-up language)，即超文本标记语言，是当前网络上应用最为广泛的语言，也是组成网页文档的基本语言。

html主要包括头部（head）、主体（body）两大部分，头部是描述浏览器所需要的信息，主体则包含所要说明的具体内容。

在一般网页设计中，我们需要设计的内容就体现在主体中。

div元素是用来为html文档内大块的内容提供布局的结构和背景。

它是html中的一个标签，此标签的作用就是定位网页内容中的图片、文字、视频等相关信息。

一般我们也叫为div层定位。

css(cascading style sheet)，层叠样式表，是用于控制网页样式并允许将样式信息与网页分离的一种标识性语言。

css 是 1996由w3c 审核通过，并且推荐使用的。

css 的引入就是为了使 html语言更好的适应页面的美工设计。

它以 html语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者可以针对各种可视化浏览器（包括显示器、打印机、打字机、投影仪和 pda 等）来设置不同的样式风格。

css的引入引发了网页设计一个又一个的新高潮。

使用css设计的优秀页面层出不穷。

1 css盒子模型[2]盒子模型是css控制页面时一个很重要的概念，只有很好的掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。

所有页面中的元素都可以看成是盒子，占据着一定的页面空间，一般说来这些被占据的空间往往要比单纯的内容大。

换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置和大小。

一个页面由很多这样的盒子组成，这些盒子之间会相互影响，因此掌握盒子模型需要从两方面来理解。

div + css网页布局的优点在网页设计和开发中，采用div + css的布局方式已经成为了一种主流的选择。

相比于传统的表格布局方式，div + css布局具有许多优点。

本文将介绍div + css网页布局的优点，并探讨其对网页设计和开发的影响。

1. 灵活性Div + css布局方式的最大优点之一是其灵活性。

通过使用div元素和css样式，我们可以实现各种不同的布局效果。

无论是简单的两栏布局还是复杂的多栏布局，都可以通过div + css轻松实现。

此外，div + css布局还可以实现响应式设计，使网页在不同屏幕尺寸下都能够良好地适应。

2. 可维护性采用div + css布局的网页具有较高的可维护性。

由于div元素和css样式的分离，使得对网页布局和样式的修改更加方便快捷。

我们只需对相应的div元素或css样式进行修改，而不需要改动网页的其他部分。

这样一来，网页的维护和更新变得更加容易，节省了大量的时间和精力。

3. SEO友好相比于传统的表格布局，div + css布局对搜索引擎优化（SEO）更加友好。

搜索引擎通常将html文档中的内容按照其出现的先后顺序进行索引。

而采用div + css布局可以将网页的内容放在html文档的前面部分，使其更容易被搜索引擎爬取到。

此外，我们还可以通过合理的使用div元素和css样式来提高关键词的权重，从而提高网页在搜索结果中的排名。

4. 可访问性div + css布局可以提升网页的可访问性。

使用div元素和css样式来创建网页布局，可以使页面结构更加清晰简洁。

这对于视觉障碍用户和残障用户来说非常重要，因为他们可以通过屏幕阅读器和其他辅助技术更好地理解和访问网页的内容。

5. 页面加载速度快相比于传统的表格布局，div + css布局可以使网页加载速度更快。

表格布局需要加载大量的html代码和样式表，在网页加载时需要下载更多的数据量。

而div + css布局通过使用更少的html代码和css样式，减少了网页的下载时间，从而提高了页面加载的速度。

DIV+CSS工作心得
第一、灵活应变。

DIV+CSS技术不断发展，新技术不断涌现，我们要不断学习，了解
最新的技术和趋势。

客户的需求也随着时间不断变化，我们需要及时调整和处理，力求达
到最佳的效果。

比如，当移动设备开始普及时，我们需要尽快学习响应式设计的技术，开
发适配移动设备的网站。

第二、代码优化。

优化代码的目的是提高网站的性能和用户体验。

我们需要了解网站
的访问时间、页面大小、JS文件大小等数据，寻找优化的空间。

比如，我们可以压缩CSS
代码和JS代码，减小网页的大小，从而提升网站的访问速度。

优化代码也需要考虑兼容性，在测试时要对各种浏览器进行兼容性测试。

第三、跨平台适用。

现在的网站用户使用的设备不仅仅有桌面电脑，还有平板、手机
等移动设备。

我们需要尽可能地多测和多平台开发，确保网站可以在不同的设备和浏览器
上运行良好。

根据用户的不同需求和使用习惯，我们要进行有针对性的CSS开发。

第四、细节处理。

在开发过程中，往往有很多细节需要处理。

这些细节包括按钮、链接、颜色等，虽然看似微小，但在网页用户体验方面却有着不可忽视的作用。

我们要注意
细节处理，从而体现网站的专业性和质量，以及使用户体验更加友好和便捷。

总之，DIV+CSS工作不仅需要技术实力，还需要勇于尝试和学习新技术，优化代码，
跨平台适用和注重细节。

只有在不断学习、不断尝试的基础上，才能更好地满足客户需求，将网站从好到更好的方向发展。

对于Div+CSS+javascript的网页界面设计及优化的点滴学习体会第二版网站已经基本成型，从CMS转化为全代码团队自己编制，我们经历了很多承受了很多也学到了很多。

而对于界面的设计，我们采用的是div+css+javascript，即层布局+层叠式样式表+网页特效。

在自学Dreamweaver时，刻意避开了div和css，用的是表格布局与框架布局。

那么div 布局与表格布局和框架布局的异同点在哪里呢？从学习比较来看，相同点主要是可以实现网页内容的集中展示，而不是零散的块状网页模块。

简单来说，它们是实现网页布局的三种不同形式。

表格布局与框架布局，如果实践过可以知道，框架布局相当于把整个网页分成几块，分别在这几块里分别进行布局，可以插入表格也可以使用div。

而表格布局与div布局相比，表格布局的优点是，它可以很好地框定网页的结构，可以在可视化的布局环境里随心所欲地调整块状内容，它在各种浏览器中的体现也是正常无误的。

对于初学者而言，表格布局是非常好的选择，同时现有网页中很多是使用表格布局，但是对于网站的后期维护而言，它就会比较浪费时间，维护困难，虽然可以用include外联文件，也只是一个权宜之计。

Div布局的话，它的优点是，通过与css相配合，可以用纯代码控制网页布局，层是可以浮动的。

对于后期的维护而言是十分便利的，现在为主流的网页布局形式。

缺点是很难控制层与层之间的良好位置。

用div布局，css发挥着不可磨灭的作用，在学习使用css之前，曾经问过TB，难不难，他只说了一句话：可以两天学会，关键在怎么应用。

对于css与div的结合，如果懂得它的具体属性，那么网页的布局将是游刃有余的事。

Css主要有背景属性、边框属性（border）、文本属性、字体属性、外边距属性（margin）、内边距属性（padding）、列表属性、内容生成、轮廓、尺寸属性、分类属性、定位属性、伪类、伪元素等。

在我们网页布局时，最最简单的是使用边框属性与内外边距属性。