Unify学习笔记2

最新推荐文章于 2024-06-17 15:37:58 发布

litdwg

最新推荐文章于 2024-06-17 15:37:58 发布

阅读量1k

点赞数

分类专栏： html5 学习笔记文章标签： html CSS bootstrap3 javascript

本文链接：https://blog.csdn.net/litdwg/article/details/50112455

版权

学习笔记同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

html5

5 篇文章 0 订阅

订阅专栏

今天从最简单的404错误网页开始。

删减掉整个网站用的css和js，404页面的代码如下：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <title>404 Error Page 1 | Unify - Responsive Website Template</title>
    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">    
    <!-- CSS Global Compulsory -->
    <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">    
    <!-- CSS Page Style -->    
    <link rel="stylesheet" href="assets/css/pages/page_5F404_error1.css">    
</head> 
<body>
<!--=== Content Part ===-->    
<div class="container">
    <!--Error Block-->
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="error-v2">
                <span class="error-v2-title">404</span>
                <span>That’s an error!</span>
                <p>The requested URL was not found on this server. <br> That’s all we know.</p>
            </div>
        </div>
    </div>
    <!--End Error Block-->
</div><!--/container-->
<!--=== End Content Part ===-->
<!-- JS Global Compulsory -->           
<script type="text/javascript" src="assets/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script> 
<!-- JS Implementing Plugins --> 
<script type="text/javascript" src="assets/plugins/backstretch/jquery.backstretch.min.js"></script>
<!-- JS Page Level -->
<script type="text/javascript">
    $.backstretch([
      "assets/img/bg/2.jpg",
      "assets/img/bg/8.jpg",
      ], {
        fade: 1000,
        duration: 7000
    });
</script>
</body>
</html>

错误提示所在层使用黑色半透明背景background: rgba(0,0,0,0.5);通过调用backstretch插件，动态切换两张星空背景图。整个网页简洁有序。

调用backstretch动态切换背景的代码如下：

<script type="text/javascript">
    $.backstretch([
      "assets/img/bg/2.jpg",
      "assets/img/bg/8.jpg",
      ], {
        fade: 1000,
        duration: 7000
    });
</script>

第二个404错误页面，东西多了些，最有创意的一点是，用一个背景半透明的层通过错位和旋转，为另一个层做了个三角形的背景效果，其中作为背景的层的样式如下：

.service-bg {
    width: 250px;
    padding: 60px;
    position: absolute;
    top: -10px;
    right: -100px;
    background-color: rgba(255,255,255,0.1);
    transform: rotate(55deg);   
    -o-transform: rotate(55deg);
    -ms-transform: rotate(55deg);
    -moz-transform: rotate(55deg);
    -webkit-transform: rotate(55deg);
}