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".
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">糯米APPa>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>
<div class="topNode">
<a href="#" class="logo">
<img src="img/logo.gif"/>
a>
<div class="topNode_ln">
<a href="#">
北京
a>
div>
<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>
<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">
<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>
<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>
div>
<div class="movie">
<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>
<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">
<div class="moviebanner">
<span class="hotmovie">休闲娱乐span>
<a class="allmovies">查看全部a>
<div class="findmovies">
<a href="#">KTVa>
<span>/span>
<a href="#">足浴按摩a>
<span>/span>
<a href="#">轰趴馆a>
<span>/span>
<a href="#">运动健身a>
div>
div>
<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">已售1436div>
<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">已售1436div>
<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">已售1436div>
<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">已售1436div>
<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">已售1436div>
<div class="money">￥55/人div>
li>
ul>
div>
<div class="movie arder tour">
<div class="moviebanner">
<span class="hotmovie">旅游span>
<a class="allmovies">查看全部a>
div>
<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">
<div class="moviebanner">
<span class="hotmovie">结婚span>
<a class="allmovies">查看全部a>
div>
<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>
<div class="hotshop">
<div class="shop">热门商场div>
div>
<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>