web实训课笔记
来源:互联网 发布:mac os pkg 安装u盘 编辑:程序博客网 时间:2024/06/10 19:15
1.标记 <xx> </xx>
<xx/>
行 块
2.div----(h1 p)
3
3.1 标记
div img h1-h6 p body
style
3.1.1 超链接:负责页面跳转的语句。类似目录
3.2 CSS
3.2.1 选择器
id选择器 #XXX{}
类选择器 .XXX{}
标记 p{}
后代选择器 .XX ##kk{}
紧贴选择器 p#kk{}
并列选择器 #xx .abc,.dd span{}
通用选择器 *{}
伪类选择器 a:link{} 没有点击过
a:visited{} 访问后
a:hover{} 鼠标移到区域内
a:active{} 激活
顺序:L-V-H-A
(hover active普通标签也可使用)
input:focus{}
** E>F 子选择器 F为E的子 ;E+F 选择E的下一个为F的。(F必须为E紧跟的一个而且正好是F);E~F 选择E后面所有的F
3.2.2 属性
区域 width height
背景 background-color
background-image
background-repeat
位置 float:left right;
外 margin left right top
bottom
内 paddingi left right top bottom
字体 font-size font-style font-family font-weight
边框 border border -left -right -top -bottom
width color style
border-top-width:(默认2px)
border-top-color:(默认黑)
border-top-style:(边框样式,必须写)
简写:border-top:xxpx solid #003;
border:xxpx solid #003(四周一样)
border-style:solid;(与margin的简写相似)
border-color:#ff0;
border-width:20px;
万金油属性:id class style title accecckey dir lang
CSS做三角形:本体宽高为0,边框其中三边改为透明,剩下一个为一个等腰直角三角形
3.3 js
4.总结
路径:
前者:绝对路径
后者:相对路径:相对于我而言你在哪里
行高 内容 行间距/2 以上以下各拉参考线内容行高 距离 标题 行高
超链接加颜色,不能写到父亲和以上标记上,必须写a上
代码特别多
共同成分 字体的话 可以写到父亲上
不是字体 可以写成共同的类(如宽 高等不可以继承)
删除背景色
1. 找到css文件
2. ctrl+f 查找替换
3. 勾选 Regular expression(正则表达式)
4. find what中输入
background-color:#[\w]*;
5 Replace(尽量一个一个替换)
transparent透明
后来黏上的东西不需要考虑加上主题计算的px中
!--测试(浏览器
IE6
IE7
IE8
IE9
IE10 IE11
360 兼容 急速
chrome firefox opera
)
图片直接放入div中
div没有高 div 被撑开的高度是图片+3px
img 行块 displayLinline-block;
div 块 display:block
span a 行 display:inline
行 无宽高 不换行 左右m p 无上下mp
块 有宽高 换行 上下左右均有mp
行块 有宽高 不换行 上下左右均有mp
行块在<img><img>之间有空格或回车,横向会有8px间隙
解决:1块(display:block)或 float:left
2将两者之间删掉字符
垂直 3px间隙
图片和文字为基线对齐
解决:@垂直 vertical-align:middle只能对display:inline盒子设置 img
@盒子设置高
@字体大小
ie6毛病 设置100%的高还是能 撑开 解决:overflow:hidden(超出部分隐藏)(设置高后此解决方法才有用)
CSS文件类似头文件,可以引用。将CSS直接拖拽到代码界面或者将CSS插入也可,或者自己输入
盒子模型
区域==轮廓==盒子==(content padding border margin)
→宽和高
盒子模型 值顺序 穿衣服
background-position 背景位置
"left right centertop bottom center数值"
复合:background:各种数据。
display:block将行转换为块
定位 position:fix....;left:.....
定位是:
定位在哪里? 广告 不动的元素 小箭头 装饰性 轮播图
特征:层级的堆积 必须用定位
背景图 浮动 定位 父子关系
位置 矩形框(相对区域) 相对页面
position static
fixed 不占 可视区域 动
relative 占用 原有轮廓 不动
absolute 不占 距离自己最近的有position属性的祖宗(爸爸,爷爷及以上)元素轮廓 如果不存在这样的轮廓,则相对于第一屏(你看的页面屏幕)的可视区域 不动
absolute定位一般会给选择父亲position:relative
relative
relative定位不影响浮动 居中
absolute fixed定位影响浮动 居中
定位:采用什么定位模式
具体位置:left right top bottom
##必须和position联用
##轮廓区域 以内为正,以外为负
##对门 left>right top>bottom
##left 轮廓在margin之外,可以添加margin
##外边定位参考轮廓?border内边界 padding外边界
##定位剧中 relative margin:0 auto;
absolute fixed; left:50%(使盒子的一边居中,但是盒子有自己的宽度);margin-left:宽度一半
##定位盒子默认比不定位盒子的优先级高
##不定位盒子默认z-index 0
##z-index必须与position一起食用
##z-index越大越在上(优先级越高)
##z-index 有限制,不能太大
##如果都为定位,一般后写的定位优先级比先写的定位优先级大(设置z-index,情况会不同)
##z-index还受父亲影响,如果一个z-index的父亲a比另外一个z-index的父亲b的值小,则该父亲的儿子的z-index无论再大也无法覆盖b以及b的儿子
区别 联系
left right top bottom
必须和position一起
可以进行层级堆积
margin-left
不用和postion一起
不能进行层级堆积
img src width height
width height 都不写 ,正常
写其中一个,按比例扩大或缩小
两个都写,按照所写内容改变,但可能会失真
建议:图片尽量保持原来大小,若要改变,幅度尽量在0.8~1.5之间。若要下载图片,下载得到的仍然为原来的图片。可PS
title=""显示悬停的文字
alt=""当图片被删后,显示此内容
4.优先级:优先听谁的命令
!import 10000
行内属性(样式) 1000 element.style
id 100 优先级从上到下依次降低 行内属性<div id="name" style="***"></div>
类 10
标记 1
html属性 0.1 attributes style
默认样式 0.01 user agent stylesheet
继承 0.001 Inherited From
设置 0.0001
优先级 加和
优先级相等 后者优先
导航==一起出现
ul li 无序列表
ol li 有序列表
dl dt dd 图文描述
<ul>
<li></li>
</ul>
list-style-type:(ul和ol利用此方法变换)
list-style-image:(小标题为图片)(位置不易控制,尽量不要使用,可以使用背景图或者图片background-position background)list-style系列不占用你定义的像素格
list-style-position
list-style:circle url() outside;
语义化标记div也可实现
导航: 固定宽导航
不固定宽导航
<xx/>
行 块
2.div----(h1 p)
3
3.1 标记
div img h1-h6 p body
style
3.1.1 超链接:负责页面跳转的语句。类似目录
3.2 CSS
3.2.1 选择器
id选择器 #XXX{}
类选择器 .XXX{}
标记 p{}
后代选择器 .XX ##kk{}
紧贴选择器 p#kk{}
并列选择器 #xx .abc,.dd span{}
通用选择器 *{}
伪类选择器 a:link{} 没有点击过
a:visited{} 访问后
a:hover{} 鼠标移到区域内
a:active{} 激活
顺序:L-V-H-A
(hover active普通标签也可使用)
input:focus{}
** E>F 子选择器 F为E的子 ;E+F 选择E的下一个为F的。(F必须为E紧跟的一个而且正好是F);E~F 选择E后面所有的F
3.2.2 属性
区域 width height
背景 background-color
background-image
background-repeat
位置 float:left right;
外 margin left right top
bottom
内 paddingi left right top bottom
字体 font-size font-style font-family font-weight
边框 border border -left -right -top -bottom
width color style
border-top-width:(默认2px)
border-top-color:(默认黑)
border-top-style:(边框样式,必须写)
简写:border-top:xxpx solid #003;
border:xxpx solid #003(四周一样)
border-style:solid;(与margin的简写相似)
border-color:#ff0;
border-width:20px;
万金油属性:id class style title accecckey dir lang
CSS做三角形:本体宽高为0,边框其中三边改为透明,剩下一个为一个等腰直角三角形
3.3 js
4.总结
路径:
前者:绝对路径
后者:相对路径:相对于我而言你在哪里
行高 内容 行间距/2 以上以下各拉参考线内容行高 距离 标题 行高
超链接加颜色,不能写到父亲和以上标记上,必须写a上
代码特别多
共同成分 字体的话 可以写到父亲上
不是字体 可以写成共同的类(如宽 高等不可以继承)
删除背景色
1. 找到css文件
2. ctrl+f 查找替换
3. 勾选 Regular expression(正则表达式)
4. find what中输入
background-color:#[\w]*;
5 Replace(尽量一个一个替换)
transparent透明
后来黏上的东西不需要考虑加上主题计算的px中
!--测试(浏览器
IE6
IE7
IE8
IE9
IE10 IE11
360 兼容 急速
chrome firefox opera
)
图片直接放入div中
div没有高 div 被撑开的高度是图片+3px
img 行块 displayLinline-block;
div 块 display:block
span a 行 display:inline
行 无宽高 不换行 左右m p 无上下mp
块 有宽高 换行 上下左右均有mp
行块 有宽高 不换行 上下左右均有mp
行块在<img><img>之间有空格或回车,横向会有8px间隙
解决:1块(display:block)或 float:left
2将两者之间删掉字符
垂直 3px间隙
图片和文字为基线对齐
解决:@垂直 vertical-align:middle只能对display:inline盒子设置 img
@盒子设置高
@字体大小
ie6毛病 设置100%的高还是能 撑开 解决:overflow:hidden(超出部分隐藏)(设置高后此解决方法才有用)
CSS文件类似头文件,可以引用。将CSS直接拖拽到代码界面或者将CSS插入也可,或者自己输入
盒子模型
区域==轮廓==盒子==(content padding border margin)
→宽和高
盒子模型 值顺序 穿衣服
background-position 背景位置
"left right centertop bottom center数值"
复合:background:各种数据。
display:block将行转换为块
定位 position:fix....;left:.....
定位是:
定位在哪里? 广告 不动的元素 小箭头 装饰性 轮播图
特征:层级的堆积 必须用定位
背景图 浮动 定位 父子关系
位置 矩形框(相对区域) 相对页面
position static
fixed 不占 可视区域 动
relative 占用 原有轮廓 不动
absolute 不占 距离自己最近的有position属性的祖宗(爸爸,爷爷及以上)元素轮廓 如果不存在这样的轮廓,则相对于第一屏(你看的页面屏幕)的可视区域 不动
absolute定位一般会给选择父亲position:relative
relative
relative定位不影响浮动 居中
absolute fixed定位影响浮动 居中
定位:采用什么定位模式
具体位置:left right top bottom
##必须和position联用
##轮廓区域 以内为正,以外为负
##对门 left>right top>bottom
##left 轮廓在margin之外,可以添加margin
##外边定位参考轮廓?border内边界 padding外边界
##定位剧中 relative margin:0 auto;
absolute fixed; left:50%(使盒子的一边居中,但是盒子有自己的宽度);margin-left:宽度一半
##定位盒子默认比不定位盒子的优先级高
##不定位盒子默认z-index 0
##z-index必须与position一起食用
##z-index越大越在上(优先级越高)
##z-index 有限制,不能太大
##如果都为定位,一般后写的定位优先级比先写的定位优先级大(设置z-index,情况会不同)
##z-index还受父亲影响,如果一个z-index的父亲a比另外一个z-index的父亲b的值小,则该父亲的儿子的z-index无论再大也无法覆盖b以及b的儿子
区别 联系
left right top bottom
必须和position一起
可以进行层级堆积
margin-left
不用和postion一起
不能进行层级堆积
img src width height
width height 都不写 ,正常
写其中一个,按比例扩大或缩小
两个都写,按照所写内容改变,但可能会失真
建议:图片尽量保持原来大小,若要改变,幅度尽量在0.8~1.5之间。若要下载图片,下载得到的仍然为原来的图片。可PS
title=""显示悬停的文字
alt=""当图片被删后,显示此内容
4.优先级:优先听谁的命令
!import 10000
行内属性(样式) 1000 element.style
id 100 优先级从上到下依次降低 行内属性<div id="name" style="***"></div>
类 10
标记 1
html属性 0.1 attributes style
默认样式 0.01 user agent stylesheet
继承 0.001 Inherited From
设置 0.0001
优先级 加和
优先级相等 后者优先
导航==一起出现
ul li 无序列表
ol li 有序列表
dl dt dd 图文描述
<ul>
<li></li>
</ul>
list-style-type:(ul和ol利用此方法变换)
list-style-image:(小标题为图片)(位置不易控制,尽量不要使用,可以使用背景图或者图片background-position background)list-style系列不占用你定义的像素格
list-style-position
list-style:circle url() outside;
语义化标记div也可实现
导航: 固定宽导航
不固定宽导航
0 0
- web实训课笔记
- WEB笔记
- Web笔记
- web笔记
- WEB笔记
- WEB笔记
- web笔记
- web笔记
- web笔记
- web 笔记
- Web笔记
- web笔记
- web笔记
- [学习笔记]web视图
- Web service学习笔记
- Web service 笔记
- Web service 笔记
- Web service 笔记
- Tomcat源码分析-类加载器
- caffe层解读系列——slice和concat实现MultiTask
- IO流_ IO流技术概述
- ultraedit matlab
- 如何在ubuntu 12.04系统下通过vivi的命令行来启动mini2440的nfs网络文件系统
- web实训课笔记
- json_encode、scandir()和操作系统编码的关系。
- img标签--src属性:相对路径和绝对路径
- Struts2笔记--1
- Qt5 模块简介
- 微信小应用资源汇总整理
- 前端自动化管理工具grount
- c
- Java中的线程池