国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

偏門卻又實用的 CSS 樣式

Michael_Ding / 1398人閱讀

摘要：實現(xiàn)不換行自動換行強制換行不換行自動換行強制換行常用的選擇器以下代碼是選擇父類下第一個子節(jié)點，元素，建議學習這個樣式屬性的使用，很實用的。不允許負值用百分比指定起止色位置。

::-Webkit-Input-Placeholder

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

配合 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="請輸入賬號"><br>
<input type="text" placeholder="請輸入密碼">
body>
html>　　　　　　

Outline 當點擊Input元素時顯示的當前狀態(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="請點擊這三個輸入框比較效果">
<input type="text" class="txt_two" placeholder="請點擊這三個輸入框比較效果">
<input type="text" class="txt_three" placeholder="請點擊這三個輸入框比較效果">
<br>
<p>
    邊框陰影（box-shadow）的基本語法：<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（標簽）可否編輯title>
head>
<body>
<p contenteditable="true">可編輯p>
<span contenteditable="false">不可編輯span>
body>
html>

Webkit-Playsinline

手機video 都可以在頁面中播放，而不是全屏播放了。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
用html5的video方式播放視頻時，在ipad上是默認原來大小的，而在iphone上是默認全屏播放的。
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>

這個太簡單了，不發(fā)了。

使用 Clearfix 清楚浮動，解決父類高度崩塌。

.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;
 }

這個不知道怎么說

User-Select 禁止用戶選中文本

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

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

使用CSS Transforms 或者 Animations時可能會有頁面閃爍的Bug

-webkit-backface-visibility: hidden;

-Webkit-Touch-Callout 禁止長按鏈接與圖片彈出菜單

-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 透視

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

.div-box {
    perspective: 400px; 
}

Css實現(xiàn)不換行、自動換行、強制換行

//不換行
white-space:nowrap;

//自動換行
word-wrap: break-word; 
word-break: normal; 

//強制換行
word-break:break-all;

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

以下代碼是選擇父類下第一個子節(jié)點，p元素，建議學習這個樣式屬性的使用，很實用的。

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

Css3 Linear-Gradient 線性漸變默認開始在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>
    下述值用來表示漸變的方向，可以使用角度或者關(guān)鍵字來設(shè)置： <br>
angle：
用角度值指定漸變的方向（或角度）。 <br>
to left： <br>
設(shè)置漸變?yōu)閺挠业阶蟆Ｏ喈斢? 270deg <br>
to right： <br>
設(shè)置漸變從左到右。相當于: 90deg <br>
to top： <br>
設(shè)置漸變從下到上。相當于: 0deg <br>
to bottom： <br>
設(shè)置漸變從上到下。相當于: 180deg。這是默認值，等同于留空不寫。 <br>
color-stop 用于指定漸變的起止顏色： <br>
color：
指定顏色。 <br>
length：
用長度值指定起止色位置。不允許負值 <br>
percentage：
用百分比指定起止色位置。 <br>
p>
body>
html>

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1351.html

相關(guān)文章

  • 2017文章總結(jié)

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

    dailybird 評論0 收藏0

  • 2017文章總結(jié)

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

    hellowoody 評論0 收藏0

  • 2017文章總結(jié)

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

    wwolf 評論0 收藏0

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

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

    Airy 評論0 收藏0

  • CSS進階篇--Normalize.css的使用（重置表）

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

    dack 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<