divcss布局入门

divcss布局入门

ID:40428245

大小:308.01 KB

页数:26页

时间:2019-08-02

divcss布局入门_第1页
divcss布局入门_第2页
divcss布局入门_第3页
divcss布局入门_第4页
divcss布局入门_第5页
资源描述:

《divcss布局入门》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、DIV+CSS布局入门UE研究室:郭福恩阶段一:页面元素的类型div是什么div的全称:division(区分)使用方法:

……
职责:负责页面的结构特性:容器性质。可内嵌table,还可嵌文本和其它的html代码。
头部内容区
导航菜单区
广告栏区
左侧内容区
右侧内容区
底部内容区
版权内容区
CSS是什么CSS:层叠样式表使用方法:class=“name”和id=“name”职责:负责页面的表现可以定义:

2、文字或元素的颜色color背景颜色background-color背景图像background-image字体font-family文字大小font-size列表样式list鼠标样式cursor边框样式border内补白padding外边距margin等世华财讯页面页面元素的分类页面元素分为两大类:块元素和行元素块元素的代表:div行元素的代表:span块元素div-常用块级容易table-表格dl-定义列表form-交互表单ul-非排序列表ol-排序表单p-段落center-举中对齐块pre-格式化文本blockquote-块引用h1-大标题h2-副标题h3-3

3、级标题h4-4级标题h5-5级标题h6-6级标题hr-水平分隔线isindex-inputpromptmenu-菜单列表noframes-frames可选内容address-地址dir-目录列表fieldset-form控制组块元素块元素特性:可以容纳行元素和其他块元素;会顺序以每次另起一行的方式一直往下排。divtableul行元素a-锚点abbr-缩写acronym-首字b-粗体(不推荐)bdo-bidioverridebig-大字体br-换行cite-引用code-计算机代码dfn-定义字段em-强调font-字体设定(不推荐)i-斜体img-图片input

4、-输入框kbd-定义键盘文本label-表格标签q-短引用s-中划线(不推荐)samp-定义范例计算机代码select-项目选择small-小字体文本span-常用内联容器strike-中划线strong-粗体强调sub-下标sup-上标textarea-多行文本输入框tt-电传文本u-下划线var-定义变量行元素行元素特性:只能容纳文本或者其他行元素;不可以容纳块元素;会以顺序横排的方式一直往后排下去。spanaimg元素自身的属性div边框(border)背景色(background-color)背景图(background-img)填充(padding)每个

5、元素有以下五种属性:间隙(margin)阶段一总结:两个要点元素的类型行元素块元素元素的构造属性边框(border)填充(padding)间隙(margin)背景色(background-color)背景图(background-img)阶段二:实际应用为什么选择DIV进行布局布局要采用块元素:因为块元素可以包含行元素和块元素,而行元素则做不到;DIV的语义是分区的意思;

头部内容区
    导航菜单区
广告栏区
左侧内容区
    右侧内容区
    底部内容区
版权内容

6、区

右侧内容区
编写html代码头部内容
导航菜单
广告条
内容一
内容二内容三版权信息编写css代码.contentL{float:left;(使得指定元素脱离普通的文档流而产生的特别的布局

7、特性)width:400px;background-color:#fff;}提示:块元素可以转换为行元素;行元素可以转换为块元素;阶段三:控制布局如何改变块布局DIV是块元素,两个DIV排列时,会竖着排,如何让他能横排呢?.contentL{float:left;}左侧内容区右侧内容区元素特性的改变块元素改为具有行元素的特性:display:inline;(改为行元素)float:left;(向左浮动)提示:只有块元素可以使用行元素改为具有块元素的特性:di

8、splay

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。