首页 新闻 会员 周边

前端样式怎么调啊?好难

0
悬赏园豆:20 [已解决问题] 解决于 2023-08-10 19:20

在做一个登录页面,手动调样式,可是,好难啊!
居中效果都不会了。

难点:
1、页面元素居中,“我的系统”;
2、字段名称+输入框的长度 和 上面“我的系统”对齐
3、两个按钮 居中;

传说中的 所见即所得 呢?
请问,自动化框架有哪些?

前端开发 怎么积累经验,以便做出 一流美感 的网页?

手写的 css:
div.title-sys {
margin-top: 10%;
width: 50%;
font-size: 36px;
text-align: center;
color: white;
background-color: blue;
padding: 16px 0;
}

label.form-input-title {
display: inline-block;
margin: 2px 0;
width: 20%;
text-align: center;
border: 1px solid black;
}
input.input-box {
width: 80%;
}
label.input-check {
color: brown;
margin-left: 4px;
}

button.input-button {
width: 120px;
color: #FFFFFF;
background-color: #A52A2A;
}

快乐的凡人721的主页 快乐的凡人721 | 老鸟四级 | 园豆:3955
提问于:2023-08-10 15:37
< >
分享
最佳答案
0

思考方向:盒子模型,float,display,margin等
解决问题:在浏览器中通过F12调试页面代码,修改对应元素的行业样式,改好后在根据实际情况写入class中
建议:多参考w3school.com.cn等网站的教程,多看看每个样式对应的作用,或者直接百度搜索你问题的关键字

收获园豆:10
小小七爷 | 菜鸟二级 |园豆:212 | 2023-08-10 17:47

好的。感谢。

快乐的凡人721 | 园豆:3955 (老鸟四级) | 2023-08-10 19:20
其他回答(2)
0

flex 布局解忧愁

收获园豆:10
dudu | 园豆:30948 (高人七级) | 2023-08-10 17:37

收到。回头调查下。感谢。

支持(0) 反对(0) 快乐的凡人721 | 园豆:3955 (老鸟四级) | 2023-08-10 17:46

果然很棒,网络上导出都是 flex 布局的信息。
唯一的缺点就是 对 老式浏览器兼容性不好,I don't care.

容器:
display: flex;
align-items: center;

子元素 靠右:
margin-left: auto;

还在 摸索。

支持(0) 反对(0) 快乐的凡人721 | 园豆:3955 (老鸟四级) | 2023-08-11 15:01
0

<div class="g-container">
<div class="g-box"></div>
</div>

.g-container {
width: 100vw;
height: 100vh;
display: flex;
}
.g-box {
width: 40vmin;
height: 40vmin;
background: #000;
margin: auto;
}
你可以试试这个,很方便

前端angular小白 | 园豆:198 (初学一级) | 2023-08-10 20:21

理解前端尺寸vw、vh、rem、em
https://zhuanlan.zhihu.com/p/96721026
感谢。
前端的东西还真多啊。

支持(0) 反对(0) 快乐的凡人721 | 园豆:3955 (老鸟四级) | 2023-08-10 21:56

@快乐的凡人721: 冲呀,前端说难不难,说简单也不简单

支持(0) 反对(0) 前端angular小白 | 园豆:198 (初学一级) | 2023-08-11 17:56

@前端angular小白:
是的,页面的 复杂度 还好说,美感 的等级就 千差万别了,永远有更新更好的

支持(0) 反对(0) 快乐的凡人721 | 园豆:3955 (老鸟四级) | 2023-08-11 19:51

@快乐的凡人721: 学无止境,项目真正用的多的都是功能上,除非是那种比较需要美化的项目,不然一般的都会比较简单

支持(0) 反对(0) 前端angular小白 | 园豆:198 (初学一级) | 2023-08-14 17:39
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册