页面布局及百度登录框

最新推荐文章于 2022-11-05 17:44:53 发布

JudyLliu

最新推荐文章于 2022-11-05 17:44:53 发布

阅读量1.4k

点赞数

分类专栏： html基础应用文章标签： html基础应用布局

本文链接：https://blog.csdn.net/JudyLliu/article/details/70546943

版权

html基础应用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

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>