Sử dụng vừa CSS vừa HTML tạo trang 404 chuyên nghiệp hơn
#error-page {
background-color:#e9e9e9;
position:fixed !important;
position:absolute;
text-align:center;
top:0;
right:0;
bottom:0;
left:0;
z-index:99999;
}
#error-inner {
margin:11% auto;
}
#error-inner .box-404 {
width:200px;
height:200px;
background:#21afa4;
color:#fff;
font-size:80px;
line-height:200px;
border-radius:10px;
margin:0 auto 50px;
position:relative;
}
#error-inner .box-404::after {
content:" ";
width:0;
height:0;
bottom:-8px;
border-color:#21afa4 transparent transparent;
border-style:solid;
border-width:9px 9px 0;
position:absolute;
left:47%;
}
#error-inner h1 {
text-transform:uppercase;
}
#error-inner p {
line-height:0.7em;
font-size:15px;
}
<style>
#error-page {
background-color:#e9e9e9;
position:fixed !important;
position:absolute;
text-align:center;
top:0;
right:0;
bottom:0;
left:0;
z-index:99999;
}
#error-inner {
margin:11% auto;
}
#error-inner .box-404 {
width:200px;
height:200px;
background:#21afa4;
color:#fff;
font-size:80px;
line-height:200px;
border-radius:10px;
margin:0 auto 50px;
position:relative;
}
#error-inner .box-404::after {
content:" ";
width:0;
height:0;
bottom:-8px;
border-color:#21afa4 transparent transparent;
border-style:solid;
border-width:9px 9px 0;
position:absolute;
left:47%;
}
#error-inner h1 {
text-transform:uppercase;
}
#error-inner p {
line-height:0.7em;
font-size:15px;
}
</style>
<div id="error-page">
<div id="error-inner">
<div class="box-404">404</div>
<h1>KHÔNG TÌM THẤY TRANG</h1>
<p>Trang có thể đã bị xóa hoặc địa chỉ url không đúng.</p>
<p>Trở về <a href="http://www.kslzone.net/">Trang Chủ</a></p>
</div>
</div>
#error-page {
background-color:#e9e9e9;
position:fixed !important;
position:absolute;
text-align:center;
top:0;
right:0;
bottom:0;
left:0;
z-index:99999;
}
#error-inner {
margin:11% auto;
}
#error-inner .box-404 {
width:200px;
height:200px;
background:#21afa4;
color:#fff;
font-size:80px;
line-height:200px;
border-radius:10px;
margin:0 auto 50px;
position:relative;
}
#error-inner .box-404::after {
content:" ";
width:0;
height:0;
bottom:-8px;
border-color:#21afa4 transparent transparent;
border-style:solid;
border-width:9px 9px 0;
position:absolute;
left:47%;
}
#error-inner h1 {
text-transform:uppercase;
}
#error-inner p {
line-height:0.7em;
font-size:15px;
}
</style>
<div id="error-page">
<div id="error-inner">
<div class="box-404">404</div>
<h1>KHÔNG TÌM THẤY TRANG</h1>
<p>Trang có thể đã bị xóa hoặc địa chỉ url không đúng.</p>
<p>Trở về <a href="http://www.kslzone.net/">Trang Chủ</a></p>
</div>
</div>
thay www.kslzone.net bằng địa chỉ blog của bạn. Ngoài ra bạn cũng có thể sử dụng đoạn mã ở hướng dẫn tạo trang 404 trước của mình.
0 nhận xét:
Đăng nhận xét