css重构代码，html重构

做好DIV+CSS的网页重构需要关注哪些问题

1、div+css布局好处：便于维护，有利seo（谷歌将网页打开速度作为排名因素及SEO因素），网页打开速度更快，符合web标准等。

2、页面重构需要具备足够的耐心，反反复复；js工程师要不重复自己。页面重构需要了解设计师的想法；js工程师需要了解后端工程师的想法。页面重构偏艺术，需要想象力；js工程师偏程序，需要逻辑思维。

3、新建一个html文件，命名为test.html，用于讲解div+css布局的基本流程。在test.html文件内，对body进行样式初始化，设置外边距margin为0，内边距padding为0，同时使用text-align设置文字居中。

4、可观性差：用户在编辑的时候并不能立即看到编辑效果，需要预览才可看到。建站繁琐：相对于新手来说，对代码不是很了解，操作起来很是麻烦。

相关问答

Q1: CSS中添加什么属性,可以使padding不影响整体大小

css3有个box-sizing的属性，可以实现padding不影响整体大小，即 box-sizing：border-box；但是box-sizing是css3属性，不兼容IE8及以下版本。

添加box-sizing：border-box，容器内子元素增加padding，border。容器宽度都不会被撑开。

好像没有什么属性使padding不影响整体大小。可以换一种思路。在需要padding的元素上添加一个父元素，来模拟padding。

会的，如想要设置html元素的padding时，不影响元素的宽高，可以给元素增加个css属性 box-sizing： border-box；添加这个属性后，给元素设置padding时，就不会影响元素的宽高了。

根据box-sizing属性改变设定，可以在区域大小中设置padding和border。这使得可以确定盒子的大小而不受padding和border的影响。

边框会额外增加盒子的实际大小。因此我们有两种方案解决：padding 属性用于设置内边距，即 边框与内容 之间的距离。padding 属性（简写属性）可以有一到四个值。以上 4 种情况，我们实际开发都会遇到。

Q2: 两个css样式相同,id或class不一样,如何合并为一个样式

两个css样式相同，id或class不一样，如何合并为一个样式？id是唯一标识符，一般应该是id不同，class相同；id相同有可能会导致一些问题，比如获取用id获取元素的时候只能获取到第一个，之后的都获取不到之类的。

）如果是2个css文件，只要把其中一个文件拷贝到另一个文件中即可，但是要注意样式之间的权级问题，所以后面的权级比前面的高，父级指定的子集比单独的子集权限高。2）如果是html页面中的样式，同理只要粘贴到一起就好了。

所以，请不要使用元素的特性(颜色，位置，大小等)来命名一个class或id，您可以选择意义的命名如：#navigation{...}，.sidebar{...}，.postwrap{...}这样，无论你如何修改定义这些class或id的样式，都不影响它跟HTML元素间的联系。

Q3: 网站设计时页面怎么布局比较好

1、第网站页面布局的类型 页面设计有许多类型，常见的页面布局有拐角型、T字型、L型、方块型、综合框架型、动画型、变换型等等，可供选择的页面布局有很多，我们要结合自己的网站设计目标和功能性来选择页面布局。

2、可以采用分类布局的格式 对于网站首页来讲，忌讳的就是将五花八门的信息全部设置在首页，这样的页面设置只会让用户感觉到眼花缭乱，甚至没有一点兴趣继续浏览下去，在这样的信息群当中寻找用户想要的信息，用户的体验感极差。

3、左右框架类型：这是一种左右为分别两页的框架结构，一般布局是：左边是导航链接，最上面有时是一个小的标题或标致，而右面就是主要内容。

Q4: 如何学习页面重构/对页面重构理解_html/css_WEB-ITnose

页面重构师，从事的工作简单的说就是“将设计稿转换成web页面”，工作内容可以简单到直接把PSD从PS里导出成网页，也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。

注意块与块之间的逻辑，通过做实际的项目来练习，你会发现过程中会出现很多问题，然后通过自己上网查找，或者问别人，慢慢的你就会发现你写整个页面也得心应手了。

页面重构怎么操作页面重构怎么操作 您好，基本的HTML+CSS+Javascript是需要掌握的，基本的photoshop操作是需要会的。然后掌握一些常用的框架，比如jquery，bootstrap等。掌握的技术当然是越多越好，但是还需要一定的深度。

DIV+CSS布局的确是重构里非常重要的一环，才子今天就讲讲布局方面的几点建议。 请设计一套适合自己风格的布局(含XHTML及CSS)。

． 一个段子开题不必太严肃，写博客也不像写书，像聊天似的写东西是最好的表达方式。记得之前看过一个段子，也可能是一件真事儿，这不重要。

Q5: DIV+CSS有什么优点?

缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。强大的字体控制和排版能力。

使用 div 和 CSS 可以使页面结构更加清晰，代码更易于维护。可重用性： CSS 可以被多个页面重用，减少了代码冗余。易于修改： 使用 CSS 可以轻松地更改页面的布局和样式。

保持视觉的一致性 DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。

DIV+CSS布局，其实更准确的叫法是“HTML+CSS布局”，是选择合理的标签利用CSS来完成页面布局，其主要特点与优势如下：符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。

css重构代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html重构、css重构代码的信息别忘了在本站进行查找喔。