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

css页面布局基础

2015-07-31 02:35 591 查看

百度首页制作

<!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>©2015 Baidu 使用百度前必读 一件反馈 京ICP证030173号</span>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航