web-CSS学习笔记

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）学习内容参考"菜鸟教程"。