一.CSS三大特性以及五彩导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五彩导航</title>
    <style>
        body {
            color: pink;
            font: 12px/1.5 'Microsoft YaHei';
            /*字体大小与行高操作继承*/
            /*font: 12px/24px 'Microsoft YaHei';*/
        }

        div {
            /*子元素继承了父元素body的行高 行高为1.5*/
            /*这个1.5是指当前元素文字大小font-size的1.5倍  此时14*1.5=21*/
            font-size: 14px;
        }
        .nav a{
            display: inline-block;
            height: 50px;
            width: 100px;
            line-height: 50px;
            text-decoration: none;
            color: greenyellow;
            text-align: center;
            /* 行高与盒子高度可以进行调整 */
        }

        .nav a {
            background-color: deeppink;
        }

        .nav .a1:hover{
            /* 我想加背景图片可是阿里iconfont网站进不去公司限制 以及加个背景图片平铺不重复 */
            background-color: aqua;
        }

        .nav .a2:hover {
            background-color: #8aff4b;
        }

        .nav .a3:hover {
            background-color: #b9ffa7;
        }
三大特性以及五彩导航栏
        .nav .a4:hover {
            background-color: #ff49d6;
        }

        .nav .a5:hover {
            background-color: #ff3d29;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#" class="a1">晴天</a>
        <a href="#" class="a2">阴天</a>
        <a href="#" class="a3">下雨</a>
        <a href="#" class="a4">浪天</a>三大特性以及五彩导航栏
        <a href="#" class="a5">彩带</a>
    </div>
    <h3>css三大特性</h3>
    <p>层叠性:相同选择器样式重叠就会覆盖</p>
    <p>继承性:子标签继承父标签的样式 主要是继承文字相关的样式以及颜色 行高的继承性</p>
    <p>优先级:
        选择器权重的问题:
        继承或* 0,0,0,0
        元素选择器0,0,0,1
        类选择器/伪类选择器0,0,1,0
        ID选择器0,1,0,0
        行内样式style='' 1,0,0,0
        !import无穷大
    </p>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
</body>
</html>

二. 边框Border与padding的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框border与内边距padding</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            /*border-width: 5px;*/
            /*边框实线*/
            /*border-style: solid;*/
            /*边框虚线*/
            /*border-style: dashed;*/
            /*边框点线框*/
            /*border-style: dotted;*/
            /*border-color: lime;*/
            /*复合写法*/
            border: 5px solid red ;
            /*上下左右边框调整*/
            /*border-bottom: 1px solid red;*/
            /*border-top: 2px solid royalblue;*/
            font-size: 15px;
            /*text-align: center;*/
            /*控制相邻单元格边框合并在一起*/
            /*border-collapse: collapse;*/
            /*内边距的用法*/
            /*padding-left: 10px;*/
            /*padding-top: 20px;*/
            /*后边跟多个值是不同的的结果 分别可以跟1,2,3,4个*/
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>
        margin外边距 border边框 padding内边距 content内容
        会影响盒子的大小的 可以减去那么就可以固定盒子的大小
    </div>
</body>
</html>

 三.margin与Ps的使用技巧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距margin</title>
    <style>
        * {
            /*清楚内外边距*/
            padding: 0;
            margin: 0;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }

        .one{
            margin-bottom: 20px;
        }

        .two {
            /*也可以是四个参数  跟padding参数一样的*/
            margin: 50px;
        }

        .three {
            /*上下100px间距  左右居中显示*/
            margin: 100px auto;
            /*margin: 0 auto;*/

        }

        .daMao, .erMao {
            height: 60px;
            width: 100px;
            background-color: greenyellow;
        }

        .daMao {
            margin-bottom: 100px;
        }


        .erMao {
            /*两盒子最终外边距还是200px 合并选择其中一个较大的值*/
            margin-top: 200px;
        }

        .son {
            height: 100px;
            width: 100px;
            background-color: pink;
            margin-top: 50px;
        }

        .father {
            /*
            解决垂直外边距的塌陷方案
            1.给父级标签加个border
            2.给父级标签加个padding
            3.给父级标签加个overflow: hidden; 推荐使用
            */
            height: 200px;
            width: 200px;
            background-color: deeppink;
            margin-top: 400px;
            /*border: 1px solid green;*/
            /*padding: 1px 0;*/
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
    <div>块级元素盒子要水平居中:1.盒子设定高度2.盒子左右外边距设置成auto</div>
    <p><span>行内元素或者行内块元素要水平居中给父元素加text-align: center即可</span></p>

    <p>外边距合并-相邻块级元素元素垂直外边距合并</p>
    <div class="daMao"></div>
    <div class="erMao"></div>

    <p>嵌套块元素垂直外边距的塌陷</p>
    <div class="father">
        <div class="son"></div>
    </div>

    <p>Ps的使用</p>
    <p>截图软件截图然后打开Ps软件此时文件-->打开</p>
    <p>ctrl+r:打开标尺 或者视图-->标尺</p>
    <p>右击标尺 把标尺单位改为像素</p>
    <p>ctrl+放大视图 ctrl-缩小视图</p>
    <p>按住空格键 可以拖动ps图</p>
    <p>用选区拖动可以测量大小</p>
    <p>ctrl+d可以撤销选区</p>
    <p>还有个取色</p>
</body>
</html>

 了解更多请点击

https://www.w3cschool.cn/css/

https://www.w3cschool.cn/css3/

01-12 04:14