这几天看完了《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:;

    padding:;

    position: relative;

    font: 12px arial;

}

#top {

    position: absolute;

    height:32px;

    border-bottom: 1px solid #EBEBEB;

    width:100%;

    min-width: 1000px;

}

#right {

    position: absolute;

    top:;

    right:;

    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:;

    color: white;

    font-size: 16px;

    box-shadow: none;

    padding:;

  /*  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

html+css 百度首页练习的更多相关文章

  1. 2019.4.9 HTML+CSS写静态百度首页

    静态百度首页 4.10更新 更改所有样式为内部引入 换行全部换成使用边距实现 链接:https://pan.baidu.com/s/1iFNnQNw4PUtdj3MjlV-LZA 提取码:5b2i

  2. html布局小练习（百度首页）

    绝对定位百度首页练习 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

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

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

  4. 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  5. 模仿百度首页“元宵节汤圆”动图（js的定时任务：setInterval）

    模仿百度首页“元宵节汤圆”动图:(js的定时任务:setInterval) 原理:需要一张切图,通过不断定位使得图片就像一帧一帧的图片在播放从而形成了动画 效果图: 切图地址: https://ss1 ...

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

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

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

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

  8. selenium2入门 用testNG对百度首页输入框进行测试 （三）

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

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

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

随机推荐

  1. freemaker的函数使用

    如下: <html> <body> <div class="container"> <h4>修改用户角色</h4> &l ...

  2. Maven 问题笔记汇总

    Web项目通过Maven部署到Tomcat的错误. Maven环境下面多项目之间的引用 Maven 远程仓库下载慢的的解决方案 Intellij IDEA 像eclipse那样给maven添加依赖 I ...

  3. 如果你最近在考虑OCR的问题，请进来~~~

    本文主要是python方面各类ocr的api对比问题,至于app推荐几款:合合信息(扫面全能王),TextGrabber,白描等等等等 工作需要,搞文字识别技术,对比了几家 百度的OCR: #!/us ...

  4. ReactNative 打包 APK

    ReactNative打包步骤: 1.在项目的根目录执行下面这行命令: keytool -genkey -v -keystore my-release-key.keystore -alias my-k ...

  5. FJWC2019 全连

    题目描述 有n个音符,第i个音符会在第i个时刻来临 令第 i 个音符的准备时间为 ti​ 个单位时间,如果选择去点击第 i 个音符,那么就没法点击所有到来时刻在 (i−ti​ ,i+ti​)中的音符. ...

  6. Centos7安装python3.7.1并与python2共存

    转自:http://www.cnblogs.com/JahanGu/p/7452527.html参考:https://www.jb51.net/article/104326.htm 1. 备份原来的p ...

  7. 【数组】Triangle

    题目: Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjace ...

  8. PHP之mb_strripos使用

    mb_strripos (PHP 4 >= 4.0.6, PHP 5, PHP 7) mb_strrpos - Find position of last occurrence of a str ...

  9. JS类型和类 小记录

    七种数据类型 number 记住二进制是0b开头 八进制0开头,后来ES5添加了0o开头 十六进制是0x开头 string var s = ' + ' // 无回车符号 或 var s = ` ` / ...

  10. sql递归显示层级数据

    ;) as varchar(max)) as ssort from Category where ID = '123' union all select t.*, ) as varchar(max)) ...