仿酷狗音乐移动端静态页面

2023-02-22 21:16| 来源: 网络整理| 查看: 265

仿酷狗音乐移动端静态页面-1

记录自己学习web的日常

代码部分 1 启动页面 * { margin: 0; padding: 0; } .bg { width: 100vw; height: 100vh; background-image: url(kugouimg/start/bg1.png); background-size: cover; overflow: hidden; } .center { width: 76vw; /* height: 20vh; */ /* background-color: #ff00ff; */ margin: 25vh auto; display: flex; justify-content: space-between; } .login { /* display: inline; */ width: 25vw; } .text { width: 48vw; /* padding-left: 6vw; */ margin: auto 0; } h1 { color: #fff; font-size: 12vw; margin-bottom: 2vw; } p { font-size: 5vw; color: #fff; } 酷狗音乐

音乐总有新玩法

// 启动页面定时跳转 setTimeout("window.location.href = 'login.html'", 5000); //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('popstate', function() { history.pushState(null, null, document.URL); }); 2 登录页面 *{ margin: 0; padding: 0; } .bg{ width: 100vw; height: 100vh; background-image: url(./kugouimg/login/bg1.png); background-size: cover; overflow: hidden; } .center { width: 70vw; /* height: 20vh; */ /* background-color: #ff00ff; */ margin: 15vh auto; display: flex; justify-content: space-between; } .logo { /* display: inline; */ width: 20vw; } .text { width: 48vw; /* padding-left: 6vw; */ margin: auto 0; } .h1 { color: #fff; font-size: 9vw; margin-bottom: 2vw; } p { font-size: 5vw; color: #fff; } .btn-part{ width: 70vw; margin: 25vh auto 0 auto; /* display: flex; */ /* background-color:yellow; */ } .btn{ width: 70vw; height: 5vh; border-radius: 2.5vh; border: none; color: #fff; font-size: 3vh; } .login{ background-color: #0c97e6; } .reg{ background-color: #0ce6c4; margin-top: 1vh; } .alert{ margin-top: 8vh; text-align: center; font-size: 2vh; } .other-login{ width: 70vw; height: 10vh; margin: 6vh auto 0 auto; /* background-color: yellow; */ display: flex; justify-content: space-between; } .other-login img{ width: 6vh; /* margin: 0 auto; */ } .other-login div{ width: 23vw; padding: 0 3vh; } .other-login p{ margin-top: 1vh; font-size: 2vh; padding-left: 2vw; } .statement{ margin-top: 4vh; text-align: center; font-size: .5vh; } .statement a{ text-decoration: none; }

酷狗音乐

音乐总有新玩法

登录注册

其他登录方式

微博

微信

登录代表你同意酷狗服务和隐私条款

一些需要注意的点 1、移动端布局在head中声明

可以有效的防止图片在布局中变形失真。 2. 移动端布局要注意ui给的设计图与实际终端的像素的比例，如果自己进行开发训练，可以使用vw，vh来作为单位。这里vw表示移动终端的屏幕宽度，1vw代表站移动终端宽度的1%，即100vw等于终端屏幕宽度。vh作为高度单位，同上。vw，vh始终跟随移动终端的尺寸进行动态变化。

2、外间距问题

在本项目中经常用到margin（外间距）进行div位置变换，其中存在一个问题首尾与父级边框重合的div会造成父级边框跟随设置移动，这是来自于CSS的一个规定

所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。

解决办法 1.在css代码中添加一行代码

overflow: hidden;

2.给父级设置边框 3.给父级设置padding

图片资源

链接: https://pan.baidu.com/s/1sj8bn_l8GEphNQoqsJMh2w 提取码：qtjs

【本文地址】

仿酷狗音乐移动端静态页面

仿酷狗音乐移动端静态页面

今日新闻

推荐新闻