欢迎来到天天文库
浏览记录
ID:40428245
大小:308.01 KB
页数:26页
时间:2019-08-02
《divcss布局入门》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、DIV+CSS布局入门UE研究室:郭福恩阶段一:页面元素的类型div是什么div的全称:division(区分)使用方法:
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、区
7、特性)width:400px;background-color:#fff;}提示:块元素可以转换为行元素;行元素可以转换为块元素;阶段三:控制布局如何改变块布局DIV是块元素,两个DIV排列时,会竖着排,如何让他能横排呢?.contentL{float:left;}左侧内容区右侧内容区元素特性的改变块元素改为具有行元素的特性:display:inline;(改为行元素)float:left;(向左浮动)提示:只有块元素可以使用行元素改为具有块元素的特性:di
8、splay
此文档下载收益归作者所有