提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

CSS/CSS3常用Style

2023-04-18 14:48:37 时间

（1）实现以下功能：

代码附上：

width: 5px;
height: 35px;
border: 84px solid;
border-color: #ffa002 transparent transparent transparent;

（2）如何实现“颜色渐变”这种功能效果图，如下图：

代码附上：

background: -webkit-linear-gradient(left, #67d41f 24%, #FFFFFF 1%,#FFFFFF 24.5%, #d2d2d2 1% ,#d2d2d2 50%,#FFFFFF 1%,#FFFFFF 50.8%,#D2D2D1 1%,#D2D2D1 75%,#ffffff 1%,#ffffff 75.6%,#d2d2d2 1%,#d2d2d2 99%);

（3）在标题文字后面加图片

如图所示：

在ul li 的末尾处加入向右的箭头
只需在li标签上加入一个css即可：

 background: #FFFFFF url(../../img/right-jia.png) center right 18px no-repeat;

（4）改变背景颜色 /

1、上下分开

  background: linear-gradient(to bottom, #ffea78 0px, #FFFFFF 100%)repeat-x scroll 0 0 rgba(0, 0, 0, 0);

2、左右分开

background:linear-gradient(to left, red 100px, yellow 200px);

3、左上角渐变

background-image:linear-gradient(to left top, red 100px, yellow 200px);

（5）文本过长，不换行用省略号显示

.ellipsis {/**文本过长，不换行用省略号显示*/
    overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     -o-text-overflow: ellipsis;
     -icab-text-overflow: ellipsis;
     -khtml-text-overflow: ellipsis;
     -moz-text-overflow: ellipsis;
     -webkit-text-overflow: ellipsis;
}

.ellipsis1 {/**多行文本过长，用省略号显示*/
    width: 200px;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ellipsis2 {/**多行文本过长，用省略号显示*/
    width: 200px;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;//显示的第几行加省略号
    -webkit-box-orient: vertical;
    overflow: hidden;
}

效果图附上：

demo 附上：

<!DOCTYPE html>
<html>

    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,height = device-height, initial-scale=0,maximum-scale = 2.0,minimum-scale = 1.0,user-scalable = no">
        <title>省略号</title>

        <style>
            .text1 {
                width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
                -webkit-text-overflow: ellipsis;
                -moz-text-overflow: ellipsis;
                white-space: nowrap;
            }

            .text2 {
                width: 200px;
                word-break: break-all;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        </style>
    </head>

    <body>
        <div class="text1">热卖精选：从子频道（服饰鞋包，亲子，居家，美妆）档期里面挑选出来，库存大于30%的高信价比商品list，数量为50个</div>

        <br />

        <div class="text2">热卖精选：从子频道（服饰鞋包，亲子，居家，美妆）档期里面挑选出来，库存大于30%的高信价比商品list，数量为50个</div>
    </body>

</html>

（6）两端对齐

text-align:justity;
text-justify:inter-ideogra;

（7）文字换行

white-space:nowrap;/*强制不换行*/
word-wrap：normal;/*只在允许的断字点换行（浏览器保持默认处理）*/
word-wrap: break-word;/*在长单词或URL地址内部进行换行。*/
word-break: normal;/*强制英文单词断行*/
word-break:break-all;/*允许在单词内换行*/

（8）禁用鼠标Style

cursor:not-allowed;

（9）CSS3布局

一、display : flex 布局

1、效果1

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,user-scalable=0">
        <title>布局</title>
        <style>
            body {margin: 0 auto;}

            .list {
                display: -webkit-flex;
                flex-flow: row wrap;
                -webkit-flex-flow: row wrap;
                align-items: stretch;
                -webkit-align-items: stretch;
                justify-content:center;
                -webkit-justify-content: center;
                /*
                 * flex-flow的参数介绍
                   row    ---横向（左向右）
                   column ---竖向（上向下）
                   wrap   ---一行显示不完的时候换行
                */
            }
            .list div {
                margin: 5px 0px 0px 0px;
                width: 40%;
                height: 100px;
                line-height: 100px;
                text-align: center;
                border: 1px solid red;
            }
        </style>
    </head>

    <body>
        <div class="list">
            <div>AAA</div>
            <div>BBB</div>
            <div>CCC</div>
            <div>DDD</div>
        </div>
    </body>
</html>

2、效果2

//css中设置
.list {
    display: -webkit-flex;
    flex-flow: row;
    -webkit-flex-flow: row;
    align-items: stretch;
    -webkit-align-items: stretch;
    justify-content:center;
    -webkit-justify-content: center;
}

3、效果3

CSS flex 属性

让所有灵活的项目都带有相同的长度，忽略它们的内容。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <title>布局</title>
        <style>
            body{margin: 0 auto;}
            /*
                flex-flow: row wrap; row横向（左向右）显示 column竖向（上向下）显示 wrap一行显示不完的时候换行
            */
            div{
                border: 1px solid red;
                height: 200px;
            }

            footer { 
                display: -webkit-flex;
                -webkit-flex-flow: row;
                -webkit-align-items: stretch;
                -webkit-justify-content:space-between;

                /*IE10还不支持*/
                display: -ms-flex;
                -ms-flex-flow: row wrap;
                -ms-align-items: stretch;
                -ms-justify-content:space-between;

                display: flex;
                flex-flow: row;
                align-items: stretch;
                justify-content:space-between;
            }
            .col2{-webkit-flex:1;-moz-flex:1;flex:1}
        </style>
    </head>
    <body>
        <footer>
            <div style="width:80px;">AAA</div>
            <div class="col2">BBB</div>
            <div style="width:40px;">CCC</div>
        </footer> 
    </body>
</html>

浏览器支持

除了 Safari，其他所有主流浏览器都支持 flex 属性。

IE 9 及其之前的版本不支持 flex 属性。IE 10 需要前缀 -ms- 才支持该属性。

详情请查阅W3C规范：http://www.runoob.com/cssref/css3-pr-flex.html

二、display : box 布局

实现代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <title></title>
        <style>
            body{margin:0 auto;text-align:center}
            .test_box{width:100%;background:#f0f3f9;margin:0 auto}

            .test_box .list{width:25%;/*字体：加粗、36px大小，高度80px*/font:700 26px/80px monaco;border:1px solid red}

            /*关键代码*/
            .one{display:-moz-box;display:-webkit-box;display:-o-box;display:box;-moz-box-pack:start;-webkit-box-pack:start;-o-box-pack:start;box-pack:start}
            .two{display:-moz-box;display:-webkit-box;display:-o-box;display:box;-moz-box-pack:end;-webkit-box-pack:end;-o-box-pack:end;box-pack:end}
            .three{display:-moz-box;display:-webkit-box;display:-o-box;display:box;-moz-box-pack:center;-webkit-box-pack:center;-o-box-pack:center;box-pack:center}
            .four{display:-moz-box;display:-webkit-box;display:-o-box;display:box;-moz-box-pack:justify;-webkit-box-pack:justify;-o-box-pack:justify;box-pack:justify}

        </style>
    </head>

    <body>
        <div class="test_box one">
            <div class="list">1</div>
            <div class="list">2</div>
            <div class="list">3</div>
        </div><br />
        <div class="test_box two">
            <div class="list">4</div>
            <div class="list">5</div>
            <div class="list">6</div>
        </div><br />
        <div class="test_box three">
            <div class="list">7</div>
            <div class="list">8</div>
            <div class="list">9</div>
        </div><br />
        <div class="test_box four">
            <div class="list">10</div>
            <div class="list">11</div>
            <div class="list">12</div>
        </div>
    </body>

</html>

如图所示的布局：

布局详细介绍，请移步：

http://www.w3cplus.com/css3/css3-flexbox-layout.html

http://www.zhangxinxu.com/study/201012/css-box-pack-demo.html

（10）align-items（竖轴上的排列基准）

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

详情请查阅：http://www.webkkl.com/style/align-items.php http://www.css88.com/book/css/properties/flex/align-items.htm 示例1：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,user-scalable=0">
        <title>布局</title>
        <style>
            body {
                margin: 0 auto;
                background: #E1EDF7;
            }
            .list div{
                width: 40%;
                height: 100px;
                border: 1px solid red;

                /*关键代码*/
                display: flex;
                display: -webkit-flex;
                align-items: center;
                -webkit-align-items: center;/*IOS专用*/
            }
        </style>
    </head>

    <body>
        <div class="list">
            <div><span>AAA</span></div>
            <div><span>BBB</span></div>
            <div><span>CCC</span></div>
            <div class="c5"><span>DDD</span></div>
        </div>
    </body>

</html>

示例2：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,user-scalable=0">
        <title></title>
        <style>
            .box{
                display:-webkit-flex;
                display:flex;
                width:200px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
            .box li{margin:5px;border-radius:5px;background:#aaa;text-align:center;}
            .box li:nth-child(1){padding:10px;}
            .box li:nth-child(2){padding:15px 10px;}
            .box li:nth-child(3){padding:20px 10px;}

            #box{
                -webkit-align-items:flex-start;
                align-items:flex-start;
            }
            #box2{
                -webkit-align-items:flex-end;
                align-items:flex-end;
            }
            #box3{
                -webkit-align-items:center;
                align-items:center;
            }
            #box4{
                -webkit-align-items:baseline;
                align-items:baseline;
            }
            #box5{
                -webkit-align-items:strecth;
                align-items:strecth;
            }
        </style>
    </head>

    <body>
        <h2>align-items:flex-start</h2>
        <ul id="box" class="box">
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
        <h2>align-items:flex-end</h2>
        <ul id="box2" class="box">
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
        <h2>align-items:center</h2>
        <ul id="box3" class="box">
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
        <h2>align-items:baseline</h2>
        <ul id="box4" class="box">
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
        <h2>align-items:strecth</h2>
        <ul id="box5" class="box">
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </body>

</html>

相关文章