高级网页设计Class-深入（不定期补充）

其他 2018-10-23 11:10:39 阅读次数: 0

2018-10-15
1.css3作用：①选择器②属性（动画效果）

  • 学习选择器用法（先不考虑优先级问题）
//html代码均相同,更改css样式来观察不同效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--css3 选择器，属性（动画）-->
    <style type="text/css">
        /*交集选择器*/
        /*既是div又是类选择器*/
        div.box{
            width: 200px;
            height: 200px;
            border: 1px solid #2e2e2e;
            float: left;
            margin: 6px;
            text-align: center;
            line-height: 200px;
            font-size: 2em;
        }
    </style>
</head>
<body>
    <h2>css3选择器</h2>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
</body>
</html>

- 交集选择器——既是div又是类选择器
div.box是交集选择器（这里既是div标签选择器又是类选择器）
在这里插入图片描述
在原有的css样式上增加一个属性
- 同个父元素，包括兄弟元素

        .box:nth-child(2){
            color: yellow;
        }

在这里插入图片描述
在这里插入图片描述

- class为box的最后一个子元素

.box:last-child{
            background-color: #28a4c9;
        }

在这里插入图片描述

- 父元素偶数个，选择多个元素。偶数2n，奇数2n-1

//偶数
 .box:nth-child(2n){
            color: purple;
            font-weight: bold;
        }

在这里插入图片描述

 .box:nth-child(2n-1){
            color: purple;
            font-weight: bold;
        }

在这里插入图片描述

- 第几个元素变,div元素——nth-of-type(2)

.box:nth-of-type(2){
             border-radius: 100px ;
             /*border: 1px dotted #e9322d;*/
         }

在这里插入图片描述
- box后的class为box内容样式 ——.box+.box

.box+.box{
            background-color: yellow;
        }

在这里插入图片描述

- h2后第一个——h2+.box

h2+.box{
            background-color: #2e6da4;
        }

在这里插入图片描述

- h2:first-letter——h2第一个字母的样式(第一个文字也算第一个字母)

 h2:first-letter{
            color: #28a4c9;
        }

在这里插入图片描述

- after多用清浮。这里在.box后面添加图片

 .box:after{
            content: url("../image/2.4.jpg");
        }

在这里插入图片描述

-before和after相对使用，在内容前加的文字

 .box:before{
            content:"w";
        }

在这里插入图片描述

  • 有class属性的div——div[class]
 div[class]{
            color: #00A000;
        }

在这里插入图片描述

## 下拉菜单-二级菜单（ul-li）-

HTML部分

<body>
    <div class="menu">
        <ul>
            <li>
                <a href="#">标题1</a>
                <ul>
                    <li><a href="#">菜单1</a></li>
                    <li><a href="#">菜单2</a></li>
                    <li><a href="#">菜单3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">标题1</a>
                <ul>
                    <li><a href="#">菜单1</a></li>
                    <li><a href="#">菜单2</a></li>
                </ul>
            </li>
            <li>
                <a href="#">标题1</a>
                <ul>
                    <li><a href="#">菜单1</a></li>
                    <li><a href="#">菜单2</a></li>
                </ul>
            </li>
            <li>
                <a href="#">标题1</a>
                <ul>
                    <li><a href="#">菜单1</a></li>
                    <li><a href="#">菜单2</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>

css样式：

在这里插入图片描述
在这里插入图片描述

   /*一级菜单下所有二级菜单隐藏*/
        /*下拉菜单*/
        .menu>ul>li{
            float: left;
            width: 150px;
        }
        .menu>ul ul{
            display: none;
        }
        .menu>ul>li:hover ul{
            display: block;
        }
现在写css样式
  • 选中所以一级标题——子代选择器，.menu ul是后代选择器
.menu>ul>li>a{
            color: #00A000;
        }

在这里插入图片描述

  • 选中所以二级标题-写法一
.menu ul ul a{
            color: #28a4c9;
        }

在这里插入图片描述

  • 选中所以二级标题-写法二
.menu ul>li>ul a{
            color: yellow;
        }

在这里插入图片描述

  • 选中所以二级标题-写法三
.menu li li a{
         color: #e9322d;
     }

在这里插入图片描述

  • 选中所以二级标题-写法四
 .menu li>ul>li>a{
         color: #28a4c9;
     }

在这里插入图片描述

  • 第一个二级菜单()
 .menu>ul>li>ul>li:nth-child(1){
            background-color: purple;
        }

在这里插入图片描述

- 对不同父元素下的子元素都是独立计数

 .menu ul ul li+li a{
            background-color: #2e2e2e;
        }

在这里插入图片描述

- 选中第二个 一个标题

.menu>ul>li:nth-child(2)>a{
            background-color: pink;
        }

在这里插入图片描述

  • 第二个 一级菜单下的第二个二级菜单
  • 鼠标在一级菜单的时候 他的子a变色
    在这里插入图片描述
2018-10-18 css3的transition（过度）和transform（变形）,复习css的选择器

一.用10个列表项展示几种变换效果。并且了解每个选择器的意义

  • 鼠标在tlist下第一个li—— .tlist>li:first-child:hover
  • tlist的第二个li——.tlist>li:nth-of-type(2):hover
  • tlist里的第三个li上—— .tlist>li:nth-child(3):hover
  • tlist下第三个li的后面相连的第一个兄弟li——.tlist>li:nth-child(3)+li:hover
  • tlist中li倒数第五个——所有子元素—— .tlist>li:nth-last-child(5)
  • 只有li的子元素——.tlist>li:nth-last-child(4):hover

动画效果：

  • -过度，transition属性增加thml元素有css3属性变化，这两个变化的属性是数值，则以动画的方式呈现。 transition: all 2s;

  • border-radius: 值大于等于宽度一半，html元素为圆形;（参数上右下左每个值可以不同）
    border-radius: 50%;
    border-radius: 10px 70px 30px 5px;

  • box-shadow:6px 6px 6px #030;
    加阴影：box-shadow和text-shadow的四个属性值分别是（x偏移,y偏移, 阴影宽度 ,阴影颜色）

  • text-shadow: 6px 6px 7px #c00;

  • background: lightgoldenrodyellow;
    css3支持颜色变化，jQuery不支持

  • 线性渐变 background: linear-gradient(#000,#ccc,#fff);

  • 径向渐变，从圆心向外发散 background: radial-gradient(#000,#fff);

  • transform: scale(0.2);
    注意：transform后的效果不影响盒模型的宽度和高度

  • 平移，沿x轴，y轴*!向左-100，向右+100
    transform: translateX(-100px);

  • 旋转
    transform: rotateX(180deg);
    transform: rotateY(80deg);
    transform: rotateZ(80deg);

  • 倾斜+右，-左
    transform: skew(10deg);
    transform: skew(-10deg);

源代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--css3新属性-->
    <style type="text/css">
        ul{
            list-style: none;
        }
        /*子元素*/
        .tlist>li{
            width: 150px;
            height: 150px;
            background-color: #f0f0f0;
            float: left;
            border: 1px solid #666666;
            margin: 10px;
            line-height: 150px;
            text-align: center;
            font-size: 50px;
            /*//隐藏溢出部分*/
            overflow: hidden;
            /*过度，transition属性增加thml元素有css3属性变化，这两个变化的属性是数值，则以动画的方式呈现*/
            transition: all 2s;
        }
        /*鼠标在tlist下第一个li*/
        .tlist>li:first-child:hover{
            height: 20px;
            font-size: 10px;
        }
        /*tlist的第二个li*/
        .tlist>li:nth-of-type(2):hover{
            /*参数上右下左每个值可以不同*/
            /*border-radius: 值大于等于宽度一半，html元素为圆形;*/
            /*border-radius: 50%;*/
            border-radius: 10px 70px 30px 5px;
        }
        /*tlist里的第三个li上*/
        .tlist>li:nth-child(3):hover{
            box-shadow:6px 6px 6px #030;
            /*加阴影：box-shadow和text-shadow的四个属性值分别是x偏移,y偏移, 阴影宽度 ,阴影颜色*/
        }
        /*tlist下第三个li的后面相连的第一个兄弟li*/
        .tlist>li:nth-child(3)+li:hover{
            text-shadow: 6px 6px 7px #c00;
        }
        .tlist>li:nth-child(5):hover{
            /*background: lightgoldenrodyellow;*/
            /*css3支持颜色变化，jQuery不支持*/
            /*线性渐变*/
            background: linear-gradient(#000,#ccc,#fff);
        }
        /*tlist中li倒数第五个*/
        /*所有子元素*/
        .tlist>li:nth-last-child(5){
            /*径向渐变，从圆心向外发散*/
            background: radial-gradient(#000,#fff);
        }
        /*只有li的子元素*/
        .tlist>li:nth-last-child(4):hover{
            transform: scale(0.2);
            /*注意：transform后的效果不影响盒模型的宽度和高度*/
        }
        .tlist>li:nth-of-type(8):hover{
            /*!*平移，沿x轴，y轴*!向左-100，向右+100*/
            transform: translateX(-100px);
        }
        .tlist>li:nth-of-type(9):hover{
            /*旋转*/
            /*transform: rotateX(180deg);*/
            /*transform: rotateY(80deg);*/
            transform: rotateZ(80deg);
        }
        .tlist>li:last-of-type{
            /*倾斜+右，-左*/
            /*transform: skew(10deg);*/
            transform: skew(-10deg);
        }
    </style>
</head>
<body>
<ul class="tlist">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
</body>
</html>

效果：
在这里插入图片描述
1上下移动，2出现圆弧，3.边框阴影，4.文字阴影，5渐变，6圆形渐变，7.缩放，8平移，9旋转，10形状

上图下文（新版div）

1.基本布局

 <div class="tr">
        <img src="image/9.4.jpg">
        <div class="text">
            <h3>这里是标题</h3>
            <p>这里是很多文字，transition是两个状态的动画</p>
        </div>
    </div>

注意：在有a超链接的时候、指定图片的时候，宽高不用设定。img——display: block;

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--用div上图下文-->
    <style type="text/css">
        h3,p{
            margin: 0;
            padding: 0;
        }
        img{
            /*在有a超链接的时候、*/
            /*指定图片的时候，宽高不用设定*/
            display: block;
            border: none;
        }
        .tr{
            width: 200px;
            height: 200px;
            /*溢出隐藏不是清浮*/
            overflow: hidden;
            float: left;
        }
        .text{
            height: 32px;
            background-color: rgba(0,0,0,0.5);
            transition: all 2s;
            margin-top: -32px;
            position: relative;
            z-index: 1;
        }
        .text>h3{
            height: 32px;
            color: #f0f0f0;
            font-size: 14px;
            text-align: center;
            line-height: 32px;
        }
        .text>p{
            color: #255625;
            font-size: 12px;
            text-align: center;
            line-height: 20px;
            overflow: hidden;
            height: 40px;
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div class="tr">
        <img src="image/9.4.jpg">
        <div class="text">
            <h3>这里是标题</h3>
            <p>这里是很多文字，transition是两个状态的动画</p>
        </div>
    </div>
    <div class="tr">
        <img src="image/9.4.jpg">
        <div class="text">
            <h3>这里是标题</h3>
            <p>这里是很多文字，transition是两个状态的动画</p>
        </div>
    </div>
    <div class="tr">
        <img src="image/9.4.jpg">
        <div class="text">
            <h3>这里是标题</h3>
            <p>这里是很多文字，transition是两个状态的动画</p>
        </div>
    </div>
</body>
</html>

效果：
在这里插入图片描述
这里看出两段文字在text的盒子内但是只要h3继承bg的特点所以p标签没有渲染成功，可以在p的样式中增加bg

  • 还可以给图片增加缩放的属性
 .tr:hover img{
            transform: scale(1.8);
        }
  • 让文字在图片上移动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--用div上图下文-->
    <style type="text/css">
        h3,p{
            margin: 0;
            padding: 0;
        }
        img{
            /*在有a超链接的时候、*/
            /*指定图片的时候，宽高不用设定*/
            display: block;
            border: none;
        }
        .tr{
            width: 200px;
            height: 200px;
            /*溢出隐藏不是清浮*/
            overflow: hidden;
            float: left;
        }
        .text{
            height: 32px;
            background-color: rgba(0,0,0,0.5);
            transition: all 2s;
            margin-top: -32px;
            position: relative;
            z-index: 1;
        }
        .text>h3{
            height: 32px;
            color: #f0f0f0;
            font-size: 14px;
            text-align: center;
            line-height: 32px;
        }
        .text>p{
            color: #255625;
            font-size: 12px;
            text-align: center;
            line-height: 20px;
            overflow: hidden;
            height: 40px;
            text-indent: 2em;
            /*p的背景在text没生效所以在这里要加*/
            background-color: rgba(0,0,0,0.5);
        }
        .tr:hover .text{
            margin-top: -72px;
        }

    </style>
</head>
<body>
    <div class="tr">
        <img src="../image/9.4.jpg">
        <div class="text">
            <h3>这里是标题</h3>
            <p>这里是很多文字，transition是两个状态的动画</p>
        </div>
    </div>
    <div class="tr">
        <img src="../image/9.4.jpg">
        <div class="text">
            <h3>这里是标题</h3>
            <p>这里是很多文字，transition是两个状态的动画</p>
        </div>
    </div>
    <div class="tr">
        <img src="../image/9.4.jpg">
        <div class="text">
            <h3>这里是标题</h3>
            <p>这里是很多文字，transition是两个状态的动画</p>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

2018-10-23

还是学习css3属性（animation&&flex）

一.animation 多状态动画
参照手册了解animation属性
在这里插入图片描述

写法一：from——to（animation参数三个：动画名称+时长+ 循环是infinite无限）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*animation多状态动画*/
        .box{
            width: 100px;
            height: 100px;
            color: #fff;
            text-shadow: 10px 10px 10px #255625;
            font-size: 14px;
            line-height: 100px;
            border: 1px solid #255625;
            background-color: #666666;
        }
        .box{
            /*动画名称+时长+ 循环是infinite无限*/
            animation: yuan 3s infinite;
        }
        @keyframes yuan {
            /*from_to*/
            from{background-color: #00c}
            to{background-color: #0c0;}
        }
    </style>
</head>
<body>
    <div class="box">animation</div>
</body>
</html>

颜色从蓝色渐变3s到绿色
在这里插入图片描述

在这里插入图片描述
写法二：百分数%（%多少可以改变）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*animation多状态动画*/
        .box{
            width: 100px;
            height: 100px;
            color: #fff;
            text-shadow: 10px 10px 10px #255625;
            font-size: 14px;
            line-height: 100px;
            border: 1px solid #255625;
            background-color: #666666;
        }
        .box{
            /*动画名称+时长+ 循环是infinite无限*/
            animation: yuan 3s infinite;
        }
        @keyframes yuan {
            /*from_to*/
            20%{background-color: #00c}
            60%{background-color: #0c0;
            color: yellow;}
            100%{background-color:#255625}
        }
    </style>
</head>
<body>
    <div class="box">animation</div>
</body>
</html>

二.animation全屏自适应宽度类似幻灯片效果但是不支持跳转 （跳转还是要jQuery）
源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--animation实例-->
    <!--全屏宽度自适应宽度——幻灯片但是不支持跳转-->
    <style type="text/css">
        /*全局*/
        ul,p{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        a img{
            border: none;
            display: block;
        }
        .slide{
            overflow: hidden;//溢出隐藏
            height: 250px;
            /*宽度没设置就是100% */
        }
        .slide>ul{
            /*有5个占100%的子元素*/
            width: 500%;
            height: 250px;
            /*每个元素动2s*/
            animation: donghua 10s infinite;
        }
        /*left或margin-left可以动起来*/
        .slide>ul>li{
            /*width: 20%;//是屏幕的100%。父元素是500%*/
            float: left;
            position: relative;
            width: 20%;
        }
        .slide>ul>li img{
            width: 100%;
            height: 250px;
            /*相同图片不要设置高度，而是每张图格式相同？*/
        }
        .slide>ul>li p{
            position: absolute;
            width: 100%;
            height: 33px;
            line-height: 33px;
            text-align: center;
            color: #255625;
            font-weight: bold;
            background-color: rgba(0,0,0,0.5);
            left: 0;
            bottom: 0;
        }
        @keyframes donghua {
            /*10-20是为了让内容可读，停止点时间*/
            10%{margin-left: -100%}
            20%{margin-left: -100%}
            30%{margin-left: -100%}
            40%{margin-left: -200%}
            50%{margin-left: -200%}
            60%{margin-left: -300%}
            70%{margin-left: -300%}
            80%{margin-left: -400%}
            90%{margin-left: -400%}
            100%{margin-left: -400%}
        }
    </style>
</head>
<body>
    <div class="slide">
        <ul>
            <li>
                <a href="#">
                    <img src="image/flower1.jpg" alt="">
                </a>
                <p>这里是文字</p>
            </li>
            <li>
                <a href="#">
                    <img src="image/flower6.jpg" alt="">
                </a>
                <p>这里是文字</p>
            </li>
            <li>
                <a href="#">
                    <img src="image/flower2.jpg" alt="">
                </a>
                <p>这里是文字</p>
            </li>
            <li>
                <a href="#">
                    <img src="image/flower4.jpeg" alt="">
                </a>
                <p>这里是文字</p>
            </li>
            <li>
                <a href="#">
                    <img src="image/flower5.jpg" alt="">
                </a>
                <p>这里是文字</p>
            </li>
        </ul>
    </div>
</body>
</html>

注意

  • .slide>ul设置宽度500%是给里面5个li，每个li为100%。
  • .slide>ul>li是屏幕的100%。父元素是500%

三.flex布局
知识回顾
w3手册
源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*父元素display：flex，子元素继承父元素，bootstrap4都用flex不考虑清浮*/
        ul{
            list-style: none;
        }
        .flex{
            display: flex;
            /*翻转*/
            /*flex-direction: row-reverse;*/
            /*换行，默认不换行*/
            /*flex-wrap: wrap;*/
            justify-content: center;
        }
        .flex>li{
            border: 1px solid #255625;
            /*w=10%不满一行会压缩，width: >20%会达到最大界限;*/
            width: 20%;
            height: 200px;
            font-size: 30px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
    <ul class="flex">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

在这里插入图片描述
四.flex优先级
源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*父元素display：flex，子元素继承父元素，bootstrap4都用flex不考虑清浮*/
        ul{
            list-style: none;
        }
        .flex{
            display: flex;
            /*翻转*/
            /*flex-direction: row-reverse;*/
            /*换行，默认不换行*/
            /*flex-wrap: wrap;*/
            justify-content: center;
        }
        /*改变顺序order从小到大排序*/
        .flex>li{
            order: 1;
        }
        .flex>li:first-child{
            order: 2;
            /*屏幕宽度大于内容宽度，则多用宽度给这个*/
            flex-grow:1 ;
            /*收缩*/
            flex-shrink: 2;
        }
        .flex>li:last-child{
            order: 1;
            flex-shrink: 3;
        }
        /*order相同按他们出现的顺序来排序*/
        /*第四个元素*/
        .flex>li:nth-child(4){
            order: 3;
        }
        .flex>li{
            border: 1px solid #255625;
            /*w=10%不满一行会压缩，width: >20%会达到最大界限;*/
            width: 30%;
            height: 200px;
            font-size: 30px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
<ul class="flex">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
</body>
</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_41056807/article/details/83065729
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022