博客系统-前端页面-day05

最新推荐文章于 2024-07-12 16:27:40 发布

一口一个大饼

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量44

点赞数 1

分类专栏：博客系统 HTML CSS 文章标签：前端 css css3

本文链接：https://blog.csdn.net/weixin_58480821/article/details/129954399

版权

CSS 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

博客系统

5 篇文章 0 订阅

订阅专栏

Java实战项目-博客系统

前言
博客登录页
总结

前言

本文主要讲了博客登录页的实现和引入jquery实现

博客登录页

登录页.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客登陆页</title>
    <link rel="stylesheet" href="D:\C语言资料\java\博客系统\css\导航栏.css">
    <link rel="stylesheet" href="D:\C语言资料\java\博客系统\css\登录页.css">
</head>
<body>
    <!--设置导航栏-->
    <div class = "nav">
        <img src="../博客系统/吴磊啊隼.png" alt = "">
        <span class="title">大饼的博客系统</span>
        <span class="spacer"></span>
        <a href="博客列表页.html">列表</a>
        <a href="博客编辑页.html">编辑</a>
        <a href="博客详情页.html">详情</a>
    </div>
    
    <!--登录框-->
    <div class="login-container">
        <div class="login-dialog">
            <h3>登陆</h3>
            <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">
                <button id="submit">提交</button>
    
            </div>
        </div>
    </div>
</body>
</html>

登录页.css

/*设置页面 */
.login-container{
    width: 100%;
    height: calc(100%-50px);
    display: flex;
    justify-content: center;/* 设置元素从中间开始排列*/
    align-items: center;/*居中对齐弹性盒的各项元素 */
   
}
/* 设置登录框*/
.login-dialog{
    width: 400px;
    height: 400px;
    background-color: rgba(255, 255, 255, 0.7);/*设置背景以及透明度*/
    border-radius: 10px;/*设置元素的外边框圆角*/
    
}
/* 设置登陆字*/
.login-dialog h3{
    padding: 50px 0;
    text-align: center;/* 属性规定元素中的文本的水平对齐方式，center：中间 */
}
/* 设置两个row*/
.login-dialog .row{
    height: 50px;
    display: flex;/* 弹性布局*/
    justify-content: center;/* 设置元素从中间开始排列*/
    align-items: center;/*居中对齐弹性盒的各项元素 */
}
/* 设置用户名和密码字*/
.login-dialog.row span{
    display: block;/*设置为块级元素 */
    width: 10px;
    font-weight: 700;
    /*属性设置文本的粗细 
    thin (100), normal (400), bold (700), heavy (900) */
}
/*设置两个框 */
#username #password{
    width: 200px;
    height: 40px;
    line-height: 40px;/* 设置行间的距离（行高） */
    font-size: 24px;
    border-radius: 10px;/* 设置元素的外边框圆角 */
    border: none;/*没有边框 */
    outline: none;/* 设置元素轮廓不出现*/
    text-indent: 10px;/* 定义一个块元素首行文本内容之前的缩进量 */
}
/*设置提交框 */
#submit{
    width: 300px;
    height: 50px;
    color: white;
    background-color: green;/*设置背景以及透明度*/
    border: none;/* 没有边框*/
    border-radius: 10;/* 设置元素的外边框圆角*/
}
/*设置鼠标移动到提交框时效果 */
#submit:active{
    background-color: #666;/* 设置背景以及透明度*/
}

引入jquery

第一种方式：
1.浏览器搜索jquery cdn
2.打开官网https://jquery.com/
3.找到https://code.jquery.com/jquery-3.6.3.min.js复制此链接
4. 在.html文件中写：<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>