第五天的学习由于被工作耽误了而没有更新博客，正好放在今天一起写。这两天的天气还不错，学习的状态也还不错了，在乐字节的这些天收获了很多的好朋友，技术上也得到了一定的提高，这一切都得益于同学与老师的帮助，良师益友才能不断进步。
元素定位
float 浮动
- left right
- 元素浮动，后面的元素会上移顶替原来的位置
- 清除浮动: clear: left, right, both
123
position 定位
- relative: 相对他原来的位置， 原来的位置还占着
- absolute: 绝对于（相对定位的祖先元素）的位置，原来的位置不占了
- fixed: 静止定位 静止在窗口上
123
字体和背景
字体
字体颜色：color:red;
颜色关键字：red
十六进制颜色
RGB、RGBA
HSL HSLA
字体样式:font-style italic
字体类型：斜体
字体变体：font-variant字体参数
font-variant: small-caps;
small-caps大小写
normal正常的
字体重量：font-weight: 700;
数字：100，200.....900(默认是400)
700=bold 加粗 -->
字体大小：font -size
关键字：large larger
像素值：20px;
行高：line-height
line-height
height
字体：font-family
font-family: 隶书;
font-family: 隶书, 仿宋;
仿宋是备胎 隶书找不到的话 就默认仿宋
12345678910111213141516171819202122232425
文本
文字对齐:vertical-align
center居中
left居左
right居右
text-align: center;水平居中
vertical-align: center;垂直居中
文字装饰：text-decoration:
overline上画线
none 没有
文字缩进：text-indent
text-indent: 50px;
文字阴影
text-shadow:3px 3px 1px red;
左右偏移 上下偏移 阴影半径 红色
文字转换
text-transform: uppercase;
全是大写
text-transform:lowercase;
全是小写
text-transform:capitalize;
首字母大写
字母间距：letter -spacing
letter-spacing: 0.5em;
单词间距： word -spacing
word-spacing: 0.5em;
12345678910111213141516171819202122232425
文字引用
文字引用
<cite>
<q>
<blockquote>
1234
背景
背景颜色
一种写法：background: darkblue;
第二种写法：background-color: green;
背景图片
background: url("bd_logo1.png")
背景重复
background-repeat: repeat;
背景位置
background: url("bd_logo1.png") left -250px no-repeat;
左left 左边显示-250px,250像素
背景渐变
左右渐变
background: linear-gradient(to right, red, blue);
上下渐变
background: linear-gradient( red, blue);
12345678910111213141516
每日单词
- float: 浮动
- clear: 清除
- position: 位置、定位
- top: 上、顶部
- left: 左侧
- right: 右侧、正确的
- bottom: 底部(注意区别button: 按钮)
- relative: 相对的
- absolute: 绝对的
- fixed: 静止的
- normal: 普通的、正常的
- space: 空间
- transform: 转变、变形
- large: 大
- word: 单词、词语
- letter: 信件、字母
- uppercase: 大写
- lowercase: 小写
- align: 对齐
- center: 中心
- url: 统一的资源定位符
今日成果
h1{
color: rgb(86,214,239);
font-style:italic;
}
#p1{
font-variant: small-caps;
}
#p2{
font-weight: 600;
}
#p3{
font-size: 50px;
}
#p4{
height: 150px;
}
#p5{
line-height: 30px;
}
p{
font-family:隶书;
}
#p6{
font: italic normal 700 50px/50px 仿宋
}
12345678910111213141516171819202122232425
#div0{
width: 300px;
height: 200px;
font-size: 30px;
border: 2px dashed blue;
text-align: center;/*文本对齐*/
text-decoration: ;
}
#p1{
text-indent:2em;
}
h1{
text-shadow: 3px 3px 5px red;
}
#p1{
font-variant: small-caps;
}
#p2{
text-transform:lowercase;
/*letter-spacing:0.5em;*/
word-spacing:0.5em;
}
12345678910111213141516171819202122
#div0{
width: 400px;
height:800px;
background: yellow;
background: url("1111.jpg")0 100px;
}
#div1{
width: 1000px;
height:400px;
background: linear-gradient(to right,blue,yellow);
}
明天又是继续搬砖的日子，学习使我快乐@！！!
