web前端学习总结精华版.docx
- 文档编号:30058927
- 上传时间:2023-08-04
- 格式:DOCX
- 页数:20
- 大小:24.86KB
web前端学习总结精华版.docx
《web前端学习总结精华版.docx》由会员分享,可在线阅读,更多相关《web前端学习总结精华版.docx(20页珍藏版)》请在冰豆网上搜索。
web前端学习总结精华版
学习-----好资料
Web总结
一.名词解释
1.横切
在固定页面的宽度(按栅格化进行)并且对高度没有限制的容器称为一个标准横切
2.留白
两个容器或碎片之间的上、下、左、右的空白距离
3.继承
元素可以从其父级元素中获得一些可为自己使用的属性或值。
4.图片定位
把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中,利用CSS中对图片进行遮罩属性,多用于页面中的修饰图
5.底图
页面中在标签中使用的背景图
6.齐底(图)线
用于区分横切或碎片结束的线或图
7.页面结构
页面的基础框架,由横切、布局元素组成
8.焦点区(图)
最易注意的区域
9.导航
在页面中具有导向性的链接集合
10.头图
页面主题图片
11.间距
碎片或文字间的距离
12.行高
文字段落中行与行之间的距离
13.首行缩进
文字段落首行缩进
14.浮动
使被定义的区域脱离正常的页面文档流
15.碎片
由文字、图片组合成的内容区域
16.通栏广告
与页面内容区同宽的广告区域
17.功能按钮
具有交互属性的按钮
18.私有样式
当前页面独立使用的样式,不具备公用性
19.水平(垂直)居中
在页面中的某个元素处于父级的上下或左右的相同距离
20.标准头(尾)
定义相同的页面头或尾元素集合
更多精品文档.
学习-----好资料
二.文本格式化
1.段落:
p
2.斜体:
address(联系信息)em(强调)i(突出不同)cite(引用)dfn(首次定义术语)
3.粗体:
strong(重要)b(提醒)
4.图片块:
figure
5.引述文段,段落缩进:
blockquote
6.背景颜色:
mark
7.虚线下划线:
abbr
8.上标下标:
sub/sup
9.下划线:
ins
10.删除线:
del(标记已删除内容)s(标记不准确内容)
11.等宽字体:
code
12.预格式化:
pre
13.字号减小,表注释:
small
14.时间:
time
15.换行:
br
16.html5定义区块:
headernavarticlesectionasidefooterdivspan
三.表单表格
1.
2.表单元素的组织:
3.创建各种框:
amename= ameclass=zky 敲畱物摥尽敲畱物摥? 汰捡桥汯敤? 请输入value=http: //autofocus=autofocus size= maxlength=_x0010_pattern=../> 注: text→password/url/tel/email Id: 为了让对应的标签识别,添加CSS Name: 为了让服务器和脚本识别,通常与id设为一样 Size: 文本框大小 Maxlength: 能输入的最大字符数 Pattern: 正则表达式 4.添加标签: 5.单(多)选按钮: adio/checkboxid=aaaname=zkyvalue=eijing/> adio/checkboxid=bbname=zkyvalue=shanghai/> 注: id各自唯一,name必须相同。 checked: 默认选择 6.下拉框: multiple=multiple> 注: size: 选择框的高度multiple: 允许多选selected: 默认选择用
使用方法
LeftRight
更多精品文档.
-----好资料学习
方法二
.clear{zoom:
1;}.clear:
after{
clear:
both;
height:
0;
overflow:
hidden;
display:
block;
visibility:
hidden;
潣瑮湥?
.;
}
或
.claer{
height:
auto;
_height:
200px;
min-height:
200px;
verflow:
auto;
zoom:
1;
_overflow:
visible;
}
使用方法:
9.5自定义属性
1.文字列表:
(样式名)
用于文字列表,区分为两种字体(12px/14px),默认行内间距上下3px。
2.图片列表:
(样式名)
用于组图型碎片,默认具有claar属性,容器内img、span标签为块级元素,并清除图片上下外间距
3.图文混排:
(样式名)
碎片内使用
区分图片及文字,默认形态为左图右文,且图片与文字间距为10px。
4.文字类:
加粗(b)、arial字体(.fontArial)
更多精品文档.
学习-----好资料
处理局部应用
5.浮动:
(fl/fr)
用于构建页面框架
6.留白:
(blank5/blank8)
设定页面中留白高度为5px、8px两种
9.6完整代码
/*全局CSS定义*/
body{text-align:
center;margin:
0
auto;padding:
0;background:
#FFF;color:
#666;font:
12px'宋体';}
div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:
0;padding:
0;border:
0;}
……
需要举例说明
十.框架设置
10.1约定
1.横切结构样式为area,所有横要带有id,名称:
contentA,contentB
2.结构元素使用div标签,标签嵌套注意层级关系,如:
10.2说明
6.2.1栏间留白
三栏时定义中间栏,多栏定义时从第二栏开始定义。
6.2.2横切留白
横切间留白,在下一个横切中定义,如:
margin‐top:
10px
更多精品文档.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- web 前端 学习 总结 精华版
![提示](https://static.bdocx.com/images/bang_tan.gif)