自学了一段时间想练习一下,所以照着百度首页做了一个简单页面
一开始静态页面出来看起来还蛮正常
但是百度的右上角导航条有一个onmouseover才触发的侧边栏 就是这个
这是我做这部分的代码
<header> <div class="link"> <a href="JavaScript:">糯米</a> <a href="JavaScript:">新闻</a> <a href="JavaScript:">HAO123</a> <a href="JavaScript:">地图</a> <a href="JavaScript:">视频</a> <a href="JavaScript:">贴吧</a> <a href="JavaScript:">登录</a> <a href="JavaScript:">设置</a> <div id="nav" class="nav_1"> <p>更多产品</p> <div class="nav_2"> <a href="JavaScript:"> <span class="aside_pic aside_pic1"></span> 音乐 </a> <a href="JavaScript:"> <span class="aside_pic aside_pic2"></span> 音乐 </a> <a href="JavaScript:"> <span class="aside_pic aside_pic3"></span> 音乐 </a> <a href="JavaScript:"> <span class="aside_pic aside_pic4"></span> 音乐 </a> <a href="JavaScript:"> <span class="aside_pic aside_pic5"></span> 音乐 </a> </div> </div> </div> </header> <div id="content"> <div class="logo"><img src="bd_logo1.png"></div> <div class="search"> <span></span> <input type="text" id="search_txt"> <input type="submit" id="search_btn" value="百度一下"> </div> <div class="code"> <p><strong>手机百度</strong></p> </div> </div>
这是样式
header{ height:50px; width: 100%; position: relative; } .aside_pic{ display: block; width: 36px; height: 36px; background-image: url(bd_aside.png); margin: 0 auto; } .aside_pic2{ background-position: -36px 0; } .aside_pic3{ background-position: -74px 0; } .aside_pic4{ background-position: -112px 0; } .aside_pic5{ background-position: -144px 0; } .link{ float: right; margin-top: 20px; } .link a{ display: inline-block; margin-right:15px; font-size: 13px; color:#333; font-weight: bold; line-height: 24px; } .nav_1{ padding:0 10px; float: right; position: relative; } .nav_1 p{ width: 60px; /*height: 24px;*/ line-height: 24px; text-align: center; color: white; background-color:dodgerblue; font-size: 13px; margin-bottom: 10px; } .nav_2{ display:none; position: absolute; left: 0; top: 24px; text-align: center; } .nav_1 .nav_2 a{ text-align: center; border-bottom: #dadada 1px solid; padding: 10px; } .nav_1:hover .nav_2{ display: block; background-color: #f6f6f6; } .nav_1:hover p{ color:#666; background-color: #f6f6f6; } #content{ width: 100%; height: 450px; text-align: center; } #content .logo img{ width:300px; } .search{ width: 640px; height: 40px; margin: 25px auto; position: relative; } #search_txt{ width: 540px; height:40px; border: 1px solid #666666; box-sizing: border-box; float: left; } #search_btn{ width: 100px; height: 40px; color: white; text-align: center; line-height: 40px; font-size: 20px; background-color: #3384fe; box-sizing: border-box; float: left; } .search span{ position: absolute; width: 18px; height: 16px; background: url(camera_new_5606e8f.png) no-repeat; left: 510px; top: 11px; }
但是这样之后中间内容区域的logo图片无法居中了
中间内容区域content我也设置了text-align:center啊 没有加上面那个侧边栏的时候还正常显示在中间 加了侧边栏后就这样了,但是我的侧边栏是绝对定位 还以为不会影响别的元素的,请大佬帮忙解答,非常感谢
babyzhn
WorderStart
相关分类