这几天看完了《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. C#-WebForm-★ASP.NET中的母版页★

    何为母版页,顾名思义母版就是模版,就像在PPT里面的板式或主题一样,大框架已经有了,我们的任务就是向里面添加具体的内容.这样我们制作的所有幻灯片的外观大体都是一样的. 在ASP.NET中母版页有两种作 ...

  2. 学习react教程

    网址收藏: React官网,React的Github,React的中文文档 1.react是什么? React起源于Facebook的内部项目,因为该公司对市场上所有的Javascript MVC框架 ...

  3. Java操作数据库实现"增删改查"

    本文主要讲解JDBC操作数据库    主要实现对MySql数据库的"增删改查" 综合概述: JDBC的常用类和接口 一   DriverManager类 DriverManage类 ...

  4. Django官网案例教程

    1.注意:python manage.py runserver 0:8000(侧任何IP均可访问)

  5. [BZOJ 1056][HAOI2008]排名系统

    传送门 \(\color{green}{solution}\) \(fhq \_treap\)模板题. 对于 \(+\) 操作,如果当前人不存在,那么直接加入;如果存在,那么先将他删除,再加入.复杂度 ...

  6. #Go# 点滴积累

    此篇仅为不断记录趟过的坑 StringToTimestamp import ( "time" ) const TimeFormat = "2006-01-02T15:04 ...

  7. 【学习小记】KD-Tree

    Preface 听说KD树实在是个大神器 可以解决多维空间多维偏序点权和,可以求某个点的空间最近最远点 就二维平面上的来说,复杂度在\(O(n\log n)\)到\(O(n\sqrt n)\)不等 嫌 ...

  8. geatpy - 遗传和进化算法相关算子的库函数（python）

    Geatpy The Genetic and Evolutionary Algorithm Toolbox for Python Introduction Website (including doc ...

  9. CSS外边距合并&块格式上下文

    前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为 ...

  10. 数学还勉强管用，用代码还能画个canvas 仪表盘(含完整代码)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...