第二周复习

l123zmj

于 2019-08-11 21:26:31 发布

阅读量146

点赞数 1

文章标签：盒子、怪异、弹性盒子导航条转换（照片墙）动画、过渡响应式布局

本文链接：https://blog.csdn.net/l123zmj/article/details/99231508

版权

练习题

一、盒子模型（登录窗口）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ登录窗口</title>
    <style>
        .box{
            width: 450px;
            height: 350px;
            background-color: #f4f4f4;
            margin: 0 auto;
        }
        .use{
            width: 400px;
            height: 168px;
            margin: 0 auto;
            position: relative;
        }
        .text {
            position: absolute;
            top: 10px;
            left: 120px;
        }
        .use>img{
            position: absolute;
            left: 25px;
            top: 10px;
        }
        .aa{
            color: cornflowerblue;
            text-decoration: none;
            font-size: 14px;
        }
     .text1{
         position: absolute;
         top: 30px;
         left: 120px;
     }
        .text2{
            position: absolute;
            top: 60px;
            left: 120px;
        }
        .color{
             color:#9f9f9f;
        }
        .text3{
            position: absolute;
            top: 90px;
            left: 120px;
            width: 200px;
            height: 30px;
            background-color: cornflowerblue;
            color: white;
        }
        .text4{
            position: absolute;
            right:0;
            top: 120px;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="images/QQ.jpg" width="450px" />
    <div class="qq">
        <div class="use">
        <img src="images/qqtubiao.jpg">
        <span class="text">
            <input type="text" max="11" min="9" placeholder="QQ号码/手机/邮箱" width="200px" height="40"/>
           &nbsp; &nbsp; <a href="#" class="aa">注册账号</a>
        </span><br>
            <span class="text1">
                <input type="password" placeholder="密码"/> &nbsp; &nbsp;
                <a href="#" class="aa">找回密码</a>
            </span>
            <span class="text2">
                <input type="checkbox"/><small class="color">记住密码</small>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
                <input type="checkbox"/><small class="color">自动登录</small>
            </span><br>
            <span>
                <input type="button" class="text3" value="安&nbsp; 全&nbsp; 登&nbsp; 录"/>
                </span>
            <span>
                <img src="images/erweima.jpg" class="text4">
            </span>
    </div>
    </div>
</div>
</body>
</html>

显示页面：
在这里插入图片描述
二、怪异盒子（京东菜单栏、京东官网）、导航栏

京东菜单栏、导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东商品列表</title>
   <link rel="stylesheet" href="CSS/jindongStyle.css"/>
    <link rel="stylesheet" href="CSS/reset.css"/>
</head>
<body>
<!--导航栏-->
<div class="nav">
    <ul type="none" class="nav1">
        <li><a href="">你好，请登录</a></li>
        <li><a href="">免费注册</a><span>  |  </span></li>
        <li><a href="">我的订单</a><span>  |  </span></li>
        <li><a href="">我的京东</a><span>  |  </span></li>
        <li><a href="">京东会员</a><span>  |  </span></li>
        <li><a href="">企业采购</a><span>  |  </span></li>
        <li><a href="">客户服务</a><span>  |  </span></li>
        <li><a href="">网站导航</a><span>  |  </span></li>
        <li><a href="">手机京东</a></li>
    </ul>
</div>
<!--搜索栏-->
<div class="search">
    <div class="use">
    <div class="search_left">
        <img src="images/jindongtubiao.PNG" width="190px" height="120px">
    </div>
    <div class="search_right">
        <div class="up">
            <input type="text" placeholder="请输入搜索内容" class="find"/>
            <input type="button" value="搜" class="find1"/>
        </div>
        <div class="center">
            <ul type="none" >
                <li><a href="#">手机好店日</a></li>
                <li><a href="#">大牌肥料</a></li>
                <li><a href="#">家电815</a></li>
                <li><a href="#">荣耀9X</a></li>
                <li><a href="#">个护神劵</a></li>
                <li><a href="#">清爽肌</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">家装建材</a></li>
                <li><a href="#">国宝手机</a></li>
            </ul>
        </div>
        <div class="bottom">
            <ul>
                <li><a href=" ">秒杀</a></li>
                <li><a href=" "><b>优惠劵</b></a></li>
                <li><a href=" ">plus会员</a></li>
                <li><a href=" ">品牌闪购</a></li>
                <li><a href=" ">拍卖</a></li>
                <li><a href=" ">京东时尚</a></li>
                <li><a href=" ">京东超市</a></li>
                <li><a href=" ">京东生鲜</a></li>
                <li><a href=" ">海囤全球</a></li>
                <li><a href=" ">京东金融</a></li>
            </ul>
        </div>
    </div>
</div>
</div>
<!--列表栏-->
<div class="box">
    <ul>
        <li>家用电器</li>
        <li>手机</li>
        <li>电脑</li>
        <li>家居</li>
        <li>服装</li>
        <li>美妆</li>
        <li>女鞋</li>
        <li>男鞋</li>
        <li>房产</li>
        <li>母婴</li>
        <li>食品</li>
        <li>艺术</li>
        <li>医药保健</li>
        <li>图书</li>
        <li>机票</li>
        <li>理财</li>
        <li>安装</li>
        <li>工业器</li>
    </ul>
</div>
</body>
</html>

jindongStyle.css

body{
    background-color: #d5d5d5;
}
/*导航栏*/
.nav{
    width: 100%;
    height: 30px;
    line-height:30px;
    background-color:#e3e4e5;
    border-bottom: 1px solid #ddd;
}
.search{
    width: 100%;
    height: 141px;
    background-color: white;
}
.box{
    width: 190px;
    height: 470px;
    background-color: white;
}
.nav ul{
    float: right;
}
.nav>ul li{
    text-decoration: none;
    float: left;
    margin-right: 20px;
}
.nav>ul a{
    color: #999999;
    font-size: 14px;
}
.nav>ul a:hover{
    color: red;
}
.nav>ul a:nth-child(2)
{
 color: red;
}

/*列表栏*/
.box>ul li{
    width:190px;
    height: 25px;
    line-height: 25px;
}
.box{
    margin-top: 10px;
    margin-left:79.5px;
    padding: 10px 0;    /*框平均上下*/
    box-sizing:border-box;
}
.box>ul li:hover{
    background-color:#9E9E9E;
}
.box>ul a{
    font-size: 14px;
    color: #333;
}
/*搜索栏*/
.use{
    width: 1196px;
    height: 141px;
    margin: 0 auto;
}
.search_left{
    position: relative;
}
.search_left>img{
    position: absolute;
    left:0;
    top: 10px;
}
.search_right{
    position: relative;
}
.up{
    position: absolute;
    width: 550px;
    height: 36px;
    border: 2px solid #cc0000;
    left: 210px;
    top: 15px;
}
.find{
    position: absolute;
    width: 488px;
    height: 32px;
    border: 1px solid #cc0000;
    left:0;
    top: -1px;
}
.find1{
    position: absolute;
    width: 58px;
    height: 32px;
    background-color: #cc0000;
    border: 2px solid #cc0000;
    right: 2px;
    top: 0.5px;
}
.center{
    position: absolute;
    width: 550px;
    height: 20px;
    left: 210px;
    top: 58px;
    float: left;
}
.center ul{
    float: right;
}
.center ul li{
    float: left;
    margin-left: 17px;
}
.center>ul a{
  font-size: 12px;
    color:#999999;
}
.center>ul:first-child{
    color:#cc0000;
}
.center>ul a:hover{
    color: #cc0000;
}
.bottom{
    position: absolute;
    width: 762px;
    height: 60px;
    left: 210px;
    top: 80px;
}
.bottom ul {
    float: right;
 margin: 0 auto;
}
.bottom ul li{
float: left;
    margin-right:23px;
    margin-top: 25px;
}
.bottom ul a{
    font-size: 15px;
    color: #333;
}
.bottom>ul a:hover{
    color:red;
}

reset.css

a{
    text-decoration: none;
}
ol,dl,li,ul{
    list-style: none;
          }
ol,dl,li,ul,div{
    margin: 0px;
    padding: 0px;
    text-align: center;
    color: #333;
    font-size: 14px;
    font-family: "宋体";

}

显示页面：
在这里插入图片描述

京东官网（部分）、阴影、移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东官网</title>
   <link rel="stylesheet" href="CSS/jindong.css"/>
    <link rel="stylesheet" href="CSS/reset.css"/>
</head>
<body>
<div class="box">
    <div>
        <img src="images/1.jpg"width="150px" height="150px">
        <div class="more2_info"><p class="more2_info_name">【沃尔玛】心相印茶语丝享抽纸 3层*120抽*8包/提</p>
            <div class="more2_info_price more2_info_price_plus">
            <div class="mod_price"><i>¥</i><span class="more2_info_price_txt">18.80</span></div></div></div>
    </div>
    <div>
        <img src="images/2.jpg"width="150px" height="150px">
        <div class="more2_info"><p class="more2_info_name"><i class="more2_info_self">自营</i>伊利 安慕希希腊风味常温酸奶原味205g*12盒/礼盒装</p>
            <div class="more2_info_price more2_info_price_plus"><div class="mod_price"><i>¥</i><span class="more2_info_price_txt">60.00</span></div><div class="more2_price_plus"><div class="more2_discount">满减</div></div></div></div>
    </div>
    <div>
        <img src="images/3.jpg"width="150px" height="150px">
        <div class="more2_info"><p class="more2_info_name">真食 广西百香果 5斤大果  单果50-100g 新鲜水果 </p><div class="more2_info_price more2_info_price_plus">
            <div class="mod_price"><i>¥</i><span class="more2_info_price_txt">29.90</span></div></div></div>
    </div>
    <div>
        <img src="images/4.jpg"width="150px" height="150px">
        <div class="more2_info"><p class="more2_info_name"><i class="more2_info_self">自营</i>口水娃 休闲零食 零食大礼包 生日礼物 送女友 肉类豆干薯片零食一整箱礼盒1100g</p><div class="more2_info_price more2_info_price_plus"><div class="mod_price"><i>¥</i><span class="more2_info_price_txt">39.90</span></div><div class="more2_price_plus"><div class="mod_price"><i>¥</i>
            <span class="more2_info_price_txt">38.80</span></div><i class="more2_price_plus_ico"></i></div></div></div>
    </div>
    <div class="five">
        <img src="images/5.jpg"width="150px" height="150px">
        <div class="more2_info"><p class="more2_info_name">印尼进口Richeese纳宝帝简约礼盒装 Richoco丽巧克夹心饼干整盒3层夹心*20包 香草口味</p><div class="more2_info_price more2_info_price_plus"><div class="mod_price"><i>¥</i><span class="more2_info_price_txt">42.92</span>
        </div><div class="more2_price_plus"><div class="more2_discount">券</div></div></div></div>
    </div>
    <div>
        <img src="images/6.jpg"width="150px" height="150px">
        <div class="more2_info"><p class="more2_info_name">图拉斯（TORRAS）车载手机支架 全自动汽车导航支架出风口重力多功能车内手机座汽车用品通用 【深邃黑】合金迷你款-自动锁紧</p><div class="more2_info_price more2_info_price_plus"><div class="mod_price"><i>¥</i><span class="more2_info_price_txt">78.00</span></div><div class="more2_price_plus"><div class="mod_price"><i>¥</i>
            <span class="more2_info_price_txt">74.00</span></div><i class="more2_price_plus_ico"></i></div></div></div>
    </div>
    <div>
        <img src="images/7.png"width="150px" height="150px">
        <div class="more2_info"><p class="more2_info_name">美的（Midea）电磁炉电池炉套装火锅家用智能正品电池炉灶（赠汤锅+炒锅+厨具）厂家自营 C21-Simple101</p><div class="more2_info_price more2_info_price_plus"><div class="mod_price"><i>¥</i><span class="more2_info_price_txt">169.00</span>
        </div><div class="more2_price_plus"><div class="more2_discount">券</div></div></div></div>
    </div>
    <div>
        <img src="images/8.jpg"width="150px" height="150px">
        <div class="more2_info"><p class="more2_info_name"><i class="more2_info_self">自营</i>五福金牛 全包围纤维丝圈双层汽车脚垫压模工艺荣耀系列专车定制炫酷黑 拍下备注车型年款</p><div class="more2_info_price more2_info_price_plus"><div class="mod_price"><i>¥</i><span class="more2_info_price_txt">880.00</span></div><div class="more2_price_plus"><div class="mod_price"><i>¥</i>
            <span class="more2_info_price_txt">836.00</span></div><i class="more2_price_plus_ico"></i></div></div></div>
    </div>
    <div>
        <img src="images/9.jpg"width="150px" height="150px">
        <div class="more2_info"><p class="more2_info_name"><i class="more2_info_self">自营</i>维达(Vinda) 抽纸纸巾 棉韧系列3层100抽软抽*20包 M码 整箱销售</p><div class="more2_info_price more2_info_price_plus"><div class="mod_price"><i>¥</i><span class="more2_info_price_txt">51.90</span></div>
            <div class="more2_price_plus"><div class="more2_discount">满减</div></div></div></div>
    </div>
    <div class="ten">
        <img src="images/10.jpg"width="150px" height="150px">
        <div class="more2_info"><p class="more2_info_name">OBB无感亲肤卫生巾超透气纯绵柔无荧光剂姨妈巾250mm*5片套装</p><div class="more2_info_price more2_info_price_plus"><div class="mod_price"><i>¥</i><span class="more2_info_price_txt">18.15</span></div>
            <div class="more2_price_plus"><div class="more2_discount">券</div></div></div></div>
    </div>
</div>
</body>
</html>

jindong.css
body{
    background-color: #d5d5d5;
}
.box{
    width: 1190px;
    height: 654px;
    margin: 0 auto;

}
.box>div{
    width: 230px;
    height: 322px;
    background-color: #ffffff;
    float: left;
    margin-right:10px;
    margin-top:5px ;
}
.box>.five{
    margin-right: 0;
}
.box>.ten{
    margin-right: 0;
}
.more2_info_name{
    height: 48px;
    font-size: 14px;
    line-height: 24px;
    text-align: left;
    color: #666;
}

.box>div:hover{
    transform: translate(5px,-10px);
    box-shadow: 0 15px 30px rgba(2,124,165,.5);
}

reset.css
a{
    text-decoration: none;
}
ol,dl,li,ul{
    list-style: none;
          }
ol,dl,li,ul,div{
    margin: 0px;
    padding: 0px;
    text-align: center;
    color: #333;
    font-size: 14px;
    font-family: "宋体";
}

页面显示图：
在这里插入图片描述

三、转换（照片墙）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>照片墙</title>
    <style>
        body{
            background-color: #d5d5d5;
        }
        .box{
            width: 850px;
            height: 400px;
            background-color: white;
            margin: 50px auto;
            position: relative;
        }
    .box>img{
        position: absolute;
        transform: translate(5px,10px) scale(1.2);

    }
        .box>img:hover{
            transform: translate(5px,-10px) scale(1.2);
            box-shadow: 0 15px 30px rgba(230,001,100,.5);
        }
        .box .p1{
           top:200px;
            right: 0;
        }
        .box .p2{
            top: 0;
            right: 0;
        }
        .box .p3{
            top: 200px;
            left: 0;
        }
        .box .p4{
            top: 0;
            left: 0;
        }
        .box .p5{
            top: 100px;
            left: 100px;
        }
        .box .p6{
            top: 0;
            left: 300px;
        }
        .box .p7{
            top: 100px;
            left: 500px;
        }
        .box .p8{
            top: 200px;
            left: 300px;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="images/1.jpg" class="p1">
    <img src="images/2.jpg" height="100px" width="200px" class="p2">
    <img src="images/3.jpg" height="100px" width="100px" class="p3">
    <img src="images/4.jpg" height="100px" width="200px" class="p4">
    <img src="images/5.jpg" height="200px" width="100" class="p5">
    <img src="images/6.jpg" height="100px" width="100px" class="p6">
    <img src="images/7.png"height="200px" width="100" class="p7">
    <img src="images/8.jpg" height="200px" width="100" class="p8">
 </div>
</body>
</html>

显示页面：
在这里插入图片描述

四、动画（轮播图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        .animations{
            width: 100%;
            height:400px;
            background: url("images/1.jpg");
          animation: picture 10s 3 alternate 1s forwards;
        }
        @keyframes picture{
            0%{
                background: url("images/1.jpg");
            }
            25%{
                background: url("images/2.jpg");
            }
            50%{
                background: url("images/3.jpg");
            }
            75%{
                background: url("images/4.jpg");
            }
            100%{
                background: url("images/5.jpg");
            }
        }
    </style>
</head>
<body>
<div class="animations">

</div>
</body>
</html>

五、过渡（过渡隐藏、隐藏图片）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡隐藏（图片隐藏）</title>
    <style>
        .photo,.img,.hidden{
            width: 500px;
            height: 400px;
        }
        .hidden{
            position: absolute;
            background: rgba(0,0,0,.5);
            top:0;
            left:500px;
            transition: all 2s;
        }
        .photo{
            position:relative;
            overflow: hidden;
            transition: all 2s;
        }
        .photo:hover .hidden{
            left: 0;
            transform: scale(1.1);
            box-shadow: 0 15px 30px rgba(0,0,0,.5);
        }
        .photo>img{
            transition: all 2s;
        }
        .photo:hover img{
            transform: scale(1.1);
        }

    </style>
</head>
<body>
<div class="photo">
    <img src="images/4.jpg" width="500px" height="400px" class="img">
    <div class="hidden">
    </div>
</div>
</body>
</html>

显示页面：
在这里插入图片描述
六、CSS3媒体布局（响应式布局）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式布局</title>
    <style>
      .box{
          margin: 0 auto;
      }
      .box>div{
          width: 229px;
          height: 274px;
          background-color: peachpuff;
          float: left;
          margin-right:10px;
      }
        /*pc端*/
        @media screen and (min-width: 992px) {
            .box{
                width: 946px;
            }
            .box>div:last-child{
                margin-right: 0;
            }
        }

    /*ipad端*/
        @media screen  and (min-width:511px ) and (max-width:991px ){
      .box {
          width: 468px;
      }
            .box>div:last-child,.box>div:nth-child(2){
                margin-right: 0;
            }
        .box>div{
            margin-bottom: 10px;
        }
        }

    /* 移动端*/
        @media screen and (max-width: 510px){
           .box{
               width: 307px;
           }
            .box>div{
                width: 307px;
                height: 256px;
                margin-right: 0;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

七、弹性盒子（百度周边）

l123zmj

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二周复习

练习题一、盒子模型（登录窗口）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>QQ登录窗口</title> <style> .box{ width: 450...
复制链接

扫一扫