1.简介
使用
div盒子模型结构将各部分内容划分到不同的区块,然后用
css来定义盒子模型的位置、大小、边框、内外边距、排列方式等。div用于搭建网站结构(框架)、css用于创建网站表现(样式/美化)。该标准简化了
HTML页面
代码,获得一个较优秀的网站结构,有利于日后网站维护、协同工作和便于
搜索引擎抓取。
2.优点(掌握) 1)表现和内容相分离
2)代码简洁,提高页面浏览速度
3)易于维护和改版
4)提高搜索引擎对网页的索引效率
3.各个浏览器之间的差异
1)安装多种浏览器,对比差异进行调试
2)在FF浏览器中安装firebug
3)Firebug 为你的 Firefox 集成了浏览网页的同时随手可得的丰富
开发工具。你可以对任何网页的 CSS、HTML 和 JavaScript 进行实时编辑、调试和监控就算在不同的浏览器中效果不完全一至,也要做到大概一至.
4.<div>块标签<span>行标签(掌握) 标签本省没有意义需要结合css使用。
<div>大块的区域
<span>行
<span>里不能放<div>
<div>中可以放多个<span>
5.盒子模型(掌握)
每个HTML元素都可以看作一个装了东西的盒子,盒子具有宽度
(width)和高度
(height),盒子里面的内容到盒子的边框之间的距离即填充
(padding),盒子本身有边框
(border),而盒子边框外和其他盒子之间,还有边界
(margin)。
6.布局中的主要样式(掌握) Font line-height color margin padding border text-align background
Width height float clear display 1)定位属性
属 性 描 述
Position 用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定)
Top 层距离顶点纵坐标的距离
Left 层距离顶点横坐标的距离
Width 层的宽度,可以用一个长度或“auto”值来指定其宽度,不允许使用负值
Height 层的高度,可以用一个长度或“auto”值来指定其高度,不允许使用负值
z-index 决定层的先后顺序和覆盖关系,值高的元素会覆盖值比较低的元素
Display 是一个显示属性,设定block值是以块状显示,在元素后面添加换行符,既其他元素不能在其后面并列显示。如果设定inline值则内联显示,在元素后面删除换行符,多个元素可以在一行内并列显示。使用值none将关闭指定元素及其子元素的显示
Visibility 这个属性是针对嵌套层的设置,如果存在嵌套的层(子层)和被嵌套的层(父层)时,可以使用inherit值设置子层继承父层的可见性,如果父层可见,子层也可见。当使用visible值时,无论父层是否可见,子层都可见。而值为hidden时,无论父层是否可见,子层都隐藏
Overflow 用于设置层内的内容超出层所能容纳的范围处理方式,为该属性设置visible值时,无论层的大小,内容都会显示出来。当设置hidden值时,会隐藏超出层大小的内容。当设置值为scroll时,不管内容是否超出层的范围,选中此项都会为层添加滚动条。而值使用auto值时,只在内容超出层的范围时才显示滚动条
2)区块属性(区块模型)
属 性 描 述
Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度、百分比或者auto,百分比值参考上级元素的宽度,允许使用负值边际。如果四个值都给出了,它们分别被
应用于上、右、下和左边界。如果只给出一个值,它被应用于所有边界。如果两个或三个值给出了,省略了的值与对边相等。注意如果边界在垂直方向邻接(重叠)了,会改用其中最大的那个边界值。而水平方向则不会。也可以选择使用上边界margin-top、下边界
margin-bottom 左边界margin-left和右边界margin-right属性分别设置与上级元素的外边距。
padding 用于设置区块的内边距属性,是边框和元素内容之间的间隔距离。与margin属性相返,但使用的是相同属性值。是上补白padding-top、右补白 padding-right 下补白padding-bottom和左补白padding-left属性的略写
float 设置区块漂浮属性,允许网页制作者将文本环绕在一个元素的周围,可以使用左漂浮left值,右漂浮right值
clear 清除属性指定一个元素是否允许有元素漂浮在它的旁边。值left移动元素到在其左边的漂浮的元素的下面;同样的值right移动到其右边的漂浮的元素下面。其他的还有缺省的none值,和移动元素到其两边的漂浮的元素的下面的both值
7.区块框浮动
虽然使用绝对定位可以实现页面布局,但由于调整某个区块框时其它区块的位置并不会跟随着改变,所以并不是布局的首选方式。而使用浮动的区块框可以向左或向右移动,直到它的外边缘碰到包含它区块的边框或另一个浮动框的边框为止。并且由于浮动框不在文档的普通流中,所以文档的普通流中的区块框表现得就像浮动框不存在一样。
8.行框和清理
在进行页面布局时,经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用float属性,再通过left或right值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不足包含框的100%时,就会在行框中留出一定的宽度,而下面的某个区块框又恰好满足这个宽度,则很可能会向上提,和上一行并列的区块框在同一行排列。而这不并是我们想要的结果,所以可以使用clear属性解决这一
问题,该属性的值可以是
left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。
9.使用区块框设计页面布局 (掌握)
1)区块居中设计
*高度和宽度固定的区块居中(position)
高度和宽度可变的区块居中(margin)
2)布局页面局中
*设置两列浮动的布局
*设置三列浮动的布局
*设置多列浮动的布局 10.其他:
1)ie和火狐的区别(按照火狐的标准制作网页(国际标准))
2)iex(安装)
3) 重要属性:width(宽) height(高) border(边框) margin(外边距) padding(内边距)
4)ie和火狐的区别: <!--!important用于火狐调整 -->
*火狐指定的宽度和高度是实际内容的宽度和高度。(边框)
*ie指定的高度就是框整体的高度和宽度。(边框) 5)相对位置是相对于自身所在的位置,绝对位置相对于顶点。
6)
ie里指定不了18px以内,最小18px
7)
火狐可以,Ie不可以。(居中用margin-left:auto,margin-right:auto;)
11.必须掌握的:
1)所有常用的CSS属性
2) 所有和布局有关的属性都要会用(熟练应用css样式表
手册)
3) 掌握CSS+DIV 布局的优势
12.了解的内容:
无
13.作业:
1. CSS滤镜 (查找资料,制作和总结报告)
2. 摆一个计算器(DIV+CSS)(查找资料,制作和总结报告)
分享到:
相关推荐
Android全部部局源码下载,地于各种部局进行实例讲解。希望可以帮助大家更好的学习。
差异化部局加快国产移动智能终端操作系统的发展.rar
差异化部局加快国产移动智能终端操作系统的发展.pdf
英文资料,共17个专题,239页。详细介绍了Orchard建设网站...一、部局介绍,二、初识部局,三、搭配元素,四、布局模板,五、蓝印元素,六、利用部件,七、令牌元素,八、规则,九、主题。10、使用Boottrap结合Orchard
oracle产品表空间部局 如:OLTP、OLAP
* 本例使用ListView和自定义的行部局实现了一个最基本的表格部局 * 和一个可变长度的表格部局 * 并实现了简单的行组件的单击事件
交通运输部局及其影响的教学案例.docx
通信行业网络部局数据主管岗位说明书
网奇.NET网络商城ACCESS单店商业版...5、提供专业的网站SEO搜索引擎优化部局,用户通过后台设置可轻松提升网站 排名。 6、批量导入EXCEL的产品。 7、集成主流网银在线支付接口。 下载地址:http://www.wqeshop.com
河北大学(Hebei University)位于国家历史文化名城保定市,是列入教育部直属高校序列并与国家国防科技工业局和河北省人民政府“部局省合建”的重点综合性大学,中西部“一省一校”国家重点建设大学联盟成员,河北省...
服务器日常巡检工作 服务器日常巡检工作全文共12页,当前为第1页。巡检报告 服务器日常巡检工作全文共12页,当前为第1页。 服务器IP 错误!超链接引用无效。5 巡检内容 检查方法 结 果 一、服务器系统 设备用途: Svn...
后台 管理 系统 后台 管理 系统 后台 管理 系统 后台 管理 系统 后台 管理 系统 后台 管理 系统 后台 管理 系统 后台 管理 系统
1、提供专业的网站SEO搜索引擎优化部局,用户通过后台设置可轻松提升网站排名。 系统地址:http://www.wqeshop.com 2、批量导入EXCEL的产品。 3、集成主流网银在线支付接口。 4、商店可以发布不同的公告信息并以...
系统通过3个城市差异化场景部局,实现了包括无线、承载、核心在内的21个机房的灵活部署与对接,全方位呈现了5G网络端到端网络建设与网络切片流程。 IUV-5G全网部署教学平台实训指导主要分为两篇,第一篇主要结合IUV_...
某网站html部局文件 包含多种jquery效果
向各位推荐一下用Coolite来部局,用后台数据库数据绑定到TreePanel上,当点不同的节点,在TabPanel上添加一个Tab。并显示要显示的网页。
——GB/T 22240-2008 信息安全技术 信息系统安全等级保护定级指南 三、总则 围绕公司打造经营型、服务型、一体化、现代化为总体目标,保障信息化建设,提 高运维能力,保证运维管理系统安全稳定的运行,明确岗位职责...
二、网络设备系统 设备名称: 设备型号: 1、检查设备面板指示灯状态,看是否有红灯报警 观察面板指示灯有(无)红灯 2、从本局网络中的某台PC机上ping下属的分支机构和部局的某?通 Ping对方IP地址 台服务器 ?不通 3....
好用又灵活的一个嵌入式类库 通过XML 修改控件部局
1、html格式 2、部局精美 3、某宝收费资源