开发初探

2023-07-02 19:03| 来源: 网络整理| 查看: 265

目的

根据百度登陆的网页界面，自己尝试写一个类似的界面，用 html 和 css 代码实现。在这里插入图片描述想要做出这个界面，首先根据该界面，我用草稿纸绘制了一张区域分布图： (请勿吐槽字丑和图片简陋！) 大概构思出整个页面的区域分布后，利用 HTML 的 div、a 、p 、 input 等标签对整个页面进行了构图，后面用贴上博主的代码：

;;·;;;;用户名密码登陆保存密码忘记密码？扫码登陆立即注册

并将设置页面的 css 代码贴在下方

html { background-color: #808080; } #div_totle { background-color: white; width: 360px; height: 400px; margin: auto; margin-top: 5%; align-items: center; padding-top: 10px; } #div_body { /* background-color: blue; */ width: 340px; height: 330px; margin: auto; } #div_head { width: 100%; height: 70px; margin: auto; } #div_img { /* background-color: #808080; */ width: 40%; height: 70px; margin: auto; float: left; } #div_text { /* background-color: #87CEFA; */ width: 60%; height: 70px; margin: auto; float: left; } #div_end { background-color: rgba(0, 204, 255, 0.2); width: 100%; height: 70px; margin: auto; } .input-class { border: 1px lightslategrey solid; color: #808080; border-radius: 5px; width: 98.5%; height: 30px; }

这就是整个页面的所有代码内容了，然后得到效果图：在这里插入图片描述就业不能说一点都不像叭，就差也差不多(这次不是处女座)

给大家推荐一个前端学习网站

HTML学习网站. CSS 学习网站.

喜欢别忘了点个关注，后续更新更多学习开发的过程！

【本文地址】

开发初探

开发初探

今日新闻

推荐新闻