HTML+DIV+CSS.docx
- 文档编号:14956655
- 上传时间:2023-06-28
- 格式:DOCX
- 页数:9
- 大小:18.47KB
HTML+DIV+CSS.docx
《HTML+DIV+CSS.docx》由会员分享,可在线阅读,更多相关《HTML+DIV+CSS.docx(9页珍藏版)》请在冰点文库上搜索。
HTML+DIV+CSS
代码编辑器:
sublime[sə’blaɪm]text3.0
输入 !
,再按下 Ctrl+E,就能快速打开HTML5的整体结构。
notepad++
相对路径和绝对路径
引用上级文件夹中的文件:
../文件名
基本结构
Doctypehtml>
注释:
--内容-->
编码库:
UTF-8无BOM格式编码UTF-8编码库
ANSI编码格式GB3212编码库
水平线
主题中的标题
段落
换行
文字加粗文本内容
文字倾斜文本内容
文字加删除线文本内容
文字加下划线文本内容
文字作为下标文本内容
subscript下标
文字作为上标文本内容
superscript[‘su:
pəskript]上标
给文字加拼音英雄
ruby[‘ru:
bi]
给文字加黄色背景文本内容
空格 或者在中文输入法的全角状态下在代码行中输入空格
无序列表
无序列表的type属性值:
disc(默认值)实星圆,circle空心圆,square实星方框
有序列表
有序列表的type属性值:
type=”1”1.整数(默认值);
type=”A”type=”a”2.大(小)写字母A\B\C
type=”i”type=”I”3.大小写的罗马字母:
iii.../IIIIII
有序列表的start属性:
定义列表的开始序号,比如第一项不是数字1,而是从10开始.......
有序列表的value属性:
定义某个单个列表项的序号.......
定义列表
插入图片:
width的单位可以是像素或百分比。
height的单位只能是像素,不能是百分比。
超链接
Target=”_blank”在新窗口中打开页面
图片作为涟源
图片的一部分作为涟源
rectangle 英 ['rek.tæŋɡ(ə)l]矩形coordinate 英 [kəʊ'ɔː(r)dɪneɪt]
超链接到电子邮箱:
电子邮箱名”>文本内容 下载文件: 在单个网页里建立超链接: 表格姓名 年龄 籍贯
cellpadding=数值.指的是表格的单元格的内容与单元格边界之间空白距离的大小。
cellspacing 属性用来指定表格各单元格之间的空隙
rowspan实现表格中一列跨越多行
colspan实现表格中一行跨越多列
caption给表格添加标题
colgroup用来组合列。
col用来设定列的元素属性,一般在CSS中使用.
100px"> red"> green"> 表单 说明: 通过相同的name实现单选。 单选框、复选框默认选中: checked=”checked” 标签不可用disabled=”disabled” 建立搜索的命令按钮 readonlysize(控制文本框长度> 鼠标变为手的形状: cursor: pointer; cursor 英 ['kɜː(r)sə(r)] 光标 多行显示标签 row控制行数column 英 ['kɒləm]控制列宽 标签: 下拉列表: multiple 英 ['mʌltɪp(ə)l] 框架: 火狐浏览器安装 安装firebug插件 安装ietester插件 CSS的使用: 方法一: 在网页文件中进行 选择范围{ 属性: 值; } 方法二: 在网页文件中调用CSS文件 rel是relationship的英文缩写 方法三: 行内样式 30px;”>我是P标签 CSS优先级(从高到底): 方法三、方法二、方法一 CSS注释: /**/ Id选择器id号#id号 Class选择器class=”red”.red 标签选择器标签名即可 交集选择器标签名#Id选择器标签名.class选择器 并集选择器用,分隔开即可 后代选择器用空格分隔开 伪类选择器a: hover hover 美 [ˈhɒvə(r)] 悬停 通配符选择器*{} 文本缩进text-indent: 10px; indent 英 [in'dent] 缩进 文本对齐: text-align: left/right/center; 文本行高: line-height: 10px; 单词间距: word-spacing: 10px; 字符间距: letter-spacing: 10px; 文字下划线: text-decoration: none/underline/line-through(删除线); decoration [.dekə'reɪʃ(ə)n]修饰 字体类型: font-family: 宋体; 斜体: font-style: italic/none; 字体大小: font-size: 10px; 字体颜色: color: 英文单词/#颜色代码; 字体加粗: font-weight: bold/normal; 块级元素高度: height块级元素宽度: width 块级元素背景色: background-color 块级元素背景图片: background-image: url(图片地址) 解决背景图片平铺问题: background-repeat: repeat-x/repeat-y/no-repeat 设置图片位置: background-position: topleft/centercenter/bottomright/30%30%/30px30px/30pxcenter…. 背景图片固定: background-attachment: fixed attachment [ə'tætʃmənt] 附件,依附,附着 fixed [fikst] 固定的 块级元素设置边框: border/border-left/border-right/border-top/border-bottom: 10pxsolid/dashed颜色 solid ['sɒlɪd] 非中空的 dashed [dæʃid] 虚线边框 后代元素大小超过祖辈元素大小的处理: (在祖辈元素中设置) Overflow: visible/hidden/scroll/auto scroll [skrəʊl] 滚动条, 块级元素和内联元素相互转化: display: block/inline/none/inline-block 块级元素内边距: padding-left/padding-right/padding-top/padding-bottom: 10px; padding ['pædɪŋ]边距, 块级元素外边距: margin-left/margin-right/margin-top/margin-bottom: 10px; 浮动: float: left/right 去除浮动: clear: left/right/both 相对定位: position: relative left/right/top/bottom relative ['relətɪv] 相对定位 绝对定位: position: absolute left/right/top/bottom 根据整个页面的左上角进行定位 固定定位: position: fixed left/right/top/bottom fixed 英 [fɪkst] 固定的 设置堆叠顺序: z-index: 数值数值越大,在上层 列表去掉点: ul{list-style: none;} 块级元素相对于父元素剧中: margin-left: auto margin-right: auto 单独的给IE6.0浏览器设置代码: _background: red; 输入大于号: >大于号greater-thansign 输入小于号: <小于号less-thansign 不透明度设置: opacity: 0.9;取值范围为【0.0—1.0】 这条代码对IE9以上的浏览器和标准浏览器起作用。 filter: alpha(opacity=90); 取值范围为[0—100];这条代码对IE6、ie7、ie8浏览器起作用。 opacity[əʊˈpæsəti]n.不透明性 filter[ˈfɪltə(r)]过滤;
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML DIV CSS