web前端05

你好，如果你看到这篇博客，应该是带着问题的。如果问题没有解决，请将问题写在留言区，交流。

************************************************************************************************

<link rel="stylesheet" href="index.css">
<link rel="icon" href="https://www.jd.com/favicon.ico">
link标签引入外部文件，网络资源
icon是浏览器tab上面的小图标

把网站h1标签包裹的文字进行缩进，不让用户看到，只让搜索引擎抓取。
导航栏的div里面，有个h1，h1里面有文字和a标签，a标签里面有logo图片，点击图片链接主页。
.xc-navBar h1{
    text-indent: -800px;
}    

鼠标移入box1，就执行，移除就恢复原样式。
.box1:hover{
    border-radius: 30%;
    background-color: #df5000;
}

 

字体图标。

unicode
html中使用 字体图标 的格式是
行内标签i,span,等   <i class="iconfont icon-gouwuche"></i>

颜色表示法：
第一，红绿蓝，6位16进制。#e4e4e4
第二，rgb(255,255,255)
rgba(255,255,255,0）完全透明，设置盒子的背景透明。对于盒子内容无用。
back-groundcolor: rgba（255,255,255,1）不透明

opacity: 0.4; 这个透明度设置，会让盒子内容和背景都透明。

水平方向auto可以设置小盒子block居中，但垂直方向上不能用auto居中。
block才能用auto居中，span是不行的。

在CSS中设置鼠标样式：
cursor：crosshair十字架 
cursor: pointer小手，模拟<a>的链接效果

显示和隐藏：
第一种， overflow:hidden溢出的隐藏
                  scroll有滚动条
                  auto根据内容多少，自动出现滚动条
第二种，display: none
:hover只能用于鼠标移入 父元素，让子元素反应（这里是从隐藏变成显示）
.box:hover img{
    display: block;
}
第三种，visibility='hidden'
第二种不占位置，第三种只是看不见，任然占用位置。

盒子和文字的阴影：
box-shadow:
text-shadow:
https://www.w3cschool.cn/css3/css3-shadow.html

CSS3 过渡
transition:
https://www.w3cschool.cn/css3/fyralfln.html

CSS3 动画
动画先定义，再使用。
当在@keyframe创建动画，把它绑定到一个选择器，否则动画不会有任何效果。http://www.w3school.com.cn/css3/css3_animation.asp