HTML學習筆記 css定位浮動及瀑布流案例第十三節（原創）參考使用表

阿新 • • 發佈：2017-09-13

20px 筆記 lis containe use cor ack 100% set

#fd {
    width: 100px;
    height: 150px;
    background-color: forestgreen;
    float: left;
}

#sd {
    width: 150px;
    height: 100px;
    background-color: coral;
    float: left;
}

#td {
    width: 100px;
    height: 100px;
    background-color: chartreuse;
    float: left;
}

#container {
    width 
: 300px;
    height: 500px;
    background-color: beige;
}

#text {
    clear: both;
    /*去掉浮動*/
}

* {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
}

#div1 {
    width: 100%;
    height: auto;
    margin: 20px auto;
}
ul{
    width: 250px;
    float: left;
}

<!DOCTYPE html>
<html  
lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動</title>
    <link rel="stylesheet" href="tzy.css"type="text/css">
</head>
<body>


<div id="container">
    <div id="fd">fd</div>
    <div id="sd">sd</div>
    <div id="td" 
>td</div>
    hello word
    helloword
    <div id="text">text</div>
</div>
<!--瀑布流圖片大小要一樣-->
<div id="div1">
    <ul>
        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="1"></li>
        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="2"></li>
        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="3"></li>
    </ul>
    <ul>
        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="4"></li>
        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="5"></li>
        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="6"></li>
    </ul>
    <ul>
        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="7"></li>
        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="8"></li>
        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="9"></li>
    </ul>
</div>



</body>
</html>

20px 筆記 lis containe use cor ack 100% set #fd { width: 100px; height: 150px; background-color: forestgreen; float: left;

HTML學習筆記 css定位浮動及瀑布流第十三節（原創）

oct adding styles gin ima alt eight div height <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

HTML學習筆記 w3sCss盒子模型（陰影）（div的一些使用）案例第十節（原創）參考使用表

idt pac cin head src 模型圖 div 盒子模型樣式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

HTML學習筆記 CSS學習選擇器案例第五節（原創）參考使用表

樣式 back ack aid head 派生選擇器 char logs pan <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

HTML學習筆記 CSS背景樣式案例第六節（原創）參考使用表

ext jpg class 設置 link eight text spa .com <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

HTML學習筆記 css定位（靜態，相對，固定，絕對布局）偏移案例第十二節（原創）參考使用表

absolute write style 用戶學習 nbsp -c code posit <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

JAVAscript學習筆記 js句柄監聽事件第四節（原創）參考js使用表

必須 htm -c eve property blog uncaught event add <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

JAVAscript學習筆記 jsBOM 第七節（原創）參考js使用表

span aid cat alert 當前頁 config 彈出框 pan 針對 <html> <head> <title>day02_js</title> <scrip

JAVAscript學習筆記 jsDOM 第五節（原創）參考js使用表

doctype count1 長度 pan dom ID BE func alert <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

HTML學習筆記基礎標簽及css引用案例第一節（原創）參考使用表

set utf har del 文件定義 .com eight head <!DOCTYPE html><html lang="en"><!--表示網頁文字以什

HTML學習筆記 CSS表格及輪廓案例第八節（原創）參考使用表

idt ali char ID utf-8 內邊距 AC utl 參考 #tb, tb1, tr, th, td { border: 5px solid blue; /*加邊框*/ padding: 5px; /*內邊距*/ }

HTML學習筆記 CSS學習選擇器第五節（原創）

ext spa family 如果 styles ctype css gre utf <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <

HTML學習筆記 CSS樣式第六節（原創）

Y軸重復 eight -i tac 圖片 500px itl idt <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&

HTML學習筆記 CSS塊元素加偽類選擇器第三節（原創）

筆記 solid oct 元素是否選擇器 size set 區域 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g

HTML學習筆記 cs動畫基礎（分列效果可用於做瀑布流）第十五節（原創）參考使用表

har orm 顏色無限動畫 ext top 效果 rotate <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

HTML學習筆記 cs2D3D展示基礎第十四節（原創）參考使用表

safari 學習筆記 ans com div2 s2d spa har tex <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

HTML學習筆記 iframe引用頁面按列(針對target打開方式解釋) 第九節（原創）

type head -- eight frame top target span utf <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&

JAVAscript學習筆記 js事件第一節（原創）參考js使用表

onchange onf form 看不見鼠標 hello cnblogs html 加載 <!DOCTYPE html> <html lang="en" onUnload="ud()"> <head> <meta ch

JAVAscript學習筆記 js異常第二節（原創）參考js使用表

htm demo cnblogs value demo1 span 自定義 char 按鈕 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Linux學習筆記之Django專案以程序的形式在後臺啟動（CentOS）

body { background: #f4f4f4 } .title { width: 100%; background: #5cb85c; padding: 5px; font-size: 20px; margin: 5px } .sub_title { width: 99%; background: #

HTML學習筆記 css定位浮動及瀑布流案例 第十三節 （原創） 參考使用表

相關推薦

HTML學習筆記 css定位浮動及瀑布流案例第十三節（原創）參考使用表