前端样式怎么调啊？好难
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;
}
最佳答案
0
思考方向：盒子模型，float，display,margin等
解决问题：在浏览器中通过F12调试页面代码，修改对应元素的行业样式，改好后在根据实际情况写入class中
建议：多参考w3school.com.cn等网站的教程，多看看每个样式对应的作用，或者直接百度搜索你问题的关键字
收获园豆：10
好的。感谢。
其他回答(2)
0
flex 布局解忧愁
收获园豆：10
收到。回头调查下。感谢。
果然很棒，网络上导出都是 flex 布局的信息。
唯一的缺点就是 对 老式浏览器兼容性不好，I don't care.
容器：
display: flex;
align-items: center;
子元素 靠右：
margin-left: auto;
还在 摸索。
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;
}
你可以试试这个，很方便
理解前端尺寸vw、vh、rem、em
https://zhuanlan.zhihu.com/p/96721026
感谢。
前端的东西还真多啊。
@快乐的凡人721: 冲呀，前端说难不难，说简单也不简单
@前端angular小白:
是的，页面的 复杂度 还好说，美感 的等级就 千差万别了，永远有更新更好的
@快乐的凡人721: 学无止境，项目真正用的多的都是功能上，除非是那种比较需要美化的项目，不然一般的都会比较简单
