html （第四本書第七章浮動參考）

時間 2019-11-30

標籤 html 第四本書第七浮動參考欄目 HTML 简体版

原文原文鏈接

課上1html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ會員頁面導航</title>
    <style>
        #father{
            background: gray;
            width:1120px;
            height:72px ;
        }
        #logo{
            display: inline-block;
            width:112px;
            height:72px;
            margin-left: 50px;
        }
        img {
            vertical-align: middle;
        }
        #list{
            display: inline-block;
            width:660px;
        }
        nav{
            padding-left: 60px;
        }
        a{
            font-size: 14px;
            color:white;
            text-decoration: none;
            margin-right: 25px;
        }
        a:hover{
            color:blue;
        }
        #login{
            display: inline-block;
            width:220px ;
            margin-left: 23px;
        }
        .a1{
            width:80px;
            height:30px;
            border:1px #f1ff66 solid;
            border-radius: 20px;
            background: gray;
            display: inline-block;
            line-height:30px ;
            text-align: center;
            padding-top: 2px;
            font-size: 14px;
            color:#f1ff66;
            text-decoration: none;
            margin: 0;
        }
        .a1:hover{
            color:orange;
        }
        .a2{
            width:120px;
            height:30px;
            border:1px #f1ff66 solid;
            border-radius: 20px;
            background: #f1ff66;
            display: inline-block;
            line-height:30px ;
            text-align: center;
            padding-top: 2px;
            font-size: 14px;
            font-weight: bold;
            color: #c6802b;
            text-decoration: none;
            margin-right: 0;
        }
        .a2:hover{
            color:#A50713;
        }
    </style>
</head>
<body>
<header>
    <div id="father">
        <div id="logo"><img src="image/logo.png" width="116px" height="72px"/></div>
        <div id="list">
            <nav>
                <a href="">功能特權</a>
                <a href="">遊戲特權</a>
                <a href="">生活特權</a>
                <a href="">會員活動</a>
                <a href="">成長體系</a>
                <a href="">年費專區</a>
                <a href="">超級會員</a>
            </nav>
        </div>
        <div id="login">
            <a class="a1" href="">登陸</a>
            <a class="a2" href="">開通超級會員</a>
        </div>
    </div>
</header>
</body>
</html>

課上2post

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>熱門活動</title>
    <style>
        body{
            padding-top:15px;
            width:700px;
            margin: 0 auto;
        }
        .title{
            font-size:20px;
            font-weight: bold;
            float: left;
        }
        .more{
            color:gray;
            float: right;
            font-size:19px;
            font-weight: bold;
        }
        .x {
            padding-top: 35px;
        }
        li{
            list-style: none;
            font-size: 12px;
        }
        .l1{
            float: left;
        }
        .l2{
            float: left;
            padding-left: 40px;
            display: inline-block;
        }
        .l3{
            float: left;
            padding-top: 25px;
        }
        .l4{
            float: left;
            padding-left: 40px;
            display: inline-block;
            padding-top: 25px;
        }
    </style>
</head>
<body>
<div>
    <div class="title">熱門活動</div>
    <div class="more">更多</div>
    <div class="x">
        <ul>
            <li class="l1">
                <img src="image/img1.png" alt="圖片1" title="圖片1"/><br/>推薦活動 | 原創音樂現金榜T榜
            </li>
            <li class="l2">
                <img src="image/img2.png" alt="圖片2" title="圖片2"/><br/>推薦節目|《TAImusic》爆笑來襲
            </li>
            <li class="l3">
                <img src="image/img3.png" alt="圖片3" title="圖片3"/><br/>推薦歌單 | 繼續寵愛張國榮
            </li>
            <li class="l4">
                <img src="image/img4.png" alt="圖片4" title="圖片4"/><br/>推薦活動| 330金屬音樂巡演 成都小酒館音樂空間
            </li>
        </ul>
    </div>
</div>
</body>
</html>

課上3url

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>電視劇詳情列表</title>
    <style>
        body{
            padding-top:15px;
            width:350px;
            margin: 0 auto;
        }
        .c1{
            background: url("image/1.gif") 10px   no-repeat;
            padding-left:38px;
            font-size: 12px;
            font-weight: bold;
            border:1px #A4FFF3 solid;
            height:27px;
            line-height:27px;
            margin-bottom: 20px;
        }
        .c2{
            float:left;
            border:1px #A4FFF3 solid;
            padding: 2px;
        }
        .c3{
            float: left;
            font-size: 13px;
            font-weight: bold;
            margin-left: 5px;
            margin-top: 15px;
        }
        .c4{
            color:#55565F;
            float: left;
            font-size: 13px;
            margin-left: 5px;
            margin-top: 12px;
            width: 220px;
            border:1px white solid;
            line-height: 26px;
        }
        li{
            list-style: none;
            font-size: 13px;
        }
        .c5{
            float: left;
            padding: 1px;
        }
        .c6{
            float: right;
        }
        .c5 a{
            text-decoration: none;
            color:#55565F;
        }
        .c6 a{
            color:gray;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
            color: blue;
        }
    </style>
</head>
<body>
<header>
    <div class="c1">明星薦片</div>
</header>
<section>
    <div class="c2"><img src="image/3.gif"/></div>
    <div class="c3">周秀娜薦片:讓子彈飛</div>
    <div class="c4">
        導演：姜文<br/>
        主演：姜文 周潤發 葛優<br/>
        點評：我最喜歡的要算《讓子彈飛》了,超喜歡...[詳情]
    </div>
    <ul class="c5">
        <li><a href="">《巴別塔》：好的故事引人深思</a><br/><br/></li>
        <li><a href="">《洛杉磯之戰》：外星人那麼弱智？</a><br/><br/></li>
        <li><a href="">《讓子彈飛》：武俠裏也能夠有愛情</a><br/><br/></li>
        <li><a href="">《劍雨》：好的故事引人深思</a><br/><br/></li>
        <li><a href="">《春風沉醉的夜晚》：很是真實</a><br/><br/></li>
        <li><a href="">《克洛伊》：故事簡單卻細緻</a></li>
    </ul>
    <ul class="c6">
        <li><a href="">&nbsp;&nbsp;&nbsp;阿朵</a><br/><br/></li>
        <li><a href="">丁子俊</a><br/><br/></li>
        <li><a href="">周秀娜</a><br/><br/></li>
        <li><a href="">葉年生</a><br/><br/></li>
        <li><a href="">如小果</a><br/><br/></li>
        <li><a href="">劉若英</a></li>
    </ul>
</section>
</body>
</html>

課上4spa

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京東登陸頁</title>
    <style>
        header div{
            background: url("image/logo2.png") 180px   no-repeat;
            padding-left:370px;
            font-size: 24px;
            height:80px;
            line-height:80px;
            color: #55565F;
        }
        .content{
            background-color: #e93650;
        }
        .wrap{
            width: 990px;
            margin: 0 auto;
        }
        .login-box{
            background: url("image/banner.png")    no-repeat;
            height:475px;
        }
        h2{
            color:gray;
            font-size: 21px;
            padding-left:20px;
            line-height: 20px;
            height:20px;
            margin-top: 24px;
            margin-bottom: 0;
            font-weight: 400;
        }
        h2 a{
            background: url("image/icon5.jpg") 10px   no-repeat;
            float: right;
            width:80px;
            padding-left:30px;
            color: #e9063c;
            font-size: 14px;
            height:18px;
            line-height: 18px;
        }
        .login-form{
            width:340px;
            height:273px;
            border:1px #A4FFF3 solid;
            float:right;
            margin-top: 40px;
            background: white;
        }
        #loginForm{
            padding:30px 0;
        }
        .f1{
            height: 38px;
            border:1px rgba(163, 163, 163, 0.56) solid;
            float: left;
            padding:  0 ;
            margin-bottom: 0;
            margin-left: 20px;
        }
        .f2{
            height: 38px;
            border:1px rgba(163, 163, 163, 0.56) solid;
            float: left;
            padding:  0 ;
            margin-top: 0;
            margin-left: 20px;
        }
        .kong{
            height: 25px;
        }
        #name,#pwd {
            border-left: none;
            height:32px;
            padding:3px  0 ;
            float: left;
            border-bottom:1px rgba(163, 163, 163, 0.56) solid;
            border-top:1px rgba(163, 163, 163, 0.56) solid;
            border-right:1px rgba(163, 163, 163, 0.56) solid;
            width:260px;
            color: gray;
            font-size:14px ;
        }
        .kong2{
            margin-top: 60px;
            width: 300px;
            margin-left: 20px;
            padding-top: 10px;
            height: 20px;
        }
        #auto-login{
            float:left;
            height: 20px;
        }
        p span:nth-of-type(1){
            font-size: 12px;
            color:gray;
            height: 20px;
            line-height: 20px;
        }
        p span:nth-of-type(2){
            display:inline-block;
            float:right;
            font-size: 12px;
            height: 20px;
            line-height: 20px;
        }
        #submit{
            background-color: #f03c3d;
            color:white;
            width: 300px;
            text-align: center;
            height: 35px;
            line-height: 30px;
            font-size: 17px;
            margin-left: 20px;
            border:1px white solid;
        }
        footer{
            text-align: center;
            color:gray;
            font-size: 12px;
        }
        a{
            color:gray;
            text-decoration: none;
        }
        a:hover{
            text-decoration:underline;
            color:red;
        }
    </style>
</head>
<body>
<header>
    <div>歡迎登陸</div>
</header>
<article class="content">
    <div class="wrap">
        <div class="login-box">
            <div class="login-form">
                <h2>京東會員<a href="">當即註冊</a></h2>
                <form action="" method="post" id="loginForm">
                    <div class="f1"><input type="image" src="image/icon1.jpg"></div>
                    <input name="name" placeholder="  郵箱/用戶名/已驗證手機" type="text" id="name">
                    <p class="kong"></p>
                    <div class="f2"><input type="image" src="image/icon2.jpg"></div>
                    <input name="pwd" type="password" id="pwd">
                    <p class="kong2">
                        <input type="checkbox" name="auto-login" id="auto-login"><span>自動登陸</span>
                        <span><a href="">忘記密碼?</a></span>
                    </p>
                    <input type="submit" id="submit" name="submit" value="登 錄">
                </form>
            </div>
        </div>
    </div>
</article>
<footer>
    <div>
        <p><a href="">關於咱們</a> | <a href="">聯繫咱們</a> | <a href="">人才招聘</a> | <a href="">商家入駐</a> | <a href="">廣告服務</a> | <a href="">手機京東</a> | <a href="">友情連接</a> | <a href="">銷售聯盟</a> | <a href="">京東社區</a> | <a href="">京東公益</a> | <a href="">English Site</a></p>
        <p>Copyright&copy;2004-2017 京東JD.com 版權全部</p>
    </div>
</footer>
</body>
</html>

課後3設計

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>攝影社區熱門小鎮</title>
    <style>
        body{
            width:760px;
            height: 230px;
            margin: 50px  auto;
            border:1px #A4FFF3 solid;
        }
        .title{
            color:#656565;
            font-size: 14px;
            font-weight: bold;
            width:120px;
            margin: 10px;
        }
        li{
            list-style: none;
            width:240px;
            float: left;
            margin-top: 10px;
        }
        span{
            border:1px #A4FFF3 solid;
            float: left;
            border-radius: 4px;
            padding: 3px 3px 0;
        }
        p{
            float: left;
            margin-top: 0;
            margin-left: 10px;
            color:grey;
            font-size: 13px;
            line-height: 20px;
        }
        a{
            color:deepskyblue;
            text-decoration: none;
            font-size: 14px;
            line-height: 27px;
        }
        a:hover{
            text-decoration: none;
            color:red;
        }
    </style>
</head>
<body>
<div class="title">攝影社區熱門小鎮</div>
<div class="content">
    <ul>
        <li>
            <span><img src="image/pic_01.jpg"/></span>
            <p>
                <a href="">風景狙擊手</a><br/>
                成員：80<br/>
                做品：276
            </p>
        </li>
        <li>
            <span><img src="image/pic_02.jpg"/></span>
            <p>
                <a href="">敘事感</a><br/>
                成員：235<br/>
                做品：116</p>
        </li>
        <li>
            <span><img src="image/pic_03.jpg"/></span>
            <p>
                <a href="">定焦視界</a><br/>
                成員：56<br/>
                做品：456
            </p>
        </li>
        <li>
            <span><img src="image/pic_04.jpg"/></span>
            <p>
                <a href="">中畫幅樂園</a><br/>
                成員：130<br/>
                做品：239
            </p>
        </li>
        <li>
            <span><img src="image/pic_05.jpg"/></span>
            <p>
                <a href="">《卡啪》先鋒...</a><br/>
                成員：78<br/>
                做品：125
            </p>
        </li>
        <li>
            <span><img src="image/pic_06.jpg"/></span>
            <p>
                <a href="">植物的無聲世界</a><br/>
                成員：235<br/>
                做品：1258
            </p>
        </li>
    </ul>
</div>
</body>
</html>

課後43d

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>名人名言</title>
    <style>
        body{
            padding-top:15px;
            width:910px;
            margin: 0 auto;
        }
        .c1{
            font-size: 30px;
            font-weight: bolder;
            margin-bottom: 10px;
            padding-left:40px;
        }
        .c2{
            font-size: 12px;
            font-style: italic;
            color: grey;
            padding-left:40px;
        }
        ul{
            margin-top: 25px;
            height: 36px;
            border-bottom:1px #bfc5be solid;
        }
        li{
            list-style: none;
            float:left;
            border-top:1px #bfc5be solid;
            border-left:1px #bfc5be solid;
            width: 45px;
            height: 35px;
            text-align: center;
            font-size: 12px;
            line-height: 35px;
        }
        li:last-child{
            border-right:1px #bfc5be solid;
        }
        a{
            text-decoration: none;
            color: grey;
        }
        a:hover{
            text-decoration: underline;
            color:red;
        }
        .l1{
            width: 45px;
        }
        .l2 {
            width: 70px;
        }
        .l3 {
            width: 110px;
        }
        .p1{
            width:480px;
            font-size: 16px;
            color:#212121;
            font-weight: bold;
            margin-top: 5px;
            margin-bottom: 0;
            margin-right: 0;
            padding-top: 0;
            padding-right:0;
        }
        .p2{
            width:480px;
            font-size: 12px;
            color: #636363;
            margin-top: 0;
            margin-bottom:5px;
            padding-bottom: 0;
            padding-right:0;
            margin-right: 0;
        }
        .c3{
            width:482px;
            border:1px #bfc5be solid;
            margin-left: 25px;
            padding-left: 10px;
            padding-right:0;
            margin-right:0;
        }
        .p3{
            width:500px;
            font-size: 12px;
            color: #212121;
            font-weight: bold;
            margin-bottom: 0;
            line-height:20px;
            padding-left: 25px;
        }
        .p4{
            width:500px;
            font-size: 12px;
            color: #636363;
            margin: 0;
            padding-left: 25px;
        }
        .c5{
            width:474px;
            font-size: 16px;
            border:1px #bfc5be solid;
            color:#212121;
            padding: 6px 10px;
            margin-left:25px;
            font-weight: bold;
        }
        .p5{
            width:500px;
            font-size: 12px;
            color: #212121;
            font-weight: bold;
            margin: 0;
            line-height:20px;
            padding-left: 25px;
        }
        .p6{
            width:500px;
            font-size: 12px;
            color: #636363;
            margin: 0;
            padding-left: 25px;
        }
        .c7{
            width:484px;
            font-size: 14px;
            border:1px #bfc5be solid;
            font-style: italic;
            color: black;
            line-height: 35px;
            margin-left:25px;
            padding-left: 10px;
            padding-bottom: 0;
            padding-top: 6px;
            margin-bottom: 30px;
        }
        .c8{
            font-size: 14px;
            font-style: italic;
            color: black;
            line-height: 30px;
            margin-left:15px;
            padding-left: 0;
            padding-bottom: 0;
            padding-top: 18px;
            margin-bottom: 0;
            width:250px;
        }
        .s9{
            width:258px;
            font-size: 12px;
            color: gray;
            margin-left:15px;
            margin-bottom: 0;
            padding-left: 0;
            font-style: italic;
            line-height: 18px;
        }
        .left{
            float: left;
            margin-top: 15px;
        }
        .right{
            float: right;
            border:1px #bfc5be solid;
            width:295px;
            margin-top: 15px;
            height: 440px;
            margin-right: 28px;
        }
        footer{
            border-top:1px #bfc5be solid;
            text-align: center;
            color:gray;
            font-size: 12px;
            display: block;
            float: right;
            width:900px;
        }
    </style>
</head>
<body>
<header>
    <div class="c1">名人名言</div>
    <div class="c2">分享名人名言，開始一段觸動心靈的智慧之旅跳到內容</div>
    <div class="menu">
        <nav>
            <ul>
                <li class="l1"><a href="">登陸</a></li>
                <li class="l1"><a href="">關於</a></li>
                <li class="l2"><a href="">名人名言</a></li>
                <li class="l3"><a href="">英文名言(English)</a></li>
                <li class="l2"><a href="">心理雜誌</a></li>
                <li class="l2"><a href="">心理書籍</a></li>
                <li class="l2"><a href="">專題活動</a></li>
                <li class="l1"><a href="">發表</a></li>
            </ul>
        </nav>
    </div>
</header>
<article>
    <div class="left">
        <div class="c3">
            <p class="p1">心理學經典名言的智慧</p>
            <p class="p2">洞察人性的美與醜，認識自個人強與弱。一句好的格言可以穿越時間，永不失色、歷久彌香，它老是能給人們帶來心靈的滋養。</p>
        </div>
        <div class="c4">
            <p class="p3">
                創造力(creativity)有兩個詞根：Crera拉丁語的意思是"去創造"。Krainir希臘語的意思是"去實現"。因此，創造力不單單是一種想象力、一種天賦，創造力更是一種將本身的想法付諸實現的能力。
            </p>
            <p class="p4">
                創造力(creativity)有兩個詞根：Crera拉丁語的意思是"去創造"。Krainir希臘語的意思是"去實現"。因此，創造力不單單是一種想象力、一種天賦，創造力更是一種將本身的想法付諸實現的能力。</br>
                發表在 未分類 | 標籤： 《換個腦殼去思考》, 創造力 | 留下評論
            </p>
        </div>
        <div class="c5">
            做者簡介
        </div>
        <div class="c6">
            <p class="p5">若是你尚未注意到你有能力讓對方做出你所但願獲得的反應，那麼你就尚未很好地掌握人生的真諦。這其實簡單到難以想象。若是你但願他人對你感興趣，那麼你就要先對他人產生興趣；若是你想讓他人緊張，那麼你本身首先要緊張起來。就是這麼簡單。人們會按照你對待他們的方式對待你。這其中沒有什麼祕訣。看看周圍的人，你能夠在與下一我的交流時證明這一點。</p>
            <p class="p6">
                若是你尚未注意到你有能力讓對方做出你所但願獲得的反應，那麼你就尚未很好地掌握人生的真諦。這其實簡單到難以想象。若是你但願他人對你感興趣，那麼你就要先對他人產生興趣；若是你想讓他人緊張，那麼你本身首先要緊張起來。就是這麼簡單。人們會按照你對待他們的方式對待你。這其中沒有什麼祕訣。看看周圍的人，你能夠在與下一我的交流時證明這一點。</br>
                發表在 未分類 | 標籤： 《怎樣出售設計創意》, 溫斯頓·丘吉爾 | 留下評論
            </p>
        </div>
        <div class="c7">
            贊助廣告</br>
            <img src="image/ad_2.jpg"/>
        </div>
    </div>
    <div class="right">
        <div class="c8">
            贊助廣告<br>
            <img src="image/ad.jpg" width="200px" height="200px"/><br>
            搜索
            <form method="post" action="">
                <input name="name" type="search" placeholder="點擊搜索">
            </form>
            標籤
        </div>
        <div class="s9">
            60年語錄 《犯罪心理》 世間百態 二十四史傳統名人 體育人物 卡斯特羅 卡斯特羅名言 卡斯特羅語錄 歷史 友誼愛情 古代格言 名人名言 名人隨語 教子立人 新聞事件 李白 愛情語錄 韓寒語錄
        </div>
    </div>
</article>
<footer>
    <p>&copy;All Rights Reserved by Psytopic.來自Psytopic.com的禮物</p>
</footer>
</body>
</html>

課後5code

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>彩妝熱賣產品列表</title>
    <style>
        p, ul, li {
            margin:0;
            padding:0;
        }
        ul, li {
            list-style-type:none;
        }
        body {
            background-color:#eee7e1;
            font-size:12px;
        }
        #beauty {
            width:260px;
            background-color:#FFF;
        }
        .title {
            font-size:14px;
            font-weight:bold;
            color:#FFF;
            background-color:#e9185a;
            height:35px;
            line-height:35px;
            padding-left:10px;
        }
        #beauty li {
            border-bottom:1px #a8a5a5 dashed;
            padding:5px 2px;
        }
        #beauty a {
            color:#666666;
            text-decoration:none;
        }
        #beauty a:hover {
            color:#e9185a;
        }
        #beauty a span {
            color:#FFF;
            font-weight:bold;
            margin-right: 10px;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #373b3c;
            line-height: 20px;
            text-align: center;

        }
        #beauty a:hover span {
            background: #e9185a;
        }
        #beauty li div{
            display: none;
            text-align: center;
        }
        #beauty a:hover div{
            display: block;
        }
    </style>
</head>
<body>
<div id="beauty">
    <p class="title">你們都喜歡的彩妝</p>
    <ul>
        <li>
            <a href="#"><span>1</span>Za姬芮新能真皙美白隔離霜 35g
            <div><img src="image/icon-1.jpg"/>
                <p>￥62.00 最近69122人購買</p>
            </div></a>
        </li>
        <li>
            <a href="#"><span>2</span>美寶蓮精純礦物奇妙新顏乳霜BB霜 30ml
            <div><img src="image/icon-2.jpg"/>
                <p>￥89.00 最近13610人購買</p>
            </div></a>
        </li>
        <li>
            <a href="#"><span>3</span>菲奧娜水漾CC霜40g
            <div><img src="image/icon-3.jpg"/>
                <p>￥59.90 最近13403人購買</p>
            </div></a>
        </li>
        <li>
            <a href="#"><span>4</span>DHC 蝶翠詩橄欖卸妝油 200ml
            <div><img src="image/icon-4.jpg"/>
                <p>￥169.00 最近16757人購買</p>
            </div></a>
        </li>
    </ul>
</div>
</body>
</html>

僅供參考（做者不負任何責任）orm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。