自学了一段时间想练习一下，所以照着百度首页做了一个简单页面一开始静态页面出来看起来还蛮正常但是百度的右上角导航条有一个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啊 没有加上面那个侧边栏的时候还正常显示在中间 加了侧边栏后就这样了，但是我的侧边栏是绝对定位 还以为不会影响别的元素的，请大佬帮忙解答，非常感谢
添加回答
举报
0/150
提交
取消