论坛

标题: 新闻列表日期边框不能包含日期问题 [打印本页]

作者: fufuhari 时间: 2018-7-21 11:10
标题: 新闻列表日期边框不能包含日期问题
老师我按照你的代码写了但是边框不能包含住 02 和2017年4月，2017年4月老是在下面。但是将span标签设置了 line-hight:0:后 2017年4月就在里面了，这个问题花了几个小时才找到，但是还是不清楚为什么我的会有这个问题。图片是我的代码真心求解

[qq]121787173[/qq]

作者: lori棒棒糖 时间: 2018-7-21 17:07
你把所有代码全部复制粘贴上来看下~

作者: fufuhari 时间: 2018-7-23 12:14

lori棒棒糖发表于 2018-7-21 17:07
你把所有代码全部复制粘贴上来看下~

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>深圳市异方科技有限公司</title>
<link href="webstyle.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="header">
<a href="http://www.goodscan.cn/"><img class="logo" src="images/logo-h-h.gif" alt=""></a>
<div class="headerright">
<a href="">首页</a> 丨
<a href="">产品中心</a> 丨
<a href="">新闻中心</a> 丨
<a href="">联系我们</a> 丨
<a href="">关于Goodscan</a> 丨
<a href="">中/EN</a>
</div>
</div>

<div class="nav">
<ul>
<a href=""><li>首页</li></a>
<a href=""><li>关于异方</li></a>
<a href=""><li>产品介绍</li></a>
<a href=""><li>新闻资讯</li></a>
<a href=""><li>视频中心</li></a>
<a href=""><li>技术实力</li></a>
<a href=""><li>服务中心</li></a>
<a href=""><li>人才招聘</li></a>
<a href=""><li>联系我们</li></a>
</ul>
</div>

<div class="banner"></div>

<div class="product">
<div class="tittle">
<h2>产品展示</h2>
<p>product display</p>
</div>
<div class="warp">
<div class="pro-box"><a href=""><img src="images/1.jpg" alt=""><h2>Goodscan100系列</h2><p>移动式手持体积测量，随手拍随手量移动式手持体积测量，随手拍随手量移动式手持体积测量</p></a></div>
<div class="pro-box" style="margin:0 25px"><a href=""><img src="images/2.jpg" alt=""><h2>Goodscan200系列</h2><p>移动式手持体积测量，随手拍随手量移动式手持体积测量，随手拍随手量移动式手持体积测量</p></a></div>
<div class="pro-box"><a href=""><img src="images/3.jpg" alt=""><h2>Goodscan300系列</h2><p>移动式手持体积测量，随手拍随手量移动式手持体积测量</p></a></div>
</div>
</div>

<div class="xinwen">
<div class="tittle">
<h2>新闻展示</h2>
<p>New center</p>
</div>
<div class="xinwenbox">
<div class="video"><img src="images/video.jpg" alt=""></div>
<div class="xinwenlist">
<ul class="xinwenliebiao">
<li><a href=""><div class="time">02<span>2017年4月</span></div>
     <div class="text"> <h4>全球首款手持体积测量PDA上线，异方科技助力物流变革</h4>
<p>展会以“专注体积测量”为主题，正式展出四款于今年自主研发的新一代产品，并提供针对货物测量领域一系列面向不同行业需求的应用场景和...</p>
</div>
</a></li>

<li><a href=""><div class="time">02<span>2017年4月</span></div>
     <div class="text"> <h4>全球首款手持体积测量PDA上线，异方科技助力物流变革</h4>
<p>展会以“专注体积测量”为主题，正式展出四款于今年自主研发的新一代产品，并提供针对货物测量领域一系列面向不同行业需求的应用场景和...</p>
</div>
</a></li>

<li><a href=""><div class="time">02<span>2017年4月</span></div>
     <div class="text"> <h4>全球首款手持体积测量PDA上线，异方科技助力物流变革</h4>
<p>展会以“专注体积测量”为主题，正式展出四款于今年自主研发的新一代产品，并提供针对货物测量领域一系列面向不同行业需求的应用场景和...</p>
</div>
</a></li>
</ul>
</div>
</div>
</div>


<div class="foot">
<img class="footlogo" src="images/logo-h.png" alt="">
<div class="about">深圳市异方科技有限公司是一家高新科技创新型企业，创始人均来自武汉大学测绘学院，其自主研发的Goodscan系列产品，可快速准确地获取规则（非规则）货物的体积、重量、条码等信息。

其中的智能测量算法是软件中主要的核心，其融合了3D测量、计算机视觉、摄影测量等技术，使得货物测量技术达到了行业前列的水准，系统中还可利用大数据分析为物流、电商、商超、仓储、航空货栈等领域提供运费计算、货物摆放（仓库/装车）、装箱推荐等服务。

异方科技致力于将新的人工智能测量技术应用于物流领域，为物流企业提供高效的信息采集服务，以帮助企业达到降低测量成本、提高物流效率、物流智能化等一系列创新和发展的目标。</div>
</div>
<div class="footter">
粤ICP备16042986号-1 © 深圳市异方科技有限公司网站问题反馈点击这里Copyright © 2015 - 2018 异方科技版权所有
</div>

</body>
</html>

CSS

@charset "utf-8";
*{margin: 0;
padding: 0;
}

a{text-decoration: none;}

.header{
width: 1100px;
height: 100px;
margin: 0 auto;

}

.logo{
height: 50px;
margin-top: 22px;
float: left;
}

.headerright{
float: right;
margin-top: 40px;
}

.headerright a{
color: #313131;

}

.headerright a:hover{
color: #FB9C14;
}
.nav{
margin: 0 auto;
height: 58px;
width: 100%;
border-top: 1px solid #989898;
border-bottom: 1px solid #989898;
}
ul{
width: 1100px;
height: 58px;
margin: 0 auto;
list-style: none;

}
li{
float: left;
font-size: 14px;
color: #333;
line-height: 58px;
padding: 0 34px;
/*margin: 0 30px;*/
}
li:hover{
background-color: cornflowerblue;
color: #FFF;
}
.banner{
width:100%;min-width: 1100px;height: 500px;background: url(images/banner1ga.jpg) center;
}
.product{
background-color: aliceblue;
width: 100%;min-width: 1100;
height: 625px;
}
.tittle{
text-align: center;
width: 1100px;
margin: 0 auto;
padding-top:84px;
}
.tittle h2{
font-size: 30px;
background-image: url(images/line.png);
background-repeat: no-repeat;
background-position:center;
}
.tittle p{
font-size: 12px;color: gray;margin-bottom: 40px;
}
.warp{
width: 1100px;
height: 380px;
margin: 0 auto;
background-color: #FFFFFF;
}
.pro-box{
width: 350px;height: 377px;
float:left;
border-bottom: 3px solid #0068b7;
}
.pro-box h2{
font-size: 18px;
color: #333333;
margin: 30px 20px 20px 20px;
}

.pro-box p{
font-size: 14px; color: gray;
margin-left: 20px;
width: 310px;
}
.pro-box:hover{
background-color: #0068b7;
}
.pro-box:hover h2{color: #FFFFFF}
.pro-box:hover p{ color:#FFFFFF; opacity: 0.6;}

.xinwenbox{
width: 1100px;
margin: 0 auto;
height: 275px;
font-size: 0;
}
.video{
width: 410px;
height: 275px;
background-color:limegreen;
float: left;
}
.xinwenlist{
width: 690px;
height: 275px;
float: right;
}
.time{
width: 68px;
height: 68px;
border: 1px solid #00349E;
font-size: 40px;
text-align: center;
float: left;
}
span{
display: block;
font-size: 12px;
line-height: 0;
}
.text{
float: right;
width: 550px;
height: 70px;
margin-left: 20px;
}
.text h4{
font-size: 16px;
line-height: normal;
margin-bottom: 12px;
}
.text p{
font-size: 14px;
line-height: normal;
}
.xinwenliebiao li{
margin-bottom: 33px;}

.foot{
width: 100%;
min-width: 1100px;
height: 315px;
background-color: #4166db;
margin-top: 100px;
position: relative;
}
.footlogo{
position: absolute;
left: 43%;
top:10%;

}
.about{
width: 750px;
height: 300px;
text-align: center;
margin: 0 auto;
padding-top: 140px;
box-sizing: border-box;
font-size: 14px;
color: #FFFFFF;
line-height: 1.5em;
}
.footter{
width: 100%;
min-width: 1100px;
background-color: #001D8F;
height: 50px;
border-bottom: 4px solid #000000;
text-align: center;
font-size: 12px;
line-height: 54px;
color: #D9D9D9;
}

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