CSS3-2023.3.1-day2

weixin_65590235

于 2023-03-01 21:31:56 发布

阅读量62

点赞数

文章标签： css3 javascript html Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_65590235/article/details/129274028

版权

本文介绍了CSS3的一些重要特性，包括使用filter函数实现图片模糊处理，calc函数动态计算元素尺寸，transition创建过渡效果，以及如何制作和使用favicon图标。同时，还详细讲解了Z图标（Unicode和Fontclass两种方法）和竖线的四种实现方式，包括直接输入、字体引入、边框和伪元素的方法。

摘要由CSDN通过智能技术生成

CSS3图片模糊处理

filter:函数();例如div { filter: blur(5px); }blur模糊处理数值越大越模糊

cala()函数

calc主要应用在自动调整子元素的大小以适应其容器的大小

可以实现水平或者垂直居中width: calc(100%-200px); margin-left: 100px;

过渡

过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画:(要有起始状态和中间状态)是从一个状态渐渐的过渡到另外一个状态可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持(ie9以下版本)但是不会影响页面布局。

我们现在经常和 :hover 一起搭配使用

谁做过渡给谁加 (不给hover加)

网页制作流程

品优购项目

1.6网站favicon 图标(地球标换成logo标)

一、制作favicon图标

1.把品优购图标切成 pna 图片

2.把 pna 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫: http://www.bitbug.net)

Z图标的使用

第一种方法Unicode

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('../课堂练习/品优购/font_3911673_iahuvredcxi/iconfont.woff2') format('woff2'),
                url('../课堂练习/品优购/font_3911673_iahuvredcxi/iconfont.woff') format('woff'),
                url('../课堂练习/品优购/font_3911673_iahuvredcxi/iconfont.ttf') format('truetype');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
</head>

<body>
    <span class="iconfont">&#xe651;</span>
</body>

</html>

第二种方法Font class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../课堂练习/品优购/font_3911673_iahuvredcxi/iconfont.css">
</head>
<body>
    <span class="iconfont icon-gouwuchekong"></span>
</body>
</html>

竖线的四种做法

敲竖线|

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    li {
        list-style: none;
        float: left;
        padding-left: 8px;
    }
</style>

<body>
    <section class="w">
        <ul>
            <li>我的订单</li>
            <!--竖线 : 直接敲| -->
            <li>|</li>
            <li>我的品优购</li>
            <li>|</li>
            <li>品优购会员</li>
            <li>|</li>
            <li>企业采购</li>
            <li>|</li>
            <li>关注品优购</li>
            <li>|</li>
            <li>客户服务</li>
            <li>|</li>
            <li>网站导航</li>
        </ul>
</body>

字体引入(Z图标做竖线)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../课堂练习/品优购/font_3911673_iahuvredcxi/iconfont.css">
</head>
<body>
    <span class="iconfont icon-shuxian"></span>
</body>
</html>

添边框(写在css里面)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框做竖线</title>
</head>
<style>
    li {
        list-style: none;
        float: left;
    }
    /* 竖线:用边框做 要隔一个留一个空li(偶数个)*/
    /*section里面的偶数个li */
    section:nth-child(1) li:nth-last-child(2n) {
        border-right:1px solid  #666;
        height: 15px;
        padding: 0;
        margin: 4px 5px 0 5px ;
    }
</style>
<body>
    <section>
        <ul>
            <li>我的订单</li>
            <!--竖线 : 边框-->
            <li></li>
            <!-- Z图标做下箭头 -->
            <li>我的品优购
            </li>
            <li></li>
            <li>品优购会员</li>
            <li></li>
            <li>企业采购</li>
            <li></li>
            <li>关注品优购</li>
            <li></li>
            <li>客户服务</li>
            <li></li>
            <li>网站导航</li>
        </ul>
    </section>
</body>
</html>

伪元素(写在css里面)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素做竖线</title>
    <link rel="stylesheet" href="../课堂练习/品优购/font_3911673_iahuvredcxi/iconfont.css">
    <style>
        li {
            list-style: none ;
            float: left;
        }
     /* 伪元素做下箭头*/
     /* section里面的第 3,9,11,13个li */
     header nav section:nth-child(2) li:nth-child(3)::after,
     header nav section:nth-child(2) li:nth-child(9)::after,
     header nav section:nth-child(2) li:nth-child(11)::after,
     header nav section:nth-child(2) li:nth-child(13)::after{
         content: "\e606";
         /* 字体 谷歌font-css中引用 */
         font-family: "iconfont" ;
         margin-left: 3px;
     }
    </style>
</head>
<body>
    <section>
        <ul>
            <li>我的订单</li>
            <!--竖线 : 伪元素-->
            
            <li><span class="iconfont icon-shuxian"></span></li>
            <!-- Z图标做下箭头 -->
            <li>我的品优购</li>
            <li><span class="iconfont icon-shuxian"></span></li>
            <li>品优购会员</li>
            <li><span class="iconfont icon-shuxian"></span></li>
            <li>企业采购</li>
            <li><span class="iconfont icon-shuxian"></span></li>
            <!-- Z图标做下箭头 -->
            <li>关注品优购</li>
            <li><span class="iconfont icon-shuxian"></span></li>
            <!-- Z图标做下箭头 -->
            <li>客户服务</li>
            <li><span class="iconfont icon-shuxian"></span></li>
            <!-- Z图标做下箭头 -->
            <li>网站导航</li>
        </ul>
    </section>
</body>
</html>

logo制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>


header > section section:first-child a {
    /* 转换为①行内块或者②左浮动 */
    width: 175px;
    height: 56px;
    /* 行内块有间隙  有文字图会掉下去(让字消失但会让图掉下去) */
    /* ①display: inline-block; */
    /*②1. font-size可以解决这些问题*/
    font-size: 0;

    float: left;
    /* ②2.1往左缩进品优购三个字 */
    /* text-indent: -3em; */
    /*② 2.2裁剪让品优购三个字消失 */
    /* overflow: hidden; */

    /* 不需要平铺 */
    background: url(../public/images/logo.png) no-repeat;
}

    </style>




<body>
 <!-- logo -->
            <section>
                <h1>
                    <!-- 链接到首页  a里面写网站名称LOGO SEO 优化 -->
                    <a href="#">品优购</a>
                </h1>
            </section>
</body>