css学习笔记
一、align
知识点:div块的居中、文本内容的水平垂直居中
1.1 div块的居中
margin:auto;
1.2 文本内容的水平垂直居中
<!-- 第一块文本 -->
<div id="center1">padding和text-align设置的水平垂直居中</div>
#center1{
padding:50px;
text-align:center;
border:1px solid black;
}
<!-- 第二块文本 -->
<div id="center2">line-height和text-align设置的水平垂直居中</div>
#center2{
margin-top:5px;
height:100px;
line-height:100px;
text-align: center;
border:1px solid black;
}
<!-- 第三块文本 -->
<div id="center3"><p>position和transform设置的水平垂直居中</p></div>
#center3{
margin-top:5px;
height:100px;
position:relative;
border:1px solid black;
}
#center3 p{
margin:0;
position:absolute;
top:50%;
left: 50%;
transform:translate(-50%, -50%);
}
二、background
知识点:背景图片的平铺方式
2.1 默认平铺
2.2 水平平铺
background-repeat:repeat-x;
2.3 垂直平铺
background-repeat:repeat-y;
3.4 设置定位与不平铺
background-repeat:no-repeat;
background-position:right-top;
3.5固定平铺
background-repeat:no-repeat;
background-position:right-top;
background-attachment:fixed;
三、box
知识点:盒子模型
3.1 盒子模型
3.2 实例
#model{
padding:10px;
border:5px solid black;
margin:25px;
outline-color:blue;
outline-style:dashed;
color:red;
}
四、form
知识点:计数器、input框动画、聚焦、文本框、响应式表单
4.1 计数器
/* 计数器 */
body{
counter-reset:section; /* 在全局设置计数器 */
}
label::before{
counter-increment:section;
content:counter(section) "."; /* 在label前输出计数器数字和“.” */
}
4.2 input框聚焦与动画
/* 动画 */
input[type=text] {
-webkit-transition:width 0.4s ease-in-out; /*动画效果*/
transition:width 0.4s ease-in-out;
}
/* 聚焦 */
input[type=text]:focus{
background-color:lightblue; /* 聚焦时背景颜色改变 */
width:100%; /* 聚焦时宽度改变 */
}
4.3 文本框
textarea {
resize: vertical; /* 在垂直方向改变文本框大小 */
}
4.4 响应式表单
/* 响应式布局 layout - 在屏幕宽度小于 600px 时, 设置为上下堆叠元素 */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
五、image
知识点:图像拼合、图片廊
5.1 图像拼合
/* 首页图标 */
#home{
left:0px;
width:35px;
background: url('img/group.png') 0 0; /* 截取图片的指定位置 */
}
#home a:hover{
background: url('img/group.png') 0 -35px; /* 鼠标移入时垂直方向坐标改变 */
}
/* 前进图标 */
#pre{
left:36px;
width:35px;
background: url('img/group.png') -35px 0;
}
#pre a:hover{
background: url('img/group.png') -35px -35px;
}
/* 后退图标 */
#next{
left:70px;
width:35px;
background: url('img/group.png') -70px 0;
}
#next a:hover{
background: url('img/group.png') -70px -35px;
}
5.2 图片廊
<!-- 点击图片,展示完整图片 -->
<div class="responsive">
<div class="img">
<a target="_self" href="img/changcheng.jpg">
<img src="img/changcheng.jpg" alt="changcheng.jpg" width="300" height="200">
</a>
<div id="desc">长城</div>
</div>
</div>
5.3 整体
六、link
知识点:访问链接的几种样式
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
七、navigation
知识点:导航栏格式设置、激活导航条、下拉框
7.1 垂直导航栏
<h1>垂直导航栏</h1>
<div id="vertical">
<ul>
<li><a href="#" class="active">首页</a></li>
<li><a href="#">动态</a></li>
<li><a href="#">资源</a></li>
<div class="dropdown1">
<a href="#" class="droptn1">关于</a>
<div class="dropdown-content1">
<a href="#">博客</a><br>
<a href="#">github</a>
</div>
</div>
</ul>
</div>
#vertical{
width:30%;
height:300px;
}
#vertical ul{
list-style-type:none; /* 去除列表样式 */
margin:0px;
padding:0px;
overflow:hidden;
background-color:#9ACD32;
}
#vertical ul li{
border-bottom:1px solid black; /* 设置下边界线 */
}
#vertical ul li a,.droptn1{
padding:20px;
display:block;
text-decoration:none; /* 去除导航栏链接样式 */
}
#vertical ul li a:hover:not(.active),.dropdown1:hover{
color:#9ACD32;
background-color:#FFFF00;
}
.dropdown-content1{ /* 下拉内容设置 */
width:100px;
display:none; /* 隐藏导航栏下拉内容 */
text-align:center;
background-color:#0000CD;
position:absolute;
box-shadow:0px 8px 16px rgba(0, 0, 0, 0.2);
}
.dropdown-content1 a{
color:orange;
display:block;
text-decoration:none;
}
.dropdown1:hover .dropdown-content1{ /* 点击dropdown1时下拉框显示 */
display:inline-block;
}
.active{ /* 激活当前导航条 */
color:#9ACD32;
background-color:#FFFF00;
}
7.2 水平导航栏
<h1>水平导航栏</h1>
<div id="level">
<ul>
<li><a href="#" class="active">首页</a></li>
<li><a href="#">动态</a></li>
<li><a href="#">资源</a></li>
<div class="dropdown2">
<a href="#" class="droptn2">关于</a>
<div class="dropdown-content2">
<a href="#">博客</a><br>
<a href="#">github</a>
</div>
</div>
</ul>
</div>
#level{
width:100%;
height:200px;
}
#level ul{
list-style-type:none;
margin:0px;
padding:0px;
overflow:hidden;
background-color:#9ACD32;
border:1px solid black;
}
#level ul li{
margin-right:50px;
float:left;
}
#level ul li a,.droptn2{
padding:20px;
display:inline-block;
text-decoration:none;
}
#level ul li a:hover:not(.active),.dropdown2:hover,.dropbtn2{
color:#9ACD32;
background-color:#FFFF00;
}
.dropdown2{
display:inline-block;
}
.dropdown-content2{
width:100px;
display:none;
text-align:center;
background-color:#0000CD;
position:absolute;
box-shadow:0px 8px 16px rgba(0, 0, 0, 0.2);
}
.dropdown-content2 a{
color:orange;
display:block;
text-decoration:none;
}
.dropdown-content2 a:hover{
background-color:green;
}
.dropdown2:hover .dropdown-content2{
display:block;
}
八、position
知识点:几种定位的作用效果、图片裁剪、鼠标指针样式
8.1 定位
left:50px;
position:static;
left:50px;
position:relative;
margin:20px;
right:160px;
position:fixed;
position:absolute;
top:5px;
position:sticky
8.2 图片裁剪
<img src="image/tree.jpg">
<img src="image/tree.jpg" id="cut">
img
{
width:300px;
height:140px;
position:absolute;
}
#cut{
margin-top:200px;
clip:rect(0px,240px,200px,100px);
}
8.3 鼠标指针样式
cursor:auto;
cursor:crosshair;
cursor:default;
cursor:e-resize;
cursor:help;
cursor:move;
cursor:n-resize;
cursor:ne-resize;
cursor:nw-resize;
cursor:pointer;
cursor:progress;
cursor:s-resize;
cursor:se-resize;
cursor:sw-resize;
cursor:text;
cursor:w-resize;
cursor:wait;
九、response
知识点:网格视图、媒体查询、断点
body{
background-color:lightgreen;
}
[class*="col-"]{ /* 除了下面几种特殊情况下每列宽度(第四个图的情况) */
width:100%;
}
@media only screen and (orientation:landscape){ /* 不同设备横屏情况下背景色为浅蓝色 */
body{
background-color:lightblue;
}
}
/* 屏幕大于600px但小于768px时 */
@media only screen and (min-width: 600px){
.col-m-1 {width:8.33%;}
.col-m-2 {width:16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px){
.col-1 {width:8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
十、text
知识点:
(1)文本对齐:text-aligin:center(居中)/right(右对齐)/left(左对齐)/justify(每一行宽度相等,左右边距对齐)
(2)文本修饰:text-decoration:none(去掉文本修饰,一般去掉链接下划线时会用到)
(3)文本缩进:text-indent:(数字)px
(4)字符之间空间:letter-spacing:(数字)px
(5)行之间空间:line-height:(数字)px
(6)单词之间空白:word-spacing:(数字)px
(7)文本阴影:text-shadow:(数字)px (数字)px #(颜色)
十一、toltip
知识点:提示框设置、箭头、淡入效果
<div class="toltip1">
<span class="toltipselect1">提示一</span>
<span class="toltiptext1">提示</span>
</div>
<div class="toltip2">
<span class="toltipselect2">提示二</span>
<span class="toltiptext2">提示</span>
</div>
/* 上(下)提示框 */
.toltip1{
display:inline-block;
text-align:center;
position:absolute;
margin-top:60px;
cursor:pointer;
background-color:#ffccff;
}
.toltipselect1{
padding:10px;
display:inline-block;
}
.toltipselect1:hover{
color:#fff;
}
.toltiptext1{
visibility:hidden;
width:120px;
background-color:#ff0055;
color:black;
border-radius:6px;
padding:10px 0;
position:absolute;
opacity:0;
transition:opacity 2s;
/* 上 */
bottom:130%;
left:50%;
margin-left:-60px;
/* 下 */
/* top:130%;
left:50%;
margin-left:-60px; */
}
.toltiptext1::after{
content:"";
position:absolute;
left:50%;
margin-left:-5px;
border-width:5px;
border-style:solid;
/* 上 */
top:100%;
border-color:#ff0055 transparent transparent transparent;
/* 下 */
/* bottom:100%;
border-color:transparent transparent #ff0055 transparent; */
}
.toltip1:hover .toltiptext1{
visibility:visible;
opacity:1;
}
/* 左(右)提示框 */
.toltip2{
display:inline-block;
text-align:center;
position:absolute;
margin-top:200px;
cursor:pointer;
background-color:#ffccff;
}
.toltipselect2{
padding:10px;
display:inline-block;
}
.toltipselect2:hover{
color:#fff;
}
.toltiptext2{
visibility:hidden;
width:120px;
background-color:#ff0055;
color:black;
border-radius:6px;
padding:10px 0;
position:absolute;
opacity:0;
transition:opacity 2s;
/* 右 */
left:110%;
/* 左 */
/* right:110%; */
}
.toltiptext2::after{
content:"";
position:absolute;
top:50%;
margin-top:-5px;
border-width:5px;
border-style:solid;
/* 右 */
right:100%;
border-color:transparent #ff0055 transparent transparent ;
/* 左 */
/* left:100%;
border-color:transparent transparent transparent #ff0055; */
}
.toltip2:hover .toltiptext2{
visibility:visible;
opacity:1;
}
十二、补充
(1)详细代码及内容请查看https://github.com/gsonya/web/tree/master/css
(2)学习内容参考"菜鸟教程"。