Cái block hotnews đẹp quá mọi người nhưng mỗi tội không hiển thị ảnh bài viết và không hiển thị không phù hợp trên giao diện mobile.
Bạn nào chỉnh sửa giúp mình hiển thị phù hợp trên mobile hoặc cho nó không hiện trên mobile mà chỉ hiện trên PC cũng được.
EWRblock_HotNews:
EWRblock_HotNews.css
Bạn nào chỉnh sửa giúp mình hiển thị phù hợp trên mobile hoặc cho nó không hiện trên mobile mà chỉ hiện trên PC cũng được.
EWRblock_HotNews:
Mã:
<xen:require css="message_user_info.css" />
<xen:require css="bb_code.css" />
<xen:require css="EWRblock_HotNews.css" />
<div id="hotNews">
<div class="hot_news">
<xen:foreach loop="$HotNews" value="$news" i="$i">
<xen:if is="{$i}==1">
<div class="item type1 fade">
<div class="img">
<span class="anhhao">
<a href="{xen:link forums, $news}" title="{$news.node_title}" >{$news.node_title}</a>
<br /><span class="aut"><a href="{xen:link members, $news}" class="username">{$news.username}</a></span>
</span>
<xen:if is="{$news.promote_icon} != 'disabled'">
<xen:if hascontent="true">
<xen:contentcheck>
<xen:if is="{$news.attach}">
<a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></a>
<xen:elseif is="{$news.medio}" />
<div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
<a href="{xen:link 'full:media/popout', $news.medio}" class="OverlayTrigger"><img src="styles/8wayrun/EWRmedio_play.png" width="160" height="90" /></a>
</div>
<xen:elseif is="{$news.image}" />
<a href="{xen:link threads, $news}"><img src="{$news.image}" alt="{$news.image}" /></a>
<xen:else />
<a href="{xen:link threads, $news}"><img src="http://hanhtrinhso.com/img/news.jpg" alt="{$news.title}" /></a>
</xen:if>
</xen:contentcheck>
</xen:if>
</xen:if>
</div>
<div class="tieude">
<h3><a href="{xen:link threads, $news}" class="newsTitle">{$news.title}</a></h3>
</div>
</div>
<div class="clearFix"></div>
<xen:elseif is="{$i}>=2 && {$i}<=3" />
<div class="item type2 nofade">
<div class="img">
<xen:if is="{$news.promote_icon} != 'disabled'">
<xen:if hascontent="true">
<xen:contentcheck>
<xen:if is="{$news.attach}">
<a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></a>
<xen:elseif is="{$news.medio}" />
<div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
<a href="{xen:link 'full:media/popout', $news.medio}" class="OverlayTrigger"><img src="styles/8wayrun/EWRmedio_play.png" width="160" height="90" /></a>
</div>
<xen:elseif is="{$news.image}" />
<a href="{xen:link threads, $news}"><img src="{$news.image}" alt="{$news.image}" /></a>
<xen:else />
<a href="{xen:link threads, $news}"><img src="http://hanhtrinhso.com/img/news.jpg" alt="{$news.title}" /></a>
</xen:if>
</xen:contentcheck>
</xen:if>
</xen:if>
</div>
<div class="tieude">
<h3><a href="{xen:link threads, $news}" class="newsTitle">{$news.title}</a></h3>
</div>
</div>
<xen:elseif is="{$i}>=4 && {$i}<=6" />
<div class="item type3 nofade">
<div class="img">
<span class="anhhao"><span class="tthong">{$news.node_title}</span> </span>
<xen:if is="{$news.promote_icon} != 'disabled'">
<xen:if hascontent="true">
<xen:contentcheck>
<xen:if is="{$news.attach}">
<a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></a>
<xen:elseif is="{$news.medio}" />
<div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
<a href="{xen:link 'full:media/popout', $news.medio}" class="OverlayTrigger"><img src="styles/8wayrun/EWRmedio_play.png" width="160" height="90" /></a>
</div>
<xen:elseif is="{$news.image}" />
<a href="{xen:link threads, $news}"><img src="{$news.image}" alt="{$news.image}" /></a>
<xen:else />
<a href="{xen:link threads, $news}"><img src="http://hanhtrinhso.com/img/news.jpg" alt="{$news.title}" /></a>
</xen:if>
</xen:contentcheck>
</xen:if>
</xen:if>
</div>
<div class="tieude">
<h3><a href="{xen:link threads, $news}" class="newsTitle">{$news.title}</a></h3>
</div>
</div>
<div class="clearFix"></div>
</xen:if>
</xen:foreach>
</div>
</div>EWRblock_HotNews.css
Mã:
.giaitri4u
{position: absolute;
top:0px;
background: url(rgba.php?r=0&g=206&b=209&a=153); background: rgba(0,206,209,0.6); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#9900CED1,endColorstr=#9900CED1);
font-size: 11px;
color: #fff;
padding: 3px 5px;
right:0px;
}
.anhhao
{position: absolute;
background: url(rgba.php?r=0&g=0&b=0&a=76); background: rgba(0,0,0,0.3); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
top: 7px;
font-size: 13px;
color: #fff;
padding: 3px 5px;
right:2px;
float: right;}
.aut {
background: transparent url(/img/icon/post/play.png) no-repeat center left;
padding-left: 16px;
font-size: 11px;
color: gray;
}
.img .tthong {
background: none !important;
border: none;
color:white;
font-size:13px;
font-weight:normal;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
-webkit-border-radius: 0px; -moz-border-radius: 0px; -khtml-border-radius: 0px; border-radius: 0px;
display: inline-block;}
.img .prefix {
background: none !important;
border: none;
color:white;
font-size:13px;
font-weight:normal;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
-webkit-border-radius: 0px; -moz-border-radius: 0px; -khtml-border-radius: 0px; border-radius: 0px;
display: inline-block;}
#hotNews{
float: center;
margin-top: 5px;
margin-bottom: 5px;
width: 100%;
height: 100%;
}
.hot_news {
margin-top: 0px;
-webkit-box-shadow: 0 0 5px #b8b8b8;
-moz-box-shadow: 0 0 5px #b8b8b8;
-khtml-box-shadow: 0 0 5px #b8b8b8;
-webkit-box-shadow: 0 0 5px #b8b8b8;
-moz-box-shadow: 0 0 5px #b8b8b8;
-khtml-box-shadow: 0 0 5px #b8b8b8;
-webkit-box-shadow: 0 0 5px #b8b8b8;
-moz-box-shadow: 0 0 5px #b8b8b8;
-khtml-box-shadow: 0 0 5px #b8b8b8;
-webkit-box-shadow: 0 0 5px #b8b8b8; -moz-box-shadow: 0 0 5px #b8b8b8; -khtml-box-shadow: 0 0 5px #b8b8b8; box-shadow: 0 0 5px #b8b8b8;
background: #fff;
float: left;
width: 677px;
height: 414px;
overflow: hidden;
}
.hot_news a {font-weight: bold;color: #FFFFFF;}
.hot_news .item {
float: left;
padding: 2px 2px 0;
position: relative;
}
.hot_news .ud {
float: left;
padding: 2px 1px 0;
position: relative;
}
.hot_news .type1 .tieude:hover {text-decoration: none !important;
background: url(rgba.php?r=0&g=138&b=192&a=229);
background: url(rgba.php?r=0&g=138&b=192&a=229); background: rgba( 0,138,192,0.9); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5008AC0,endColorstr=#E5008AC0);
}
.tieude a {
display: block;
height: 35px;
font-size: 13px;
font-weight: bold;
line-height: 18px;
text-decoration: none !important;
overflow: hidden;
}
.hot_news .type1 .tieude {
width: 438px;
font-size: 20px;
outline: medium none;
}
.hot_news .type2 {
padding-left: 0;
width: 214px;
}
.hot_news .type2 .tieude {
width: 204px;
}
.hot_news .type3 {
height: 140px;
padding-right: 0;
}
.hot_news .type3 .tieude {
width: 195px;
}
.hot_news .type1 div.img img {
height: 266px;
width: 448px;
}
.hot_news .type2 div.img img {
height: 131px;
width: 223px;
}
.hot_news .type3 div.img img {
height: 140px;
width: 223px;
}
.hot_news .item .tieude {
height: 50px;
padding: 5px;
text-align: left;
}
.hot_news .item .tieude .description span{
font-size: 12px !important;
}
.hot_news .type2 .tieude
{
background: url(rgba.php?r=0&g=0&b=0&a=178);
background: url(rgba.php?r=0&g=0&b=0&a=178); background: rgba( 0,0,0,0.7); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);
_filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);
position: absolute;
z-index: 100;
bottom: 0;
padding: 5px 10px;
overflow: hidden;
display: block;
width: 203px;
}
.hot_news .type2 .tieude:hover {
background: url(rgba.php?r=0&g=138&b=192&a=229);
background: url(rgba.php?r=0&g=138&b=192&a=229); background: rgba( 0,138,192,0.9); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5008AC0,endColorstr=#E5008AC0);
_filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5008AC0,endColorstr=#E5008AC0);
transition: all 0.8s ease 0s;
}
.hot_news .type3 .tieude
{
background: url(rgba.php?r=0&g=0&b=0&a=178);
background: url(rgba.php?r=0&g=0&b=0&a=127); background: rgba( 0,0,0,0.5); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);
_filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);
position: absolute;
z-index: 100;
bottom: 0;
padding: 5px 10px;
overflow: hidden;
width: auto;
display: block;
width: 203px;
}
.hot_news .type3 .tieude:hover {text-decoration: none !important;
background: url(rgba.php?r=0&g=138&b=192&a=229);
background: url(rgba.php?r=0&g=138&b=192&a=229); background: rgba( 0,138,192,0.9); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5008AC0,endColorstr=#E5008AC0);
_filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5008AC0,endColorstr=#E5008AC0);
transition: all 0.3s ease 0s;
}
.hot_news .fade .tieude {
background: url("http://giaitri4u.com/styles/itviet/Images/opacity.png") repeat scroll 0 0 transparent;
bottom: 0;
font-size:15px;
position: absolute;
}
.hot_news .fade .tieude:hover {
opacity: 2;
}
.hot_news .type2 .tieude h3 {
font-size: 16px;
line-height: 18px;
margin-bottom: 10px;
}
.hot_news .type3 .tieude h3 {
font-size: 16px;
line-height: 18px;
margin-bottom: 10px;
}
.hot_news .fade .tieude {
line-height: 22px;
}
Sửa lần cuối:
Bài viết liên quan
Được quan tâm
