                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /企業(yè)網(wǎng)站綜合布局實(shí)戰(zhàn)

不知哪里設(shè)錯(cuò)，新聞中心 line height 不生效還有這個(gè) more<< 無法居中

代碼如下主要在是news這個(gè)div的上中部分出問題，求大神幫忙看下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標(biāo)題文檔</title>
<link href="css/stylesheet.css"type="text/css"rel="stylesheet" />
<script src="js/setHomeSetFav.js" type="text/javascript"></script>
<script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script>
<script src="js/mf-pattern/mF_fancy.js" type="text/javascript"></script>
<link href="js/mf-pattern/mF_fancy.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
myFocus.set({id:"picBox", time:1.5 ,})
</script>
</head>

<body>
<div class="header">
???? <div class="top_nav">
?? ??? ? <ul>
?? ??? ??? ? <li><a href="#">聯(lián)系我們</a></li>
?? ??? ??? ? <li><a href="#">加入收藏</a></li>
?? ??? ??? ? <li><a href="#">設(shè)為首頁</a></li>
?? ??? ? </ul>
?? ? </div>
</div>

<div class="wrap">
?? ?<div class="logo">
?? ??? ?<div class="logo_left"><img src="images/logo.jpg" alt="慕課網(wǎng)"/></div>
?? ??? ?<div class="logo_right"><img src="images/tel.jpg"? alt="服務(wù)熱線"/>24小時(shí)服務(wù)熱線：<span>123-456-7890</span></div>
?? ?</div>
??? <div class="nav">
????????? <div class="left_nav"></div>
????????? <div class="main_nav">
????????????????? <div class="main_nav_left">
????????????????????????? <ul>
??????????????????????????????? <li><a href="#">首頁</a></li>
??????????????????????????????? <li><a href="#">慕課首頁</a></li>
??????????????????????????????? <li><a href="#">新聞動(dòng)態(tài)</a></li>
??????????????????????????????? <li><a href="#">課程中心</a></li>
??????????????????????????????? <li><a href="#">在線教程</a></li>
??????????????????????????????? <li><a href="#">人才招聘</a></li>
????????????????????????? </ul>
????????????????? </div>
????????????????? <div class="main_nav_right">
????????????????????????? <form action="" method="post">
???????????????????????????? <input type="text"? class="search"/>
????????????????????????? </form>
?????????????????? </div>
???????? </div>
????? <div class="right_nav"></div>
</div>
???????? <div class="ab" id="picBox">
???????????????? <div class="loading"><img src="images/loading.gif" alt="圖片加載中" /></div>
???????????????? <div class="pic">
?????????????????????? <ul>
??????????????????????????? <li><img src="images/ad2.jpg" /></li>
??????????????????????????? <li><img src="images/ad3.jpg" /></li>
??????????????????????????? <li><img src="images/ad4.jpg" /></li>
?????????????????????? </ul>
??????????????? </div>
???????? </div>
</div>
<div class="main">
??? <div class="news">
????????? <div class="title">
???????????????? <h3 class="title_left">新聞列表</h3>
???????????????? <span class="title_right"><a href="#" >More>></a></span>
????? </div>
????? <div class="pic_news">
?????????????????????? <div class="pic_news_left">
?????????????????????? <img src="images/news.jpg" width="113" height="80" /> ?
??????????? </div>
??????? <div class="pic_news_right">
?????????????????????? <h2 ><a href="#">520 慕女神喊你來表白!</a></h2><p>活動(dòng)時(shí)間：5月20日—5月25日<br />獲獎(jiǎng)公布時(shí)間：5月26日<br /><a href="#">Learn More>></a></p>
??????? </div>
???????????????? </div>
??????????????? <div class="news_list">
??????????????????????? <ul>
????????????????????????????? <li><span>2014-06-01</span> <a href="news.html">【慕客訪談用戶篇】“有為屌絲”在路上</a></li>
????????????????????????????? <li><span>2014-06-01</span><a href="news.html">【有獎(jiǎng)活動(dòng)】給父親的三行書信</a></li>
????????????????????????????? <li><span>2014-05-30</span><a href="news.html">《程序猿，請(qǐng)曬出你的童年》活動(dòng)獲獎(jiǎng)公告</a></li>
????????????????????????????? <li><span>2014-05-28</span><a href="news.html" title="aa">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a></li>
?????????????????????? </ul>
????????????? </div>
?????? </div>
</div>
????? <div class="course"></div>
????? <div class="sidebar"></div>
</div>
</body>
</html>

樣式表：

*{
? margin:0;
? padding:0;
? font:12px 微軟雅黑;
}
body{
? background-color: #F5F5F5;
}
ul{
? list-style-type:none;
}
.wrap{
?? ?width:1000px;
?? ?margin:0 auto;
}
.header{
? width:100%;
? background:url(images/top_bg.jpg) repeat-x;
}
.top_nav{
? width:1000px;
? margin:0 auto;
? height:30px;
}
.top_nav li{
? float:right;
? width:70px;
? line-height:30px;
? list-style-image:url(../images/arrow.jpg);
}
.top_nav a:link, .top_nav a:visited{
? color:#8E8E8E;
? text-decoration:none;
}
.top_nav a:hover, .top_nav a:active{
? color:#C00;
? text-decoration:none;
}
.wrap{
? width:1000px;
? margin:0 auto;
}
.logo{
? height:80px;
? background:#fff;
}
.logo_left{
? float:left;
? width:300px;
}
.logo_right{
? float:right;
? width:300px;
? height:28px;
? margin-top:30px;
? color:#8E8E8E;
}
.logo_right img{
? vertical-align:middle;
? margin-right:10px;
}
.logo_right span{
? color:#C00;
? font-size:16px;
? font-family:"微軟雅黑";
}
.nav{
?? ?height:40px;
?? ?width:1000px;
?? ?margin:0 auto;
}
.left_nav{
?? ?width:10px;
?? ?background:url(../images/nav_left.jpg) no-repeat;
}
.main_nav{
?? ?width:980px;
?? ?background:url(../images/nav_bg.jpg) repeat-x;}
.right_nav{
?? ?width:10px;
?? ?background:url(../images/nav_right.jpg) no-repeat;
}
.left_nav, .main_nav, .right_nav{
?? ?height:40px;
?? ?float:left;
?? ?display:inline;
}
.main_nav_left, .main_nav_right{
?? ?float:left;
}
.main_nav_left{
?? ?width:680px;
}
.main_nav_right{
?? ?width:300px;
}
.main_nav_left li{
?? ?float:left;
?? ?width:100px;
?? ?text-align:center;
?? ?line-height:40px;
}
.main_nav_left a:link, main_nav_right a:visited{
?? ?text-decoration:none;
?? ?color:#fff;
?? ?font-size:15px;
?? ?font-family:"微軟雅黑"
}
.main_nav_left a:hover, main_nav_right a:active{
?? ?text-decoration:none;
?? ?color:#CF0;
?? ?font-size:15px;
?? ?font-family:"微軟雅黑"
}
.main_nav_right .search{
?? ?width:200px;
?? ?height:25px;
?? ?margin-top:5px;
?? ?border:#999 1px solid;
?? ?background:url(../images/search.jpg) no-repeat right center;
?? ?background-color:#fff;
?? ?padding-right:25px;
}

.ab{
?? ?height:310px;
??? overflow:hidden;
}
.main{
?? ?width:1000px;
?? ?margin:5px? auto;
?? ?background: #FFF;
}
.news{
?? ?width:340px;
?? ?background:#fff;
}
.course{
?? ?width:410px;
?? ?margin:0 7px;
}
.sidebar{
?? ?width:230px;
?? ?background:red;
}
.news, .course, .sidebar{
?? ?height:250px;
?? ?float:left;
?? ?border:#E8E8E8 1px solid;
}
.title {
?? ?height:35px;
?? ?border-bottom: 2px solid #E8E8E8;
}
.title_left{
?? ?width:70%;
?? ?font-size:15px;
?? ?font-family:"微軟雅黑";
?? ?font-weight:bold;
?? ?color:#786F66;
?? ?float:left;
?? ?line-height:35px;
?? ?padding-left:20px;
}
.title_right {
?? ?width: 20%;
?? ?height:35px;
?? ?text-align:center;
?? ?line-height:35px;
?? ?
}
.title_right a{
?? ?text-decoration:none;
?? ?color:#999;
?? ?font-size:10px;
?? ?font-family:"微軟雅黑"
}
.pic_news {
?? ?height:80px;
?? ?margin-top:10px;
?? ?line-height:20px;
}
.pic_news_left {
?? ?float:left;
?? ?height:85px;
?? ?margin:0 5px;
}
.pic_news_right{
?? ?float:left;
?? ?font:14px 宋體;
}
.pic_news a{
?? ?color:#c00;
??? text-decoration:none;
}

qq_下雨天_2

2015-10-17

源自：企業(yè)網(wǎng)站綜合布局實(shí)戰(zhàn)

關(guān)注問題我要回答

2067

操作

收起

2 回答

Perona 回答被采納 +3 積分
2015-10-18

首先要明白span元素和a元素都是內(nèi)聯(lián)元素。

內(nèi)聯(lián)元素特點(diǎn)：

1、和其他元素都在一行上；

2、元素的高度、寬度及頂部和底部邊距不可設(shè)置；

3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

<span?class="title_right"><a?href="#"?>More&gt;&gt;</a></span>

css樣式

.title_right?{
????width:?20%;
????height:35px;
????text-align:center;
????line-height:35px;

}
.title_right?a{
????text-decoration:none;
????color:#999;
????font-size:10px;
????font-family:"微軟雅黑"
}

那么這里我們要讓它居中顯示，那么就是要讓它寬度可以設(shè)置，那么長(zhǎng)度寬度可以設(shè)置的話也就是要把內(nèi)聯(lián)元素變成行內(nèi)塊元素。即加上display: inline-block;

現(xiàn)在咱們?cè)僦v下這個(gè)line-height和font-size的關(guān)系。首先需要理解line-height的意思，它是css中表示的行高，font-size的意思是字體的大小，如多少px，之間關(guān)系是字體大小越大，那么必然的行高是肯定比較大的。

這里的span元素的字體大小是從父元素那里繼承過來，那么使用line-height很明顯達(dá)不到我們要的效果。而本身a元素已經(jīng)設(shè)置了font-size，那么就應(yīng)該把line-heigh設(shè)置給a元素。

即css樣式如下

.title_right?{
????display:?inline-block;
????width:?20%;
????height:35px;
????text-align:center;
????}
.title_right?a{
????display:?inline-block;
????text-decoration:none;
????color:#999;
????font-size:10px;
????font-family:"微軟雅黑";
????line-height:?35px;
}

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

qq_下雨天_2 提問者

上面的問題已解決，下面是我的疑問，新手求解答，先謝過

2015-10-19 回復(fù) 有任何疑惑可以回復(fù)我~

qq_下雨天_2 提問者
2015-10-19

很感謝，上面這個(gè)問題已經(jīng)解決了，不過還有就是新聞中心 class為news這塊中間的pic news 為什么跟老師那樣設(shè)置，圖片旁邊這塊<p>標(biāo)簽的文字不能夠出現(xiàn)行高，<h2><P>又都是塊級(jí)元素，一直搞不清這個(gè)問題，希望能解答下，下面是代碼
html代碼：
<div class="pic_news"> <img src="images/news.jpg" alt="520 慕女神喊你來表白" width="113" height="77" />
??????? <h2><a href="news.html">520 慕女神喊你來表白！</a></h2>
??????? <p>活動(dòng)時(shí)間：5月20日—5月25日<br />
????????? 獲獎(jiǎng)公布時(shí)間：5月26日<br />
????????? <a href="news.html">Learn More>></a></p>
????? </div>
?css代碼：
.pic_news{
?? ?height:80px;
?? ?line-height:22px;
?? ?margin-top:10px;
}
.pic_news img{
?? ?float:left;
?? ?padding:0 5px;
}
.pic_news a{
?? ?display:inline-block;
?? ?color:#c00;
}

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

Perona

因?yàn)槟阃祽?。你看下你這個(gè)你重置樣式的時(shí)候 *{ margin:0; padding:0; font:12px 微軟雅黑; } 知道font簡(jiǎn)寫屬性包括什么嗎？包括font-style|font-variant |font-weight|font-size/line-height|font-family 通配符*里面雖然沒有明確設(shè)置行高，但是沒設(shè)置它也會(huì)給個(gè)默認(rèn)的值。需要注意的一點(diǎn)，通配符*的權(quán)值比繼承的權(quán)值高，所以p元素執(zhí)行的是通配符的行高。解決的辦法就是把通配符*的font簡(jiǎn)寫拆開來寫。如： font-size:12px;font-family: 微軟雅黑;

2015-10-19 回復(fù) 有任何疑惑可以回復(fù)我~

#2

qq_下雨天_2 提問者回復(fù) Perona

非常感謝，我以后會(huì)更加注意的。

2015-10-19 回復(fù) 有任何疑惑可以回復(fù)我~

#3

Perona 回復(fù) qq_下雨天_2 提問者

不客氣~~

2015-10-19 回復(fù) 有任何疑惑可以回復(fù)我~