HTML+CSS实训——Day02——仿一个网易云音乐的登陆界面-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTML+CSS实训——Day02——仿一个网易云音乐的登陆界面。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

仓库链接:https://github.com/MengFanjun020906/HTML_SX

前言

今天要继续完成我们的音乐软件了，昨天写完了封面，今天该完成开屏广告和登陆界面了。

登陆界面代码

<!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>Document</title>
    <style>
        body{
            background-color: red;
        }
        h2{
            color: white;
            font-weight: 400;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 160px;
            margin-bottom: 50px;
        }
        .logo {
            /* 设置图片的大小 */
            width: 30px;
            height: 30px;
            margin-right: 5px;



        }
        /* css选择器可以灵活运用 */
        
        .from>input {
            width: 280px;
            height: 36px;
            border-radius: 25px;
            border: none;
            margin-bottom: 6px;
            /* 清除轮廓 */
            outline: none;
            
        }
        button{
            width: 280px;
            height: 36px;
            border-radius: 20px;
            border: none;
            font-size: 20px;
            background-color: red;
            border: 2px solid white;
            color: white;
            font-weight: 200;
        }
        .from{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            /* 弹性子元素默认不换行 */
        }
        /* 子代选择器 */
    </style>
</head>

<body>
    <h2>
        <img src="img/logo.png" class="logo" alt="加载">
        丁真音乐

    </h2>
    <div class="from">
        <input type="text" class="uname">
        <br>
        <input type="password" class="upwd">
        <button class="login"> 登陆</button>
    </div>
</body>
</html>

HTML+CSS实训——Day02——仿一个网易云音乐的登陆界面

开屏广告代码

<!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>Document</title>
</head>
<style>
    body {
        background-image: url('img/sxc.jpeg');
        /* 背景图片大小，宽 高 */

        background-size: 375px 667px;
       

    }

    div {
        color: white;
        position: fixed;
        right: 30px;
        bottom: 40px;
        background-color: #ffc0cbab;
        width: 80px;
        text-align: center;
        /* 文本默认在行高中垂直居中，
            所以把行高和元素的高度设成一样的，
            看起来就像文本在元素中垂直居中一样 */
        height: 30px;
        line-height: 30px;
        /* 圆角:设置的数值是圆的半径 */
        border-radius: 15px;
        font-size: 14px;


    }
</style>

<body>
    <div>
        5s 跳过

    </div>
</body>

</html>

具体是啥图片我就不在这里展示了，这是一个图片界面加上跳过按钮。
在css里面加入这些

        .uname{
            background-image: url("img/uname.png");
            background-size: 40px 40px; 
            /* 控制重复 */
            background-repeat: no-repeat;
            /* 控制位置 */
            background-position: right center;

        }   
        .upwd{
            background-image: url("img/upwd.png");
            background-size: 40px 40px; 
            /* 控制重复 */
            background-repeat: no-repeat;
            /* 控制位置 */
            background-position: right center;

        }

感觉更美观了
HTML+CSS实训——Day02——仿一个网易云音乐的登陆界面

加入下面的隐私政策

html

 <div class="agreement">
            <div class="left">
                <input type="checkbox" name="" id="">同意
            </div>
            <div class="right">
                <span>《服务条款》</span>
                <span> 《隐私政策》</span>
                <span>《儿童隐私政策》</span>
                <span>《中国移动认证服务协议》</span>

            </div>

css

        .agreement>.left {
            width: 70px;
            margin-left: 30px;
        }

        .agreement>.right {
            display: flex;
            flex-wrap: wrap;
            margin-left: 20px;
        }

        .agreement {
            font-size: 12px;
            color: white;
            display: flex;
            margin-top: 20px;
            margin-left: auto;
            margin-right: auto;
        }

HTML+CSS实训——Day02——仿一个网易云音乐的登陆界面

在下面添加图标

HTML

    <div class="icon">
        <i class="weixin"></i>
        <i class="qq"></i>
        <i class="weibo"></i>
        <i class="apple"></i>
    </div>

CSS文章来源地址https://www.toymoban.com/news/detail-457410.html

        .icon {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 30px;
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .icon>i{
            width: 50px;
            height: 50px;
            background-size: 40px;
            background-repeat: no-repeat;
            background-position: center center;
            background-color: white;
            border-radius:25px; ;
            margin-left: 10px;
            margin-right: 10px;
        }
        .weixin{
            background-image: url(img/weixin.png);
        }
        .qq{
            background-image: url(img/qq.png);
        }
        .weibo{
            background-image: url(img/weibo.png);
        }
        .apple{
            background-image: url(img/apple.png);
        }