HTML 超文本标记语言
标记 :
< >
标签对 :
<html></html>
单标签
<meta charset="utf-8" />
css 入门
样式：
行间样式
<div style= " "> </div>
内部样式表
<style>
div{
width:100px
height:100px
}
<style>
外联样式表
创建了一个css文件
<link rel="stylesheet" href="文件路径">
边框
边框的形状：
非矩形（会根据容器的宽度高度所改变）
border :
border:1px solid red
//边框的粗细
//边框的样式
//边框的颜色
border-top：设置上边框
//top right bottom left
border-top-color:black; 设置边框的颜色
border-right-width: 设置边框的宽
border-rigth-style: 设置边框的样式
使用边框制作三角形
div{
width: 0;
height: 0;
border: 10px solid #fff;
//箭头向右设置左边颜色
border-left-color: crimson;
//箭头向左设置右边颜色
border-right-color: yellow;
}
背景
背景:
不占容器的宽高的
内容:
可以撑起容器的宽高
background-color: 背景颜色
background-image: 背景图片
默认铺满容器的大小
background-image: url(图片路径)
background-repeat: 是否重复
no-repeat: 不重复
repeat - x: x 轴重复
repeat: x/y 都重复
background-position: 背景图片的位置
顺序是 x y
当第二个值不写的话默认居中
具体数值：
left right center
top bottom center
background-attachment: 背景图固定在浏览器可视
fixed: 背景图固定在浏览器可视
scroll: 背景图跟随移动
复合样式：
background: red url(图片路径) no-repeat center scroll；
不分属性值的书写顺序
文字
文字着重
font-weight: （加粗）
bold 加粗
normal 正常
font-style: (倾斜 )
italic 斜体
font-size 😦 文字大小)
font-family ：(黑体/楷体)
line - height: ( 行高)
测量行高
-
确认文字大小
-
确认两行文字之间的空隙大小
-
空隙大小除以2
3.1 当行高为基数上方比下方少一个相素
强制换行
white-space 强制不换行
nowrap 不换行
normal 换行
测量文字大小时,最好是从上到下方式测量文字大小，空格大小是当前文字的一半
padding 外边距
会撑大内容
top right bottom left
margin 外边距（标签与标签之间的外边距）
margin- top ：传递
可以用border,父级设置边框
margin 上下叠压
使用margin,可以将某一个元素方向设置成预设值 margin 最大的算
a 标签的超链接 伪类
伪类：给元素添加特殊的效果
：link
未访问初始颜色
a:link
: hover
鼠标移动（悬停）
：active
鼠标按下时链接
：visited 访问过后的链接
一般设置的顺序： L V H A
span 标签
区分样式
<a href="/"><span>你好我</span>的世界</a>
a{
color: blue;
}
span{
color: red;
}
选择器
id 选择器 ---- 当前页面唯一的
class 选择器 ---- .class
div 标签选择 – 标签名
群组选择器 ----- div , p ，h1（用逗号分割）
包含选择器 ----- .box div
通配符 : * (找到页面上所有元素)
优先级：（代码执行顺序）
行间样式 > id选择器 > 类选择器 > 标签选择器
块元素和内嵌元素
块的特征：
- 默认独占一行
- 没有宽度时,默认撑满一行
- 支持所有css 命令
内联元素：
同排可以继续跟同类的标签
内容撑开宽度
不支持宽带
不支持上下margin
代码换行被解析
两者转换
display：
inline 内联
block 块级
inline-block
disply ： inline - block
块元素可以在同一行上显示
内联元素支持宽高
没有宽带是时候内容撑开宽度
翻页按钮的案例 a 标签
<style>
.name{
border: 1px solid gold;
width: 375px;
height: 29px;
/* 文字居中 */
text-align: center;
}
a{
border: 1px solid red;
color: blue;
font-size: 14px;
/* 设置行内块级 */
display: inline-block;
width: 13px;
height: 20px;
text-align: center;
/* 去掉a 标签的下划线 */
text-decoration: none;
/* 居中设置顶部边框 */
margin: 4px auto;
}
#ni{
width: 100px;
height: 20px;
border:1px solid red;
}
a:hover{
background:blue;
color: #000;
}
</style>
<body>
<div class="name">
<a id = 'ni' href="">上一页</a>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a id = 'ni' href="">下一页</a>
</div>
</body>
浮动/文档流
float：left| right | none | inherit
- 块在一排显示
- 内联支持宽高
- 默认内容撑开宽度
- 脱离文档流
- 提高层级半层
清除浮动：
clear:left | right| both | none | inherit
元素的某个方向上下部能有浮动元素
cleatr:both 在左右两侧均不允许浮动元素
给父级加浮动会影响: margin auto
- 给父级加和子级同样的高度
- 给父级间浮动
- inline-block 清除浮动 margin 左右 auto 失败
- 空标签清除浮动同级加
- br 清除浮动同级加
- 伪类 after 清除浮动 加给父级 必须加content:""
<style>
.box{
IE6 之前加
*zoom:1;
}
.box::after{
content: " ";
display: block;
clear: both;
}
.box{
border: 1px solid green;
}
.itme{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
<body>
<div class="box">
<div class="itme"></div>
</div>
overflow 溢出隐藏
hidden 隐藏
scroll 加滚动条
定位
position:
relative 相对定位
-
不影响元素本身的特性
-
不使元素脱离文档流
-
如果没有定位偏移量,对元素本身没有任何影响
-
提示层级
absolute 绝对定位
-
使元素完全脱离文档流
-
提示层级
-
内嵌支持宽高
-
块属性标签内容撑开宽度
-
如果有定位父级相对于定位父级发生偏移,没有定位父级相对于document 发生偏移
-
相对定位一般配合绝对定位使用
fixed 固定定位
返回顶部
IE6 不支持固定定位
z-index 提升层级
-
透明度
opacity：0 - 1
IE6 - 7 下的透明度设置
filter:alpha(opacity = 0 ~ 100)
表格
表格标签：
table 表格
thead 表格头
tbody 表格主体
tr 表格行
th 元素定义表头单元格
td 元素定义表格单元
表格样式重置
table {border-collpase: collapse} 单元格间间隙合并
th ，td ( padding:0 ) 重置单元格默认填充
问题： tr 能设置高但是不能设置宽 如果想设置 设置 td 和 th
单元格合并
colspan = ’ 2 ’ 合并两个 （合并是行的）
< th colspan = '2'> 星期一</th>
注意：它相当于扩容 而不是真的合并
rowspan =’ 2’ 合并是列的
<td rowspan='2'>html</td>
表单
from
inupt
<form action="http://www.miaowei">//action 提交的地址
<input type='text' name="user" value="输入框" disabled='user'>
<input type='password' name="password" value="">
<input type="radio" name="sex" value="men">男
<input type='radio' name='sex' value="women">女
<input type="checkbox" name="兴趣" value="chi">吃
<input type="checkbox" name='兴趣' value="shui">睡
<input type="checkbox" name='兴趣' value="dadoudou">打豆豆
<input type="submit" value="让我们提交">
<input type='reset'>
<input type="button" value="按钮">
<input type="image"> 设置图片的提交
<input type='file'> //上传文件
</form>
from 只有一个input属性
type 类型
name 表单元素的名字
value 值
password 密码
radio 单选框互斥效果
注意：单选框互斥的效果是 name 相同
checbox 复选框
submit 提交//有默认值 通过改变 value 来改变样式
action 提交的地址
reset 重置 // 有默认值 通过改变 value 来改变样式
button 按钮 //当type 为button 时候一定要加上 value
image 图片
file 上传
hidden 隐藏
checked 默认选中的
disabled 禁用
https://search.jd.com/Search?keyword=自行车&enc=utf-8&wq=自行车
<form action="https://search.jd.com/Search" >
<input type="text" name='keyword'>
<input type="submit" value="提交">
</form>
问号之前的是地址/问号之后的是描述
用 label 标注(for 指向 id )
<label for='user_name'> 用户名：</label>
<input type='text' name="user" value="输入框" id='user_name'>
下拉框/文本域
<select>
<option> 安徽归纳和</option>
<option>天津</option>
</select>
textarea 文本框
<textarea></textarea>
兼容性
针对 IE 6 -IE 7
css 问题
H5 问题
元素浮动
子级超出父级宽度,p 标签问题 margin 传递
margin 叠压
inline-block 兼容
ie6 最小高度
双边距问题,li 浮动元素4px
1133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
