首页 > 其他分享 >静态QQ登录代码学习

静态QQ登录代码学习

时间:2024-10-01 23:11:19浏览次数:1  
标签:QQ 登录 width 静态 float height color background margin

记录学习 @搬砖界泰斗这只小狐狸 的静态QQ登陆页面源码,了解静态登陆页面如何书写&&拓宽自己对css的理解

Q1:用css调节子级元素位置时什么时候调节margin,什么时候调节padding?

A1:margin对外,padding对内

e.g.要实现一个这样的排版

有一个大大盒子fafather,里面其中一个是大盒子father,再有两个小盒子,son-img&&son-p

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示文案1</title>
    <link rel="stylesheet" href="./登录.css">
</head>
<body>
    <div class="fafather">
        <div class="father">
                <div class="son-img">img</div>
                <div class="son-p">p</div>
        </div>
        <div class="other"></div>
    </div>
</body>
</html>
  • 整体位置在页面的左上角距离左边70px
    img
    无脑调节father的margin【调节father在上级fafather里的位置】
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: aqua;
}
.fafather {
    float: left;
    background-color: antiquewhite;
    width: 100%;
    height: 100px;
}
.father{
    margin: 0 70px;
    float: left;
    width: 33%;
    height: 100px;
    background-color: azure;
    
}
.other{
    float: right;
    margin: 0 5px;
    width: 50%;
    height: 100px;
    background-color: black;
}
.son-img{
    float: left;
    height: 100px;
    width: 100px;
    background-color: rgb(94, 94, 194);
    
}
.son-p{
    /* float: right; */
    background-color: rgb(44, 196, 166);
    height: 100%;
    /* width: 300px; */
}
  • son-img和son-p之间距离存在距离
    也别调节什么padding margin了,直接用float-left,float-right绝绝子
    img
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: aqua;
}
.fafather {
    float: left;
    background-color: antiquewhite;
    width: 100%;
    height: 100px;
}
.father{
    margin: 0 70px;
    float: left;
    width: 33%;
    height: 100px;
    background-color: azure;
    
}
.other{
    float: right;
    margin: 0 5px;
    width: 50%;
    height: 100px;
    background-color: black;
}
.son-img{
    float: left;
    height: 100px;
    width: 100px;
    background-color: rgb(94, 94, 194);
    
}
.son-p{
    float: right;
    background-color: rgb(44, 196, 166);
    height: 100%;
    width: 300px;
}

CNCLD1:基本上跨级用margin,同级用float-X属性

p.s.一次性调节上下左右,之间用空格隔开【上 右 下 左,上 左右 下,上下 左右】
我靠,感觉自己会布局了!
然而并没有,我要有>2个元素水平放怎么办?
还是用flex布局

float用于2个盒子排布,flex更flex哈哈哈

img

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示文案1</title>
    <link rel="stylesheet" href="./登录.css">
</head>
<body>
    <div class="fafather">
        <div class="father">
                <div class="son-img">img</div>
                <div class="son-p1">p</div>
                <div class="son-p2">p</div>
                <div class="son-p3">p</div>

        </div>
        <div class="other"></div>
        <div class="another"></div>
        <div class="others"></div>
    </div>
</body>
</html>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: aqua;
}
.fafather {
    /* float: left; */
    background-color: antiquewhite;
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: row;
}
P{
    display:block;
}
.father{
    margin: 0 70px;
    /* float: left; */
    width: 33%;
    /* height: 100px; */
    background-color: azure;
    display: flex;
    flex-direction: row;
}
    
.other{
        /* float: right; */
        margin: 0 5px;
        width: 50%;
        /* height: 100px; */
        background-color: black;
    }
.another{
        /* float: right; */
        margin: 0 5px;
        width: 50%;
        /* height: 100px; */
        background-color: black;
    }
.others{
        /* float: right; */
        margin: 0 5px;
        width: 50%;
        /* height: 100px; */
        background-color: black;
    }
.son-img{
width: 25%;
background-color: rgba(217, 74, 74, 0.576);
}
.son-p1{
width: 25%;
background-color: cadetblue;
}
.son-p2{
width: 25%;
background-color: rgb(18, 223, 230);
}
.son-p3{
width: 25%;
background-color: cadetblue;
}

float就图一乐,还是flexyyds

Q2:怎么调节图片透明度?

A2:

opacity: 0.8;
/* 0[全透明]--1【完全不透明,默认】 */

美中不足

因为文字和图片在同一个层级(即它们的父元素没有设置背景)。当你调节图片的透明度时,文字会受到影响,因为它们都是在同一个上下文中绘制的。

improvement

  • 使用绝对定位:将文字放在图片上方,确保它们在不同的层级。
    牺牲图片里有文字效果
  • 使用背景图:将图片设置为元素的背景,而不是作为 标签,这样你可以独立控制透明度
    图片有盒子大小要求
.container {
    background-image: url('image.jpg');
    background-size: cover;
    opacity: 0.5; /* 背景透明 */
    color: black; /* 文字不透明 */
}

  • 使用伪元素:使用 ::before 或 ::after 伪元素为容器添加背景图片。
    然并卵,没人鸟我,先搁置

Q3:怎么使得图片和文字一行对齐?

A3:使用vertical-align: baseline;

我觉得我可以搞一个登陆页面了好好好,开做!
[今天晚了,先去构思,明天再实现哈哈哈]

标签:QQ,登录,width,静态,float,height,color,background,margin
From: https://www.cnblogs.com/GJ504b/p/18444267

相关文章

  • 织梦CMS后台登录验证码如何取消?
    如果你想取消织梦CMS后台登录时的验证码,可以通过以下步骤进行操作:1.下载并编辑 inc_safe_config.php 文件下载文件:使用FTP客户端连接到服务器。导航到网站根目录下的 DATA 文件夹。找到 safe/inc_safe_config.php 文件并下载到本地。编辑文件:使用文本编辑......
  • 静态合批和动态合批
    动态合批与静态合批其本质是对将多次绘制请求,在允许的条件下进行合并处理,减少cpu对gpu绘制请求的次数,达到提高性能的目的。两者是否开启都可以在ProjectSettings->Player->OtherSettings下的StaticBatching和DynamicBatching1.静态合批是将静态(不移动)GameObjects组......
  • PbootCMS伪静态怎么设置?(PbootCMS模板安装后内页打开404错误的解决方法)
    1.后台配置参数-URL规则选择伪静态模式登录PbootCMS后台。进入“系统设置”或相应的配置管理界面。在URL规则设置中选择“伪静态模式”。保存设置。2.根据服务器环境添加伪静态规则Apache环境:将网站根目录下的.htaccess文件复制到根目录。确认.htaccess文件内容正......
  • 可以成功重置 PBootCMS 网站后台登录密码的方法
    当你忘记PBootCMS后台登录密码时,可以使用一个简单的重置工具来解决这个问题。以下是详细的步骤和说明:工具作用此工具用于忘记PBootCMS后台用户账号密码时进行重置。下载地址假设你已经下载了重置工具压缩包 1693883579f162cd.rar。使用方法下载并解压重置工具下载......
  • PBOOTCMS判断登录是否登录代码
    修改控制器文件:在 IndexController.php 文件中添加 isUserLoggedIn() 方法,用于判断用户是否登录。修改模板文件:在模板文件中引入控制器类,并实例化控制器对象。使用 isUserLoggedIn() 方法来判断用户是否登录,并输出相应的信息。优点更准确的判断:通过检查......
  • PbootCMS后台登陆密码忘记/找回密码后台登录密码
    上传文件将 resetpw.php 和 index.html 文件上传到网站根目录。访问重置页面在浏览器中访问 http://www.example.com/index.html。填写信息并提交填写管理员账号和新密码,点击“重置密码”。删除工具文件重置成功后,务必删除 resetpw.php 和 index.ht......
  • 可以成功重置 PBootCMS 后台登录密码的方法
    当你忘记PBootCMS后台登录密码时,可以使用一个简单的重置工具来解决这个问题。以下是详细的步骤和说明:工具作用此工具用于忘记PBootCMS后台用户账号密码时进行重置。下载地址假设你已经下载了重置工具压缩包 1693883579f162cd.rar。使用方法下载并解压重置工具下载......
  • 后台登录提示: 登录失败:数据库目录写入权限不足!
    当后台登录提示“登录失败:数据库目录写入权限不足”时,通常是因为PHP需要写入数据库相关的临时文件或日志文件的目录权限不足。解决这个问题需要确保相应的目录具有正确的权限,并且PHP能够写入这些目录。解决步骤确定数据库目录位置检查目录权限修改目录权限重启Web服务器验......
  • pbootcms后台出现"登录失败:登录失败次数太多已被锁定,请600s重试!" 情况,怎么办?
    当在PBootCMS后台出现“登录失败:登录失败次数太多已被锁定,请600s重试!”的情况时,这通常是由于多次尝试错误密码导致的账户锁定。解决这个问题的方法如下:解决方法删除 runtime 文件夹:打开你的网站根目录。找到 runtime 文件夹并删除它。通常路径为:/www/wwwroot/you......
  • 避免 ChatGPT 电脑版客户端弹出强制登录的方法
    众所周知现在的ChatGPT可以不用登录就能使用,并且现在GitHub上已经出现了PC版的ChatGPT客户端,使用上的感觉是由web浏览器套壳成的一个跨平台桌面应用,像是由类似Electron+Vue3框架开发封装的APP然而我们在不登陆状态下使用该客户端的时候,有时会遇到上述弹出强制登......