当前位置： 首页 > news >正文

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

news 文章来源：https://blog.csdn.net/qq_42887663/article/details/130822692 2025/1/18 18:18:02

仓库链接: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>

在这里插入图片描述

开屏广告代码

<!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

 <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

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

CSS

        .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);}

相关文章：

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

仓库链接:https://github.com/MengFanjun020906/HTML_SX 前言 今天要继续完成我们的音乐软件了&#xff0c;昨天写完了封面&#xff0c;今天该完成开屏广告和登陆界面了。 登陆界面代码 <!DOCTYPE html> <html lang"en"> <head><meta charse…...

编程日记 2023/6/9 8:51:38

css蓝桥杯--电影院排座位

目录 一、介绍二、准备三、⽬标四、代码五、知识点六、完成 一、介绍 随着⼈们⽣活⽔平的⽇益提升&#xff0c;电影院成为了越来越多的⼈休闲娱乐&#xff0c;周末放松的好去处。各个城市的电影院数量也随着市场的需求逐年攀升。近⽇&#xff0c;⼜有⼀个电影院正在做着开张前…...

编程日记 2023/6/9 8:46:37

c++学习——多态

多态 **多态的语法****多态的底层原理图****多态案1——计算机类****纯虚函数和抽象类****多态案例2——饮品****虚析构和纯虚析构****多态案例3—— 电脑组装** 多态是C面向对象三大特性之一 多态分为两类 静态多态:函数重载和运算符重载属于静态多态&#xff0c;复用函数名 动…...

编程日记 2023/6/9 8:41:36

Java SPI机制及原理详解

前言 Java SPI (Service Provider Interface) 是一种重要的组件化方式&#xff0c;它可以让程序在运行时动态地装载一些实现模块&#xff0c;从而增强程序的可扩展性和灵活性。本文将详细介绍 Java SPI 的基本概念、原理以及使用方法。 1. 什么是Java SPI Java SPI 是一种标准…...

编程日记 2023/6/9 8:36:35

不压缩打包layui

手动打包 下载layui源码&#xff08;当前版本2.6.4&#xff09;&#xff0c;并解压缩 下载地址&#xff1a;layui gitee 安装nodejs&#xff08;v10.24.1&#xff09; 下载链接 windows-x64 安装cnpm npm install -g cnpm -registryhttps://registry.npm.taobao.org全局安…...

编程日记 2023/6/9 8:31:34

过去、现在及未来

人生最邪恶的地方在于&#xff0c;只能年轻一次 回顾下我毫无规划的&#xff0c;且已经消耗掉的青春 一&#xff1a;过去 19岁&#xff0c;进入大学&#xff0c;兼职、玩儿、暧昧 20-21岁&#xff0c;初创软件公司打杂、恋爱、暧昧 22、23、24岁&#xff0c;上海&#xff…...

编程日记 2023/6/9 8:26:33

leetcode701. 二叉搜索树中的插入操作(java)

二叉搜索树中的插入操作 leetcode701. 二叉搜索树中的插入操作题目描述 递归解题解题思路代码演示 二叉树专题 leetcode701. 二叉搜索树中的插入操作 原题链接&#xff1a; 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode.cn/problem…...

编程日记 2023/6/9 8:21:32

Docker的容器管理操作

1、创建容器 容器创建&#xff1a;就是将镜像加载到容器的过程。 创建容器时如果没有指定容器名称&#xff0c;系统会自动创建一个名称。 新创建的容器默认处于停止状态&#xff0c;不运行任何程序&#xff0c;需要在其中发起一个进程来启动容器。 docker create创建的容器…...

编程日记 2023/6/9 8:16:28

计算机组成原理——中央处理器

文章目录 **一 CPU的功能和基本结构****1 CPU的功能****2 [基本结构](http://t.csdn.cn/bpCt3)****2.1 运算器****2.2 控制器** **二 指令执行过程****1 指令周期****2 指令周期的数据流****2.1 取指周期****2.2 间址周期****2.3 执行周期****2.4 中断周期** **3 指令的执行方案…...

编程日记 2023/6/9 8:11:27

tidb变更大小写敏感问题的总结

作者&#xff1a; sustyle 原文来源&#xff1a; https://tidb.net/blog/2a72bc13 1 背景 近期&#xff0c;我们线上的tidb集群就遇到一个变更忽略大小写的需求&#xff0c;本来以为一个改表工单就解决了&#xff0c;但是业务反馈工单完成后&#xff0c;大小写仍旧敏感&…...

编程日记 2023/6/9 8:06:25

法规标准-UN R158标准解读

UN R158是做什么的&#xff1f; UN R158全名为针对驾驶员识别车辆后方弱势道路使用者&#xff0c;联合国对倒车系统和机动车的统一规定&#xff0c;该法规涉及批准倒车和机动车辆的装置&#xff0c;主要为保证倒车时避免碰撞&#xff0c;方便驾驶员观察了解车辆后部人员和物体…...

编程日记 2023/6/9 8:01:25

160个CrackMe之002

这道题就很简单 有了第一道题目的支持 我们就能做 首先 我们先要下载Msvbvm50.dll Msvbvm50.dll下载_Msvbvm50.dll最新版下载[修复系统丢失文件]-下载之家 然后我们可以运行程序了 比之前那个还简单 就是输入 然后比对 报错或者成功 开始逆向分析 先去常量中进行查找 找…...

编程日记 2023/6/9 7:56:24

3. 响应状态码及Response对象的status_code属性

3. 响应状态码及Response对象的status_code属性 文章目录 3. 响应状态码及Response对象的status_code属性1. 响应状态码2. 响应状态码共分为5种类型2.1 1xx&#xff08;临时响应&#xff09;2.2 2xx &#xff08;成功&#xff09;2.3 3xx &#xff08;重定向&#xff09;2.4 4x…...

编程日记 2023/6/9 7:51:23

MIME 类型列表 03

看表~按照内容类型排列的 MIME 类型列表 类型/子类型扩展名application/envoyevyapplication/fractalsfifapplication/futuresplashsplapplication/htahtaapplication/internet-property-streamacxapplication/mac-binhex40hqxapplication/msworddocapplication/msworddotappl…...

编程日记 2023/6/9 7:46:22

SpringBoot项目登录并接入MFA二次认证

MFA多因素认证(Multi-Factor Authentication )&#xff1a; 一些需要身份认证的服务&#xff08;如网站&#xff09;&#xff0c;为了提升安全性&#xff0c;通常会在账号密码登录成功后&#xff0c;要求用户进行第二种身份认证&#xff0c;以确保是正确用户登录&#xff0c;避…...

编程日记 2023/6/9 7:41:21

算法与数据结构（三）

一、堆 1&#xff0c;堆结构就是用数组实现的完全二叉树结构 根节点的左孩子的下标为&#xff1a;2i1,右孩子为2i2。两个孩子的父节点为(i-1)/2向下取整 2&#xff0c;完全二叉树中如果每棵子树的最大值都在顶部就是大根堆 从下往上将孩子与父节点进行比较&#xff0c;如果子叶…...

编程日记 2023/6/9 7:36:20

亚马逊云科技出海日，让数字经济出海扩展到更多行业和领域

数字化浪潮之下&#xff0c;中国企业的全球化步伐明显提速。从“借帆出海”到“生而全球化”&#xff0c;中国企业实现了从传统制造业“中国产品”出口&#xff0c;向创新“中国技术”和先导“中国品牌”的逐步升级。 作为全球云计算的开创者与引领者&#xff0c;亚马逊云科技…...

编程日记 2023/6/9 7:31:19

Pb协议的接口测试

【摘要】 Protocol Buffers 是谷歌开源的序列化与反序列化框架。它与语言无关、平台无关、具有可扩展的机制。用于序列化结构化数据&#xff0c;此工具对标 XML &#xff0c;支持自动编码&#xff0c;解码。比 XML 性能好&#xff0c;且数据易于解析。更多有关工具的介绍可参考…...

编程日记 2023/6/9 7:26:18

2. 分布式文件系统 HDFS

2. 分布式文件系统 HDFS 1. 引入HDFS【面试点】 问题一&#xff1a;如果一个文件中有 10 个数值&#xff0c;一行一个&#xff0c;并且都可以用 int 来度量。现在求 10 个数值的和 思路&#xff1a; 逐行读取文件的内容把读取到的内容转换成 int 类型把转换后的数据进行相加…...

编程日记 2023/6/9 7:21:16

借助金融科技差异化发展，不一样的“破茧”手法

撰稿 | 多客 来源 | 贝多财经 民营银行的诞生顺应了普惠金融的要求&#xff0c;承担着支持民营经济、服务小微的历史使命。经过近年来的发展&#xff0c;19家民营银行形成了特色化、差异化的发展模式&#xff0c;并用各自本领实践普惠金融的初心。 本文从多家民营银行在核心技…...

编程日记 2023/6/9 7:16:15

typescript中type、interface的区别

一、概念定义 interface&#xff1a;接口 在TS 中主要用于定义【对象类型】&#xff0c;可以对【对象】的形状进行描述。type &#xff1a;类型别名 为类型创建一个新名称&#xff0c;它并不是一个类型&#xff0c;只是一个别名。 二&#xff0c;区别 interface&#xff1a; …...

编程日记 2023/6/9 7:11:14

Ingress详解

Ingress Service对集群外暴露端口两种方式&#xff0c;这两种方式都有一定的缺点&#xff1a; NodePort &#xff1a;会占用集群集群端口&#xff0c;当集群服务变多时&#xff0c;缺点明显LoadBalancer&#xff1a;每个Service都需要一个LB&#xff0c;并且需要k8s之外设备支…...

编程日记 2023/6/9 7:06:13

【递归算法的Java实现及其应用】

文章目录 递归算法概述递归算法的实现步骤递归算法的Java实现递归算法的底层工作原理递归算法的底层代码讲解&#xff08;优先级高&#xff09;递归算法的实际应用场景递归算法在场景中解决的问题递归算法的优点和缺点总结 递归算法概述 递归算法是一种通过调用自身来解决问题…...

编程日记 2023/6/9 7:01:12

2023年度第四届全国大学生算法设计与编程挑战赛（春季赛）

目录 2023年度第四届全国大学生算法设计与编程挑战赛&#xff08;春季赛&#xff09;1、A2、Bx3、Cut4、Diff5、EchoN6、Farmer7、GcdGame8、HouseSub9、IMissYou!10、Jargonless 2023年度第四届全国大学生算法设计与编程挑战赛&#xff08;春季赛&#xff09; 1、A 题目描述…...

编程日记 2023/6/9 6:56:11

如何用PHP获取各大电商平台的数据

PHP获取API数据是指使用PHP语言从web服务中提取数据。API是指应用程序接口&#xff0c;它允许应用程序之间进行交互和通信&#xff0c;并且允许一个应用程序从另一个应用程序获取数据。PHP是一种网站开发语言&#xff0c;它可以使用多种方式来获取API数据。 在PHP中&#xff0…...

编程日记 2023/6/9 6:51:09

一站式完成车牌识别任务：从模型优化到端侧部署

交通领域的应用智能化不断往纵深发展&#xff0c;其中最为成熟的车牌识别早已融入人们的日常生活之中&#xff0c;在高速公路电子收费系统、停车场等场景中随处可见。一些企业在具体业务中倾向采用开源方案降低研发成本&#xff0c;但现有公开的方案中少有完成端到端的车牌应用…...

编程日记 2023/6/9 6:46:08

Linux4.8Nginx Rewrite

文章目录 计算机系统5G云计算第六章 LINUX Nginx Rewrite一、Nginx Rewrite 概述1.常用的Nginx 正则表达式2.rewrite和location3.location4.实际网站使用中&#xff0c;至少有三个匹配规则定义5.rewrite6.rewrite 示例 计算机系统 5G云计算 第六章 LINUX Nginx Rewrite 一、…...

编程日记 2023/6/9 6:41:07

DHT11温湿度传感器

接口定义 传感器通信 DHT11采用简化的单总线通信。单总线仅有一根数据线&#xff08;SDA&#xff09;&#xff0c;通信所进行的数据交换、挂在单总线上的所有设备之间进行信号交换与传递均在一条通讯线上实现。 单总线上必须有一个上拉电阻&#xff08;Rp&#xff09;以实现单…...

编程日记 2023/6/9 6:36:06

RestTemplate超简单上手

目录 1.什么是RestTemplate? 2.RestTemplate的使用 2.1spring环境下 注意1&#xff1a;RestTemplate中发送请求execute()和exchange()方法的区别 execute()方式 exchange()方式 二者的区别 注意2&#xff1a;进阶配置——底层HTTP客户端 2.2非spring环境下 1.什么是R…...

编程日记 2023/6/9 6:31:05

监控系统设计原则及实现目标

1.1.1.1 1 &#xff0e;完善的设计理念&#xff1a; 包括符合国际发展潮流的特性化设计&#xff0c;完整的安防监控及围墙周界报警系统 的布线、设备安装、调试、测试、验收的“交钥匙”工程管理制度&#xff0c;以及符合标 准的质量控制体系。 1.1.1.2 设计原则&#xf…...

编程日记 2023/6/9 6:26:04

centos7如何安装wordpress/百度竞价广告代理

目录 题目描述&#xff1a;示例 :解法&#xff1a;题目描述&#xff1a; 给定一棵二叉树&#xff0c;你需要计算它的直径长度。一棵二叉树的直径长度是任意两个结点路径长度中的最大值。这条路径可能穿过根结点。 示例 : 给定二叉树 1/ \2 3/ \ 4 5 返回 3, 它的长度是…...

编程日记 2025/1/18 15:05:04

学做网站从零开始/谷歌搜索入口

1.子组件给父组件传值a.先在子组件中定义事件&#xff0c;当触发这个事件后才开始传值b.当触发子组件中的事件后&#xff0c;使用$emit把传递事件名称和值给父组件&#xff0c;事件名称是自定义的c.父组件在页面子组件的模板上定义事件&#xff0c;名称是子组件传过来的名字d.获…...

编程日记 2025/1/18 13:58:50

镇江企业网站建设公司/公众号软文推广多少钱一篇

2019独角兽企业重金招聘Python工程师标准>>> Android4.0的版本编译完后直接emulator就能运行模拟器&#xff0c;到了4.1就不行了&#xff01; 要手动设置如下环境变量&#xff1a; export ANDROID_BUILD_TOP/Volumes/android/android export ANDROID_PRODUCT_OUT…...

编程日记 2025/1/18 13:30:14

福建有没有网站做一件代发/app拉新接单平台

一、电阻的测量 选择欧姆档 200欧、2K欧、20K欧、200K欧、20M欧 步骤&#xff1a;不知电阻多大&#xff0c;先调到最大档20M欧&#xff0c;如果大概知道就调到相应的档&#xff0c; 当显示1时说明此电阻过大&#xff0c;需要往档大调&#xff0c; 当显示0时说明此电阻过小&…...

编程日记 2025/1/18 10:04:42

互联网推广加盟/搜索引擎优化seo

一、Step download timeout (120 seconds) 这是一个经常会遇到的问题&#xff0c;解决得办法走以下步骤&#xff1a; 1、 修改run time setting中的请求超时时间&#xff0c;增加到600s,其中有三项的参数可以一次都修改了&#xff0c;HTTP-request connect timeout&#xff0…...

编程日记 2025/1/18 8:53:11

自助网站建设哪家好/链接提交

在javascript值中有两个“家伙”总是叫人很迷糊&#xff0c;它们就是 null 和 undefined&#xff1b;开发过程中&#xff0c;我们可以说会经常碰到这两个“家伙”&#xff0c;但是要真正了解null 和 undefined两者的区别&#xff0c;还是要特别研究下的。最近查看了一些相关资料…...

编程日记 2025/1/18 8:30:48