Mẫu sử dụng margin và padding trong CSS

<div style="border: 2px solid #ccc; height: 156px; padding: 7px;"><img style="float: left; margin-right: 10px;" src="http://ntwood.vn/img/img/Lo%20Go%201.jpg">Nội dung bài viết mẫu sử dụng margin và padding trong CSS
</div>

Code Popup giữa màn hình 

<style type="text/css">
#popup-giua-man-hinh .headerContainer,#popup-giua-man-hinh .bodyContainer,#popup-giua-man-hinh .footerContainer{max-width:960px;margin:0 auto;background:#FFF}
#popup-giua-man-hinh .padding{padding:20px}
#popup-giua-man-hinh .bodyContainer{min-height:500px}
#popup-giua-man-hinh .popUpBannerBox{position:fixed;background:rgba(0,0,0,0.9);width:100%;height:100%;top:0;left:0;color:#FFF;z-index:999999;display:none}
#popup-giua-man-hinh .popUpBannerInner{max-width:300px;margin:0 auto}
#popup-giua-man-hinh .popUpBannerContent {
position: fixed;
top: 0;
background: #fd4747;
background: -moz-radial-gradient(center, ellipse cover, #fd4747 0%, #cb1515 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fd4747), color-stop(100%,#cb1515));
background: -webkit-radial-gradient(center, ellipse cover, #fd4747 0%,#cb1515 100%);
background: -o-radial-gradient(center, ellipse cover, #fd4747 0%,#cb1515 100%);
background: -ms-radial-gradient(center, ellipse cover, #fd4747 0%,#cb1515 100%);
background: radial-gradient(ellipse at center, #fd4747 0%,#cb1515 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd4747', endColorstr='#eaeaea',GradientType=1 );
max-width: 700px;
width: 100%;
left: 0;
right: 0;
margin: auto;
max-height: 230px;
overflow: hidden;
padding-bottom: 30px;
bottom: 0;
}
#popup-giua-man-hinh label#label_3, #popup-giua-man-hinh label#label_6, #popup-giua-man-hinh .form-label.form-label-auto {
display: none !important;
}
.supernova .form-all, .form-all {
background-color: transparent !important;
border: 1px solid transparent;
}
.formFooter, .formFooter-heightMask {
display: none !important;
}
.web5c-tt {
text-align: center;
color: #fff;
padding: 25px;
}
.web5c-tt span {
font: bold 20px arial;
margin: 0 0 20px 0;
float: left;
width: 100%;
}
.web5c-tt p {
font: 16px arial;
}
#popup-giua-man-hinh .closeButton {
color: #333;
text-decoration: none;
font-size: 18px;
background: #fff;
border-radius: 50px;
padding: 5px 10px;
text-align: center;
}
.popUpBannerContent p {
margin: 0;
padding: 0;
}
#popup-giua-man-hinh a.closeButton{float:right}
.web5c-form {
margin: 0 0 0 30px;
}
</style>
<div id="popup-giua-man-hinh">
<div class="popUpBannerBox">
<div class="popUpBannerInner">
<div class="popUpBannerContent">
<p><a href="#" class="closeButton">x</a></p>

<div class='web5c-tt'>
CHÈN THÔNG BÁO VÀO KHU VƯC NÀY
</div>
</div>
</div>
</div>
<script type="text/javascript">
function showPopUpBanner() {
$('.popUpBannerBox').fadeIn("2000");
}
setTimeout(showPopUpBanner, 1000); //thời gian popup bắt đầu hiển thị

$('.popUpBannerBox').click(function(e) {
if ( !$(e.target).is('.popUpBannerContent, .popUpBannerContent *' ) ) {
$('.popUpBannerBox').fadeOut("2000");
return false;
}
});
$('.closeButton').click(function() {
$('.popUpBannerBox').fadeOut("2000");
return false;
});
</script>
</div>

Code hiển thị Nội dung Text giữa thẻ Div theo chiều dọc 

<style>
.canhgiua {
padding: 20px;
border: 1px solid red;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class="canhgiua">
Nội dung Text hiển thị giữa thẻ Div theo chiều dọc
</div>

Tạo tin hot "breaking news" cho blogspot :

Dán đoạn code sau </b:skin> :

<style>
#cybup-breakingnews-widget {
margin: 15px;
height: 38px;
line-height: 26px;
overflow: hidden;
background: #fff;
border: 1px solid #34CFFD;
border-radius:50px;
}
#cybup-breakingnews-widget .breakhead {
border: 1px solid #34CFFD;
border-radius:50px;
position: absolute;
background: none repeat scroll 0 0 #34CFFD;
color: #fff;
display: block;
float: left;
font-family: inherit;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
padding: 6px 12px;
}
#adcybup-breakingnews-widget li a {
font-family: inherit;
font-weight: 400;
color: #34CFFD;
margin-top: 10px;
transition: all 0.5s ease-in-out;
}
#adcybup-breakingnews-widget li a:hover {
color: #34CFFD;
}
#adcybup-breakingnews-widget {
float: left;
margin-left: 50px;
margin-top: 6px;
}
#adcybup-breakingnews-widget ul,#adcybup-breakingnews-widget li {
list-style: none;
margin: 0;
padding: 0;
}
</style>

Dán đoạn code sau trước thẻ đóng </body> :

<script type='text/javascript'>
//<![CDATA[
// Cybup Breaking News Widget
$(document).ready(function(){var e="http://namtrungjsc.vn",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adcybup-breakingnews-widget li:first").slideUp(function(){$(this).appendTo($("#adcybup-breakingnews-widget ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adcybup-breakingnews-widget").html(s),setInterval(function(){t()},5e3)}else $("#adcybup-breakingnews-widget").html("<span>No result!</span>")},error:function(){$("#adcybup-breakingnews-widget").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Dán đoạn code sau vào tiện ích html : 

<div id='cybup-breakingnews-widget'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adcybup-breakingnews-widget'>Loading...</div></div>

-----x---

Post a Comment

Mới hơn Cũ hơn

Xe máy điện Xmen GT Nijia 2018 thể thao năng động (Trắng phối xanh)
Đi tới nơi bán

Xe máy điện Terra Xmen Blade khung thép hợp kim (Xanh lá cây)
Đi tới nơi bán