Web前端学习：四 - 练习
三九–四一：百度页面制作
1、左右居中：
text-align: center;
2、去掉li默认的状态
list-style: none;
li中有的有点，有的有序，此代码去掉默认状态
3、伪类：hovar
一般显示为color: #0f0e0f，
当鼠标接触时显示color: #071ac8;
.top ul li a{font-size: 12px; color: #0f0e0f;}
.top ul li a:hover{color: #071ac8;}
4：鼠标显示效果
cursor: pointer
效果：鼠标接触此标签时，以类似在标签a中的显示形式一致。改变接触时鼠标样式
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">*{margin: 0; padding: 0; list-style: none;}.top{width: 100%; height: 60px;}.top ul{float: right; height: 100%; line-height: 60px; }.top ul li{float: left; margin: 0 10px;}.top ul li a{font-size: 12px; color: #0f0e0f;}.top ul li a:hover{color: #071ac8;}.top .more{width: 60px; height: 24px; line-height: 24px; text-align: center;font-size: 13px; color: white; background: #1076ff;float: right; margin-left: 14px; margin-top: 18px; margin-right: 12px;}.center{width: 640px; height: 168px;margin: 65px auto 0 ; text-align: center;}.center .serch{width: 100% ; height: 36px;margin-top: 16px;}.center .serch .left{width: 539px; height: 34px; float: left;border: 1px solid #3286ff; border-right: none;}.center .serch .right{width: 100px; height: 100%; background: #3286ff;float: left; text-align: center; line-height: 36px; color: white;cursor: pointer; font-size: 15px;}.center .serch .left input{width: 460px ; height: 100% ;float: left; border: none; outline: none; text-indent: 10px;}.center .serch .left .audio{width: 28px; height: 100%;float: left; text-align: center; margin-top:7px;}.center .serch .left .one{width: 1px; height: 14px; background: #191919;float: left;margin-top: 10px;}.center .serch .left .photo{height: 100%; width: 40px;float: left; text-align: center; margin-top: 7px;}.bottom{width: 100%; height: 201px;position: absolute; bottom:0 ; text-align:center; }.bottom .bd{font-size: 12px; color: #545454; display: block;}.bottom ul{height: auto; margin-top: 25px;}.bottom ul li{display: inline; margin: 0 12.5px; height: 12px;}.bottom ul li a{font-size: 12px; color:#91908f;}.bottom .bottomUI{margin-top: 11px;}.bottom .bottomUI li{font-size: 12px; color:#91908f; margin: 0 0px;}.bottom .bottomUI .lasta{margin-right: 22px; background: url(img/l_1.gif) no-repeat 98px;padding-right: 17px;}.bottom .bottomUI .lastb{background: url(img/l_2.gif) no-repeat 170px;padding-right: 17px;}</style></head><body><div class="top"><div class="more">跟多产品</div><ul><li><a href="#"><b>新闻</b></a></li><li><a href="#"><b>hao123</b></a></li><li><a href="#"><b>地图</b></a></li><li><a href="#"><b>视频</b></a></li><li><a href="#"><b>贴吧</b></a></li><li><a href="#"><b>学术</b></a></li><li><a href="#"><b>登录</b></a></li><li><a href="#"><b>设置</b></a></li></ul></div><div class="center"><a href="#"><img src="img/logo.gif"/></a><div class="serch"><div class="left"><input /><div class="audio"><a href="#"><img src="img/y_1.gif"/></a></div><div class="one"></div><div class="photo"><a href="@"><img src="img/y_2.gif"/></a></div></div><div class="right">百度一下</div></div></div><div class="bottom"><img src="img/ewm.gif" /><span class="bd">百度</span><ul ><li><a href="#">把百度设为首页</a></li><li><a href="#">关于百度</a></li><li><a href="#">About Baidu</a></li><li><a href="#">百度推广</a></li></ul><ul class="bottomUI"><li>©2019</li><li>Baidu</li><li><a href="#">使用百度前必读</a></li><li><a href="#">意见反馈</a></li><li class='lasta'>京ICP证030173号</li><li class='lastb'>京公网安备11000002000001号</li></ul></div></body>
</html>
效果：
四二–四八：百度糯米
42–43：头部+输入框
<!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;}</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><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></body>
</html>预览：
