HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/BaiDu.css" />
</head>
<body>
<div id="head">
<!--百度logo-->
<div id="head_logo">
<a href="http://www.baidu.com">
<img src="img/小图片2.png" />
</a>
</div>
<!--百度登录-->
<div id="head_login">
<span>我已注册,现在就</span>
<input type="button" value="登录" />
</div>
<!--百度导航-->
<div id="nav">
<img src="img/小图片2.png" />
</div>
<!--百度注册-->
<div id="register">
<!--注册表单-->
<div id="reg_form">
<form>
<p><label>用户名</label><input placeholder="请设置用户名"/></p>
<p><label>手机号</label><input placeholder="请设置手机号"/></p>
<p><label>密码</label><input placeholder="请设置登陆密码" type="password"/></p>
<p>
<label>验证码</label><input placeholder="请输入验证码" style="width:160px ;" />
<button id="reg_form_msg">获取短信验证码</button>
</p>
<div id="reg_form_isCheck">
<input type="checkbox" style="" />
阅读并接受<a href="http://www.baidu.com" target="_blank">百度用户协议</a>及<a href="http://www.baidu.com" target="_blank">百度隐私权保护声明</a>
</div>
<div id="reg_form_btn">
<button type="button" style="width: 185px;">注册</button>
</div>
</form>
</div>
<!--注册二维码-->
<div id="red_qrcode">
<img src="img/小图片2.png" />
</div>
</div>
<!--百度版权-->
<div id="copyright">
2018 ©Baidu
</div>
</div>
</body>
</html>
CSS:
@charset "utf-8";
#head{
width: 1000px;
margin: 0px auto;/*上下边距为0px,左右边距自动计算居中*/
}
#head #head_logo{
width: 330px;
background: url(../img/小图片.jpg) right no-repeat;
cursor: pointer;/*鼠标变手势*/
float: left;/*左浮动*/
/*内下间距,为了和导航之间保持距离*/
padding-bottom: 5px;
}
#head #head_login{
float: right;/*右浮动*/
font-size: 10px;/*字体大小*/
margin-top:10px ;/*上外间距10px*/
}
#head #head_login input{
width: 64px;
height: 32px;
/*设置背景图片不重复并通过具体坐标获取显示部分*/
background: url(../img/小图片.jpg) no-repeat 0px -48px;
font-weight: 700;/*字体粗细*/
color: #666;
border: 0;/*边框为0*/
font-family: "微软雅黑";
}
#nav{
width: 1200px;
margin: 0px auto;/*上下边距为0,左右边距居中*/
}
#register{
width: 950px;
margin:20px 0px auto ;
}
#register #reg_form{
float: left;
text-align: right;
font-size: 14px;
color: #666666;
font-weight: 700;
}
#register #reg_form label{
margin-right: 10px;/*右外间距10px*/
}
#register #reg_form p input{
width: 328px;
height: 30px;
border: 1px solid #ddd;
font-size: 14px;
color: #666;
text-indent: 10px;
margin-bottom: 5px;
}
#register #reg_form #reg_form_msg{
height: 42px;
width: 160px;
background: #f7f7f7;
border: 1px solid #ddd;
font-size: 14px;
cursor: pointer;
}
#register #reg_form #reg_form_msg:hover{
background-color: #eee;
}
#register #reg_form_isCheck{
font-size: 12px;
font-weight: 400;
margin-right:30px ;
}
#register #reg_form_isCheck a{
text-decoration: none;
}
#register #reg_form_btn button{
height: 50px;
width: 350px;
background-color: red !important;
border: 0;
color: white;
font-size: 16px;
font-weight: 700;
cursor: pointer;
border-radius: 3px;
margin-top: 20px;
}
#copyright #reg_qrcode{
float: right;
margin-top: 15px;
margin-right: -10px;
}
#copyright{
font-size: 10px;
margin-top: 500px;
text-align: center;
color: #7a77c8;
}
本文介绍了使用HTML和CSS实现百度网页的基本布局和样式设计,包括头部logo、登录按钮、注册表单及其验证功能等核心元素的设计过程。
2万+

被折叠的 条评论
为什么被折叠?



