CSS/CSS3常用Style

本是古典何须时尚 2022-08-20 13:25 177阅读 0赞

**（1）实现以下功能：**

![这里写图片描述][20160301165633310]

代码附上：

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

--------------------

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

![这里写图片描述][20160301170540931]  
代码附上：

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 的末尾处加入向右的箭头

![这里写图片描述][20160301170754043]

只需在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);

![这里写图片描述][20160506105617245]

**2、左右分开**

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

![这里写图片描述][20160604141513531]

**3、左上角渐变**

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

![这里写图片描述][20160604141648735]

--------------------

**（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; }

**效果图附上：**

![这里写图片描述][20160712184134995]

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>

![这里写图片描述][20160506110744250]  
  
  
**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;
    }

![这里写图片描述][20160506114006279]

**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>

![这里写图片描述][20160506113631496]

**浏览器支持**

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

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

详情请查阅W3C规范：[http://www.runoob.com/cssref/css3-pr-flex.html][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>

如图所示的布局：

![这里写图片描述][20160621190746394]

布局详细介绍，请移步：

[http://www.w3cplus.com/css3/css3-flexbox-layout.html][http_www.w3cplus.com_css3_css3-flexbox-layout.html]

[http://www.zhangxinxu.com/study/201012/css-box-pack-demo.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.webkkl.com_style_align-items.php]  
[http://www.css88.com/book/css/properties/flex/align-items.htm][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>

![这里写图片描述][20160506152535604]  
  
  
**示例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>

![这里写图片描述][20160506152646641]

--------------------

[20160301165633310]: /images/20220731/0acf7c8778dd4d7dbd277b76bc13b16b.png
[20160301170540931]: /images/20220731/91620b98d288414fa44bc4a37d41c36f.png
[20160301170754043]: /images/20220731/5201f2d9f77b495d91b0a9650e7f63de.png
[20160506105617245]: /images/20220731/4def2266f750464a9931e8bdaf0535f2.png
[20160604141513531]: /images/20220731/a386f2eac84a4e4cbde734a4c9a71e98.png
[20160604141648735]: /images/20220731/c180be8c3ff34e4d80cc3ce2fa1d4fc2.png
[20160712184134995]: /images/20220731/f080ad128dd84b7088305911ec6585bd.png
[20160506110744250]: /images/20220731/883e158d244d4d5f8d301ed8f83b21a4.png
[20160506114006279]: /images/20220731/c5db607d109544f69afe3a7fbf747a9a.png
[20160506113631496]: /images/20220731/0ab202af8cb9433a97d6117233f6840b.png
[http_www.runoob.com_cssref_css3-pr-flex.html]: http://www.runoob.com/cssref/css3-pr-flex.html
[20160621190746394]: /images/20220731/87f00f65347d4cc5b121c58cb5ff615e.png
[http_www.w3cplus.com_css3_css3-flexbox-layout.html]: http://www.w3cplus.com/css3/css3-flexbox-layout.html
[http_www.zhangxinxu.com_study_201012_css-box-pack-demo.html]: http://www.zhangxinxu.com/study/201012/css-box-pack-demo.html
[http_www.webkkl.com_style_align-items.php]: http://www.webkkl.com/style/align-items.php
[http_www.css88.com_book_css_properties_flex_align-items.htm]: http://www.css88.com/book/css/properties/flex/align-items.htm
[20160506152535604]: /images/20220731/743afbfa37df4b5295319b7cc5f8b84a.png
[20160506152646641]: /images/20220731/36c7f32aafe64b2bb0a556e9cc3f93ee.png