Web前端学习：五 - 练习
四二-四八：baidu糯米
44-48
1、写法1
（1）a.movie1
.Navigation .recommend .listbanner a.movie1{background: url(img/h_1.jpg) no-repeat 63px 9px;}
表示a标签且class为movie1的元素
如：
<a href="#" class="movie1"></a>
（2）a .movie1
.Navigation .recommend .listbanner a .movie1{background: url(img/h_1.jpg) no-repeat 63px 9px;}
表示a标签下，有class为movie1的元素
如：
<a href="#"><span class="movie1"></span>
</a>
2、写法2：
class=“usernode passnode”:
style里面passnode这里没有对元素宽高这些进行设置，只是对背景元素进行修饰。那class="usernode passnode"这种写法，先调用的前面usernode的style对大体上进行一些修饰，然后有些不同的地方比如背景，再调用passnode的style进行覆盖。
<div class="usernode passnode".<input type="password” placeholder="请输入密码”/>
</div>
<style type="text/css">
.login .usernodef{height: 80px; width: 526px;margin: auto;border-bottom: 3px solid #dbdbdb;background: url("img/user_login.gif") no-repeat 17px 3apx ;}
.login .passnodef{background: ur1("img/pass login.gif") no-repeat 17px 30px;}
</style>
与class中的名称前后，无关，代码一行一行执行，只看代码先后顺序
3、图片下3像素bug：
当图片不加浮动（float: left; ），有font-size:进行有时会出现图片下面有部分空隙的现象，叫图片下3像素bug。
解决方法1：
该图片加上浮动
解决方法2：
父元素设置font-size:0，但是怎样会影响父级下所有font-size:，所有一般使用方法1
具体代码：
<!DOCTYPE HTML>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">*{margin: 0; padding: 0; list-style: none; text-decoration: none;} /*banner start 头部*/.banner{width: 100%; height: 40px; background: #f2f2f2;}.banner .banner_con{width: 1217px; height: 100%; margin: 0 auto;}.banner .banner_con ul{float: left; height: 100%; line-height: 40px;}.banner .banner_con ul li{font-size: 14px; color: #666666; float: left;margin-right: 22px;}.banner .banner_con ul li a{text-decoration: none; color: #666666}.banner .banner_con ul li a .login{color: #a98239;}.banner .rightNode{float: right; height: 100%; line-height: 40px; text-align: center;}.banner .rightNode li{float: left; font-size: 14px; color: #666666; height: 100%;margin-left: 22px;}.banner .rightNode li a{text-decoration: none; color: #828282}.banner .rightNode li .down{background: url(img/s_1.gif) no-repeat 57px center;padding-right: 9px;}.banner .rightNode .line{width: 1px; height: 14px; background: black;margin-top: 14px;}/*banner end*//*topNode start 输入框*/.topNode{width: 1218px; height: 111px; margin: 0 auto; }.topNode .logo{float: left; margin-top: 26px;}.topNode .topNode_ln{width: 67px; height: 17px; line-height: 17px;float :left; font-size: 16px;text-indent: 18px; margin: 44px 0 0 40px;background: url(img/left_node.gif) no-repeat left top;}.topNode .topNode_ln a{color: #232324;padding-right: 16px;background:url(img/right_node.gif) no-repeat 36px center;}.topNode .topNode_center{width: 580px; height: 100%; float: left;margin-left: 74px;}.topNode .topNode_center .search{width: 100%; height: 41px; float: left;margin-top: 25px;}.topNode .topNode_center .search .searchleft{width: 467px; height: 39px; float: left;border: 1px solid #dfcca7; border-right: none;}.topNode .topNode_center .search .searchleft .left_two{width: 467px; height: 37px; float: left;border: 1px solid #a97310 ; border-right: none;}.topNode .topNode_center .search .searchleft .left_two input{float: left;width: 454px; height: 35px;border: 1px solid #dfcca7; border-right: none;outline: none;padding-left: 12px;}.topNode .topNode_center .search .searchTo{width: 111px; height:100%; float: left;background: #c9a156; color: white;text-align: center; line-height: 39px;border-top-right-radius: 1px; ;}.topNode .topNode_center .search_ul{float: left; height: 14px; line-height: 14px;margin: 9px 0 0 2px; }.topNode .topNode_center .search_ul li{float: left; }.topNode .topNode_center .search_ul li a{color: #adadad; font-size: 14px; margin-right: 17px;}.topNode .topNode_right{width: 149px; height: 37px; border: 2px solid #f2ebde;float: left; margin: 25px 0 0 12px;background:#fff8eb;}.topNode .topNode_right li{height: 100%; width: 48px;float: left;}.topNode .topNode_right li a{width: 100%; height: 100%; float: left;}.topNode .topNode_right li.t1{width: 49px;}.topNode .topNode_right li.t1 a{background: url(img/t_1.gif) no-repeat center;}.topNode .topNode_right li.t2 a{background: url(img/t_2.gif) no-repeat center;}.topNode .topNode_right li.t3 a{background: url(img/t_3.gif) no-repeat center;}.topNode .topNode_right .line{width: 2px; height: 23px; background: #efe5d1;margin: 7px 0 0 auto;}/*topNode end*//*Navigation start 导航*/.Navigation{width: 1218px; height: 430px; margin: 0 auto;}.Navigation .classify{height: 100%; width: 235px; float: left;}.Navigation .recommend{height: 100%; width: 983px; float: left;}.Navigation .classify .all{height: 44px; width: 100%; background: url(img/top_1.jpg) no-repeat 198px center , #d2a95f;float: left; line-height: 44px;font-size: 17px; color: white; text-indent: 17px;}.Navigation .classify .part{width: 100%; height: 386px; background: #313131;float: left;}.Navigation .classify .part .listNode li{float: left;height: 15px; line-height: 15px; width: 100%;margin-top: 18px; margin-bottom: 15px;}.Navigation .classify .part .listNode li .bigtext{float: left; margin-left: 17px;color: white; }.Navigation .classify .part .listNode li .smalltext{float: right; margin-right: 17px; font-size: 13px;color: white; }.Navigation .recommend .listbanner{width: 100%; height: 42px; border-bottom: 2px solid #b89253;float: left;}.Navigation .recommend .listbanner li{float: left;height: 100%; line-height: 42px;}.Navigation .recommend .listbanner li a{float: left; color:#141414;padding: 0 30px; height: 100%;}.Navigation .recommend .listbanner a.move{background: url(img/s_1.jpg) no-repeat 63px center;}.Navigation .recommend .listbanner a.movie1{background: url(img/h_1.jpg) no-repeat 63px 9px;}.Navigation .recommend .picNode{float: left;height: 374px; width: 100%;margin-top: 12px;}.Navigation .recommend .picNode a{float: left;}.Navigation .recommend .picNode a.p1{margin-left: 12px;}.Navigation .recommend .picNode a.p2{margin: 0 0 12px 12px; height: 165px;}.Navigation .recommend .picNode a.p3{margin-left: 12px;}/*Navigation end*//*movie start 电影*/.movie{width: 1218px; height: 430px; margin: 0 auto;border-bottom: 1px solid black;margin-top: 49px;}.movie .moviebanner{height: 24px; width: 100%;}.movie .moviebanner .hotmovie{float: left; height: 24px; line-height: 24px;font-weight: bold; font-size: 24px; color: #1d1d1d;}.movie .moviebanner .findmovies{float: right; height: 33px; line-height: 33px;margin-right: 34px;}.movie .moviebanner .findmovies a{font-size:13px ; color: #191919;}.movie .moviebanner .allmovies{float: right; font-size: 13px; color: #191919;line-height: 33px; padding-right: 12px;background: url(img/right_s.jpg) no-repeat 55px center;}.movie .movies{width: 100%; height: 358px;margin-top: 23px; float: left;}.movie .movies li{float: left;margin-right: 25px;height: 100%; width: 182px;}.movie .movies .movieslast{margin-right: 0;}.movie .movies li p{width: 100%; height: 54px; text-align: center; line-height: 54px;font-size: 18px; float: left;}.movie .movies li a{width: 120px; height: 33px; border: 2px solid #c9a66b;text-align: center; line-height: 33px; color:#c9a66b;float: left; font-size: 13px; margin-left: 28px;border-radius: 1px;}/*movie :end*//*arder :start 休闲娱乐*/.arder{height: 390px;}.arder .movies li{width: 223px; margin-right: 25px;}.arder .movies li p{height: 18px; line-height: 18px; font-size: 18px;text-align: left; margin-top: 22px; margin-bottom: 10px;}.arder .movies li .discuss{height: 13px; line-height: 13px; font-size: 13px;float: left;}.arder .movies li .discuss ol{float: left; height: 13px;}.arder .movies li .discuss ol li{width: 13px; height: 13px; float: left;background: url(img/start.jpg) no-repeat ;margin-left: 0; margin-right: 3px;}.arder .movies li .discuss ol li.half{background: url(img/start_2.jpg) no-repeat;}.arder .movies li .discuss span{float: right; color: #363636;}.arder .movies li .number{width: 217px; height: 14px; float: left;border-left: 1px solid #e9e9e9;margin-left: 5px; margin-top: 14px; text-align: right;color: #8d8d8d; font-size: 14px; line-height: 14px;}.arder .movies li .money{height: 14px; line-height: 14px; float: left;font-size: 14px; color: #595959;text-align: left; margin-top: 15px;}/*arder :end*//*tour :start 旅游*/.tour{height: 412px; margin-top: 46px;}.tour .destination{height: 340px; width: 100%; margin-top: 23px;}.tour .destination li{width: 388px; float: left; height: 340px;margin-right: 22px;}.tour .destination li.last{margin-right: 0;}/*tour :end*//*marry start 结婚*/.marry .destination li.last a{float: left; height: 159px;}.marry .destination li.last a.lasta{margin-bottom: 25px;}/*marry end*//*shop start 商场*/.hotshop{width: 1218px; height: 109px;border-bottom: 1px solid #e9e9e9;position: relative; margin: 0 auto;}.hotshop .shop{height: 46px; line-height: 46px;font-size: 16px;position: absolute;bottom: 0px;border-bottom: 1px solid #4d4d4d;}.shopname{width: 1218px; height: 277px; margin: 0 auto; }.shopname ul{float: left; width: 243px; height: 100%;}.shopname ul li{height: 13px; line-height: 13px; font-size: 13px;margin-top: 23px;}.shopname ul li a{color: #4d4d4d;}.shopname ul li.first{margin-top: 34px;}/*shop :end*//*footer start 尾部*/.footer{height: 290px; background: #f2f2f2;}.footer .foot{width: 1218px; height: 100%; margin: 0 auto;}.footer .foot ul{width: 243px; height: 224px; float: left;}.footer .foot ul li{height: 13px; line-height: 13px; font-size: 13px;margin-top: 21px; float: left; width: 100%;}.footer .foot ul li a{color: #4d4d4d;}.footer .foot ul li.first{height: 16px; font-weight: bolder; margin-top: 47px; margin-bottom: 7px;}.footer .foot ul li.last a{width: 120px;height: 33px;border: 2px solid #c9a66b;text-align: center;line-height: 33px;float: left; color:#c9a66b; font-size: 13px; border-radius:1px;}.final{height: 66px; line-height: 66px;font-size: 14px; color:#8a8a8a;text-indent: 520px; float: left;background: url(img/ga.jpg) no-repeat 490px center;}</style></head><body><!--一：头部--><div class="banner"><div class="banner_con"><ul><li>Hi！欢迎来到百度糯米</li><li><a href="#" class="login">请登录</a></li><li><a href="#">免费注册</a></li></ul><ol class="rightNode"><li><a href="#">个人中心</a></li><li><a href="#" class="down">最近浏览</a></li><li class="line"></li><li><a href="#" class="down">糯米APP</a></li><li class="line"></li><li><a href="#" class="down">我是商家</a></li><li class="line"></li><li><a href="#">帮助中心</a></li><li><a href="#">食品安全</a></li></ol></div></div><!--二；输入框--><!--输入框-1-logo+定位--><div class="topNode"><a href="#" class="logo"><img src="img/logo.gif"/></a><div class="topNode_ln"><a href="#">北京</a></div><!--输入框-2-输入框，搜索栏--><div class="topNode_center"><div class="search"><div class="searchleft"><div class="left_two"><input placeholder="搜索商家/地点" /></div></div><a href="#" class="searchTo">搜索</a></div><ul class="search_ul"><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><!--输入框-3-右侧按钮--><ul class="topNode_right"><li class="t1"><a href="#"></a></li><li class="line"></li><li class="t2"><a href="#"></a></li><li class="line"></li><li class="t3"><a href="#"></a></li></ul></div><!--三：导航--><div class="Navigation"><!--导航-1-分类--><div class="classify"><div class="all">全部分类</div><div class="part"><ul class="listNode"><li><a href="#"><span class="bigtext">酒店</span></a><span class="smalltext">北京/上海/广州</span></li><li><span class="bigtext">旅游</span><span class="smalltext">目的地攻略/行程计划</span></li><li><span class="bigtext">电影</span><span class="smalltext">看影片/找影院</span></li><li><span class="bigtext">休闲娱乐</span><span class="smalltext">KTV/温泉洗浴</span></li><li><span class="bigtext">结婚</span><span class="smalltext">婚纱摄影/婚庆服务</span></li><li><span class="bigtext">生活服务</span><span class="smalltext">配镜/鲜花</span></li><li><span class="bigtext">美食</span><span class="smalltext">小吃快餐/自助餐/火锅</span></li><li><span class="bigtext">丽人</span><span class="smalltext">美发/美容SPA/美甲</span></li></ul></div></div><!--导航-2-推荐--><div class="recommend"><ul class="listbanner"><li><a href="#">首页</a></li><li><a href="#">酒店</a></li><li><a href="#" class="move">出行</a></li><li><a href="#" class="movie1">电影</a></li><li><a href="#">结婚</a></li><li><a href="#">外卖</a></li></ul><div class="picNode"><a href="#" class="p1"><img src="img/p_1.jpg"/></a><a href="#" class="p2"><img src="img/p_2.jpg"/></a><a href="#" class="p3"><img src="img/p_3.jpg"/></a></div></div><!--导航-3-图片--></div><!--四：电影--><div class="movie"><!--电影-1-排头--><div class="moviebanner"><span class="hotmovie">热映电影</span><a class="allmovies">查看全部</a><div class="findmovies"><a href="#">看影片</a><span>/</span><a href="#">找影院</a><span>/</span><a href="#">看票房</a></div></div><!--电影-2-内容排版--><ul class="movies"><li><img src="img/image_1.jpg"/><p>复仇者联盟：终局...</p><a href="#">选座购票</a></li><li><img src="img/image_2.jpg"/><p>大侦探皮卡丘</p><a href="#">选座购票</a></li><li><img src="img/image_3.jpg"/><p>何以为家</p><a href="#">选座购票</a></li><li><img src="img/image_1.jpg"/><p>一个母亲的复仇</p><a href="#">选座购票</a></li><li><img src="img/image_2.jpg"/><p>进京城</p><a href="#">选座购票</a></li><li class="movieslast"><img src="img/image_3.jpg"/><p>罗马</p><a href="#">选座购票</a></li></ul></div><!--五：娱乐--><div class="movie arder"><!--娱乐-1-排头--><div class="moviebanner"><span class="hotmovie">休闲娱乐</span><a class="allmovies">查看全部</a><div class="findmovies"><a href="#">KTV</a><span>/</span><a href="#">足浴按摩</a><span>/</span><a href="#">轰趴馆</a><span>/</span><a href="#">运动健身</a></div></div><!--娱乐-2-内容排版--><ul class="movies"><li><img src="img/tu_1.jpg""/><p>东丽温泉游泳馆</p><div class="discuss"><ol><li></li><li></li><li></li><li></li><li class="half"></li></ol><span>119条评论</span></div><div class="number">已售1436</div><div class="money">￥55/人</div></li><li><img src="img/tu_1.jpg""/><p>东丽温泉游泳馆</p><div class="discuss"><ol><li></li><li></li><li></li><li></li><li class="half"></li></ol><span>119条评论</span></div><div class="number">已售1436</div><div class="money">￥55/人</div></li><li><img src="img/tu_1.jpg""/><p>东丽温泉游泳馆</p><div class="discuss"><ol><li></li><li></li><li></li><li></li><li class="half"></li></ol><span>119条评论</span></div><div class="number">已售1436</div><div class="money">￥55/人</div></li><li><img src="img/tu_1.jpg""/><p>东丽温泉游泳馆</p><div class="discuss"><ol><li></li><li></li><li></li><li></li><li class="half"></li></ol><span>119条评论</span></div><div class="number">已售1436</div><div class="money">￥55/人</div></li><li class="movieslast"><img src="img/tu_1.jpg""/><p>东丽温泉游泳馆</p><div class="discuss"><ol><li></li><li></li><li></li><li></li><li class="half"></li></ol><span>119条评论</span></div><div class="number">已售1436</div><div class="money">￥55/人</div></li></ul></div><!--六：旅行--><div class="movie arder tour"><!--旅行-1-排头--><div class="moviebanner"><span class="hotmovie">旅游</span><a class="allmovies">查看全部</a></div><!--旅行-2-内容排版--><ul class="destination"><li><a href="#"><img src="img/f_1.jpg"/></a></li><li><a href="#"><img src="img/f_2.jpg"/></a></li><li class="last"><a href="#"><img src="img/f_3.jpg"/></a></li></ul></div></div><!--七：结婚--><div class="movie arder tour marry"><!--结婚-1-排头--><div class="moviebanner"><span class="hotmovie">结婚</span><a class="allmovies">查看全部</a></div><!--结婚-2-内容排版--><ul class="destination"><li><a href="#"><img src="img/f_1.jpg"/></a></li><li><a href="#"><img src="img/f_2.jpg"/></a></li><li class="last"><a href="#" class="lasta"><img src="img/f_4.jpg"/></a><a href="#"><img src="img/f_5.jpg"/></a></li></ul></div></div><!--八：商场--><!--商场-1-排头--><div class="hotshop"><div class="shop">热门商场</div></div><!--商场-1-商场大全--><div class="shopname"><ul><li class="first"><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><ul><li class="first"><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><ul><li class="first"><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><ul><li class="first"><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><ul><li class="first"><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="footer"><div class="foot"><ul><li class="first">用户帮助</li><li><a href="#">常见团购问题</a></li><li><a href="#">开放API</a></li></ul><ul><li class="first">手机百度助手</li><li><a href="#">百度糯米触屏版</a></li><li><a href="#">下载手机版</a></li></ul><ul><li class="first">商务合作</li><li><a href="#">友情链接</a></li><li><a href="#">市场合作</a></li></ul><ul><li class="first">公司信息</li><li><a href="#">关于百度糯米</a></li><li><a href="#">百度糯米新浪微博</a></li><li><a href="#">业务投诉</a></li></ul><ul><li class="first">400-9216-666</li><li><a href="#">周一至周日 9:00-22:00</a></li><li><a href="#">客服电话 免长途费</a></li><li class="last"><a href="#">手机专项优惠</a></li></ul><div class="final">京公网安备 11000002000001号</div></div></div></body>
</html>