DIV+CSS入门
- 格式:ppt
- 大小:1.75 MB
- 文档页数:48


DIV+CSS网页布局常用的一些基础知识整理CSS命名规范全局样式:global.css;框架布局:layout.css;字体样式:font.css;链接样式:link.css;打印样式:print.css;二.常用类/ID命名规范页眉:header内容:content容器:container页脚:footer版权:copyright导航:menu主导航:mainMenu子导航:subMenu标志:logo标语:banner标题:title侧边栏:sidebar图标:Icon注释:note搜索:search按钮:btn登录:login链接:link信息框:manage……常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方加以注释。
对于二级类/ID命名,则采用组合书写的模式,后一个单词的首字母应大写:诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtnCSS书写规范及方法一. 常规书写规范及方法1. 选择DOCTYPE:XHTML 1.0 提供了三种DTD声明可供选择:过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
完整代码如下:严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如。
完整代码如下:框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。
完整代码如下:理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。
因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。
2. 指定语言及字符集:为文档指定语言:为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言;如:常用的语言定义:标准的XML文档语言定义:针对老版本的浏览器的语言定义:为提高字符集,建议采用“utf-8”。
DIVCSS入门教程一、DIV的基本用法```html<div><!--这里可以放入其他HTML元素--></div>```二、DIV的布局和样式1.宽度和高度可以使用CSS样式属性来设置DIV的宽度和高度,如下所示:```cssdivwidth: 200px; /* 设置DIV的宽度为200像素 */height: 100px; /* 设置DIV的高度为100像素 */```2.背景颜色和背景图片可以使用CSS样式属性来设置DIV的背景颜色和背景图片,如下所示:```cssdivbackground-color: red; /* 设置DIV的背景颜色为红色 */ background-image: url("bg.jpg"); /* 设置DIV的背景图片为bg.jpg */```3.边框和边框样式可以使用CSS样式属性来设置DIV的边框和边框样式,如下所示:```cssdivborder: 1px solid black; /* 设置DIV的边框为1像素的实线黑色边框 */border-radius: 5px; /* 设置DIV的边框圆角为5像素*/```4.文本样式可以使用CSS样式属性来设置DIV内文本的样式,如下所示:```cssdivcolor: white; /* 设置DIV内文本的颜色为白色 */ font-size: 16px; /* 设置DIV内文本的字体大小为16像素 */text-align: center; /* 设置DIV内文本的水平居中对齐*/line-height: 30px; /* 设置DIV内文本的行高为30像素*/```5.浮动布局可以使用CSS样式属性来设置DIV的浮动布局,如下所示:```cssdivfloat: left; /* 设置DIV的浮动为左浮动 */clear: both; /* 设置DIV下方没有浮动元素,用于清除浮动影响 */```6.盒模型可以使用CSS样式属性来设置DIV的盒模型,如下所示:```cssdivmargin: 10px; /* 设置DIV的外边距为10像素 */ padding: 10px; /* 设置DIV的内边距为10像素 */box-sizing: border-box; /* 设置DIV的盒模型为border-box,包含边框在内的宽度不变 */```以上是DIV的基本用法和常见的CSS样式属性。
DIV+CSS网页布局常用的一些基础知识整理CSS命名规范全局样式:global, css;框架布局:layout, css;字体样式:font.css;链接样式:link, css;扌J印样式:print. css;%1.常用类/TD命名规范页眉:header内容:con tent容器:container页脚:footer版权:copyright导航:menu主导航:mainMenu子导航:subMenu标志:logo标语:banner标题:title侧边栏:sidebar图标:Icon注释:note搜索:search按钮:btn登录:login链接:link信息框:manage常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适卅的地方加以注释。
对于二级类/ID命名,则采用组合书写的模式,后一•个单词的首字母应大写:诸如“搜索框”则应命名为“searchT门put”、“搜索图标”命名这“searchicon”、"搜索按钮”命名为"searchBtnCSS书写规范及方法一•常'规书写规范及方法1.选择DOCTYPE:XHTML 1.0提供了三种DTD声明可供选择:过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4. 01的标识(但是要符合xhtml的写法)。
完整代码如下:严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如o 完整代码如下:框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面屮包含有框架,需要采用这种DTD。
完整代码如下:理想情况为然是严格的DTD,但对于我们大多数刚接触web标准的设计帅来说,过渡的DTD (XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)O因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。
DIV+CSS盒子模型CSS盒子模型-什么是CSS盒子模型。
认识日常生活中盒子:常常我们遇到盒子是用于可装东西长方形、正方形的盒子。
如装皮鞋盒子、装电视机盒子,这个是比较具体的盒子。
CSS盒子:根据字面我们可以理解,CSS盒子也是装东西的,比如我们要将文字内容、图片布局网页中,那就需要像盒子一样装着。
这个时候我们对其对象设置高度(height)、宽度(width)、边框(border)、边距(margin)、填充(padding),即可实现像盒子一样的长方形、正方形平面盒子。
通常我们这样:一组<div></div>、<span></span>等类似这种语法标签组叫1个盒子。
因为我们对其设置了高度(height)、宽度(width)、边框(border)、边距(margin)、填充(padding)等属性后即可呈现出盒子一样的长方形或正方形。
所以我们CSS盒子模型因此而得来。
日常使用CSS盒子:我们说将什么内容放入一个盒子里,我们就要想到是放入<div></div>里,脑海里就要这个概念。
假如我们说设置一个宽度为100px盒子,我们就要知道如下一个概念:Css样式代码:.yangshi{width:100px;}对应html代码:<div class="yangshi">内容</div>这个时候我们可以将<div class="yangshi">内容</div>看作为一个盒子。
DIV+CSS是什么?DIV+CSS我们可以分为DIV和CSS两个概念。
CSS:我们也讲过是什么,大家可参考网址(CSS是什么):DIV:这个是网页HTML的标签,通常我们在HTML代码中使用DIV标签配合应用CSS类布局网页。
1、DIV是html其中一个常用标签,如span、table、h1等之类标签2、在HTML中DIV标签我们用的最多,具有代表性3、div配合css类,布局出网页< div>内容</div>< div class="divcss5">内容</div>< div id="divcss5">内容</div>DIV CSS是什么截图您可能需要了解CSS是什么?什么是html?Html代码是什么?css是什么?什么是CSS?CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表,所以称之为层叠样式表(Cascading Stylesheet)简称CSS。