使用html+css实现旧首页的效果

October 21, 2019

632views

3949 words

前端课的期中作业

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
    </head>
    <style type="text/css">
        *{
            margin: 0;
        }
        .body{
            background: #2C2A2A;
            text-align: center;
        }
        .div_head{
            position: relative;
            width: 100%;
            height: 616px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .div_head .div_title{
            position: absolute;
            top: 50%;
            width: 100%;
            height: 200px;
            text-align: center;
        }
        .div_head .p1{
            font-size: 35px;
            color: white;
        }
        .div_head .p2{
            color: white;
            font-size: 15px;
        }
        .div_head .a:link{
            text-decoration:none;
            color:#1ABC9C;
        }
        }
        .div_head .a:visited{
            text-decoration:none;
            color: #1ABC9C;
        }
        .div_head .a:hover{
            text-decoration:none;
            color: #1ABC9C;
        }
        .div_background{
            width: 100%;
            height: 100%;
            background: url(head.png) no-repeat;
            background-size: cover;
            filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
            -webkit-filter: blur(5px); /* Chrome, Opera */
            -moz-filter: blur(5px);
            -ms-filter: blur(5px);    
            filter: blur(5px);
            filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false);
        }
        .div_content{
            margin: auto;
            margin-top: 60px;
            width:50%;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #282626;
        }
        .div_content_img{
            margin: auto;
            margin-top: 60px;
            width:50%;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            background: url(fusion.png) no-repeat;
            background-size: cover;
        }
        .div_opacity{
            width: 100%;
            height: 100%;
            background: #2C2A2A;
            filter:alpha(Opacity=20);
            -moz-opacity:0.2;
            opacity: 0.2;
        }
        
         .a:link{
            font-weight: bold;
            font-size: 20px;
            text-decoration: none;
            color: white;
        }
         .a:visited{
            font-weight: bold;
            font-size: 20px;
            text-decoration: none;
            color: white;
        }
         .a:hover{
            font-weight: bold;
            font-size: 20px;
            text-decoration: none;
            color: #1ABC9C;
        }
        .div_post_item{
            
            margin-top: 40px;
            width: 100%;
            height: 100px;
        }
        .post_text {
            margin-top: 10px;
            font-size: 10px;
            color: #999999;
        }
        .post_span{
            font-weight: bold;
            margin-left: 5px;
            margin-right: 5px;
        }
        .div_next{
            margin: auto;
            margin-top: 25px;
            width:50%;
            height: 40px;
        }
        .div_button{
            float: right;
            width: 120px;
            height: 40px;
            background: #2C2A2A;
            border-radius:40px 40px 40px 40px; 
            border-width: thick;
            border-style: solid;
            border-width: 1px;
            border-color: white;
            text-align: center;
        }

        .div_button a:visited{
            text-decoration: none;
            line-height: 40px;
            font-size: 15px;
            color: white;
        }
        .div_button a:link{
            text-decoration: none;
            line-height: 40px;
            font-size: 15px;
            color: white;
        }
        .div_button a:hover{
            color:#1ABC9C ;
            text-decoration: none;
            line-height: 40px;
            font-size: 15px;
        }
        .div_footer{
            margin: auto;
            margin-top: 50px;
            height: 30px;
            width: 50%;
        }
        .text_footer{
            font-size: 10px;
            color: #CCCCCC;
        }
        .text_footer .a:link{
            text-decoration: none;
            font-size: 10px;
            color: #CCCCCC;
        }
        
    </style>
    <body class="body">
        <div class="div_head" >
            <div class="div_background"></div>
            <div class="div_title">
                <p class="p1">JSJin</p>
                <p class="p2">有时间一起网上冲浪</p>
            </div>
        </div>
        <div class="div_content_img" style="background: url(blog.png);" >
            <div class="div_opacity"></div>
            <div class="div_post_item" style="position: absolute;" >
                <a class="a" href="https://jinjis.cn/post/Aplayer_add/">使用html+css简单实现博客首页的效果</a>
                <p class="post_text">2019-10-21<span class="post_span">·</span>html<span class="post_span">·</span>css</p>
            </div>
        </div>
        <div class="div_content">
            <div class="div_post_item" >
                <a class="a" href="https://jinjis.cn/post/%E8%AE%B0%E8%B4%A6%E4%B8%89/">从零开始制作一款记账App（三）</a>
                <p class="post_text">2019-10-20<span class="post_span">·</span>安卓<span class="post_span">·</span>学习笔记</p>
            </div>
        </div>
        <div class="div_content">
            <div class="div_post_item" >
                <a class="a" href="https://www.jinjis.cn/post/%E8%AE%B0%E8%B4%A6%E5%BC%80%E5%8F%91%EF%BC%88%E4%BA%8C%EF%BC%89">从零开始制作一款记账App（二）</a>
                <p class="post_text">2019-10-19<span class="post_span">·</span>安卓<span class="post_span">·</span>学习笔记</p>
            </div>
        </div>
        <div class="div_content">
            <div class="div_post_item" >
                <a class="a" href="https://jinjis.cn/post/%E8%AE%B0%E8%B4%A6%E5%BC%80%E5%8F%91%EF%BC%88%E4%B8%80%EF%BC%89/">从零开始制作一款记账App（一）</a>
                <p class="post_text">2019-10-18<span class="post_span">·</span>安卓<span class="post_span">·</span>学习笔记</p>
            </div>
        </div>
        <div class="div_content">
            <div class="div_post_item" >
                <a class="a" href="https://jinjis.cn/post/matlab%E5%9B%BE%E5%83%8F%E6%97%8B%E8%BD%AC%E5%87%BD%E6%95%B0/">Matlab图像处理分析之图像旋转函数</a>
                <p class="post_text">2019-10-15<span class="post_span">·</span>Matlab<span class="post_span">·</span><span class="post_span">·</span>学习笔记</p>
            </div>
        </div>
        <div class="div_content_img" >
            <div class="div_opacity"></div>
            <div class="div_post_item" style="position: absolute;" >
                <a class="a" href="https://jinjis.cn/post/Fusion_App/">使用 Fusion App 为自己的博客制作客户端</a>
                <p class="post_text">2019-9-30<span class="post_span">·</span>安卓</p>
            </div>
        </div>
        <div class="div_content_img" style="background: url(Aplayer.png);" >
            <div class="div_opacity"></div>
            <div class="div_post_item" style="position: absolute;" >
                <a class="a" href="https://jinjis.cn/post/Aplayer_add/">为博客添加Aplayer播放器</a>
                <p class="post_text">2019-9-28<span class="post_span">·</span>Gridea<span class="post_span">·</span>教程</p>
            </div>
        </div>
        <div class="div_next">
            <div class="div_button">
                <a href="https://jinjis.cn/page/2/">下一页</a>
            </div>
        </div>
        <div class="div_footer">
            <p class="text_footer">Powered by <a class="a" href="https://jinjis.cn">JSJin</a></p>
        </div>
    </body>
</html>

使用html+css实现旧首页的效果

legroft • 2019 年 10 月 21 日

前端课的期中作业

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
    </head>
    <style type="text/css">
        *{
            margin: 0;
        }
        .body{
            background: #2C2A2A;
            text-align: center;
        }
        .div_head{
            position: relative;
            width: 100%;
            height: 616px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .div_head .div_title{
            position: absolute;
            top: 50%;
            width: 100%;
            height: 200px;
            text-align: center;
        }
        .div_head .p1{
            font-size: 35px;
            color: white;
        }
        .div_head .p2{
            color: white;
            font-size: 15px;
        }
        .div_head .a:link{
            text-decoration:none;
            color:#1ABC9C;
        }
        }
        .div_head .a:visited{
            text-decoration:none;
            color: #1ABC9C;
        }
        .div_head .a:hover{
            text-decoration:none;
            color: #1ABC9C;
        }
        .div_background{
            width: 100%;
            height: 100%;
            background: url(head.png) no-repeat;
            background-size: cover;
            filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
            -webkit-filter: blur(5px); /* Chrome, Opera */
            -moz-filter: blur(5px);
            -ms-filter: blur(5px);    
            filter: blur(5px);
            filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false);
        }
        .div_content{
            margin: auto;
            margin-top: 60px;
            width:50%;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #282626;
        }
        .div_content_img{
            margin: auto;
            margin-top: 60px;
            width:50%;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            background: url(fusion.png) no-repeat;
            background-size: cover;
        }
        .div_opacity{
            width: 100%;
            height: 100%;
            background: #2C2A2A;
            filter:alpha(Opacity=20);
            -moz-opacity:0.2;
            opacity: 0.2;
        }
        
         .a:link{
            font-weight: bold;
            font-size: 20px;
            text-decoration: none;
            color: white;
        }
         .a:visited{
            font-weight: bold;
            font-size: 20px;
            text-decoration: none;
            color: white;
        }
         .a:hover{
            font-weight: bold;
            font-size: 20px;
            text-decoration: none;
            color: #1ABC9C;
        }
        .div_post_item{
            
            margin-top: 40px;
            width: 100%;
            height: 100px;
        }
        .post_text {
            margin-top: 10px;
            font-size: 10px;
            color: #999999;
        }
        .post_span{
            font-weight: bold;
            margin-left: 5px;
            margin-right: 5px;
        }
        .div_next{
            margin: auto;
            margin-top: 25px;
            width:50%;
            height: 40px;
        }
        .div_button{
            float: right;
            width: 120px;
            height: 40px;
            background: #2C2A2A;
            border-radius:40px 40px 40px 40px; 
            border-width: thick;
            border-style: solid;
            border-width: 1px;
            border-color: white;
            text-align: center;
        }

        .div_button a:visited{
            text-decoration: none;
            line-height: 40px;
            font-size: 15px;
            color: white;
        }
        .div_button a:link{
            text-decoration: none;
            line-height: 40px;
            font-size: 15px;
            color: white;
        }
        .div_button a:hover{
            color:#1ABC9C ;
            text-decoration: none;
            line-height: 40px;
            font-size: 15px;
        }
        .div_footer{
            margin: auto;
            margin-top: 50px;
            height: 30px;
            width: 50%;
        }
        .text_footer{
            font-size: 10px;
            color: #CCCCCC;
        }
        .text_footer .a:link{
            text-decoration: none;
            font-size: 10px;
            color: #CCCCCC;
        }
        
    </style>
    <body class="body">
        <div class="div_head" >
            <div class="div_background"></div>
            <div class="div_title">
                <p class="p1">JSJin</p>
                <p class="p2">有时间一起网上冲浪</p>
            </div>
        </div>
        <div class="div_content_img" style="background: url(blog.png);" >
            <div class="div_opacity"></div>
            <div class="div_post_item" style="position: absolute;" >
                <a class="a" href="https://jinjis.cn/post/Aplayer_add/">使用html+css简单实现博客首页的效果</a>
                <p class="post_text">2019-10-21<span class="post_span">·</span>html<span class="post_span">·</span>css</p>
            </div>
        </div>
        <div class="div_content">
            <div class="div_post_item" >
                <a class="a" href="https://jinjis.cn/post/%E8%AE%B0%E8%B4%A6%E4%B8%89/">从零开始制作一款记账App（三）</a>
                <p class="post_text">2019-10-20<span class="post_span">·</span>安卓<span class="post_span">·</span>学习笔记</p>
            </div>
        </div>
        <div class="div_content">
            <div class="div_post_item" >
                <a class="a" href="https://www.jinjis.cn/post/%E8%AE%B0%E8%B4%A6%E5%BC%80%E5%8F%91%EF%BC%88%E4%BA%8C%EF%BC%89">从零开始制作一款记账App（二）</a>
                <p class="post_text">2019-10-19<span class="post_span">·</span>安卓<span class="post_span">·</span>学习笔记</p>
            </div>
        </div>
        <div class="div_content">
            <div class="div_post_item" >
                <a class="a" href="https://jinjis.cn/post/%E8%AE%B0%E8%B4%A6%E5%BC%80%E5%8F%91%EF%BC%88%E4%B8%80%EF%BC%89/">从零开始制作一款记账App（一）</a>
                <p class="post_text">2019-10-18<span class="post_span">·</span>安卓<span class="post_span">·</span>学习笔记</p>
            </div>
        </div>
        <div class="div_content">
            <div class="div_post_item" >
                <a class="a" href="https://jinjis.cn/post/matlab%E5%9B%BE%E5%83%8F%E6%97%8B%E8%BD%AC%E5%87%BD%E6%95%B0/">Matlab图像处理分析之图像旋转函数</a>
                <p class="post_text">2019-10-15<span class="post_span">·</span>Matlab<span class="post_span">·</span><span class="post_span">·</span>学习笔记</p>
            </div>
        </div>
        <div class="div_content_img" >
            <div class="div_opacity"></div>
            <div class="div_post_item" style="position: absolute;" >
                <a class="a" href="https://jinjis.cn/post/Fusion_App/">使用 Fusion App 为自己的博客制作客户端</a>
                <p class="post_text">2019-9-30<span class="post_span">·</span>安卓</p>
            </div>
        </div>
        <div class="div_content_img" style="background: url(Aplayer.png);" >
            <div class="div_opacity"></div>
            <div class="div_post_item" style="position: absolute;" >
                <a class="a" href="https://jinjis.cn/post/Aplayer_add/">为博客添加Aplayer播放器</a>
                <p class="post_text">2019-9-28<span class="post_span">·</span>Gridea<span class="post_span">·</span>教程</p>
            </div>
        </div>
        <div class="div_next">
            <div class="div_button">
                <a href="https://jinjis.cn/page/2/">下一页</a>
            </div>
        </div>
        <div class="div_footer">
            <p class="text_footer">Powered by <a class="a" href="https://jinjis.cn">JSJin</a></p>
        </div>
    </body>
</html>

使用html+css实现旧首页的效果

Leave a Comment Cancel reply

短学期-制作微信小程序

博客迁移至typecho

整了个自动Hdu健康打卡解决方案

Unity自动创建脚本及预制体并绑定

《消猫塔防》开发日记（四）

c++SFML制作月圆之夜day4

python批量裁剪图片

使用Dotween创建可在编辑器预览的Tween补间动画

直方图均衡化的计算过程

c++制作扫雷游戏其一

使用html+css实现旧首页的效果