转自:http://www.iteye.com/articles/2495
初学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` 的基本概念和实践应用,对web前端开发有显著的辅助作用。 【描述】提到的"css+div 的入门教程",暗示了该资源可能包含一系列关于如何使用 `div` 元素配合 `CSS` ...
本资源"精美css+div网站实例源码"提供了四个不同样式的网站源码,分别是lotusflower、gumamela、CleanandBlue和fotolandia,非常适合初学者和有经验的开发者学习和参考。 1. **CSS布局**: 这些源码实例展示了如何...
《CSS+Div+网页制作全面参考手册》是一本详尽且深入的教程,旨在帮助读者掌握使用CSS(层叠样式表)和Div布局技术进行高效、美观的网页设计。这本手册包含了中文版和英文版,其中英文版是官方权威文档,确保了信息的...
《深入理解:基于Div+CSS的网页设计与布局》 Div+CSS是现代网页设计中的核心技术,它在构建Web标准的网页布局中扮演着至...无论你是初学者还是有经验的开发者,理解和掌握Div+CSS都将对你的网页设计事业产生深远影响。
在这个专题中,我们将深入探讨Div+CSS在购物网站模板中的应用,以及它对于网页设计的重要性。 首先,让我们了解什么是Div和CSS。Div(Division)是HTML中的一个布局容器,它允许我们将页面划分为多个独立的区域,...
3. **学习工具**:对于初学者,通过研究和修改模板,可以深入理解`div+css`布局和样式设计原理。 **四、如何使用div+css模板** 1. **下载与解压**:获取到`div+css`模板压缩包后,将其解压至本地文件夹。 2. **...
本资源“适合初学者的39个div+css网页布局例子”是为那些刚开始接触网页布局的朋友们精心准备的,旨在帮助他们快速掌握Div+CSS的基础知识和实践技巧。 首先,我们要理解Div(Division,分隔)元素在HTML中的作用。...
总之,"Div+CSS"入门教程旨在教授初学者如何利用XHTML标签(不仅限于DIV)和CSS进行网页布局,同时强调遵循Web标准和最佳实践,以创建可扩展、可维护的网页设计。在实际工作中,避免误解和滥用技术,如过度依赖DIV或...
这个“Div+CSS布局入门+实例教程”是为初学者设计的,旨在帮助他们掌握这一核心技术。 Div(Division)是HTML中的一个元素,通常用于组合其他HTML元素,形成一个具有特定意义的区域。Div标签本身没有特定的含义,它...
本篇文章将深入探讨如何利用DIV+CSS+JAVASCRIPT+FLASH技术来构建一个简单而实用的设计网站,适合初学者进行学习和毕业设计参考。 首先,我们来看基础的HTML结构,其中**DIV**(Division)是HTML中的一个块级元素,...
在"压缩包子文件的文件名称列表"中,只有一个名为"DIV-CSS"的文件,这可能是包含所有实例文件的主目录,其中可能有HTML文件、CSS文件以及其他相关的图像或资源文件。HTML文件会使用<div>标签来创建不同的内容区域,...
值得初学者看看的一本很好书。 基础篇 1.1 必须知道的基础知识 知识一 DIV+CSS的叫法是不准确的 标准叫法是xHTML+CSS 知识二两大误区 误区一用了Table就不标准。误区二DIV标签越多越好 Table是...
随着前端技术的发展,现代框架如 React 和 Vue.js 逐渐流行,但 `div+css+jquery` 依然是许多网站开发的基础,尤其在需要快速开发和轻量级交互效果时。对于初学者来说,掌握这套技术组合是进入 web 开发领域的坚实...
综上所述,"DIV+CSS10个模板(含内页)"是一个涵盖网页布局、样式设计、模板使用和自定义优化的综合学习资源,对于初学者和专业开发者来说都是宝贵的学习材料。通过深入研究这些模板,可以提升网页设计技能,并理解...
但需要注意的是,浮动可能会导致父元素的高度塌陷,因此需要使用清除浮动(Clear Fix)来解决这个问题。一种常见的清除浮动的方法是使用伪类`::after`: ```css .clearfix::after { content: ""; display: table;...
这个“100个div+css网站模板(后50个)”的压缩包提供了50个额外的网页设计基础,帮助开发者和设计师们快速构建响应式、美观且易于维护的网站。 Div,全称是Division,是HTML中的一个容器元素,用来分隔和组织页面...
在IT行业中,网页设计是至关重要的一个领域,而"Div+CSS"是构建现代网页布局的基础。本资源包“div+csspdf版”显然聚焦于这个主题,包含了两个关键文件:`css2.0中文手册.chm`和`DIV+CSS布局大全.pdf`。这两个文件都...
【标题】:“中文网站div+css” 在网页设计领域,Div+...总的来说,这个“中文网站div+css”资源包可能是初学者掌握网页布局技术的良好起点,通过实践和理解示例,能够逐步掌握Div+CSS的精髓,从而提升网页设计能力。
Div元素作为一个容器,可以用来组织页面内容,而CSS则负责定义这些Div的样式,包括颜色、字体、布局等,实现了页面样式的统一控制。以下是对这个"div+css网页模板"的详细解析: 1. **Div元素的理解**:Div是...
通过研究这个整站模板,初学者可以深入理解CSS+Div的实践应用,而经验丰富的设计师则可以从中汲取灵感,优化自己的设计技巧。同时,这也是一种分享和学习的良好方式,提醒我们技术社区的互助精神。 总之,CSS+Div...