亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

偏門(mén)卻又實(shí)用的 CSS 樣式

Michael_Ding / 1465人閱讀

摘要：實(shí)現(xiàn)不換行自動(dòng)換行強(qiáng)制換行不換行自動(dòng)換行強(qiáng)制換行常用的選擇器以下代碼是選擇父類(lèi)下第一個(gè)子節(jié)點(diǎn)，元素，建議學(xué)習(xí)這個(gè)樣式屬性的使用，很實(shí)用的。不允許負(fù)值用百分比指定起止色位置。

::-Webkit-Input-Placeholder

input 的 H5?placeholder?屬性，很好用，但不能直接改這個(gè)文字顏色，所以目前的解決方法就是用::input-placeholder屬性來(lái)改。

配合 opacity 屬性使用效果更好

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inpput_Placeholder（輸入框）title>
    <style>
        input{
            color: red;
        }
        ::-webkit-input-placeholder{
            color: blueviolet;
            opacity: 0.5;
          }
        ::-moz-placeholder{
            color: blueviolet;
            opacity: 0.5;
        }
        :-moz-placeholder{
            color: blueviolet;
            opacity: 0.5;
        }
        :-ms-input-placeholder{
            color: blueviolet;
            opacity: 0.5;
        }
    style>
head>
<body>
登錄：<br>
<input type="text" placeholder="請(qǐng)輸入賬號(hào)"><br>
<input type="text" placeholder="請(qǐng)輸入密碼">
body>
html>　　　　　　

Outline 當(dāng)點(diǎn)擊Input元素時(shí)顯示的當(dāng)前狀態(tài)線（外發(fā)光）

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Outline 外發(fā)光title>
    <style>
        input{
            width:400px;
            height:100px;
            font-size: 20px;
        }
        .txt_one{
            outline: none;
        }
        .txt_two{
            outline:none;
            box-shadow: green 1px 1px 30px 5px;
        }
        p{
            width:500px;
            height: 200px;
            border: 1px solid red;
            margin: 30px auto;
        }
    style>
head>
<body>
<input type="text" class="txt_one" placeholder="請(qǐng)點(diǎn)擊這三個(gè)輸入框比較效果">
<input type="text" class="txt_two" placeholder="請(qǐng)點(diǎn)擊這三個(gè)輸入框比較效果">
<input type="text" class="txt_three" placeholder="請(qǐng)點(diǎn)擊這三個(gè)輸入框比較效果">
<br>
<p>
    邊框陰影（box-shadow）的基本語(yǔ)法：<br>

box-shadow：color  h-shadow  v-shadow blur spread  inset；<br>

color：陰影顏色 ------------ 可選 <br>

h-shadow ：水平偏移量 ----必選 <br>

v-shadow：垂直偏移量-----必選 <br>

blur：模糊距離 -------------可選 <br>

spread：陰影尺寸---------- 可選 <br>

inset：內(nèi)陰影 --------------可選 <br>
p>
body>
html>

Contenteditable 設(shè)置Element是否可編輯

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contenteditable 設(shè)置Element（標(biāo)簽）可否編輯title>
head>
<body>
<p contenteditable="true">可編輯p>
<span contenteditable="false">不可編輯span>
body>
html>

Webkit-Playsinline

手機(jī)video 都可以在頁(yè)面中播放，而不是全屏播放了。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
用html5的video方式播放視頻時(shí)，在ipad上是默認(rèn)原來(lái)大小的，而在iphone上是默認(rèn)全屏播放的。
HTML里video必須加上webkit-playsinline屬性 <br>
<video id="video" controls="controls" webkit-playsinline="true" src="zaa47.mp4">
    
Your browser does not support HTML5 video.
video>
body>
html>

Position: Absolute， 讓Margin有效的

設(shè)置left:0, right:0 就可以。原因是2邊都是0不存在邊距，element就可以得出距離，并居中。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Positon: Absolut （讓Margin更有效）title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: absolute;
            left: 0;
            top: 0;
            margin: 0 auto;
        }
    style>
head>
<body>
<div>div>
body>
html>

這個(gè)太簡(jiǎn)單了，不發(fā)了。

使用 Clearfix 清楚浮動(dòng)，解決父類(lèi)高度崩塌。

.clearfix {
    zoom: 1;
}

.clearfix:after {/*http://www.w3school.com.cn/tiy/t.asp?f=css_sel_after*/
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }

這個(gè)不知道怎么說(shuō)

User-Select 禁止用戶(hù)選中文本

div {
    user-select: none; /* Standard syntax */
}

::-Webkit-Scrollbar-Thumb可以修改谷歌的滾動(dòng)條樣式，safari好像也可以

使用CSS Transforms 或者 Animations時(shí)可能會(huì)有頁(yè)面閃爍的Bug

-webkit-backface-visibility: hidden;

-Webkit-Touch-Callout 禁止長(zhǎng)按鏈接與圖片彈出菜單

-webkit-touch-callout: none;

Transform-Style: Preserve-3d 讓元素支持3d

div {
    -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotateY(60deg);
    transform-style: preserve-3d;
}

Perspective 透視

這個(gè)屬性的存在決定你看到的元素是2d還是3d。一般設(shè)置在包裹元素的父類(lèi)上。

.div-box {
    perspective: 400px; 
}

Css實(shí)現(xiàn)不換行、自動(dòng)換行、強(qiáng)制換行

//不換行
white-space:nowrap;

//自動(dòng)換行
word-wrap: break-word; 
word-break: normal; 

//強(qiáng)制換行
word-break:break-all;

常用的選擇器 :Nth-Child() Selector

以下代碼是選擇父類(lèi)下第一個(gè)子節(jié)點(diǎn)，p元素，建議學(xué)習(xí)這個(gè)樣式屬性的使用，很實(shí)用的。

p:nth-child(1) {
    ...
}

Css3 Linear-Gradient 線性漸變默認(rèn)開(kāi)始在top, 也可以自定義方向。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Css3 Linear-Gradient 線性漸變title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 10px;
            float: left;
        }
        p{
            clear: both;
        }
        .txt1{
            background: linear-gradient(aqua,red);
        }
        .txt2{
            background: linear-gradient(aqua,black 50%,red);
        }
        .txt3{
            background: linear-gradient(0deg,aqua 20%,black 50%,red 80%);
        }
        .txt4{
            background: linear-gradient(45deg,aqua,black 50%,red);
        }
        .txt5{
            background: linear-gradient(to top right,aqua,black 50%,red)
        }
    style>
head>
<body>
<div class="txt1">div>
<div class="txt2">div>
<div class="txt3">div>
<div class="txt4">div>
<div class="txt5">div>
<br>
<p><br>
    下述值用來(lái)表示漸變的方向，可以使用角度或者關(guān)鍵字來(lái)設(shè)置： <br>
angle：
用角度值指定漸變的方向（或角度）。 <br>
to left： <br>
設(shè)置漸變?yōu)閺挠业阶?。相?dāng)于: 270deg <br>
to right： <br>
設(shè)置漸變從左到右。相當(dāng)于: 90deg <br>
to top： <br>
設(shè)置漸變從下到上。相當(dāng)于: 0deg <br>
to bottom： <br>
設(shè)置漸變從上到下。相當(dāng)于: 180deg。這是默認(rèn)值，等同于留空不寫(xiě)。 <br>
color-stop 用于指定漸變的起止顏色： <br>
color：
指定顏色。 <br>
length：
用長(zhǎng)度值指定起止色位置。不允許負(fù)值 <br>
percentage：
用百分比指定起止色位置。 <br>
p>
body>
html>

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1351.html

相關(guān)文章

  • 2017文章總結(jié)

    摘要：歡迎來(lái)我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開(kāi)啟性能優(yōu)化之旅高性能滾動(dòng)及頁(yè)面渲染優(yōu)化理論寫(xiě)法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁(yè)瞬開(kāi)緩存網(wǎng)頁(yè)性能管理詳解寫(xiě)給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來(lái)我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開(kāi)啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁(yè)面渲染優(yōu)化 理論 | HTML寫(xiě)法...

    dailybird 評(píng)論0 收藏0

  • 2017文章總結(jié)

    摘要：歡迎來(lái)我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開(kāi)啟性能優(yōu)化之旅高性能滾動(dòng)及頁(yè)面渲染優(yōu)化理論寫(xiě)法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁(yè)瞬開(kāi)緩存網(wǎng)頁(yè)性能管理詳解寫(xiě)給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來(lái)我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開(kāi)啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁(yè)面渲染優(yōu)化 理論 | HTML寫(xiě)法...

    hellowoody 評(píng)論0 收藏0

  • 2017文章總結(jié)

    摘要：歡迎來(lái)我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開(kāi)啟性能優(yōu)化之旅高性能滾動(dòng)及頁(yè)面渲染優(yōu)化理論寫(xiě)法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁(yè)瞬開(kāi)緩存網(wǎng)頁(yè)性能管理詳解寫(xiě)給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來(lái)我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開(kāi)啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁(yè)面渲染優(yōu)化 理論 | HTML寫(xiě)法...

    wwolf 評(píng)論0 收藏0

  • 列舉幾條常用的CSS reset，是否了解normalize.css

    摘要：相比于傳統(tǒng)的是一種現(xiàn)代的為準(zhǔn)備的優(yōu)質(zhì)替代方案?？傊?，是一種的替代方案。一般化的樣式為大部分元素提供。保護(hù)了有價(jià)值的默認(rèn)值通過(guò)為幾乎所有的元素施加默認(rèn)樣式，強(qiáng)行使得元素有相同的視覺(jué)效果。 Normalize.css只是一個(gè)很小的css文件，但它在磨人的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS reset,Normalize.css是一種現(xiàn)代的、為HTML5準(zhǔn)備的優(yōu)...

    Airy 評(píng)論0 收藏0

  • CSS進(jìn)階篇--Normalize.css的使用（重置表）

    摘要：相比于傳統(tǒng)的，是一種現(xiàn)代的為準(zhǔn)備的優(yōu)質(zhì)替代方案。保護(hù)了有價(jià)值的默認(rèn)值通過(guò)為幾乎所有的元素施加默認(rèn)樣式，強(qiáng)行使得元素有相同的視覺(jué)效果。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式。任何人都能夠提交問(wèn)題報(bào)告或者提交補(bǔ)丁。 本文譯自Normalize.css官網(wǎng): http://nicolasgallagher.com/a... Normalize.css 只是一個(gè)很小的CSS文件，但...

    dack 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<