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

wx-zhou

于 2021-04-25 21:33:20 发布

阅读量3k

点赞数 10

CC 4.0 BY-SA版权

分类专栏： html 项目学习文章标签： html css html5 百度

本文链接：https://blog.youkuaiyun.com/CNdota_never_die/article/details/116127445

本文通过HTML和CSS实现了类似百度登录界面的设计。作者先手绘布局草图，再使用div、a、p、input等标签完成页面构图，并添加了用户名密码输入框、记住密码选项及登录按钮等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目的

根据百度登陆的网页界面，自己尝试写一个类似的界面，用 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%;">