css页面布局基础

来源：互联网发布：java 大数据搜索引擎编辑：程序博客网时间：2024/06/07 14:48
百度首页制作

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>百度首页</title>    <style type="text/css">        #homepage {            border: 1px none;            font-family: 微软雅黑;            width: 1340px;            height: 600px;        }        #oriented {            float: left;            margin: 0 30px;        }        .operate {            margin-right: 10px;        }        .more {            background-color:blue ;            color:white ;        }        #trademark {            width: 230px;            margin: 0 auto;            margin-top:80px ;        }        #search {            width: 670px;            margin: 0 auto;            height: 40px;        }        .button {            margin-left: -9px;            background-color:blue ;            color:white ;            font-size: 16px;            height: 41px;        }        .text {            height: 33px;        }        #describe {            text-align: center;            margin:310px 1px 1px;        }        .set {            margin: 0 5px;            color:blue ;        }    </style></head><body>    <div id="homepage">        <div id="oriented">            <span class="operate">新闻</span>            <span class="operate">hao123</span>            <span class="operate">地图</span>            <span class="operate">视频</span>            <span class="operate">贴吧</span>            <span class="operate">登录</span>            <span class="operate">设置</span>            <span class="more">更多产品</span>        </div>        <div id="trademark">            <img class="logo" src="3.png" height="85" width="210">        </div>        <div id="search">                <input class="text" id="searchbar" size="85" />                <input class="button" type="submit" value="百度一下"/>        </div>        <div id="describe">                <p>                    <span class="set">把百度设为主页</span>                    <span class="set">关于百度</span>                    <span class="set">About Baidu</span>                </p>                <span>&copy;2015 Baidu 使用百度前必读 一件反馈 京ICP证030173号</span>        </div>    </div></body></html>
0 0