html （第四本书第七章浮动参考）

最新推荐文章于 2021-07-07 20:55:38 发布

weixin_30867015

最新推荐文章于 2021-07-07 20:55:38 发布

阅读量369

点赞数 2

原文链接：http://www.cnblogs.com/yunfeioliver/p/9370434.html

版权

课上1

<!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>

课上2

<!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>

课上3

<!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>

课上4

<!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>

课后4

<!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>

课后5

<!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>