課程
/前端開(kāi)發(fā)
/HTML/CSS
/企業(yè)網(wǎng)站綜合布局實(shí)戰(zhàn)
導(dǎo)航欄跟logo欄之間有一段空格是怎么樣回事啊
2017-04-21
源自:企業(yè)網(wǎng)站綜合布局實(shí)戰(zhàn) 3-4
正在回答
在img中設(shè)置display:block或者vertical-align: bottom屬性。就會(huì)完美解決了,原因是img的邊距和父級(jí)的div的baseline是持平的,而baseline默認(rèn)還與div的邊距存在間距
qq_慕娘9483466
nav左浮動(dòng)
還是沒(méi)有解決。咋個(gè)弄呢?
@charset "utf-8";
/* CSS Document */
*
{
margin:0;
padding:0;
font-size:12px;/*表示全局聲明div的邊框外部和元素距離為0*/
}
body{
background: #BBBBBB;/*body背景顏色*/
.top{
width:100%;
height:27px;
background:url(../images/top_bg.jpg) repeat-x;
.top_content{
width:1000px;
margin:0 auto;
.top_content li{/*content下面的li 屬性設(shè)置*/
list-style-image:url(../images/li_bg.gif);
float:right;
line-height:27px;
width:70px;
.top_content a:link,.top_content a:visited{/*content下面的鏈接去掉顏色和下劃線*/
color:#FF0004;
text-decoration:none;
.top_content a:hover,.top_content a:active{/*鼠標(biāo)經(jīng)過(guò)的樣子和點(diǎn)擊不要下劃線*/
color:#FFBE00;
.wrap
{width:1000px;margin:0 auto;}
.logo
{height:80px;background-color:#FFFFFF}
.logo_left
{width:10px;float:left;}
.logo_right
{width:300px;float:right; ?margin-top:30px;height:80px;color:#635353;}
.logo_right img{
vertical-align:middle; margin-right:10px;}
.tel
{font-family:"微軟雅黑"; font-size:16px; color:#FF0027;}
.nav{
height:40px;clear:both;}
.nav_left{width:10px;
height:40px;
background:url(../images/nav_left.jpg) no-repeat;
float:left;}
.nav_mid{
width:980px;
background:url(../images/nav_bg.jpg) repeat-x;
.nav_right{
width:10px;
background:url(../images/nav_right.jpg) no-repeat;
.nav_mid_left,.nav_mid_right{
.nav_mid_left{
width:680px;}
.nav_mid_right{
width:300px;}
.nav_mid_left li
? ? list-style:none;
line-height:40px;
text-align:center;/*文字居中*/
width:80px;
float:left;
.nav_mid_left a:link,.nav_mid_left a:visited{
color: #FFFFFF;
font-size:16px;
font-family:"微軟雅黑";
.nav_mid_left a:hover,.nav_mid_left a:active{
color: #BCE500;
.search_text{
width:190px;
height:25px;
background:url(../images/search.jpg) no-repeat right center ;
margin-top:5px;
background-color:#FFFFFF;
padding-right:25px;
border:1px solid #FFFFFF;
可能有默認(rèn)margin或者padding,試試重置掉
胡鴻遠(yuǎn) 提問(wèn)者
舉報(bào)
本課程重點(diǎn)介紹HTML/CSS實(shí)現(xiàn)常見(jiàn)企業(yè)網(wǎng)站布局的方法
3 回答我的導(dǎo)航欄怎么是這樣的
2 回答導(dǎo)航欄li間距的問(wèn)題
1 回答圖片和導(dǎo)航欄沒(méi)對(duì)齊 怎么回事呢,求大神
3 回答導(dǎo)航欄的制作怎么這樣了???
1 回答導(dǎo)航欄分塊
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2018-06-08
在img中設(shè)置display:block或者vertical-align: bottom屬性。就會(huì)完美解決了,原因是img的邊距和父級(jí)的div的baseline是持平的,而baseline默認(rèn)還與div的邊距存在間距
2017-04-26
nav左浮動(dòng)
2017-04-22
還是沒(méi)有解決。咋個(gè)弄呢?
@charset "utf-8";
/* CSS Document */
*
{
margin:0;
padding:0;
font-size:12px;/*表示全局聲明div的邊框外部和元素距離為0*/
}
body{
background: #BBBBBB;/*body背景顏色*/
}
.top{
width:100%;
height:27px;
background:url(../images/top_bg.jpg) repeat-x;
}
.top_content{
width:1000px;
margin:0 auto;
}
.top_content li{/*content下面的li 屬性設(shè)置*/
list-style-image:url(../images/li_bg.gif);
float:right;
line-height:27px;
width:70px;
}
.top_content a:link,.top_content a:visited{/*content下面的鏈接去掉顏色和下劃線*/
color:#FF0004;
text-decoration:none;
}
.top_content a:hover,.top_content a:active{/*鼠標(biāo)經(jīng)過(guò)的樣子和點(diǎn)擊不要下劃線*/
color:#FFBE00;
text-decoration:none;
}
.wrap
{width:1000px;margin:0 auto;}
.logo
{height:80px;background-color:#FFFFFF}
.logo_left
{width:10px;float:left;}
.logo_right
{width:300px;float:right; ?margin-top:30px;height:80px;color:#635353;}
.logo_right img{
vertical-align:middle; margin-right:10px;}
.tel
{font-family:"微軟雅黑"; font-size:16px; color:#FF0027;}
.nav{
height:40px;clear:both;}
.nav_left{width:10px;
height:40px;
background:url(../images/nav_left.jpg) no-repeat;
float:left;}
.nav_mid{
width:980px;
background:url(../images/nav_bg.jpg) repeat-x;
float:left;}
.nav_right{
width:10px;
height:40px;
background:url(../images/nav_right.jpg) no-repeat;
float:left;}
.nav_mid_left,.nav_mid_right{
float:left;}
.nav_mid_left{
width:680px;}
.nav_mid_right{
width:300px;}
.nav_mid_left li
? ? list-style:none;
line-height:40px;
text-align:center;/*文字居中*/
width:80px;
float:left;
}
.nav_mid_left a:link,.nav_mid_left a:visited{
color: #FFFFFF;
text-decoration:none;
font-size:16px;
font-family:"微軟雅黑";
}
.nav_mid_left a:hover,.nav_mid_left a:active{
color: #BCE500;
text-decoration:none;
font-size:16px;
font-family:"微軟雅黑";
}
.search_text{
width:190px;
height:25px;
background:url(../images/search.jpg) no-repeat right center ;
margin-top:5px;
background-color:#FFFFFF;
padding-right:25px;
border:1px solid #FFFFFF;
}
2017-04-21
可能有默認(rèn)margin或者padding,試試重置掉