开发初探-前端日记 — html、css的使用，模拟制作百度登陆界面

目的

根据百度登陆的网页界面，自己尝试写一个类似的界面，用 html 和 css 代码实现。

想要做出这个界面，首先根据该界面，我用草稿纸绘制了一张区域分布图：

(请勿吐槽字丑和图片简陋！)
大概构思出整个页面的区域分布后，利用 HTML 的 div、a 、p 、 input 等标签对整个页面进行了构图，后面用贴上博主的代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="./css/百度作业.css"></head><body style="padding-top: 5% ;"><div id="div_totle"><div id="div_body"><div id="div_head"><div id="div_img"><img src="./imgs/百度标志.png" width="136px" height="45" style="margin-top: 5%;"></div><div id="div_text"><p style="font-family: '微软雅黑';margin-top: 12%;font-weight: bold;"> &nbsp;&nbsp;·&nbsp;&nbsp;&nbsp;&nbsp;用户名密码登陆 </p></div></div><div id="div_input"><form action="https://tijiao.wangzhan.com" method="post"><p><input class="input-class" type="text" name="username" placeholder="手机/邮箱/用户名"/></p><p><input class="input-class" type="password" name="username" placeholder="密码" /></p><p><input type="checkbox" name="save_or_not" value="h1" style="font-size: 1.625rem;"/> 保存密码</p><p><input type="submit" name="tijiao" style="width: 100%;height: 35px;align-items: center;color: white;background-color: dodgerblue;border: 0;"value="登陆"/><p><a href="https://zhaohui.mima.com" style="color: dodgerblue;text-decoration: none;"> 忘记密码？ </a></p></p></form></div></div><div id="div_end"><div style="width: 20%;float: left;margin-top: 6.5%;margin-left: 5%;"><a href="" style="text-decoration: none;"> 扫码登陆 </a>    </div><div style="width: 30%;float: left;margin-top: 5.5%;"><a href="" ><img src="./imgs/竖线.png" height="12px" style="margin: 8%;"></a><a href=""><img src="./imgs/qq.png" height="14px" style="margin: 8% auto;"></a><a href=""><img src="./imgs/新浪微博.png" height="17px" style="margin: 8% auto;"></a><a href=""><img src="./imgs/微信.png" height="17px" style="margin: 8% auto;"></a></div><div style="width: 20%;float: right;margin-top: 6.5%;margin-right: 4%;"><a href="" style="text-decoration: none;"> 立即注册 </a></div></div></div></body>
</html>

并将设置页面的 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 学习网站.

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

开发初探-前端日记 — html、css的使用，模拟制作百度登陆界面相关推荐

界面开发（2）--- 使用PyQt5制作用户登陆界面
使用PyQt5制作用户登陆界面上篇文章已经介绍了如何配置PyQt5环境,这篇文章在此基础上展开,主要记录一下如何使用 PyQt5 制作用户登陆界面,并对一些基础操作进行介绍. 下面是具体步骤,一起来 ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(二）---登陆界面功能实现
打开 main.js,这个文件里定义的是整体小程序中会用到的一些功能 (即变量之类),也就是说,只要在这里出现的功能,其它页面可以直接拿来使用.可以把它理解为: 共享单车main ,大家都可以用. ...
前端开发体系建设日记
前端开发体系建设日记 · Issue #2 · fouber/blog https://github.com/fouber/blog/issues/2 上周写了一篇文章介绍前端集成解决方案的基本理 ...
前端开发必须要了解的CSS原理
从事Web前端开发的人都与CSS打交道很多,有的人也许不知道CSS是怎么去工作的,写出来的CSS浏览器是怎么样去解析的呢?当这个成为我们提高CSS水平的一个瓶颈时,是否应该多了解一下呢? 一.浏览器的 ...
前端开发必备的1个CSS框架
常言道:工欲善其事,必先利其器,项目紧,框架还是很有必要的. 1. Bootstrap 最初被称为Twitter Blueprint的Bootstrap,是作为内部团队使用的工具而创建的.它是最著名的 ...
从事前端开发必须要了解的CSS原理
从事Web前端开发的人都与CSS打交道很多,有的人也许不知道CSS是怎么去工作的,写出来的CSS浏览器是怎么样去解析的呢?当这个成为我们提高CSS水平的一个瓶颈时,是否应该多了解一下呢? 一.浏览器的 ...
《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 第1章网页设计基础知识...
本节书摘来异步社区<网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通>一书中的第1章,作者: 何新起 , 任 ...
10个前端开发人员必须知道的CSS框架
对于UI / UX设计人员而言,要制作一个在每个浏览器上都看起来不错的漂亮网站不是一件容易的事.在创建网站布局并使其美观时,开发人员必须考虑所有Web浏览器和移动视图. 恐惧始终存在于内部,如果设计在 ...
css前端日记之盒子模型-----一起去未来
盒子模型一个标签就是一个盒子,网页布局看盒子的摆放位置. 盒子包括什么? 边框(border)内边距(padding)外边距(margin)内容(content): 边框 border的属性:粗细 ...

开发初探-前端日记 — html、css的使用，模拟制作百度登陆界面

目的

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

开发初探-前端日记 — html、css的使用，模拟制作百度登陆界面相关推荐

最新文章

热门文章