Visual Studio Code制作登录界面+写一个简易网页（html+css）

1，所有图片和音乐链接都需要自己更换2，这些代码只是参考，建议打完一遍，自己设计一个。

ganiyun

4659人浏览 · 2024-10-07 18:10:35

ganiyun · 2024-10-07 18:10:35 发布

制作登录界面的html文件

一，新建一个html项目

1，在想存储html网页的地方创建一个文件夹，从vsc打开该文件夹，在该文件栏新建html文件

命名为index.html

二，创建html文件基本框架

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆页面</title>
</head>
<body>
 <p>hello world!</p>
</body>
</html>

可以使用快捷键，键盘 !+enter

三，制作整体框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./login.CSS">
    <title>登陆界面</title>
</head>
<body>
    <div class="box">
        <div class="login-form">
            <div class="title-box">
                <h1>登录</h1>
            </div>
            <div class="logoContainer">
                <img src="./1.jpg" alt="头像" class="logo">
            </div>
            <div class="input-box">
                <form action="1.html" method="get">
                    <span>
                    <strong>用户名:</strong>
                    <input type="text" placeholder="请输入用户名" required><!--required是用于提醒用户必须填写该信息-->
                    </span>
                    <br>
                    <span>
                    <strong>密&nbsp&nbsp 码:</strong>
                     <input type="password" placeholder="请输入密码"required>
                    </span><br>
                    <button type="submit">登录</button>
            </form>
            </div>
        </div>
    </div>
</body>
</html>

效果如下

使用css修饰html

一，在原来的文件栏创建一个login.css

代码如下

*{
  margin:0;/*将元素的外边距设置为零*/
  padding: 15px;/*元素内容与其边框之间的空间*/
  box-sizing: border-box;/*用于控制元素的盒模型行为*/
 }
div{/*去掉div之间的间隔*/
   margin: 0;/* 会移除元素外部的空白*/
   padding: 0%;/*会移除元素内部的空白，确保内容与边框直接接触*/
}
 body{
    background-image:url(./4.png);
    background-repeat: no-repeat;/*不重复*/
    overflow: hidden;/*溢出隐藏*/
    background-size:cover ;/*界面覆盖*/
    height: 95vh;/*设置液面高度为视口高度*/
 }
 .box{
    width: 900px;
    height: 600px;
    display: flex;/*给盒子来个flex布局*/
    background-color: rgba(69, 38, 59, 0.5);/*面板颜色，透明度设置*/
    margin: 100px auto;/*上下边框距150px，左右自动居中*/
    border-radius: 25px;/*来个圆角*/
    border: 1px solid rgba(255, 255,255, 0.8);/*加个边框*/
    box-shadow: 0 0 17px #333;/*来个阴影*/
 }

 
 .title-box h1{
   font-size: 50px;
    margin:0;/*去掉默认外边距*/
    line-height: 3;/*调整行高*/
    margin-bottom: 0;/*控制一个元素与其下方相邻元素之间的间距*/
    letter-spacing: 150px;/*行间字距*/
    background: linear-gradient(90deg,rgb(255, 255, 255),rgb(18, 18, 255));/*渐变背景*/
    -webkit-background-clip: text;/*背景裁剪为文本*/
    -webkit-text-fill-color: transparent;/*文本填充为透明*/
    margin-left: 300px;
 }
 .input-box{
   color: rgb(156, 202, 243);
    font-size: 20px;
    display: flex;
    margin-left: 200px;
    position: relative;
 }
 input{
    height: 40px;
    margin-bottom: 30px;
    font-size: 20px;
    text-indent:2px;/*间隙*/
    border: 2px solid #89c2ee;/*边框*/
    background-color: rgba(97, 26, 78, 0.5);
    border-radius: 4px;
   
 }
 input:hover{
   transform: scale(1.1);/*鼠标悬停后scale函数和transform使输入框等比例放大*/
 }

.login-form{/*将账号密码登录按钮设为居中*/
   text-align: center;
}
button{
   color:rgb(167, 167, 218);
   width: 200px;
   background:none;
   font-size: 35px;
   margin-left: 50px;
   letter-spacing: 10px;
   border: 0;/*取消边框*/
}
button:hover{
   transform: scale(1.1);
}
button:hover::after,
button:hover::before{
   width: 100%;/*鼠标悬浮时宽度为100%*/
}
button::after,button::before{/*用befor和after伪元素设置两个边框*/
   content: "";/*内容为空*/
   display: block;/*设置为块元素，独占一行*/
   width: 0%;/*设置初始宽度为0*/
   height: 3px;
   background: rgb(209, 56, 194);/*设置背景色*/
   transition: 0.4s;
}
button::before{
   margin-left: auto;/*左侧随宽度自适应*/
}
.logoContainer{
   margin-left: 160px;
   overflow: hidden;/*确保圆角有效*/
}
.logoContainer img{
  margin-bottom: 30px;
}
.logo {
  border-radius: 20%;
  transition: transform 0.7s;/*添加过渡效果*/
}
.logo:hover{
   transform: rotate(360deg);/*鼠标停滞时旋转360度*/
   border-radius: 50%;/*鼠标悬停时保持圆形*/
}

效果如图

注意！！！

1，文件中的图片地址需要更换为自己的图片地址

2，html和css关联需要设置如下代码

<link rel="stylesheet" href="./login.CSS">

3，因为后面还要转跳一个网页，所有要注意在form action中设置该网页的路径，代码如下

  <form action="1.html" method="get">

制作一个简单的网页

一，和上面的步骤差不多，加了动态背景图和音乐，内容是黑血

这里直接放代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./1.css">
    <title>Document</title>
</head>
<body>
    <form action="">
        <div class="music">
        <audio src="./黑血2.mp3" controls autoplay loop></audio>
        </div>
        <div class="a">
            <h1>转生入《黑暗血时代》之基础面板选择</h1>
            <hr>
            <div class="name">
            <strong>输入昵称:</strong>
            <input type="text" placeholder="请输入你喜欢的昵称" required>
            </div>
            <br>
            <strong>性别:</strong>
            <span class="gander">
             <label><input type="radio" name="gander" checked>女</label>
             <label><input type="radio" name="gander">男</label>
            </span>
            <br>
            <br>
            <div class="option">
                <strong>选择种族:</strong>
                <select >
                    <option >细高人</option>
                    <option >卓尔人</option>
                    <option >黄星人</option>
                    <option selected>地球人</option>
                    <option >地底小人</option>
                    <option >姨族人</option>
                    <option >退化人</option>
                </select>
            </div>
            <div class="jieshao">
                <ul>
                    <h2>修炼体系</h2>
                    <li>一元天：储元体<br>
                        <strong>修炼方式</strong>
                        <div>不断重复吸收释放元气来淬炼身体，积累到九九八十一次后，身体细胞及各单元将被推至储元体的巅峰。</div>
                    </li>
                    <br>
                    <li>二元天：融元体<br>
                        <strong>修炼方式</strong>
                        <div>随着修炼进度的提升，元气将会渐渐与身体融合，直到完成五层融元体修炼，达到二元天巅峰。</div>
                    </li>
                    <br>
                    <li>三元天：纯元体<br>
                        <strong>修炼方式</strong>
                        <div>分底层、中层、上层三大层次。随着元气修炼的进行，会缓缓将本体一步步改造成纯元体，最终到达三元天巅峰。非常稳定平和。</div>
                    </li>
                    <br>
                    <li>四元天：本源体<br>
                        <strong>修炼方式</strong>
                        <div>四元天修炼的是自身源体，纯净的本体元气在这个过程中会渐渐地形成本源元气，同时身体也会渐渐改造为本源源体。直到修炼完成五层，达到四元天巅峰。</div>
                    </li>
                    <br>
                    <li>五元天：命源体<br>
                        <strong>修炼方式</strong>
                        <div>修炼命源，层次未知。命源体修炼完成后达到五元天巅峰。</div>
                    </li>
                    <br>
                    <li>六元天：合源体<br>
                        <strong>修炼方式</strong>
                        <div>将本源体与命源体融合渐渐形成完整的合源体，最终达到六元天巅峰。</div>
                    </li>
                    <br>
                    <li>七元天：一阶形态源门<br>
                        <strong>修炼方式</strong>
                        <div>不明</div>
                    </li>
                    <br>
                    <li>八元天：二阶形态源门<br>
                        <strong>修炼方式</strong>
                        <div>不明</div>
                    </li>
                    <li>九元天：巅峰源门
                        <br>
                        <strong>修炼方式</strong>
                        <div>不明</div>
                    </li>
                    <li>灵</li>
                </ul>
            </div>
            <div class="gongfa">
                <h2>修炼方向:</h2><br>
                <br>
               <label ><input type="radio" name="q">练元</label> 
               <label ><input type="radio" name="q">炼体</label>
            </div>
            <br>
            <div class="duoxuan">
                <strong>使用武器：</strong>
                <input type="checkbox">千辟剑
                <input type="checkbox">零维
                <input type="checkbox">种子（意识原体）
                <input type="checkbox">黑气漩涡
                <input type="checkbox">黑气
                <input type="checkbox">物子碎片
                <input type="checkbox">立方体
                <input type="checkbox">灵封/假灵
                <input type="checkbox">巨人的眼泪
                <input type="checkbox">水晶头骨
                <input type="checkbox">九章图箓
                <input type="checkbox">第七钉
                <input type="checkbox">古书
            </div>
            <br>
            <br>

            <div class="lianxi"> 
                <strong>您最喜欢书中哪几个桥段,欢迎讨论</strong>
                <br>
                <br>
                <textarea placeholder="在此框填写您的感想"></textarea>
            </div>
            <br>
            <br>
            <div class="add">
                <strong>加入我们</strong>
                <br>
                <br>
                <div>
                    <button type="submit">获取联系方式</button>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

使用css修饰这个简单的网页

.a {
    text-align: center;/*文字居中对齐*/
    padding: 20px;
    box-sizing: border-box;
    color: rgb(247, 247, 247);
}
.name input{
   width: 200px;
   height: 50px;
   border-radius: 10px ;
   background-color:rgba(114, 114, 155, 0.6);
   border: 0;/*去掉边框*/
   font-size: 18px;
   color: antiquewhite;
}
input:hover{
    transform: scale(0.9);
}
.jieshao{
    display: flex;
    justify-content: center;
    text-align: left;
    margin-bottom: 0;
}
.jieshao h2{
    text-align: center;
}
.gongfa{
   margin: 0;
}
body{
    background-image: url(./R-C.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: auto;
}
.option{
    font-size: 18px;
}
.option select{
    width: 100px;
    height: 30px;
    background: linear-gradient(90deg,rgba(201, 108, 247, 0.35),rgba(18, 18, 234, 0.5));/*渐变背景*/
    color: rgb(45, 155, 250);
}
.lianxi{
    font-size: 20px;
    letter-spacing: 2px;
}
.lianxi textarea{
    width: 500px;
    height: 200px;
    background-color: rgba(0, 0,0, 0.8);
    border-radius: 10px;
    font-size: 20px;
    color: aliceblue;
}
.lianxi textarea:hover{
    transform: scale(1.05);/*鼠标悬停后文本框发达1.05倍*/
}
.add{
    font-size: 30px;
    letter-spacing: 2px;
}
.add button{
    width: 200px;
    height: 50px;
    font-size: 25px;
    background: none;
    border: 0;
    color: #f5ecec;
    overflow: hidden;
}

.add button:hover{
    border: 0;
    transform: scale(1.1);
}
.a button::after,
button::before{
    content: "";
    display: block;/*设置为块元素，独占一行*/
    width: 0%;
    height: 5px;
    background-color: rgba(97, 36, 240, 0.8);
    transition: 0.4s;
}
.a button::before{
    margin-left: auto;/*上伪元素左侧随宽度自适应*/
}
.a button:hover::after,button:hover::before{
    width: 100%;
}
.music{
    background-color: rgba(0,0,0, 0.8);
}

效果如图

总结

1，所有图片和音乐链接都需要自己更换

2，这些代码只是参考，建议打完一遍，自己设计一个

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

UFW防火墙安全指南

UFW（Uncomplicated Firewall）是Ubuntu/Debian系统中简化防火墙管理的工具，通过直观命令帮助用户有效控制网络流量，提升系统安全性。文章详细介绍了UFW的基本命令，包括启停防火墙、添加规则、限制连接速率和日志配置等操作，并提供了安全最佳实践，如默认拒绝策略、IP地址限制和服务级规则管理。同时，还涵盖高级配置技巧，例如多网络接口设置、规则优先级调整、IPv6支持及与f