绝对定位百度首页练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度练习</title>
<style type="text/css">
.top{float: right;position: absolute;top: 10px;right: 10px;}
.top ul li{display: inline; list-style: none;float:left margin-left: 20px;}
.more{background-color: dodgerblue;color: white;border: 0;}
#text1{width:570px;height: 40px;}
#baidu{height: 45px;background-color: dodgerblue;color: white;border: 0;}
#center{margin-top: 140px;margin-left: 350px;}
.under{text-align: center; font-size: smaller;color: darkgrey;position: absolute;left: 450px; bottom: 10px;}
.under a{color: darkgrey;}
</style> </head>
<body> <div class="top"><ul>
<li><a href="#">糯米</a></li>
<li><a href="#">hao123</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">贴吧</a></li>
<li><a href="#">我的账号</a></li>
<li><a href="#">设置</a></li>
<li><input type="button" class="more" value="更多产品" /></li>
</ul>
</div> <div id="center">
<div class="pic">
<img src="../img/baidu.jpg" />
</div> <div class="center">
<input id="text1" type="text" /><input id="baidu" type="button" value="百度一下" />
</div>
</div> <div class="under">
<a href="#">设为首页</a>
&copy;2016 Baidu <a href="#">使用前必读</a> <a href="#">意见反馈</a>
京ICP证123456号<br />
京安网安备111111111125222001号
</div> </body>
</html>

页面稍复杂的一版

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>百度一下,你就知道</title>
<style type="text/css"> body,div,form,input{font-size:14px;margin:0;padding:0}
a{color:#0000cc}
a:active{color:#f90}
#top_right{color:#999;font-size:12px;padding:6px 10px;position:absolute;right:0;top:0}
#top_right a{font-size:12px} #main{margin:25px auto 100px auto;padding:0 35px;width:530px}
#main h1{margin-bottom:4px;text-align:center}
#main h1 a img{border:none}
#main ul{list-style-type:none;padding:0 0 0 45px;width:410px}
#main ul li{float:left;margin-right:18px}
#main ul li a.mr{color:#000;font-weight:bold}
#search_form{clear:both;margin-left:15px;padding-top:4px} #keyword{
background:url(
) no-repeat -304px 0px;
border-color:#999 #ccc #ccc #999;
border-style:solid;
border-width:1px;
float:left;
font-size:18px;
height:30px;
line-height:30px;
text-indent:10px;
width:408px;
} #main .search_btn{background:url(
) no-repeat 0 0;border:none;cursor:pointer;float:left;font-size:12px;height:32px;line-height:32px;margin-left:6px;width:95px; }
#main .down_btn{}
#main p{float:left;margin-top:35px;text-align:center;width:520px; }
#cl{clear:both} #footer{margin:50px auto;width:600px}
#footer p{font-size:12px;margin-bottom:15px;text-align:center}
#footer p.jr{margin-bottom:5px}
#footer p a{font-size:12px}
#footer p.bq{color:#77c}
#footer p.bq a{color:#77c}
</style>
</head> <body>
<div id="top_right">
<a href="#">搜索设置</a> | <a href="#">登陆</a> <a href="#">注册</a>
</div>
<div id="main">
<h1>
<a href="#" class="logo"><img src="../img/baidu.jpg"></a></h1>
<ul class="nav">
<li><a href="#">新闻</a></li>
<li><a href="#" class="mr">网页</a></li>
<li><a href="#">贴吧</a></li>
<li><a href="#">知道</a></li>
<li><a href="#">MP3</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">地图</a></li>
</ul>
<form action="#" method="post" id="search_form">
<input name="" type="text" id="keyword">
<input name="" type="button" value="百度一下" class="search_btn" onmouseout="'this.className='search_btn'" onmousedown="'this.className.down_btn'">
</form>
<p>
<a href="#">空间</a>
<a href="#">百科</a>
<a href="#">hao123</a> |
<a href="#">更多&gt;&gt;</a>
</p><div id="cl"></div>
</div>
<div id="footer">
<p>
<a href="#">把百度设为主页</a>
<a href="#">把百度添加到桌面</a>
</p><p class="jr">
<a href="#">加入百度推广</a> | <a href="#">搜索风云榜</a> | <a href="#">关于百度</a> | <a href="#">About Baidu</a>
</p>
<p class="bq">
2012 Baidu <a href="#">使用百度前必读</a> <a href="#">京ICP证030173号</a>&nbsp;&nbsp;<img src="">
</p>
</div> </body>
</html>

页面简单布局

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单布局</title>
<style type="text/css"> /*清除默认样式*/
*{
margin: 0;
padding: 0;
}
.header{
/*设置宽,高,背景色*/
width:1000px;
height:100px;
background-color: yellowgreen;
/*居中*/
margin: 0 auto;
} .content{
width: 1000px;
height: 400px;
background-color: orange;
margin: 10px auto;
}
/*中部div的三个分区的设置*/ .left{
width: 200px;
height: 400px;
background-color: skyblue;
/*向左浮动*/
float: left;
}
.center{
width: 580px;
/*高度也可以用%来表示*/
height: 100%;
background-color: cadetblue;
/*向左浮动*/
float: left; /*设置水平外边距*/
margin: 0 10px;
} .centerheader{
width: 580px;
height:190px;
background-color: darkgoldenrod;
}
.centerfooter{
width: 580px;
height: 190px;
background-color: green;
/*设置上下两个div之间边距为10px*/
margin-top: 10px;
} .right{
width: 200px;
height: 400px;
background-color: grey;
/*向左浮动
* 浮动的块之间没有边距,块与块之间 margin 为0 *
* */
float: left;
} .footer{
/*设置宽,高,背景色*/
width:1000px;
height:100px;
background-color: pink;
/*居中*/
margin: 0 auto;
}
</style>
</head>
<body>
<!--头部div-->
<div class="header"></div>
<!--中间div-->
<div class="content">
<!--中部div水平分区 -->
<div class="left"></div>
<div class="center">
<!--小中部div垂直分区-->
<div class="centerheader"></div>
<div class="centerfooter"></div>
</div>
<div class="right"></div> </div>
<!--底部div-->
<div class="footer"></div> </body>
</html>

html布局小练习(百度首页)的更多相关文章

  1. 微信小程序实现首页图片多种排版布局!

    先来个效果图: 使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式! 直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发! wxml: <view class='in ...

  2. 【教程】手把手教你如何利用工具(IE9的F12)去分析模拟登陆网站(百度首页)的内部逻辑过程

    [前提] 想要实现使用某种语言,比如Python,C#等,去实现模拟登陆网站的话,首先要做的事情就是使用某种工具,去分析本身使用浏览器去登陆网页的时候,其内部的执行过程,内部逻辑. 此登陆的逻辑过程, ...

  3. html+css 百度首页练习

    这几天看完了<css权威指南>,写了个百度页面,不带js的纯静态,主要目的就是掌握页面布局,字体颜色之类的没有深究. 写完了觉得很简单,毕竟一开始觉得只要模仿的像就行,但是缩小了浏览器窗口 ...

  4. Selenium2学习-009-WebUI自动化实战实例-007-Selenium 8种元素定位实战实例源代码(百度首页搜索录入框及登录链接)

    此 文主要讲述用 Java 编写 Selenium 自动化测试脚本编写过程中,通过 ID.name.xpath.cssSelector.linkText.className.partialLinkTe ...

  5. 一款基于jQuery的仿百度首页滑动选项卡

    今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   ...

  6. selenium2入门 用testNG对百度首页输入框进行测试 (三)

    如果还没有安装testNG的亲,可以点击http://www.cnblogs.com/milanmi/p/4346580.html查看安装过程. 这节主要是对百度首页的输入框进行输入测试. packa ...

  7. 第八十四节,css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  8. 云计算之路-阿里云上:访问阿里云CDN上的图片,自动跳转到百度首页

    昨天有用户向我们反馈一篇博文(一条语句导致CPU持续100%)中的部分图片不能显示,我们的图片访问用的是阿里云CDN,原以为是某个CDN节点不稳定的问题,但在排查时发现这些图片不能显示竟然是因为请求时 ...

  9. 为什么百度首页的HTML源代码最后一行要多一行?浪费空间呀!

     为什么百度首页的HTML源代码最后一行要多一行?浪费空间呀!

随机推荐

  1. 给破坏性的Rake任务加把锁 | Rails

    抄自这里 直接贴代码 # lib/tasks/skip_prod.rake desc 'Raises exception if used in production' task skip_prod: ...

  2. 「拉勾网」薪资调查的小爬虫,并将抓取结果保存到excel中

    学习Python也有一段时间了,各种理论知识大体上也算略知一二了,今天就进入实战演练:通过Python来编写一个拉勾网薪资调查的小爬虫. 第一步:分析网站的请求过程 我们在查看拉勾网上的招聘信息的时候 ...

  3. Wamp Mysql错误消息 语言设置

    Wamp Mysql错误消息 语言设置 http://my.oschina.net/wandershi/blog/264347 打开my.ini   找到 [wampmysqld] port = 33 ...

  4. thinkphp ajax 实例 实现

    thinkPHP后台实现 #删除用户操作      function delete()      {        if(isset($_SERVER["HTTP_X_REQUESTED_W ...

  5. 解决Adobe Acrobat “正在纠偏图像,正在旋转图像,正在分解页面”问题

    笔者最近遇到的一个问题:用acrobat Pro X 打开pdf显示“正在纠偏图像,正在旋转图像,正在分解页面”,此时acrobat没有响应,要等待其完成,出现就得等一会儿,总出现,总得停顿,看一篇文 ...

  6. Html基础详解

    HTML是(Hyper Text Mark-up Language)超文本标记语言,是因特网上应用最为广泛的一种网络传输协议,所有的www文件都必须要遵守这个标准.这样就可以让浏览器根据标记语言的规则 ...

  7. 201521123072《java程序设计》第七周总结

    201521123072<java程序设计>第七周总结 标签: java 1. 本周学习总结 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源 ...

  8. Linux 安装Python37

    1.下载python3.7.0 https://www.python.org/downloads/release/python-370/ 2.创建Linux的python37目录 mkdir /usr ...

  9. 数据读取(SQL)与文本写入(fileStream)

    要求:从三个不同服务器中取数,对最近10的历史数据进行去重,写出到文本. 1.读取. public static DataTable ExecuteSql(string connectString, ...

  10. thinkphp5中__PUBLIC__的使用

    在使用thinkphp5.1开发的时候遇到设置__PUBLIC__无法生效的问题.这次的版本升级有比较大的改动,很多写法已经被更改,下面说下怎么去解决这个问题. 工具/原料   phpstorm ln ...