这几天看完了《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. day5:python学习之集合

    0. 集合的作用及特点 集合具有去重和关系测试两大作用,它具有无序的特点. list1 = [1,2,3,4,5,7,6,8,6,4] list1 = set(list1) print(list1) ...

  2. [原创] PHP 使用Redis实现锁

    目录 锁实现的注意点 加锁 connect 与 pconnect 解锁 Redis 中使用 Lua 脚本的注意点 Redis集群分布式锁 RedLock 算法 锁实现的注意点 互斥: 任意时刻, 只能 ...

  3. Python pip离线部署

    因为生产环境不能联网,必须使用离线部署pip包,倒也不用部署Pypi镜像那么大工作量,其实蛮简单的,贴出了备忘 pip download -r requirements.txt -d packages ...

  4. Iviews视频搜索引擎

    随着视频类型的增加和数据量的日益庞大,如何有效地组织和管理这些数据,使人们能够方便地从大量视频数据中找到自己感兴趣的相关视频片段已成为一种迫切的需求,而能够满足这一需求的技术便是目前人们普遍关注的基于 ...

  5. mysql只能本机访问

    众所周知的是,mysql默认是listen 0.0.0.0:3306. 大网站的数据库服务器一般都在内网没有外网ip,用默认配置比较省事.但是如果只有一台vps,lnmp全部署在同一vps 上,mys ...

  6. android4.0以上访问网络不能在主线程中进行以及在线程中操作UI的解决方法

    MONO 调用一个线程操作UI 然后报Only the original thread that created a view hierarchy can touch its views.错误 goo ...

  7. res/raw与assets目录的区别

    1.相同点: 两者都会原封不动的保存在apk包中,不会被编译成二进制码. 2.不同点: raw目录下只能存放文件,不能存放下一级的文件夹,而assets可以存放下一级的文件夹. raw目录下的资源会映 ...

  8. 16.Generator函数的语法

    1.简介 Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同. 执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机 ...

  9. python-cgi-demo

    简单的Python CGI 在linux平台实现注意:路径是以当前路径为根目录 ,Python文件一般放在/cgi-bin/目录下在linux命令行运行:python  -m  CGIHTTPServ ...

  10. Tomcat8-启动脚本分析

    1. Tomcat也是一个java程序 最终的入口启动文件:org.apache.catalina.startup.Bootstrap 最后一条命令: start "Tomcat" ...