2020-09-07

Day 04

1.回顾 总结

结构标签
html 页面的跟标签 双
body 页面的主体 双
head 页面的头部 双
title 页面标题，写在head里  双
meta 设置字符集，写在head里 属性 charset 单

格式排版标签
h1~h6 内容标题 双
p     段落标签 双
hr    分割线   单
img    图片标签  属性：src,width,height 单标签
a      超链接 属性：href 双
表单标签
input  单行输入框 属性：href placeholder 单
textarea  多行输入框（文本域） 属性：placeholder 
button   按钮   双
列表标签
ul 列表 双
li 列表项，写在ul的里面 双
布局结构层次
div 双

CSS

选择器

1.标签名选择器，通过标签名来选择元素
div{

}
2.类名选择器，通过类名来选择元素
.类名{

}
3.层级选择器
选择器1 选择器2{
}

css属性

内容大小的属性
width 
hright
内边距
padding
padding-left
padding-right
padding-top
padding-bottom
边框
border
外边距
margin
字体：
 font-size
 color
背景：
background-color
background-size:cover
background-image

2.页面中用到的知识点

2.1显示版权符号

©

2.2让内容居中的css属性

text-align:center;

2.3设置元素的圆形；

border-radius:50%;

2.4取消列表项前面的点

ul{
 list-style:none
}

2.5：hover选择器（与用户交互）

/*选择鼠标悬停在上面的li*/
li:hover{

}

2.6锚点

1.在页面中设置锚点
给元素添加id属性，属性的值就是锚点的名字，该元素上就添加了一个锚点
<div id="锚点名"></div>
2.让超链接指向锚点
<a #锚点名></a>

2.7超链接a元素的默认样式

1.要设置超链接a元素的字体颜色，选择器一定要直接选择a，给a的祖先元素设置，无效
2.超链接自带文字的下划线
 要去掉下划线，使用css属性text-decoration：none

a{
text-decoration:none;
}

2.8字体图标

https://fontawesome.dashgame.com/ FontAwesome

1.下载font-awesome
2.把下载好的css文件夹和fonts文件夹复制到项目目录中
3. 使用 link 标签引入 awesome.css 文件
   <link rel="stylesheet" href="css/font-awesome.min.css">
4. 在 html 中写元素，给元素设置指定的类名，显示为不同的图标
	<i class="fa fa-user"></i>
    <i class="fa fa-bath"></i>
    <i class="fa fa-balance-scale"></i>
    
5. 可以通过 font-size 和 color 设置字体图标的大小和颜色

2.9固定定位

固定定位的元素，不随着滚动条的滚动而滚动

3、没见过的样式

1.页面中的文字居中

text-align:center;

2.页面中的背景图片的引入和设置

background-image:url(../images/2.jpg);
    background-size:cover;