这几天看完了《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. 线性表中顺序表的的理解和实现(java)

    线性表的顺序表示指的是用一组地址连续的存储单元以此存储线性表的数据元素,这种表示也称作线性表的顺序存储结构或顺序映像.通常,称这种存储结构的线性表为顺序表.特点是:逻辑上相邻的数据元素,其物理次序上也 ...

  2. sqlplus登录远程数据库与数据导出

    一.登录 1.cmd中输入sqlplus /nolog 2.链接数据库,root是用户名,root123是密码,ORCL是数据库名.conn root/root123@192.168.1.27:152 ...

  3. jquery json实现面向对象 百度十二星座

    效果: 源码: index.html <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  4. 2018青岛网络赛G - Couleur 区间上的启发式合并

    题意:给出\(a[1...n]\),共\(n\)次操作,每次删除一个位置\(p_i\)(强制在线),此时区间会变为两个分离的区间,求每次操作的最大区间逆序对 首先要知道必要的工具,按权值建立的主席树可 ...

  5. 物联网学习之路——IoT概况

    物联网IoT概念 IoT,Internet of Things,即物物相连的互联网.它包含两层意思:一,以互联网为基础:二,物物相连,实现信息的交换和通信.物联网通过智能感知.识别技术与普适计算等通信 ...

  6. django.db.utils.OperationalError: (1071, 'Specified key was too long; max key length is 767 bytes')

    环境介绍 Django (2.1)  Python 3.5.5 mysqlclient (1.4.2.post1) Mysql 5.6.28 RHEL 7.3 在migrate时候报错 model代码 ...

  7. 关于README的内容

    如何在开发项目的时候写出标准的README文件? 为什么要写这篇博客? 关于README的编写,这个也十分的重要,如果你觉得只是随便写写,那么你就错了:编写这部分也是相当的重要的.工欲善其事,必先利其 ...

  8. Mac 10.12安装专业抓包工具Wireshark

    说明:专业到不太会用. 下载: (链接: https://pan.baidu.com/s/1c570YE 密码: pkmr)

  9. mongoDb数据库可视化工具 --- Robo

    工具下载: https://robomongo.org/download 最终效果: 即我们可以直接看到链接到 27017端口 的数据的所有数据,并且可以对其进行行之有效的增删查改. 注意,在下载软件 ...

  10. Android Studio: /dev/kvm device permission denied

    https://stackoverflow.com/questions/37300811/android-studio-dev-kvm-device-permission-denied To chec ...