css筆記2

阿新 • • 發佈：2017-08-03

ash 頂部 -1 20px 清除浮動 hit col doctype rfi

一 display屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        <!--.c1{-->
            <!--width:100px;-->
            <!--height:200px;-->
            <!--background-color:darkorange 
;-->
        <!--}-->

        <!--.c2{-->
            <!--width:100px;-->
            <!--height:200px;-->
            <!--background-color:green;-->
            <!--&lt;!&ndash;display:none;&ndash;&gt;-->
        <!--}-->

        <!--.c3 
{-->
            <!--width:100px;-->
            <!--height:200px;-->
            <!--background-color:rebeccapurple;-->
        <!--}-->

        <!--.outer:hover .c2{-->
            <!--display:none;-->
        <!--}-->

        div{
            width:200px;
            height 
:200px;
            bockground-color:green;
            display:inline;
        }

        span{
            width:200px;
            height:200px;
            background-color:wheat;
            display:block;
            }

    </style>
</head>
<body>

<div>DIV</div>

<span>span</span>



<!--<div class="c1"></div>-->


<!--<div class="outer">-->
    <!--<div class="c2"></div>-->
    <!--<div class="c3"></div>-->
<!--</div>-->


</body>
</html>

View Code

二 inline-block屬性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
        margin:0;
        padding:0;
        }

        .c1{
        width:100px;
        height:200px;
        background-color:darkorange;
        display:inline-block;
        }

        .c2{
            width:200px;
            height:200px;
            background-color:green;
            display:none;
            margin-lift:-4px;
        }

        .c3{
            width:300px;
            height:200px;
            background-color:rebeccapurple;
            display:inline-block;
            margin-left:-5px;
        }

        ul li{
            list-style:none;
        }
        ul li a{
            width:20px;
            height:20px;
            float:left;
            padding:20px;
            margin-left:5px;
            background-color:wheat;
        }

    </style>
</head>
<body>

<a class="c1"></a>

<div class="c2"></div>
<div class="c3"></div>

<ul>
    <li class="item"><a href="">1</a> </li>
    <li class="item"><a href="">2</a> </li>
    <li class="item"><a href="">3</a> </li>
    <li class="item"><a href="">4</a> </li>
    <li class="item"><a href="">5</a> </li>
    <li class="item"><a href="">6</a> </li>
    <li class="item"><a href="">7</a> </li>
    <li class="item"><a href="">8</a> </li>
</ul>

</body>
</html>

View Code

三float 父級塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .box1,.box2{
            float:left;
            width:50%;
            height:60px;
        }

        .box1{
            background-color:wheat;
            }

        .box2{
            background-color:green;
        }
        .content{
            width:100%;
            height:60px;
            background-color:greenyellow;
        }

        .header{
            border:red 1px solid;
        }

        .clearfix:after{
            content:"";
            display:block;
            clear:both;
        }
    </style>
</head>
<body>

<div class="header clearfix">

    <div class="box1"></div>
    <div class="box2"></div>

</div>

<div class="content"></div>

</body>
</html>

View Code

四清除浮動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin :0px;
        }

        .div1{
            background-color:rebeccapurple;
            width:200px;
            height:100px;
            float:left;
        }

        .div2{
            background-color:teal;
            width:200px;
            height:200px;
            float:left;
            clear:left;
        }


        .div3{
            background-color:green;
            width:100px;
            height:300px;
            float:left;
            clear:right;
        }
    </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

View Code

五 a標簽錨

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .fang1{
            width:100%;
            height:1000px;
            background-color:wheat;
        }


         .fang2{
            width:100%;
            height:1000px;
            background-color:red;
        }
         .fang3{
            width:100%;
            height:1000px;
            background-color:green;
        }

    </style>
</head>
<body>


<ul>
    <li><a href="#c1">第一章</a></li>
    <li><a href="#c2">第二章</a></li>
    <li><a href="#c3">第三章</a></li>
</ul>

<div class="fang1" id="c1">第一章</div>
<a href="#">返回頂端</a>
<div class="fang2" id="c2">第二章</div>
<a href="#">返回頂端</a>
<div class="fang3" id="c3">第三章</div>
<a href="#">返回頂端</a>
</body>
</html>

View Code

六 position定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            margin:0px;
        }

        .div1{
            background-color:rebeccapurple;
            width:200px;
            height:200px;
            }

        .div2{
            background-color:green;
            width:200px;
            height:200px;
            position:absolute;
            left:200px;
            top:200px;

        <!--position:relatinve--------;1, 參照物是以自己原來在文檔流的位置  -->
                                        <!--2 物理位置依然存在-->

        }

        .div3{
            background-color:teal;
            width:200px;
            height:200px;
        }
        .father_box{
            position:relative;
            border: 2px solid red;
        }
    </style>
</head>
<body>


<div class="div1"></div>


<div class="father_box">
    <div class="div2"></div>
    <div class="div3"></div>
</div>

</body>
</html>

View Code

七fix定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .c1{
            width:100%;
            height:2000px;
            background-color:wheat;
        }

        .returnTop{
            width:90px;
            height:35px;
            text-indent:10px;
            background-color:grey;
            color:white;
            tsxt-align:center;
            line-height:35px;
            position:fixed;
            right:20px;
            bottom:20px;
        }
    </style>
</head>
<body>

<div class="c1"></div>

<div class="returnTop">返回頂部</div>

</body>
</html>

View Code

八 marging塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0px;
        }

        .div1{
            background-color:rebeccapurple;
            width:300px;
            height:300px;

            overflow:hidden;
            <!--border:1px solid rebeccapurple;-->
            <!--padding:1px;-->
        }
        .div2{
            background-color:green;
            width:100px;
            height:100px;
            margin-top:20px;
        }

        .div3{
            background-color:teal;
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>

<div style="background-color: bisque;width: 300px;height: 300px"></div>
<div class="div1">
    <div class="div2"></div>
    <div class="div3"></div>
</div>

</body>
</html>

View Code

九 txet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        ul li{
            list-style:none;
        }
    </style>
</head>
<body>

<ul>
    <li>11</li>
    <li>11</li>
    <li>11</li>
</ul>
</body>
</html>

View Code

css筆記2

【css筆記(2)】如何給元素應用規則?

mpi phy yellow ini log min lib second from css選擇器在介紹之前我麽你先來看看css大致分為幾種選擇器: 1.類型選擇器(元素選擇器) 2.後代選擇器(元素的所有後代) 3.偽類(:active, :hover, :fo

css筆記2

ash 頂部 -1 20px 清除浮動 hit col doctype rfi 一 display屬性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

YII框架分析筆記2：組件和事件行為管理

reac 設置有變相關 article class ces col cal Yii是一個基於組件、用於開發大型 Web 應用的高性能 PHP 框架。CComponent幾乎是所有類的基類，它控制著組件與事件的管理，其方法與屬性如下，私有變量$_e數據存放事件(evnet

學習筆記2

建議 coo line 長度 cape 發展 div+css 加載不兼容雙標簽： <html><head><title><body><table><tr><td><span>

python筆記2-變量

sse imp lob lam cell hat bsp adding 第一個字符變量存東西所用 #定義變量 name=‘feifei‘#定義變量，字符串 age=18.9#整型或者小數定義變量不需要加引號 print(name) print(age) name2="w

Jmeter學習筆記2-原件作用域與執行順序

校驗 height sse proc tro 有效收集技術分享控制 1.元件的作用域（1）配置元件（config elements）:會影響其作用範圍內的所有元件。（2）前置處理程序（per-processors）：在其作用範圍內的每一個sampler元件之

python學習筆記2：字符串

nbsp 大小 alpha .com format 大小寫 fin 判斷大小 key python學習筆記2：字符串總結：字符串是不可變變量，不能通過下標修改其值　　　字符串的方法都不會改變字符串原來的值，而是新生成一個字符串一、3種寫法——單引號，雙引號，三引號　

java 學習筆記2 面向對象（上）

awr ges abs nal mage 有效面向對象 ima col 類和對象類是某一批對象的抽象，可以把類理解成某種概念。對象是一個具體存在的實體。類和對象是面向對象的核心。類定義的是多個實例的特征，類不是具體存在，實例才是具體存在。定義類(class)的語法：

WPF筆記(2.4 Grid)

font 習慣 src pixel 不同單元格裝載 out 生成第一章已經簡單介紹過這個容器，這一節詳細介紹。Grid一般是用表格(Grid.Row 和Grid.Column )的，比StackPanel更細致一些，但是，這麽玩很麻煩，先橫著豎著定義一大堆，然後把元素

Git學習筆記2——Git版本庫的創建

文件添加不但提交 linu 記錄例子 blog 所有 out 創建一個版本庫非常簡單，首先，選擇一個合適的地方，創建一個空目錄： $ cd s: $ cd Git_Learing $ pwd s/Git_Learning pwd命令用於顯示當前目錄。在我的wind

易學設計模式看書筆記(2) - 簡單工廠模式

原理 pub -m post 繼承 void cto tracking else if 本文摘自易學設計模式一書一、簡單工廠模式 1.動物管理系統的樣例 public interface Animal{ public void eat(); } publi

設計模式筆記2：策略模式

把他客戶端 mage 調用 ges view 優惠軟件代碼 1.1 需求　　設計一個商場打折計費的軟件，可以實現打折，滿300送100等優惠功能。 1.2 類圖　　 1.3　　實現　　我們先把4個計算的類寫出來。 View Code 　　在寫負責

Hadoop 學習筆記 (2) -- 關於MapReduce

規模 pre 分析 bsp 學習筆記 reduce 數據中心階段圖例 1. MapReduce 定義: 是一種可用於數據處理的編程的模型優勢: MapReduce 本質上是並行運行的，因此可以將大規模的數據分析任務，分發給任何一個擁有足夠多機器

讀muduo網絡庫筆記(2.8章)

多個失敗筆記對象 http 繼續 linux多線程分享 under 該筆記出自陳碩的《Linux多線程服務端編程》，作者比較註重版權問題，寫個讀後筆記應該沒什麽問題吧，如果有，會及時刪除，沒有的話繼續寫點筆記 ----------------------------

數據結構（嚴蔚敏、吳偉民）——讀書筆記-2、線性表及其基本運算、順序存儲結構

content pri 線性時間復雜度 length 將他 ron 個數 p s 第二章線性表 2.1 線性表及其基本運算 2.2 線性表的順序存儲結構 2.3 線性表的鏈式存儲結構 1、線性表：是n個數據元素的有限序列。

JavaScript 面向對象的程序設計記錄筆記2(設計模式)

程序構造方法目標代碼構造函數判斷 .get create 以下為JavaScript高級程序設計第六章面向對象的程序設計6.2節創建對象（設計模式部分）讀書記錄。 1）工廠模式：　　function createPerson(name, age, se

CCNA筆記(2)

網絡設備防火墻交換沒有工作站我們文件共享 mage 簡單的 CCNA第一天筆記:何為因特網？答:因特網，是連接各臺pc與終端設備，正是因為有了因特網，我們才能與全世界交流，玩在線遊戲，在線學習。因特網給我們教育帶來什麽方便？答:沒有了地域的阻止，可以在線學習，在

算法導論學習筆記(2)－歸並排序

mar 今天 iostream 介紹 font 額外遞歸 size dsm 今天學習了算法導論上的歸並排序算法，而且完畢了在紙上寫出偽代碼，曾經就學過歸並可是理解的不夠透徹。以前還一直困惑：為什麽明明歸並排序比快排的時間復雜度更穩定。為什麽庫函數不用歸

ESP8266學習筆記2：實現ESP8266的局域網內通信

pro reg sad net nts 理解模式 curl ont 上一篇熟悉了編譯下載操作。如今就以實例入手。project使用的是IOT_DEMO，據DEMO文檔能夠知道ESP8266初始工作模式為softAP+station共存的模式。於是這邊我們就先以soft

你不知道的javaScript筆記(2)

是否 foreach 函數嚴格模式 console spa new 簡單的否則 this和對象原型 this是一個很特別的關鍵字，被自動定義在所有函數的作用域中 // foo.count 是0，字面理解是錯誤的 function foo(num) {

css筆記2

相關推薦