第二周复习

练习题

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

<!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.cssbody{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.cssa{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>