不知哪里設錯，新聞中心 line height 不生效還有這個 more<< 無法居中
代碼如下 主要在是news這個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>無標題文檔</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="#">聯系我們</a></li>
?? ??? ??? ? <li><a href="#">加入收藏</a></li>
?? ??? ??? ? <li><a href="#">設為首頁</a></li>
?? ??? ? </ul>
?? ? </div>
</div>
<!--頁面頂端header結束-->
<div class="wrap">
?? ?<div class="logo">
?? ??? ?<div class="logo_left"><img src="images/logo.jpg" alt="慕課網"/></div>
?? ??? ?<div class="logo_right"><img src="images/tel.jpg"? alt="服務熱線"/>24小時服務熱線：<span>123-456-7890</span></div>
?? ?</div><!--頁面logo結束-->
??? <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="#">新聞動態</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><!--nav導航結束-->
???????? <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><!--頁面wrap結束-->
<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>活動時間：5月20日—5月25日<br />獲獎公布時間：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">【有獎活動】給父親的三行書信</a></li>
????????????????????????????? <li><span>2014-05-30</span><a href="news.html">《程序猿，請曬出你的童年》活動獲獎公告</a></li>
????????????????????????????? <li><span>2014-05-28</span><a href="news.html" title="aa">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a></li>
?????????????????????? </ul>
????????????? </div>
?????? </div>
</div><!--news 結束-->
????? <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;
}
2015-10-18
首先要明白span元素和a元素都是內聯元素。
內聯元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
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:"微軟雅黑" }那么這里我們要讓它居中顯示，那么就是要讓它寬度可以設置，那么長度寬度可以設置的話也就是要把內聯元素變成行內塊元素。即加上display: inline-block;
現在咱們再講下這個line-height和font-size的關系。首先需要理解line-height的意思，它是css中表示的行高，font-size的意思是字體的大小，如多少px，之間關系是字體大小越大，那么必然的行高是肯定比較大的。
這里的span元素的字體大小是從父元素那里繼承過來，那么使用line-height很明顯達不到我們要的效果。而本身a元素已經設置了font-size，那么就應該把line-heigh設置給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; }2015-10-19
很感謝，上面這個問題已經解決了，不過還有就是新聞中心 class為news這塊 中間的pic news 為什么跟老師那樣設置，圖片旁邊這塊<p>標簽的文字不能夠出現行高，<h2><P>又都是塊級元素，一直搞不清這個問題，希望能解答下， 下面是代碼
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>活動時間：5月20日—5月25日<br />
????????? 獲獎公布時間：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;
}