`
LD_21
  • 浏览: 129415 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

初学DIV+CSS?有六个问题需要您关注一下!

    博客分类:
  • ui
ui 
阅读更多
初学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学习是一条很长的路,真正走下去必须要有一颗虔诚的新心!
0
0
分享到:
评论

相关推荐

    简单设计DIV+CSS模板

    《深入理解:基于Div+CSS的网页设计与布局》 Div+CSS是现代网页设计中的核心技术,它在构建Web标准的网页布局中扮演着至...无论你是初学者还是有经验的开发者,理解和掌握Div+CSS都将对你的网页设计事业产生深远影响。

    div+CSS购物网站模板

    在这个专题中,我们将深入探讨Div+CSS在购物网站模板中的应用,以及它对于网页设计的重要性。 首先,让我们了解什么是Div和CSS。Div(Division)是HTML中的一个布局容器,它允许我们将页面划分为多个独立的区域,...

    DIV+CSS入门教程

    总之,"Div+CSS"入门教程旨在教授初学者如何利用XHTML标签(不仅限于DIV)和CSS进行网页布局,同时强调遵循Web标准和最佳实践,以创建可扩展、可维护的网页设计。在实际工作中,避免误解和滥用技术,如过度依赖DIV或...

    两天驾驭DIV+CSS.pdf

    值得初学者看看的一本很好书。 基础篇 1.1 必须知道的基础知识 知识一 DIV+CSS的叫法是不准确的 标准叫法是xHTML+CSS 知识二两大误区 误区一用了Table就不标准。误区二DIV标签越多越好 Table是...

    适合初学者的39个div+css网页布局例子

    本资源“适合初学者的39个div+css网页布局例子”是为那些刚开始接触网页布局的朋友们精心准备的,旨在帮助他们快速掌握Div+CSS的基础知识和实践技巧。 首先,我们要理解Div(Division,分隔)元素在HTML中的作用。...

    div+csspdf版

    在IT行业中,网页设计是至关重要的一个领域,而"Div+CSS"是构建现代网页布局的基础。本资源包“div+csspdf版”显然聚焦于这个主题,包含了两个关键文件:`css2.0中文手册.chm`和`DIV+CSS布局大全.pdf`。这两个文件都...

    DIV+CSS.rar_DIV_css+div_div+css_html+div+css_web前端

    这个压缩包中的内容旨在帮助初学者掌握 `div+css` 的基本概念和实践应用,对web前端开发有显著的辅助作用。 【描述】提到的"css+div 的入门教程",暗示了该资源可能包含一系列关于如何使用 `div` 元素配合 `CSS` ...

    DIV+CSS教程—十天学会web标准div+css标准之路WORD版

    《DIV+CSS教程—十天学会web标准div+css标准之路》是一份全面且深入的教程,旨在帮助初学者在短时间内掌握网页布局的核心技术——DIV和CSS。此教程以Word文档的形式提供,易于阅读和打印,适合自学或者作为教学参考...

    100个div+css网站模板(后50个)

    这个“100个div+css网站模板(后50个)”的压缩包提供了50个额外的网页设计基础,帮助开发者和设计师们快速构建响应式、美观且易于维护的网站。 Div,全称是Division,是HTML中的一个容器元素,用来分隔和组织页面...

    中文网站div+css

    【标题】:“中文网站div+css” 在网页设计领域,Div+...总的来说,这个“中文网站div+css”资源包可能是初学者掌握网页布局技术的良好起点,通过实践和理解示例,能够逐步掌握Div+CSS的精髓,从而提升网页设计能力。

    红酒宣传DIV+CSS模板

    【标题】"红酒宣传DIV+CSS模板"是一个基于Web标准设计的网页模板,它利用了Div和CSS技术来实现精致的网页布局和样式控制。Div是HTML中的一个块级元素,用于组织页面结构,而CSS(层叠样式表)则负责定义这些Div元素...

    div+css案例,网页设计

    在网页设计领域,Div+CSS是一种常见的...通过分析和实践这些案例,初学者可以掌握Div+CSS的基本用法,进一步提升网页设计能力。同时,理解并熟练运用Div和CSS,将有助于创建更加美观、功能完善的网页,提高用户体验。

    DIV+CSS模板非常好看

    标题“DIV+CSS模板非常好看”表明了这种技术在创建美观界面方面的潜力,而描述则强调了这套模板库对于初学者的价值。本文将深入探讨`DIV+CSS`模板及其对网页设计的影响。 1. **什么是DIV+CSS?** `DIV`是HTML中的...

    div+css网页模板

    Div元素作为一个容器,可以用来组织页面内容,而CSS则负责定义这些Div的样式,包括颜色、字体、布局等,实现了页面样式的统一控制。以下是对这个"div+css网页模板"的详细解析: 1. **Div元素的理解**:Div是...

    DIV+CSS美化网站实用教程

    本教程《DIVCSS布局教程.pdf》将详细讲解这些概念,并通过实例指导如何在实践中应用,从而提升你的网站美化技能。无论你是初学者还是经验丰富的开发者,都能从中受益匪浅,为你的网页设计之路增添更多色彩和可能性。

    div+css+jquery

    随着前端技术的发展,现代框架如 React 和 Vue.js 逐渐流行,但 `div+css+jquery` 依然是许多网站开发的基础,尤其在需要快速开发和轻量级交互效果时。对于初学者来说,掌握这套技术组合是进入 web 开发领域的坚实...

    div+css经典案例源码

    总之,这个div+css经典案例源码资源是初学者宝贵的实践材料,通过深入学习和动手操作,你可以快速提升网页设计技能,为成为一名熟练的前端开发者奠定坚实基础。希望你在这个过程中能收获满满,不断进步。如果你有...

    DIV+CSS学习文档

    【DIV+CSS学习文档】 网页设计与开发领域中,`DIV+CSS`是一种常见的布局技术,它极大地提升了网页的可维护性和效率。本学习文档旨在深入解析`DIV+CSS`的核心概念,帮助初学者理解并掌握这一技术。 一、什么是DIV?...

    DIV+CSS学习资料(一)

    在这个压缩包中,我们有四个文件,都是围绕着这个主题,旨在帮助初学者掌握基础的DIV+CSS布局技巧。 1. **Div+CSS布局入门教程(一二三四).doc**: 这可能是一个分章节的文档教程,详细介绍了如何使用DIV元素进行...

    30个div+css后台模板

    综上所述,这个"30个div+css后台模板"的资源包,为Web开发者提供了丰富的前端设计实例,涵盖了div+css布局的多样性、Java SSH框架的集成以及模板引擎的运用。通过研究和实践这些模板,开发者不仅可以提升自己的前端...

Global site tag (gtag.js) - Google Analytics