css_day10

✨Bar

于 2021-03-11 01:50:07 发布

阅读量127

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_43570799/article/details/114650115

版权

前端学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

字体图标

文字放大
文字的特点，哪怕文字再大，都不会失真。

	/* 字体图标相对于图片的优点 */
    /* 1.图片放大会失真,但是字体图标不会失真 */
    /* 2.字体图标更改颜色只需要控制color属性即可 */

第一种方法使用字体图标

	<link rel="stylesheet" href="../font/iconfont.css">
    <!-- 第一步，必须要链接iconfont.css文件 -->
    <style>
        /* 字体图标本质上就是字体，所以可以使用控制字体的属性来改变样式 */
        /* i{
            color: red;
            font-size: 200px;
        } */
        /* 因为标签选择器的权重不够高 */
        i.icon-zhaoxiangji{
            font-size: 200px;
            color: pink;
            font-weight: bold;
            font-style: italic;
        }
    </style>
</head>
<body>
    <!-- 第二步，准备一个i标签，设置好iconfont类名 -->
    <i class="iconfont icon-zhaoxiangji"></i>
    <!-- 第三步，复制对应的字体图标类名，然后以多类名的方式设置给i标签 -->
</body>

第二种方法使用字体图标

	<link rel="stylesheet" href="../font/iconfont.css">
    <!-- 第一步，必须要链接iconfont.css文件 -->
    <style>
        i.weixin{
            color: red;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <!-- 第二步，准备一个i标签，设置好iconfont类名 -->
    <i class="iconfont weixin">
        &#xe77e;
    </i>
    <!-- 第三步，复制对应字体图标的Unicode编码，存放在i标签的内容区 -->

    <!-- 注意：如果要控制字体图标，建议重新设置类名 -->

滑动门

初级滑动门

    <!-- 滑动门的猜想实现 -->
	<!-- 按钮的宽度，会根据内容的增加变宽，内容的减少变窄 -->
	<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            float: left;
        }
        .left{
            width: 15px;
            height: 33px;
            background: url(../images/weixin.png);
        }
        .right{
            width: 15px;
            height: 33px;
            background: url(../images/weixin.png) right;
        }
        .content{
            height: 33px;
            /* 有内容的盒子宽度不能写死，由内容撑开 */
            background: url(../images/weixin.png) -15px 0;
            line-height: 33px;
            color: red;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="content">张三</div>
    <div class="right"></div>
</body>

高级滑动门

	<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            float: left;
        }
        .left{
            width: 15px;
            height: 33px;
            background: url(../images/weixin.png);
        }
        .right{
            /* width: 15px; */
            /* 有内容的盒子，宽度不能写死，由内容撑开 */
            height: 33px;
            background: url(../images/weixin.png) right;
            /* 内容到边框的距离用padding */
            padding-right: 15px;
            line-height: 33px;
            color: pink;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right">张三</div>
</body>

究极版的滑动门

	<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            float: left;
        }
        .left{
            /* width: 15px; */
            /* 有内容的盒子，宽度不能写死，由内容撑开 */

            height: 33px;
            background: url(../images/weixin.png);
            padding-left: 15px;
        }
        .right{
            /* width: 15px; */
            /* 有内容的盒子，宽度不能写死，由内容撑开 */
            height: 33px;
            background: url(../images/weixin.png) right;
            /* 内容到边框的距离用padding */
            padding-right: 15px;
            line-height: 33px;
            color: pink;
        }
    </style>
</head>
<body>
    <div class="left">
        <div class="right">张三</div>
    </div>
</body>

滑动门导航栏

搜索引擎优化（SEO）

让网站排名靠前

竞价排名
seo优化

<title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
    <!-- 1.优化title,让搜索引擎了解网页 -->
    <meta name="description" content="品优购-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <!-- 2.优化description网页描述.让搜索引擎知道你的网页是干嘛的 -->
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
    <!-- 3.优化keywords,让搜索引擎收录网站的关键字 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 设置网页的图标 -->

✨Bar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css_day10

字体图标文字放大文字的特点，哪怕文字再大，都不会失真。 /* 字体图标相对于图片的优点 */ /* 1.图片放大会失真,但是字体图标不会失真 */ /* 2.字体图标更改颜色只需要控制color属性即可 */第一种方法使用字体图标 <link rel="stylesheet" href="../font/iconfont.css">  <style>
复制链接

扫一扫

专栏目录