初学DIV+CSS?有六个问题需要您关注一下!作为DIV+CSS初学者,如果在动手写代码之前对网页整体结构由一个清晰认识的话,写起来会事半功倍!但是,写的过程中总是有这样那样的问题,使得我们不得不停下来去查找资料,弄清属性定义等等!
其实有很多方法可以在提高我效率的同时让我们对DIC+CSS有更深刻的理解!下面我们列举几点:
一、CSS命名规范:
1、文件命名规范
全局样式:global.css;
框架布局:layout.css;
字体样式:font.css;
链接样式:link.css;
打印样式:print.css;
2、常用类/ID命名规范
页 眉:header
内 容:content
容 器:container
页 脚:footer
版 权:copyright
导 航:menu
主导航:mainMenu
子导航:subMenu
标 志:logo
标 语:banner
标 题:title
侧边栏:sidebar
图 标:Icon
注 释:note
搜 索:search
按 钮:btn
登 录:login
链 接:link
信息框:manage
……
二、处理浏览器BUG问题
关于这点,不知那位高人把CSS BUG变成顺口溜了!在这里引用一下,很容易记住的!
1、IE边框若显若无,须注意,定是高度设置已忘记;
2、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中;
3、三像素文本慢移不必慌,高度设置帮你忙;
4、兼容各个浏览须注意,默认设置行高可能是杀手;
5、独立清除浮动须铭记,行高设无,高设零,设计效果兼浏览;
6、学布局须思路,路随布局原理自然直,轻松驾驭html,流水布局少hack,代码清爽,兼容好,友好引擎喜欢迎。
三、所有标签皆有源
只是默认各不同,span是无极,无极生两仪—内联和块级,img较特殊,但也遵法理,其他只是改造各不同,一个*号全归原,层叠样式理须多练习,万物皆规律。
四、图片链接排版须小心
图片链接文字链接若对齐,padding和vertical-align:middle要设定,虽差微细倒无妨。
五、IE浮动双边距
请用display:inline。
六、列表横向排版
列表代码须紧靠,空隙自消须铭记。
DIC+CSS学习是一条很长的路,真正走下去必须要有一颗虔诚的新心!
分享到:
相关推荐
《深入理解:基于Div+CSS的网页设计与布局》 Div+CSS是现代网页设计中的核心技术,它在构建Web标准的网页布局中扮演着至...无论你是初学者还是有经验的开发者,理解和掌握Div+CSS都将对你的网页设计事业产生深远影响。
在这个专题中,我们将深入探讨Div+CSS在购物网站模板中的应用,以及它对于网页设计的重要性。 首先,让我们了解什么是Div和CSS。Div(Division)是HTML中的一个布局容器,它允许我们将页面划分为多个独立的区域,...
标题 "160个DIV+CSS网页模板" 暗示了这是一份包含大量基于Div和CSS设计的网页布局示例的资源包。这些模板是网页开发者在创建响应式、结构化的网页时的重要参考资料,可以帮助他们快速理解和应用Div+CSS技术。 Div,...
总之,"Div+CSS"入门教程旨在教授初学者如何利用XHTML标签(不仅限于DIV)和CSS进行网页布局,同时强调遵循Web标准和最佳实践,以创建可扩展、可维护的网页设计。在实际工作中,避免误解和滥用技术,如过度依赖DIV或...
值得初学者看看的一本很好书。 基础篇 1.1 必须知道的基础知识 知识一 DIV+CSS的叫法是不准确的 标准叫法是xHTML+CSS 知识二两大误区 误区一用了Table就不标准。误区二DIV标签越多越好 Table是...
本资源“适合初学者的39个div+css网页布局例子”是为那些刚开始接触网页布局的朋友们精心准备的,旨在帮助他们快速掌握Div+CSS的基础知识和实践技巧。 首先,我们要理解Div(Division,分隔)元素在HTML中的作用。...
在IT行业中,网页设计是至关重要的一个领域,而"Div+CSS"是构建现代网页布局的基础。本资源包“div+csspdf版”显然聚焦于这个主题,包含了两个关键文件:`css2.0中文手册.chm`和`DIV+CSS布局大全.pdf`。这两个文件都...
这个压缩包中的内容旨在帮助初学者掌握 `div+css` 的基本概念和实践应用,对web前端开发有显著的辅助作用。 【描述】提到的"css+div 的入门教程",暗示了该资源可能包含一系列关于如何使用 `div` 元素配合 `CSS` ...
《DIV+CSS教程—十天学会web标准div+css标准之路》是一份全面且深入的教程,旨在帮助初学者在短时间内掌握网页布局的核心技术——DIV和CSS。此教程以Word文档的形式提供,易于阅读和打印,适合自学或者作为教学参考...
这个“100个div+css网站模板(后50个)”的压缩包提供了50个额外的网页设计基础,帮助开发者和设计师们快速构建响应式、美观且易于维护的网站。 Div,全称是Division,是HTML中的一个容器元素,用来分隔和组织页面...
【标题】:“中文网站div+css” 在网页设计领域,Div+...总的来说,这个“中文网站div+css”资源包可能是初学者掌握网页布局技术的良好起点,通过实践和理解示例,能够逐步掌握Div+CSS的精髓,从而提升网页设计能力。
【标题】"红酒宣传DIV+CSS模板"是一个基于Web标准设计的网页模板,它利用了Div和CSS技术来实现精致的网页布局和样式控制。Div是HTML中的一个块级元素,用于组织页面结构,而CSS(层叠样式表)则负责定义这些Div元素...
在网页设计领域,Div+CSS是一种常见的...通过分析和实践这些案例,初学者可以掌握Div+CSS的基本用法,进一步提升网页设计能力。同时,理解并熟练运用Div和CSS,将有助于创建更加美观、功能完善的网页,提高用户体验。
标题“DIV+CSS模板非常好看”表明了这种技术在创建美观界面方面的潜力,而描述则强调了这套模板库对于初学者的价值。本文将深入探讨`DIV+CSS`模板及其对网页设计的影响。 1. **什么是DIV+CSS?** `DIV`是HTML中的...
Div元素作为一个容器,可以用来组织页面内容,而CSS则负责定义这些Div的样式,包括颜色、字体、布局等,实现了页面样式的统一控制。以下是对这个"div+css网页模板"的详细解析: 1. **Div元素的理解**:Div是...
本教程《DIVCSS布局教程.pdf》将详细讲解这些概念,并通过实例指导如何在实践中应用,从而提升你的网站美化技能。无论你是初学者还是经验丰富的开发者,都能从中受益匪浅,为你的网页设计之路增添更多色彩和可能性。
随着前端技术的发展,现代框架如 React 和 Vue.js 逐渐流行,但 `div+css+jquery` 依然是许多网站开发的基础,尤其在需要快速开发和轻量级交互效果时。对于初学者来说,掌握这套技术组合是进入 web 开发领域的坚实...
总之,这个div+css经典案例源码资源是初学者宝贵的实践材料,通过深入学习和动手操作,你可以快速提升网页设计技能,为成为一名熟练的前端开发者奠定坚实基础。希望你在这个过程中能收获满满,不断进步。如果你有...
【DIV+CSS学习文档】 网页设计与开发领域中,`DIV+CSS`是一种常见的布局技术,它极大地提升了网页的可维护性和效率。本学习文档旨在深入解析`DIV+CSS`的核心概念,帮助初学者理解并掌握这一技术。 一、什么是DIV?...
在这个压缩包中,我们有四个文件,都是围绕着这个主题,旨在帮助初学者掌握基础的DIV+CSS布局技巧。 1. **Div+CSS布局入门教程(一二三四).doc**: 这可能是一个分章节的文档教程,详细介绍了如何使用DIV元素进行...