您的位置：首页 > Web前端 > HTML

页面布局及百度登录框

2017-04-23 21:09 183 查看

一、简单的页面布局的步骤

1.构思。在构思之前我们总需要了解很多，如：客户的需求、网站的定位、受众群等很多方面的事情。当我们真正了解客户需求后，你可以尽可能的发挥你的想象力，将你想到的"构思"画上去。

2.粗略布局。在这个阶段，我们只要把重要的元素和网页结构相结合，看看框架是否合理、适合客户的需求。创造出物体的形象。页面的整体形象，应该是一个整体。

3.完善布局。当我们已经有一个很好的框架时，我们需要根据客户的要求将其所需的内容有条理的融入于整个的框架中，进入网页布局的阶段时，我们需要通过对图片的处理、空间的合理利用进行编排。

4.深入优化。针对些细节的更改和优化，比如说颜色饱和度、字体、间距的调整。最后根据现有的界面进行适当的调整，直至客户满意。

二、百度登录框

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
<meta charset="UTF-8">
<style type="text/css">
#main {
width:300px;
height:350px;
border:black solid thin;
margin:60px auto;
}
#header{
background-color: darkgray;
width:300px;
margin-top:auto;
padding: 0px;
line-height:35px;
}
#context {
margin-left: 25px;
margin-right: 30px;
}
#login1{
margin-left: 25px;
margin-right: 30px;
margin-top: 10px;
}
#login2{
background-color: blue;
text-align: center;
width:240px;
height:30px;
margin-left: 25px;
line-height: 30px;
}
</style>
<title></title>
</head>
<body>
<div id="main">
<div id="header">
<p >
<img src="../img/baidu.jpg" style="width:40px;height:30px;text-align: center"/>
<b >登录百度账号</b>
</p>
</div>
<div id="context">
<p style="float:right;font-size:10px">
短信快捷登录
</p>
<p></p>
<form>
<input type="text" name="username" style="width:240px;height:30px">
<p></p>
<input type="text" name="password" style="width:240px;height:30px">
</form>
</div>
<div id="login1">
<form>
<input type="text" name="username1" style="width:100px;height:30px;">
<img src="../img/yanzhengma.jpg"style="width:80px;height:40px;clear:left;vertical-align: middle"/>
<span style="font-size: 10px;float:right;margin-top: 10px">换一张</span>
<p></p>

<p style="font-size: 10px">
<input type="checkbox" >
下次自动登录
<a href="" style="float:right;font-size: 10px;line-height: 25px">登录遇到问题</a>
</p>
</form>
</div>
<div id="login2">
<p>登录</p>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html基础应用 布局
相关文章推荐
新的分享
章节导航