这几天看完了《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. 根据域名获取ip地址gethostbyname

    #include <sys/socket.h> #include <stdio.h> #include <netdb.h> int main(int argc, c ...

  2. 正则表达式 IP域名

    不废话,我这个起码不坑人,有的把我坑死 var objRegExp = /^((([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5]))))\.)((([0-9]|([ ...

  3. SpringMVC之RequestMappingHandlerMapping

    <mvc:annotation-driven content-negotiation-manager="" enable-matrix-variables="tru ...

  4. xampp使用技巧及问题汇总

    1)在win7上同时装有IIS 和 xampp1.8.2 ,会出现Apache启动时,提示80端口被占用的情况(一般是iis安装之后出现的常见情况). 情况1:  xampp 在启动时会检测Apach ...

  5. spring boot快速入门 5: 事务管理

    事务管理: 新增两名女生: 第一步:创建 GirlRespository package com.payease.service; import com.payease.entity.Girl; im ...

  6. 12.Proxy

    1.概述 Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程. Proxy 可以理解成,在目标对象之前架 ...

  7. solr集群的搭建教程和使用入门

    1 什么是SolrCloud? SolrCloud(solr 云)是Solr提供的分布式搜索方案,当你需要大规模,容错,分布式索引和检索能力时使用 SolrCloud. 当一个系统的索引数据量少的时候 ...

  8. 深入分析java web技术内幕目录一览

    Web请求过程 如何发起请求:browser,httpclient http解析:chrome ,cache Dns域名解析:域名缓存 cdn:负载,动态加速,回源 Java I/O I/0类库的基本 ...

  9. Flex4 初始化过慢解决方法

    昨天找了个免费.net空间,想测试一下做的一个简单Flex4 上传项目的效果.上传所有文件到网站之后,访问项目页面,进度条一点一点艰难的向前移动,到了100%后却不出现程序界面,等待一会儿还是没有出现 ...

  10. Package.json中dependencies依赖包中^符号和~符号前缀的区别

    刚git了webpack的包发现package.json里面dependencies依赖包的版本号前面的符号有两种,一种是~,一种是^,如下图标记: 然后搜了下在stackoverflow上找到一个比 ...