0

点赞

收藏

分享

校园局域网钓鱼实例

东方小不点 04-01 11:30 阅读 1

标签: 前端

目录

文章详细页面

文章编辑页

这只是前端的页面组成，还没有接入后端，并不是完全体

主页

HTML

<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>墨轩博客页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <!-- logo图片 -->
        <img src="image/logo.jpg" alt="" width="50px">

        <span class="title">我的博客系统</span>
        <span class="spacer"></span>

        <!-- 导航栏 -->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>

    <!-- 页面主体 -->
    <div class="container">

        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="image/蕾姆.jpg" alt="">
                <h2>墨轩</h2>
                <a href="#">github链接</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>3</span>
                </div>
            </div>


        <!-- 右侧个人信息 -->
        </div>
        <div class="container-right">
            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            <!-- &gt;是html的> 正常的>无法之间写入 -->

            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="#">查看全文 &gt;&gt; </a>

            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="#">查看全文 &gt;&gt; </a>

            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="#">查看全文 &gt;&gt; </a>

            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="#">查看全文 &gt;&gt; </a>

            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="#">查看全文 &gt;&gt; </a>

            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="#">查看全文 &gt;&gt; </a>

        </div>
    </div>
</body>
</html>

CSS

html,body{
    /* 让html和body占满浏览器窗口 */
    height: 100%;
    width: 100%;
    background-image: url(../image/风景图.jpg);
    /* background-repeat: no-repeat; */
    background-size: cover;
}

.nav{
    width: 100%;
    height: 50px;
    background-color: rgba(50, 50, 50,0.3);
    color: white;

    /* 开启弹性布局 */
    display: flex;
    /* 水平居中 */
    align-items: center;
}

.nav img{
    /* 将图片设为圆的 */
    border-radius: 50px;
    /* 左侧间距 */
    margin-left: 30px;
    /* 右侧间距 */
    margin-right: 20px;
}

/* 用于隔开我的博客和主页 */
.nav .spacer{
    width: 78%;
}

.nav a{
    color: white;
    /* 上下间隔0 左右6px */
    padding: 0 6px;
}

.container{
    width: 1000px;
    /* 使用这个函数 -直接必须有空格 */
    /* 因为是100% 导航栏自带50px 再用100% 会多出50px 所已要减去多出来的50px */
    height: calc(100% - 100px);
    margin: 0 auto;

    /* 让两个div能在同一行 */
    display: flex;

    /* 元素之间留有空隙 */
    justify-content: space-between;
}

.container-left{
    height: 30%;
    width: 200px;

    
}

.container-right{
    height: 100%;
    width: 750px;

    background-color: rgba(255, 255, 255, 0.5);

    /* 边框圆角 */
    border-radius: 10px;

    overflow: auto;
}

.card{
    background-color: rgba(255,255,255,0.5);
    /* 内边距距离 */
    padding: 30px;
    /* 边框圆角 */
    border-radius: 10px;
}

/* 用户图片 */
.card img{
    width: 140px;
    height: 140px;
    border-radius: 70px;
}

/* 用户昵称 */
.card h2{
    text-align: center;
    /* padding: 10px; */
}

/* 链接属性 */
.card a{
    /* 开启弹性布局后 居中 */
    display: block;
    text-align: center;
}

/* 文章属性 */
.card .counter{
    /* 开启弹性布局 */
    display: flex;
    text-align: center;

    /* 文章与分类分开 */
    justify-content: space-around;
}

/* 因为右侧文章会变换 所有右侧的css单独出来 */

右侧文章只要这个页面有，所以css是单独出来的

/* 右侧个人信息栏 */
.container-right{
    /* 一个em为一个字的长度 */
    text-indent: 3em;
    /* 距离四个边都有20px的距离 */
    padding: 20px;
}

.blog{
    text-align: center;
    /* 字体大小 */
    font-size: 37px;
    /* 行间距 上下5 左右0 */
    padding: 5px 0;
    /* 字体粗细 */
    font-weight: 600;
}

.date{
    text-align: center;
    font-size: 20px;
    color: grey;
    /* 行间距 上下5 左右0 */
    padding: 5px 0;
}

.container-right a{
    /* 设置成块级元素 */
    display: block;
    width: 150px;
    height: 30px;
    /* 块级元素居中 上下10 左右自适应 */
    margin: 10px auto;
    /* 边框 粗细 黑色 实习 */
    border: 2px black solid;
    text-align: center;
    color: black;
    /* 去除下划线 */
    text-decoration: none;

    /* 颜色过渡 1s */
    transition: all 1s;
}

/* 伪类选择器 鼠标放上去变色 */
.container-right a:hover{
    background-color: black;
    color: white;
}

文章详细页面

HTML

里面包含多个css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog.css">
    <link rel="stylesheet" href="css/blog_detail.css">
</head>
<body>
        <!-- 导航栏 -->
        <div class="nav">
            <!-- logo图片 -->
            <img src="image/logo.jpg" alt="" width="50px">
    
            <span class="title">我的博客系统</span>
            <span class="spacer"></span>
    
            <!-- 导航栏 -->
            <a href="blog_list.html">主页</a>
            <a href="blog_edit.html">写博客</a>
            <a href="#">注销</a>
        </div>

        <!-- 页面主体 -->
    <div class="container">

        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="image/蕾姆.jpg" alt="">
                <h2>墨轩</h2>
                <a href="#">github链接</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>3</span>
                </div>
            </div>


        <!-- 右侧个人信息 -->
        </div>
        <div class="container-right">
            <div class="blog-content">
                <h3>我的第一篇博客</h3>
                <div class="date">2024-3-27 22:33</div>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
            </div>
        </div>
    </div>
</body>
</html>

CSS

.blog-content h3{
    text-align: center;
}

登录页面

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
        <!-- 导航栏 -->
        <div class="nav">
            <!-- logo图片 -->
            <img src="image/logo.jpg" alt="" width="50px">
    
            <span class="title">我的博客系统</span>
            <span class="spacer"></span>
    
            <!-- 导航栏 -->
            <a href="blog_list.html">主页</a>
            <a href="blog_edit.html">写博客</a>
        </div>

        <!-- 登录板块 -->
        <div class="login-container">
            <div class="login-dialog">
                <p>登录</p>
            <div class="row">
                <span>用户名</span>
                <input type="text" id="username">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" id="password">
            </div>
            <div class="row">
                <input type="button" value="提交"id="submit">
            </div>
            </div>
        </div>
</body>
</html>

CSS

.login-container{
    height: calc(100% - 50px);

    /* 开启弹性布局 block和flex  盒子用flex */
    display: flex;

    /* 水平居中 */
    justify-content: center;

    /* 垂直居中 */
    align-items: center;
}

.login-dialog{
    width: 500px;
    height: 300px;

    /* 半透明 */
    background-color: rgba(255,255,255,0.5);

    /* 圆角 */
    border-radius: 10px;
}

.login-dialog p{
    font-weight: 700;
    font-size: 30px;
    text-align: center;
}

.login-dialog h3{
    padding: 20px 0;

    /* 文字水平居中 */
    text-align: center;
}

.login-dialog .row{
   height: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.login-dialog .row span{
    width: 100px;
    font-size: 20px;
    font-weight: 700;
}

#username, #password{
    /* 框大小 */
    width: 200px;
    height: 40px;

    font-size: 24px;

    /* 去掉框的边框黑线 */
    border: none;
    /* 去掉选择时的边框黑线 */
    outline: none;

    /* 输入字体的缩进 */
    padding-left: 5px;

    /* 圆角 */
    border-radius: 15px;
}


#submit{
    width: 300px;
    height: 40px;
    color: black;
    background-color: rgba(255,255,255,0.5);
    border-radius: 10px;

    /* 去掉边框 */
    border: none;
}

/* 点击变色 */
#submit:active{
    background-color: gray;
}

文章编辑页

这里需要放入editor.md，和JS文件的jquery.min.js的依赖，放入文章编辑的库

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客编辑页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog-edit-container.css">

    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <!-- logo图片 -->
        <img src="image/logo.jpg" alt="" width="50px">

        <span class="title">我的博客系统</span>
        <span class="spacer"></span>

        <!-- 导航栏 -->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>

    <div class="blog-edit-container">
        <!-- 标题编辑区 -->
        <div class="title">
            <!-- placeholder默认文字 -->
            <input type="text" id="title" placeholder="请输入文章标题">
            <input type="button" id="submit" value="发布文章">
        </div>

        <!-- 博客编辑区 -->
        <div id="editor">

        </div>
    </div>

    <script>
        var editor = editormd("editor", {
        width: "100%",
        height: "calc(100% - 50px)",
        markdown: "# 在这里写下一篇博客",
        path: "editor.md/lib/"
        });
    </script>
</body>
</html>

CSS

.blog-edit-container{
    width: 1000px;
    height: calc(100% - 50px);
    margin: 0 auto;
}

/* 标题编辑区 */
.title{
    height: 50px;
    /* 水平方向布局 */
    display: flex;

    /* 中间有间隙 */
    justify-content: space-between;

    /* 居中 */
    align-items: center;
}

/* 字体 */
#title{
    height: 40px;
    width: 890px;
    font-size: 24px;
    padding-left: 5px;

    /* 去掉边框轮廓线 */
    border: none;

    /* 选中时轮廓线 */
    outline: none;

    border-radius: 10px;
}

#submit{
    height: 45px;
    width: 100px;

    border-radius: 10px;

    color: white;
    background-color: coral;

    border: none;

    transition: all 0.5;
}

/* 点击时变色 */
#submit:active{
    background-color: gray;
}

#editor {
    /* 圆角 */
    border-radius: 10px;
    
    /* 因为他是复用editor的 所以现在这个块是子元素 用bc无法显示 */
    /* background-color: rgba(255, 255, 255, 0.8); */

    /* 用这个就都可以 */
    opacity: 80%;
}

0 条评论

东方小不点

关注