1)文档类型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这句话标明本文档是过渡类型,另外还有框架和严格类型,目前一般都采用过渡类型,因为浏览器对XHTML的解析比较宽松,允许使用HTML4.01中的标签,但必须符合XHTML的语法。许多朋友在制作页面时,往往喜欢把这句删除掉,在这里建议大家一定要保留这句话,删除它后可能引起某些样式表失效或其它意想不到的问题。
2)语言编码
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />包含的css样式表和其它文件也必须和本文档的编码一样,要不就会出现乱码。
3)css样式
外部样式
内部样式
行内样式
导入样式 :链接样式是以@import url标记所链接的外部样式表,它一般常用在另一个样式表内部。如layout.css为主页所用样式,那么我们可以把全局都需要用的公共样式放到一个global.css的文件中,然后在layout.css中以@import url("/css/global.css")的形式链接全局样式,这样就使代码达到很好的重用性。@import url("/css/global.css");
4>盒模型
我们可以把它想像成现实中上方开口的盒子,然后从正上往下俯视,边框相当于盒子的厚度,内容相对于盒子中所装物体的空间,而填充呢,相当于为防震而在盒子内填充的泡沫,边界呢相当于在这个盒子周围要留出一定的空间,方便取出。是不是这样就很容易理解盒模型了。
所以整个盒模型在页面中所占的宽度是由
左边界+左边框+左填充+内容+右填充+右边框+右边界
组成,而css样式中width所定义的宽度仅仅是内容部分的宽度,这是许多朋友容易搞混的地方
分享到:
相关推荐
1. 盒模型:包括内边距(padding)、边框(border)和外边距(margin),理解盒模型对于精确控制元素尺寸至关重要。 2. 浮动(float)和清除(clear):用于实现元素的侧边对齐和阻止元素因浮动而影响其他元素布局。...
1. **HTML基础知识**:首先,理解HTML(超文本标记语言)是构建网页的基础,div元素是HTML中用于划分页面区域的重要标签。了解如何创建和组织div,以及如何为它们添加类或ID以便在CSS中引用。 2. **CSS介绍**:CSS...
1. **CSS布局**: 这些源码实例展示了如何利用CSS来实现响应式设计,使网页在不同设备上都有良好的显示效果。CSS布局技术包括流体布局、网格系统、Flexbox和Grid布局,其中Flexbox适用于一维布局,Grid则更适合二维...
1. **盒模型理解**:CSS中的盒模型是理解布局的基础,它包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。通过调整这些属性,我们可以精确控制元素的大小和位置。 2. **定位机制**:CSS提供了...
这本书提供了5个完整的网站设计案例,通过这些案例,读者可以深入理解并掌握CSS+DIV在实际应用中的技巧和策略。 CSS(Cascading Style Sheets)是网页设计中用于控制表现样式的重要工具,它将内容和表现分离,使得...
1. 浮动布局:早期的`CSS+DIV`布局常使用`float`属性,让元素在容器中浮动,实现左右排列或自适应布局。 2. 盒模型:理解盒模型是布局的关键,它包括元素的内容、内边距、边框和外边距,影响元素的总尺寸。 3. 定位...
1. CSS选择器:CSS的选择器是用于定位HTML或XML文档中元素的规则,如类选择器(.class)、ID选择器(#id)、标签选择器(div, p等)和伪类选择器(:hover, :active等)。正确使用选择器可以提高样式代码的效率和可维护性。...
《CSS+Div构建的高效网站后台模板解析》 在网页设计与开发领域,CSS(Cascading Style Sheets)和HTML的结合使用已经成为构建现代网页的标准技术。尤其在网站后台设计中,CSS+Div布局方式因其灵活性、可维护性和...
"jsp css+div 后台框架"是一种常见的前端与后端技术组合,用于构建高效、美观且用户友好的Web应用程序。这种框架结合了Java...总的来说,选择一个合适的“jsp css+div 后台框架”对于开发高质量的Web项目至关重要。
CSS是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的样式语言,而<div>则是HTML中一个非常重要的结构元素,常用来组织和分组页面内容。 在网页设计中,CSS+DIV技术的运用极大地提升了网页的可维护性和...
【CSS+Div模板技术详解】 ...综上所述,CSS+Div模板技术是现代网页设计的重要工具,它使得网页布局更加灵活、易维护,是每个前端开发者必备的技能之一。熟练掌握这项技术,可以极大地提升网页设计的质量和效率。
《CSS+DIV详解网站好帮手》是一本深入解析CSS(层叠样式表)与DIV(定位元素)技术的专业书籍,对于网页设计和开发人员来说,无疑是一份宝贵的参考资料。CSS与DIV是构建现代网页布局的核心工具,它们的合理运用能够...
### CSS+DIV常用方法说明:理解布局与标签的精髓 #### 概述 在现代网页设计中,CSS(层叠样式表)与HTML中的`<div>`元素是构建页面布局和样式的基石。通过合理利用CSS与`<div>`,可以实现响应式设计、灵活的网格...
"CSS+Div+JS实现简单导航栏菜单栏"是一个基础但实用的主题,它涵盖了网页布局、样式设计以及交互功能的实现。接下来,我们将深入探讨这三个关键技术在创建导航栏菜单栏中的应用。 首先,CSS(层叠样式表)是用于...
1. **盒模型**:理解CSS的盒模型至关重要,它包括内容(content)、内边距(padding)、边框(border)和外边距(margin),这些属性共同决定了元素的大小和位置。 2. **选择器**:选择器用于定位HTML元素,如标签选择器、...
1. **CSS的基本概念**:CSS是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它定义了元素的字体、颜色、大小、位置以及其它视觉效果。 2. **Div元素**:在HTML中,div...
**CSS+DIV网页设计**是现代网页布局的重要技术,它基于层叠样式表(Cascading Style Sheets,简称CSS)和HTML中的<div>元素来实现灵活、可维护且高效的页面结构。这一技术使得网页设计者可以将内容与表现分离,提高...
2. **盒模型**:理解CSS的盒模型至关重要,它包括内容(content)、内边距(padding)、边框(border)和外边距(margin),决定了元素的大小和位置。 3. **布局技术**:流体布局、网格布局、Flexbox和Grid布局是现代CSS布局...
HTML和CSS是构建网页设计的基础,而`DIV`在HTML中是一种非常重要的布局元素,它允许我们将页面划分为多个独立的区域,便于管理和控制页面结构。在这个“HTML-CSS+DIV”的主题中,我们将深入探讨如何利用这些技术来...
“html+css1-40讲”和“html+css1-31讲”的文件名表明这是一个逐步讲解的教程,可能涵盖了CSS和Div的基本概念、选择器、盒模型、定位、浮动、Flexbox和Grid布局等内容。通过学习这些课程,你可以系统地掌握CSS和Div...