前端开发之CSS篇三

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局之浮动属性</title>
    <style type="text/css">
        .box1{
            width: 200px;
            height: 200px;
            background-color: #5bc0de;
            float: left;
        }
        .box2{
            width:300px;
            height: 300px;
            background-color: #1c7430;
        }
        span{
            float: left;
            background-color: #6f42c1;
            width: 200px;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>我是小黄</p>
    </div>
    <div class="box2">
        <p>我是小蓝</p>
    </div>
    <!--/* 此处span标签不需要转成块级元素，也能够设置宽高。-->
    <!--所有的标签一旦设置浮动，不仅能够并排，还不区分行内、块状元素，设置宽高*/-->
    <span>我是一个小小的span标签</span>
    <!--<br>-->
    <span>我是一个小小的span标签</span>
</body>
</html>

　　2、浮动元素互相贴靠　　　

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .box1{
                width:200px;
                height: 150px;
                /*height: 300px;*/
                float: left;
                background-color: #6f42c1;
            }
            .box2{
                width:300px;
                height: 200px;
                float: left;
                background-color:#b2e567;
            }
            .box3{
                width:400px;
                height: 300px;
                float: left;
                background-color:red;
            }
        </style>
    </head>
    <body>
        <div class="box1">一哥</div>
        <div class="box2">二哥</div>
        <div class="box3">三弟</div>
 
    </body>
</html>

　　总结：　

  如果浏览器页面（父元素）有足够的空间，那么多个盒子（div标签）设置浮动时，则依次从左至右（float设为left时）排列。（以下默认float设置为left）
    当浏览器页面（父元素）空间无法容纳并列的盒子的宽度时（比如将浏览器页面缩小），此时位于右侧的盒子就会向左侧贴靠，需要分两种情况讨论：
    以上方源码为例：
        ①当一哥的高度小于二哥时，压缩浏览器页面，三弟向左贴靠，会直接滑到最左侧的边框上，与一哥左侧对齐了。
        ②当一哥的高度大于二哥时，压缩浏览器页面，三弟向左贴靠，会滑到紧靠一哥的右侧的边框上，与二哥左侧对齐。

　　3、浮动元素之字围效果

　　示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动元素自围效果</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        div{
 
            float: left;
        }
        p{
            background-color: cyan;
        }
    </style>
</head>
 
<body>
    <div>
    <img src="lufei.jpg"></img>
    </div>
    <p>路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
 
    </p>
</body>
</html>

    当div标签设置浮动，p标签不设置浮动时，div挡住了p(div的层级提高)，但是p中的文字不会被遮盖，此时
    就形成了字围效果，关于浮动必须要强调的是：浮动一个元素，我们要遵循一个原则，永远不是一个盒子单独浮动，
    要浮动就要一起浮动。

　　4、浮动元素之紧凑效果

　　未设置元素的width属性值时，会自动收缩到元素自身的宽度（这一点和行内元素很像）。

·　　示例：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动元素自围效果</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            float: left;
            background-color: blueviolet;
        }
 
    </style>
</head>
<body>
 
    <div class="box">浮动元素之紧凑效果</div>
</body>
</html>

2️⃣ 清除浮动带来的问题

　　方法1：给父盒子设置高度

　　　　当子元素设置为浮动后，就脱标了（脱离标准流），不在当前页面上占据位置，不再

　　填充父元素的高度了，所以导致该父盒子无高度，添加下一个父盒子时，就会顶到左上角

　　（即上一个父盒子位置），导致两个父盒子相互重叠。

　　方法2：内墙法（clear:both）

　　　　给浮动元素最后面添加一个盒子（div），并且不设置浮动，然后设置clear:both，即清除

　　别人对我的浮动的影响（此时父盒子father2不再顶在左上角，与父盒子father重叠，而是紧贴

　　在父盒子father下面）

　　示例：　　

 <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>消除浮动的方法</title>
            <style type="text/css">
                *{
                    padding: 0;
                    margin: 0;
                }
                ul{
                    list-style: none;
                }
                .father{
                    width: 600px;
                    background-color: #c9ff49;
                }
                .father ul li{
                    float:left;
                    width: 150px;
                    height:200px;
                    background-color: #a195ff;
                }
                .clear{
                    clear: both;
                }
                .father2{
                    width: 500px;
                    height: 300px;
                    background-color: #ccdeff;
                }
            </style>
        </head>
        <body>
            <div class="father">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <!--给浮动元素最后面加一个空的div,并且该元素不浮动,然后设置clear:both,-->
                </ul>
                <div class="clear"></div><!--无缘无故加了div元素，结构冗余-->
            </div>
            <div class="father2"></div>
        </body>
        </html>

　　方法3：伪元素选择器（给祖先元素加一个类）

<!DOCTYPE HTML>
<html lang="en">
    <meta http-equiv="x-ua-compatible" charset="utf-8">
    <title>消除浮动元素之伪元素清除法</title>
    <head>
        <style type="text/css">
            *{
                padding:0;
                margin:0;
            }
            ul{
                list-style: none;
            }
            div{
                width:400px;
            }
            div ul li{
                float:left;
                width:100px;
                height:200px;
                background-color: #b1ffde;
            }
            .box1{
                width:400px;
                height:300px;
                background-color: #c9ff49;
            }
            /*伪元素选择器（给祖先元素加一个类）*/
            .clearfix:after{
                content:" "; /*看作是一个span标签*/
                clear: both;
                display: block; /*转换为块状元素*/
 
                /*新浪网清除浮动的方式
                content：“.”;
                clear:both;  清除别人对我的浮动的影响
                display:block;
                height:0;   配合下一句使用，使占用空间为0
                visibility: hidden; 虽然隐藏，但依然占据空间位置
                */
 
            }
        </style>
    </head>
    <body>
        <div class="clearfix">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
        <div class="box1"></div>
    </body>
 
</html>

　　方法4：overflow:hidden（表示超出部分隐藏）-- 需要在父级元素上设置　　

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta http-equiv="x-ua-compatible" charset="utf-8">
        <title>消除浮动元素之伪元素清除法</title>
        <style type="text/css">
            *{
                padding:0;
                margin:0;
            }
            ul{
                list-style: none;
            }
            body{
                overflow:auto;
            }
            .box{
                width:200px;
                height: 200px;
                border:2px solid palegreen;
                /*overflow: hidden; !*超出盒子内容部分会被删减，不可见（隐藏）*!*/
                /*overflow: auto;!*如果内容被修剪，会以滚动条形式显示其余内容*!*/
                /*overflow: scroll; !*内容被修剪，会以滚动条形式显示其余内容*!*/
                overflow: inherit;/*继承父级元素的overflow属性*/
            }
 
        </style>
    </head>
    <body>
        <div class="box">
 
            hello world hello world hello world hello world hello world
            hello world hello world hello world hello world hello world
            hello world hello world hello world hello world hello world
            hello world hello world hello world hello world hello world
            hello world hello world hello world hello world hello world
            hello world hello world hello world hello world hello world
            hello world hello world hello world hello world hello world
            hello world hello world hello world hello world hello world
            hello world hello world hello world hello world hello world
            hello world hello world hello world hello world hello world
        </div>
 
    </body>
 
</html>

3️⃣ margin塌陷问题　　

　　1、当给未设置浮动的两个兄弟盒子设置垂直方向上的margin时，那么以较大的值为准，我们称这种现象为塌陷。
而当给盒子设置浮动时，垂直方向上不塌陷。
 
　　需注意：水平方向无塌陷问题。
　　示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin塌陷的问题</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .father{
            width:400px;
            border: 2px solid darkslategray;
            overflow: hidden;
        }
        .box1{
            width:300px;
            height:200px;
            background-color: #c3d9ff;
            margin-bottom: 20px;
            float: left;
        }
        .box2{
            width:400px;
            height:300px;
            background-color:#b2e567;
            margin-top: 40px;
            float: left;
        }
 
    </style>
</head>
<body>
    <div class="father">
        <!--当给未设置浮动的两个兄弟盒子设置垂直方向上的margin时，那么以较大的值为准，我们称这种现象为塌陷。
            而当给盒子设置浮动时，垂直方向上不塌陷。-->
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
 
</body>
</html>

　　2、设置水平居中（margin:0 auto）

　　示例如下：

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>margin塌陷的问题</title>
        <style type="text/css">
            *{
                padding:0;
                margin:0;
            }
            .box3{
                width:800px;
                height:60px;
                background-color: #2aabd2;
                margin:0 auto;    /*盒子水平居中*/
                text-align: center; /*文字水平居中*/
            }
 
        </style>
        </head>
        <body>
          <div class="box3">水平居中</div>
        </body>
    </html>

　　总结：　

        （1）使用margin:0 auto 水平居中盒子，必须要设置明确的width,
            盒子内的文字水平居中需要使用text-align:center.
        （2）只有标准流下的盒子，才能使用 margin:0 quto;
            当一个盒子设置浮动了，或者固定定位或绝对定位时，margin:0 auto；
            就不能用了。
        （3）margin:0 auto 表示水平居中盒子，不是文本，文本要单独用 text-align:center。

4️⃣ 善用父级的padding取代子级的margin

　　示例如下：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>善用padding替代margin</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .father{
            width:298px;
            height:298px;
            background-color: #428bca;
            /* ① border: 2px solid greenyellow;  ①②③三句也可达到效果但不推荐*/
 
            /*推荐方式如下：在父级中写padding替代子级中的margin和父级中的 border */
            padding-top:30px;
            padding-left: 30px;
        }
        .son{
            width:80px;
            height:80px;
            background-color: burlywood;
            /* ② margin-top:30px;*/
            /* ③ margin-left:30px;*/
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

　　总结：

子盒子在父盒中设置间距，有两种方式：
    一、如上①②③式所示，设置父级的border,子级中设置margin（切记盒子总大小要加上边框border）
    二、在父盒中设置padding参数，同时对应减小width和height的参数。
 
    原理：如果父级没有设置border,那么子级margin实际上“挤”的是“流”（标准文档流，即行），所以父级就会被挤掉下来。

5️⃣ 文本属性和字体属性

　　示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本属性和字体属性</title>
    <style type="text/css">
        .box{
            width:300px;
            height:200px;
            border:1px solid #b3d7ff;
            /*设置字体大小，单位:px（像素）%（占父级元素空间的百分比） rem em */
            font-size: 20px;
            font-weight: 200;/*范围100-900，依次加粗*/
            font-family: "Microsoft YaHei UI","微软雅黑","Adobe Gurmukhi";/*如果第一个无效或无法使用，则取第二个，其余同理*/
            text-align:center;/*水平居中*/
            text-decoration: underline blue;/*下划线，默认是none*/
            cursor:pointer; /*光标*/
            /*行高的公式：
                    当行高=盒子的高度，让文本垂直居中，但是只适用于单行文本*/
            line-height: 200px;/*行高，设置行高和盒子高度相同时，文字垂直居中*/
            visibility: hidden;
        }
 
        .box2{
            width:400px;
            height:120px;
            border:1px solid palegreen;
            font-weight: 500;
            /*font-size: 15px;*/
            /*font-family: "Adobe Fan Heiti Std B";*/
            /*line-height: 30px;!*一定要大于font-size,否则会挤到一起，一个行高是文字的顶部到下一行文字的顶部的距离*!*/
            font: 15px/30px “宋体”; /*这一行等同于上面三行，依次是字体大小，行高，字体*/
            padding-top: 30px;
            /*一个行高是30px，一共3个行高，那就是90px,总高度是150px,
            如果要让多行文本垂直居中在当前的盒子中，则（150-90）/2=30px，
            设置padding-top的值为30px,则height要减少30px（padding增加多少对应height减少多少）*/
            text-indent: 2em;/*1em等于缩进一个字体大小，开头空两格就设为2em*/
        }
    </style>
 
</head>
<body>
    <div class="box">
        我是一个小盒子
    </div>
    <div class="box2">
        多行文本 多行文本 多行文本 多行文本 多行文本 多行文本
        多行文本 多行文本 多行文本 多行文本 多行文本 多行文本
        多行文本 多行文本 多行文本 多行文本 多行文本 多行文本
    </div>
</body>
</html>

总结：　

 使用font-family注意几点：
        1、网页中我们要注意使用字体（用户可能没有某些字体），没有时，中文默认宋体；
            一般页面中，中文只使用：微软雅黑，宋体，黑体；
            英语一般用：Arial,Times New Roman；
            英语能够显示英文和中文，但设为中文就只能显示对应的中文。
 
        2、为防止用户电脑没有某个字体，就设置多个字体，中间用英语逗号隔开，
            备选字体可以有无数个。
 
        3、讲英语字体放在最前面，如此所有的中文都不能匹配，局自动变为后面的中文字体。
            如：font-family:"Times New Roman","微软雅黑","宋体"。

6️⃣ 超链接美化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接美化</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        ul{
            list-style: none; /*取消超链接的下划线*/
        }
        .nav{
            width:900px;
            margin: 30px auto 0; /*居中显示*/
            background-color: #428bca;
            overflow: hidden;   /*消除float带来的影响*/
            border-radius: 5px; /*设置圆角，5代表半径为5px*/
        }
        .nav ul li{
            width:150px;
            height:40px;
            float: left; /*左浮动，贴靠左侧*/
            line-height: 40px;
            text-align: center; /*文本居中*/
        }
        .nav ul li a{
            width:150px;  /*超链接必须设置宽高，要显示可点击范围*/
            height:40px;
            display:block; /*a相当于span，行内标签，要设置宽高等必须转成块状元素*/
            font-size: 20px; /*字体大小*/
            color:white; /*字体颜色，不能继承父级*/
            text-decoration: none; /*取消超链接默认的下划线*/
            font-family: "Microsoft YaHei UI"; /*设置字体*/
        }
        /*a标签不继承父元素的color*/
        .nav ul li a:hover{
            background-color:greenyellow; /*鼠标滑到链接上，显示指定背景色*/
            font-size: 25px; /*字体变大*/
        }
    </style>
</head>
<body>
    <div class="nav">
        <div>
            <ul>
                <li><a href="">菜单1</a></li>
                <li><a href="">菜单2</a></li>
                <li><a href="">菜单3</a></li>
                <li><a href="">菜单4</a></li>
                <li><a href="">菜单5</a></li>
                <li><a href="">菜单6</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

7️⃣ 背景属性（颜色，图片，位置）

　　1、background-color

　　颜色表示方法有三种：单词、rgb表示法、16进制表示法

　　（1）单词：如 red,green,blue等。

　　rgb：红，绿，蓝三原色

　　rgb（r,g,b） r,g,b的值，每个值的取值范围都是0~255，一共256个值。

　　如：黑色=rgb(0,0,0)

　　　　白色=rgb（255,255,255）

　　　　最后显示的颜色是三个数值的叠加。

　　（2）十六进制表示法　　

  以#开头，后接十六进制数，可以和rgb之间转换（即十六进制转十进制）
 
        十六进制可以简化为3位，所有 #aabbcc的形式，能够简化为 #abc。
        如background-color:ff0000;等于background-color:#f00;
        background-color:#112233;等于background:#123;

　　2、background-img　　　　

 1、平铺图片（铺满盒子）
         background-image:url(lufei.jpg);
        background-repeat:repeat;
    2、不平铺图片
        background-image:url(lufei.jpg);
        background-repeat:no-repeat;
        background-repeat: repeat-x; /*在盒子内仅水平方向平铺*/
        background-repeat: repeat-y; /*在盒子内仅垂直方向平铺*/
    3、给网页设置背景
        body{
            background-image:url(lufei.jpg);/*背景如果是一张图片多次填充，图片应选择轴对称的*/
        }
    4、设置图片位置
       background-position: 0 0; /*默认位置为左上角*/
       background-position: 100px 100px;

　　示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性介绍</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        ul{
            list-style: none; /*取消超链接的下划线*/
        }
        body{
            background-image:url(./images/back1.jpg) ;
        }
        .box{
            width:1200px;
            height:600px;
            /*图片平铺*/
            background-image:url(lufei.jpg);
            /*background-repeat:repeat;*/
            background-repeat: no-repeat; /*图片不平铺*/
            /*background-repeat: repeat-x; !*在盒子内仅水平方向平铺*!*/
            /*background-repeat: repeat-y; !*在盒子内仅垂直方向平铺*!*/
            /*background-position: 0 0; !*默认位置为左上角*!*/
            background-position: 100px 100px;
        }
    </style>
</head>
<body>
      <div class="box">我的图片</div>
 
</body>
</html>

返回顶部↑

前端开发之CSS篇三的更多相关文章

前端开发之css篇
一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作二.c ...
前端开发之CSS篇四
一.相对定位二.绝对定位三.固定定位四.z-index 前言定位有三种:1.相对定位 2.绝对定位 3.固定定位这三种定位,每种都暗藏玄机,所以要每个单独剖析. 1️⃣ 相对定位 1.三 ...
前端开发之CSS篇二
主要内容: 一.CSS的继承性和层叠性二.盒模型三.padding属性四.border属性五.margin属性六.标准文档流七.行内元素和块状元素转换 1️⃣ CSS的继承性和层叠性 1 ...
前端开发之CSS入门篇
一.CSS介绍和语法二.CSS引入方式三.基本选择器四.高级选择器五.伪类选择器六.伪元素选择器 1️⃣ CSS介绍和语法 1. CSS的介绍 (1)为什么需要CSS? 使用css的目的就 ...
前端开发之JavaScript篇
一.JavaScript介绍前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...
前端开发之HTML篇一
主要内容: 一.HTML简介二.HTML标签三.HTML文档结构和注释四.head标签及相关内容五.body标签及相关内容 1️⃣ HTM ...
前端开发之html篇
一.什么是html? 1.我们说socket网络编程的时候,提到过一个cs模型,就是客户端—服务端模型,前端开发也是基于网络编程,但是这时就应该是bs模型了,是浏览器与服务端的通信. 我们可以模拟一个 ...
前端开发之jQuery篇--选择器
主要内容: 1.jQuery简介 2.jQuery文件的引入 3.jQuery选择器 4.jQuery对象与DOM对象的转换一.jQuery简介 1.介绍 jQuery是一个JavaScript库: ...
前端开发之HTML篇二
主要内容: 一.表格标签 -- table 二.表单标签 -- form 三.常用标签属性和分类四.标签嵌套规则 1️⃣ 表格标签 -- table 表格由<table> 标签来定义. ...

随机推荐

Clairewd’s message（哈希模板+）
个人心得:一开始就是知道用哈希,但是无从下手,很明显是对哈希不太了解和思维不太好. 先来看一下这一题涉及到的哈希吧和这题的思路吧,思路就是对所给的密文用原文和翻译后进行hash处理,那么必然存在后面那 ...
Ecel 粘贴图片并调整大小,移到底层
Sub Click() ActiveSheet.Pictures.Paste.Select Selection.ShapeRange.ScaleWidth 1.4, msoTrueSelection. ...
Cache应用中的服务过载案例研究
https://tech.meituan.com/avalanche-study.html
mongooseim xmpp 服务器docker 安装试用
备注: 预备环境docker xmpp client 1. 启动mongooseim docker run -d -t -h mongooseim-1 --name mongooseim- ...
L2TP/IPSec一键安装脚本
本脚本适用环境:系统支持:CentOS6+,Debian7+,Ubuntu12+内存要求:≥128M更新日期:2017 年 05 月 28 日关于本脚本:名词解释如下L2TP(Layer 2 Tun ...
Apache的下载安装（主要说的 64位）及问题
本文转载自:http://blog.csdn.net/qq_15096707/article/details/47319545 今天重装完win10系统,就重新下载安装 Apache.虽说之前有安装过 ...
bzoj 1023: [SHOI2008]cactus仙人掌图 2125: 最短路 4728: 挪威的森林静态仙人掌上路径长度的维护系列
%%% http://immortalco.blog.uoj.ac/blog/1955 一个通用的写法是建树,对每个环建一个新点,去掉环上的边,原先环上每个点到新点连边,边权为点到环根的最短/长路长度 ...
android 文件上传，中文utf-8编码
要上传文件到后台的php服务器,服务器能收到中文,手机发送过去,却只能收到一堆转了UTF-8的编码(就是要decode后才是中文的编码).android这边上传文件通常是用stream方式上传的,用M ...
Java实现动态加载读取properties文件
问题: 当我们使用如下语句加载.properties时: ClassLoader classLoader = this.getClass().getClassLoader(); Properties ...
第七章 HTTP流量管理（二） URL 重写
URL 重定向功能: 浏览器中输入 http://<host_name>:31380/v1/service-A/XXXX 经过下面的重定向,实际调用的是serviceA的/v1/XXXX ...

前端开发之CSS篇三

前端开发之CSS篇三的更多相关文章

随机推荐

热门专题