第二周复习

news/2024/10/30 15:29:43/

练习题

一、盒子模型(登录窗口)

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

七、弹性盒子(百度周边)


http://www.ppmy.cn/news/815429.html

相关文章

基于单片机汽车防盗报警的设计与实现

功能介绍 以STM32单片机作为主控系统&#xff1b;LCD1602液晶显示当前温度信息和参数等功能&#xff1b;3个LED指示灯表示&#xff1a;震动指示灯、人体感应指示灯、防盗模式开启指示灯&#xff1b;按键用来开启防盗模式&#xff0c;设置温度上下限&#xff1b;开启防盗后检测到…

以数字化、智能化、可视化为中心,打造智慧交通运维新标杆

交通作为国民经济和社会发展的基础性、先行性产业&#xff0c;在整个社会经济、民生发展中占有举足轻重的地位&#xff0c;随着包括5G基站建设、城际高速铁路和城市轨道交通、大数据中心、工业互联网在内的新基建按下加速键&#xff0c;轨道交通云联网加速实施。在此背景下&…

智能公交带来出行新感受,让城市公共交通变得更“聪明”

智能公交带来出行新感受&#xff0c;让城市公共交通变得更“聪明” ——以厦门公交为例 大家都知道&#xff0c;国内大部分城市交通费用拥堵&#xff0c;严重制约我国城市的经济发展&#xff0c;事实上&#xff0c;和发达国家比&#xff0c;国内城市私家车的保有量并不高&…

腾讯音乐娱乐集团2023校园招聘技术类岗位编程题合集

字符串操作 题解&#xff1a;先变为没出现过的字符&#xff0c;然后在正常的变换 class Solution { public:/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可** 返回满足题意的最小操作数* param str string字符串 给定…

智慧交通产品解决方案-交通地理信息平台

智慧交通产品解决方案-交通地理信息平台 智慧交通产品解决方案-交通地理信息平台1&#xff09;智能交通管控平台2&#xff09;交通地理信息平台3&#xff09;交通信息服务平台4&#xff09;交通运维管理平台5&#xff09;交通信息资源平台 交通地理信息平台平台概述平台特点1&a…

车载小程序为何能成为智能汽车的技术发展趋势

随着社会的发展和人们生活水平的提高&#xff0c;汽车已经不再是纯粹的交通工具&#xff0c;而是成为了人们的第三方空间。人们不仅仅需要一辆车来满足交通需求&#xff0c;更需要一辆智能化的车来提供更多的服务和便利。因此&#xff0c;汽车制造商也开始注重汽车的智能化升级…

​智能交通简介——效益和实例

智能交通和智能城市交通管理正在彻底改变城市处理流动性和应急反应的方式&#xff0c;同时减少城市街道的拥堵。如何实现&#xff1f;通过传感器、先进的通信技术、自动化和高速网络。 从一个地方移动到另一个地方的艺术和科学是我们生活中固有的一部分——不仅仅是今天&#x…

物联网下的智慧交通系统

交通运输业作为国民经济的基础行业涉及面广&#xff0c;与人们的生活密切相关&#xff0c;而这也将成为物联网的主战场。交通运输效率的提升&#xff0c;将很大程度上提高城市的运行效率&#xff0c;大规模提升经济效益。 物联网在城市交通方面的应用将城市交通组成要素&#x…