论坛

标题: 新闻中心模块效果总是出不来，跪求老师和大神指教 [打印本页]

作者: 惠太后 时间: 2018-4-17 17:21
标题: 新闻中心模块效果总是出不来，跪求老师和大神指教
效果显示如下：

[attach]127215[/attach]

源码：

<div class="news">
<div class="title">
<h2>新闻中心</h2>
<p>news center</p>
</div>
  <div class="wrap">
<div class="video"><img src="images/video.jpg"></div>
  <ul class="list">
  <li>
   <a href="#">
   <div class="time">
      02<span>2017年4月</span>
   </div>
   <div class="content">
   <h3>青海高端盐湖科技有限公司董事长视察工地及水源地</h3>
   <p>青海高端盐湖科技有限公司董事长视察工地及水源地，了解生产情况就安全生产现场作出重要指示。会议上听取各部门汇报总结并作出战略指..</p>
   </div>
   </a>
  </li>
  <li>
   <a href="#">
   <div class="time">
      30<span>2017年3月</span>
   </div>
   <div class="content">
   <h3>中国钾肥进口商与PotashCorp达成价格协议</h3>
   <p>4月16日 Potash Corporation of Saskatchewan Inc.（以下简称 PotashCorp）宣布，面向萨斯喀彻尔省钾肥生产商的海外行销公司 Canpote...</p>
   </div>
   </a>
  </li>
  <li>
   <a href="#">
   <div class="time">
      21<span>2017年3月</span>
   </div>
   <div class="content">
   <h3>钾肥简介以及主要的作用</h3>
   <p>钾肥全称钾素肥料。以钾为主要养分的肥料，植物体内含钾一般占干物质重的0.2%~4.1%，仅次于氮。钾在植物生长发育过程中，参与60种以上...</p>
   </div>
   </a>
  </li>
  </ul>
  </div>
</div>

CSS样式如下：

.news {
width: 100%;
min-width: 1100px;
height: 370px;
margin:80px auto;
}
.news .title {
text-align: center;
}
.news .title h2 {
font-size: 30px;
font-weight: 400;
color: #333333;
background: url(../images/titleLing.png) no-repeat center;/*透明的线，需要设置不重复和居中显示*/
}
.news .title p {
text-transform: uppercase;
color: #cdcdcd;
font-size: 12px;
}
.news .wrap {
margin-top: 40px;

}
.news .video {
float: left;

}
.news .list {
float: right;
width: 640px;/*左边video的宽度是410px,410+640=1050px,说明两个块之间还有50px的间隔*/

}
.news li {
height: 70px;
margin-bottom: 30px;
}
.news .time {
width: 68px;
height: 68px;
float: left;
color: #0068b7;
text-align: center;
border: 1px solid #0a8fc8;
font-size: 40px
}
.news span {
display: block;
font-size: 12px;
}

.news .content{ float:right; width:550px;}
.news .content h3{ font-size:16px; color:#333; font-weight:400;}
.news .content p{ font-size:14px; color:#a1a1a1; margin-top:10px; text-align:justify;/*两端对齐*/}
.news li:hover h3{ color:#0068b7}

作者: 惠太后 时间: 2018-4-17 17:22
效果图如图显示：

作者: 懒兔兔 时间: 2019-8-2 02:12
news的css不对，宽度不是100%，而是1100px，不用设最小宽度

欢迎光临论坛 (http://bbs.qinxue.com/)