这几天看完了《css权威指南》，写了个百度页面，不带js的纯静态，主要目的就是掌握页面布局，字体颜色之类的没有深究。

写完了觉得很简单，毕竟一开始觉得只要模仿的像就行，但是缩小了浏览器窗口以后问题就出来了。比如搜索框随浏览器的缩小移位什么的，然后就去看百度首页的源码，这才知道要做到固定位置，应该怎么布置盒模型的嵌套，怎么定位元素等等。仅仅把一个元素放到大概位置是不难的，但是页面元素多/不想让元素随浏览器缩放移位的话就要好好规划布局了。

以下代码中，“百度一下”的搜索框实现有错误，其余各个盒模型基本按照百度源码的布置方式放置，没有去掉盒模型的边框，以便迅速查看。

<html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="baiducss.css"><title>百度一下，你就知道</title></head><body><div id="top"><!-- <p id="demo">alkfj</p>--><div id="right" ><a class="bold" href="" target="_blank" >新闻</a><a class="bold" href="">hao123</a><a class="bold" href="">地图</a><a class="bold" href="">视频</a><a class="bold" href="">贴吧</a><a class="notbold" href="" >登陆</a><a class="notbold" href="" target="_blank" >设置</a><a class="more" href="" >更多产品</a></div></div> <div id="middle"> <div id="m_wrapper"><div id="lg"><img src="bd_logo1.png" width="270" height="129" <!--onmouseover="mover(this)" onmouseout="mout(this)"-->> </div><div id="wrapper"><span id="search"><span class="camera"></span><input class="first" type="text" onfocus="myFunction(this)"></span><span id ="last"><input class="second" type="submit" value="百度一下"> </span></div></div></div><div id="middle2">   <!-- middle和middle2的作用就是固定再中间的那层，使之不随浏览器窗口缩放而移动 --><div id="foot"><div id="link"><a href="">关于百度</a><a href="">about baidu</a><a href="">版权信息</a><p id="copyright">@2015copyright 京TCP3248702394</p></div></div></div></body>
</html>

body{margin: 0; padding: 0; position: relative;font: 12px arial;
}#top {position: absolute;height:32px;border-bottom: 1px solid #EBEBEB;width:100%;min-width: 1000px;
}#right {position: absolute;top:0;right:0;width: 590px;font-size: 13px;text-align: right;color:#999;height:32px;line-height: 32px;
}
#right .bold {font-weight: bold;/* cursor: pointer;*/}
#right a {position: relative;margin-left:19px;color:#555;outline: none;display: inline-block;text-shadow: none;
}
#right .more {width:66px;color: #333;height: 32px;line-height: 32px;background: #398BFB;text-align:center;border-bottom: 1px solid #f0f0f0;text-decoration:none;
}
#middle {position: relative;height: 50%;margin: 0 auto;width: 1000px;min-height: 293px;border: 1px solid #b8b8b8;
}
#m_wrapper {width: 641px;height: 100%;min-height: 293px;margin: 0 auto;border: 1px solid #b8b8b8;
}
#lg {height: 61.8%;min-height:181px;position: relative;text-align: center;border: 1px solid red;
}#lg img {position: absolute;bottom: 10px;left: 50%;margin-left: -135px;border: 1px solid red;cursor: default;
}
#wrapper {position: relative;border: 1px solid #b8b8b8;
}
#search {border: 1px solid #b8b8b8;position: relative;display: inline-block;
}
#search .first {width: 480px !important;padding-right: 48px;height: 20px;padding: 9px 7px;border: 1px solid red;font: 16px arial;
}
.camera {position: relative;right: 11px;top: 50%;margin-top: -8px;height: 16px;width: 18px;background: gray;
}
#last {width: 102px;height: 38px;border:1px solid #38f;border-bottom: 1px solid #2e7ae5;background-color: #38f;display: inline-block;
}
#last.second {height: 38px;line-height: 38px;background-color:#38f;border: 0;color: white;font-size: 16px;box-shadow: none;padding: 0;/*  cursor: pointer;*/
}
#wrapper2 { width: 500px;margin: 0 auto;
}
/*#wrapper3 {position: absolute;top: 80px;left: 450px;
}*/
#middle2 {position: relative;width: 1000px;height: 40%;margin: 0 auto;min-height: 293px;border: 1px solid #b8b8b8;
}
#foot {position: relative;width: 641px;margin: 0 auto;border: 1px solid #b8b8b8;height: 200px;min-height: 100px;
}
#link {height: 38.2%;border: 1px solid #b8b8b8;text-align: center;width: 100%;position: relative;
}
#link p {color: #b8b8b8;font: 12px arial;
}

总结：

  1. text-align: center; width: 100%可让行内元素居中显示
  2. 行高（line-height） = 元素高(height) 时可以让元素居中显示，行高一般不要大于元素高，否则布局容易乱。
  3. height = line-height=xx px; overflow: hidden; 使单行文字垂直居中对齐。其他垂直居中对齐的方法见这篇文章：http://www.cnblogs.com/dearxinli/p/3865099.html

转载于:https://www.cnblogs.com/mengqi-S/p/6884024.html

html+css 百度首页练习相关推荐

  1. html+css 百度首页制作

    分为三部分去做,先把一些元素添上,在用style设置格式.<!DOCTYPE html> <html lang="en"> <head>< ...

  2. 【HTML+CSS】练习：百度首页模拟

    色块定位法 通过style添加css,设置background-color,方便查看当前div在什么位置. 一个简单的小练习,复杂的部分全部使用截图. 整体布局 百度首页模拟.html <htm ...

  3. html5页面结构案例,前端学习笔记（五）HTML+CSS静态页面实战案例：幸福西饼首页和百度首页...

    按照知乎上面汪小黑推荐的前端学习路径,在自学了HTML和CSS之后,开始尝试实战制作静态页面小项目. 幸福西饼首页制作 首先我在网上下载到了千锋教育提供的的幸福西饼官网静态页面的教学视频和图片素材.源 ...

  4. css top 定位百分比,css 使用relative设置top为百分比值的方法(仿百度首页)

    前言: 最近在学习HTML.CSS的过程中,想模仿一下百度首页.发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化(效果如下图所示),于是自己研究了一下并记录下来. 效果实现 垂直伸缩 * ...

  5. 模仿百度首页页面（附带源码）html+css

    文章目录 前言 一.实现界面 二.代码 1.百度页面.html 2.baidu.css 三.图片 总结 前言 链接:https://pan.baidu.com/s/1CVGAlba5xZdricUpI ...

  6. 基于 HTML、CSS、JavaScript 的百度首页设计（二）

    代码详解见(一):https://blog.csdn.net/weixin_42312310/article/details/100141134 百度首页设计实现的完整代码 1. HTML核心代码: ...

  7. 基于 HTML、CSS、JavaScript 的百度首页设计（一）

    1.主页面介绍 百度首页设计的结构:总体分为三个模块,即top模块,mian模块和bottom模块.其中top模块中包含两个小模块,即网页头部的左侧与右侧.左侧有天气.皮肤和意见反馈,其中主要实现了天 ...

  8. 网络编程知识预备(5) ——libcurl库简介及其编程访问百度首页

    本文为学习笔记,整合课程内容以及下列文章: 其中,libcurl函数库常用字段解读部分: 参考博文:原文地址 作者:冬冬他哥哥 目录 Libcurl库简介 Libcurl等三方库的通用编译方法 三方库 ...

  9. html中列表导航怎么和图片对齐_HTML实战篇：html仿百度首页

    本篇文章主要给大家介绍一下如何使用html+css来制作百度首页页面. 1)制作页面所用的知识点 我们首先来分析一下百度首页的页面效果图 百度首页由头部的一个文字导航,中间的一个按钮和一个输入框以及下 ...

最新文章

  1. SDWebImage使用，图片加载和缓存
  2. EdgeGallery — AIO 离线部署 v1.5 版本
  3. ubuntu+touch+android,移动操作系统Ubuntu Touch支持安卓应用
  4. EJB 3.0注入和查找简介
  5. 深度优先搜索重要模板
  6. 【jQuery笔记Part2】05-jQuery自定义动画
  7. 服务器×××上的MSDTC不可用解决办法
  8. lol英雄联盟符文助手/一键应用符文易语言源码
  9. 【编程实践】编程语言之 R 语言
  10. 知乎热议 | 何恺明 新作 如何？
  11. 对MYSQL的explain中extra using where的理解
  12. 全国执业兽医资格考试（兽医全科类）题库推荐
  13. VxWorks的VxBus驱动
  14. 《我在这里爱你》（聂鲁达）
  15. 平面设计中的字体设计新花样
  16. 【C#视频】——哈希表
  17. 注册商标个人名义与公司名义如何选择？
  18. GB/T 2423.16电工电子产品环境试验第⒉部分:试验方法试验J及导则:长霉
  19. 0327 表单标签＜label＞标签
  20. eshop1-大型电商架构演进

热门文章

  1. 【转】Android菜单详解——理解android中的Menu--不错
  2. H264格式具体说明
  3. MVC3----筛选数据（BeginForm：输出form表单）
  4. Python访问MySQL数据库
  5. Aspose.Cells小实例
  6. 今天收到上海某公司的全英文笔试题(some question of interview )
  7. Hyper-V虚拟机win7网络红叉，无法上网解决方法
  8. javascript 表单验证大全（一）
  9. 如何快速出稿一个优秀APP的构图
  10. Android：学习AIDL，这一篇文章就够了(上)