登陆页面

来源：互联网发布：雷迪克数据编辑：程序博客网时间：2024/06/10 06:32

小白的DAY6

1、整理CSS部分已学知识点，整理布局步骤。
2、仿照电脑端百度登录框制作一个登录界面。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link href="登陆界面.css" type="text/css" rel="stylesheet"></head><body> <div class="logo1"><img src="微信截图_20170420143403.png" width="259" height="127" alt="baidu" /></div> <div class="logo2"><img src="微信截图_20170420143322.png" width="516" height="318" alt="hello" /></div><div class="box1"></div><div class="box2"><h3>登陆百度账号</h3><br><br><form><img src="2.png" width="20" height="20" /><input type="text"  placeholder="手机/邮箱/用户名" height="35" width="250" autofocus="autofocus"><br><br><img src="1.png" width="20" height="20" /><input type="password" height="35" width="250" autofocus="autofocus" ><br><br><br></form></div><div class="deng"><form><input type="submit"/></form></div></body></html>

CSS

.logo1 img{    padding:10px 300px 8px 200px;}.logo2 img{    padding:82px 0px 8px 205px;}.box1{    width:1000px;    height:300px;    margin:10px 40px 30px 10px;}form{    display:inline;    height:30px;}.deng{    height:35px;    width:250px;    padding-left:150px;}.box2  {    position:absolute;    top:28%;    left:60%;    width:300px;    height:300px;}h3{    font-family:"微软雅黑";    padding-left:10px;}

效果图

这里写图片描述

0 0