绝对定位百度首页练习

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>百度练习</title>

        <style type="text/css">

        .top{float: right;position: absolute;top: 10px;right: 10px;}

        .top ul li{display: inline; list-style: none;float:left margin-left: 20px;}

         .more{background-color: dodgerblue;color: white;border: 0;}

         #text1{width:570px;height: 40px;}

         #baidu{height: 45px;background-color: dodgerblue;color: white;border: 0;}

         #center{margin-top: 140px;margin-left: 350px;}

         .under{text-align: center; font-size: smaller;color: darkgrey;position: absolute;left: 450px; bottom: 10px;}

         .under a{color: darkgrey;}

        </style>

    </head>

    <body>

        <div class="top"><ul>

            <li><a href="#">糯米</a></li>

            <li><a href="#">hao123</a></li>

            <li><a href="#">地图</a></li>

            <li><a href="#">视频</a></li>

            <li><a href="#">贴吧</a></li>

            <li><a href="#">我的账号</a></li>

            <li><a href="#">设置</a></li>

            <li><input type="button" class="more" value="更多产品" /></li>

        </ul>

        </div>

        <div id="center">

            <div class="pic">

            <img src="../img/baidu.jpg" />

            </div>

        <div class="center">

                <input id="text1" type="text" /><input id="baidu" type="button" value="百度一下"   />

        </div>

        </div>

        <div class="under">

            <a href="#">设为首页</a>

            &copy;2016 Baidu <a href="#">使用前必读</a> <a href="#">意见反馈</a>

            京ICP证123456号<br />

            京安网安备111111111125222001号

        </div>

    </body>

</html>

页面稍复杂的一版

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>百度一下,你就知道</title>

<style type="text/css">

body,div,form,input{font-size:14px;margin:0;padding:0}

a{color:#0000cc}

a:active{color:#f90}

#top_right{color:#999;font-size:12px;padding:6px 10px;position:absolute;right:0;top:0}

#top_right a{font-size:12px}

#main{margin:25px auto 100px auto;padding:0 35px;width:530px}

#main h1{margin-bottom:4px;text-align:center}

#main h1 a img{border:none}

#main ul{list-style-type:none;padding:0 0 0 45px;width:410px}

#main ul li{float:left;margin-right:18px}

#main ul li a.mr{color:#000;font-weight:bold}

#search_form{clear:both;margin-left:15px;padding-top:4px}

#keyword{

background:url(

) no-repeat -304px 0px;

border-color:#999 #ccc #ccc #999;

border-style:solid;

border-width:1px;

float:left;

font-size:18px;

height:30px;

line-height:30px;

text-indent:10px;

width:408px;

}

#main .search_btn{background:url(

) no-repeat 0 0;border:none;cursor:pointer;float:left;font-size:12px;height:32px;line-height:32px;margin-left:6px;width:95px; }

#main .down_btn{}

#main p{float:left;margin-top:35px;text-align:center;width:520px; }

#cl{clear:both}

#footer{margin:50px auto;width:600px}

#footer p{font-size:12px;margin-bottom:15px;text-align:center}

#footer p.jr{margin-bottom:5px}

#footer p a{font-size:12px}

#footer p.bq{color:#77c}

#footer p.bq a{color:#77c}

</style>

</head>

<body>

<div id="top_right">

<a href="#">搜索设置</a> | <a href="#">登陆</a> <a href="#">注册</a>

</div>

<div id="main">

<h1>

<a href="#" class="logo"><img src="../img/baidu.jpg"></a></h1>

<ul class="nav">

<li><a href="#">新闻</a></li>

<li><a href="#" class="mr">网页</a></li>

<li><a href="#">贴吧</a></li>

<li><a href="#">知道</a></li>

<li><a href="#">MP3</a></li>

<li><a href="#">图片</a></li>

<li><a href="#">视频</a></li>

<li><a href="#">地图</a></li>

</ul>

<form action="#" method="post" id="search_form">

<input name="" type="text" id="keyword">

<input name="" type="button" value="百度一下" class="search_btn" onmouseout="'this.className='search_btn'" onmousedown="'this.className.down_btn'">

</form>

<p>

<a href="#">空间</a>

<a href="#">百科</a>

<a href="#">hao123</a> |

<a href="#">更多&gt;&gt;</a>

</p><div id="cl"></div>

</div>

<div id="footer">

<p>

<a href="#">把百度设为主页</a>

<a href="#">把百度添加到桌面</a>

</p><p class="jr">

<a href="#">加入百度推广</a> | <a href="#">搜索风云榜</a> | <a href="#">关于百度</a> | <a href="#">About Baidu</a>

</p>

<p class="bq">

2012 Baidu <a href="#">使用百度前必读</a> <a href="#">京ICP证030173号</a>&nbsp;&nbsp;<img src="">

</p>

</div>

</body>

</html>

页面简单布局

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>简单布局</title>

        <style type="text/css">

            /*清除默认样式*/

            *{

                margin: 0;

                padding: 0;

            }

            .header{

                /*设置宽，高，背景色*/

                width:1000px;

                height:100px;

                background-color: yellowgreen;

                /*居中*/

                margin: 0 auto;

            }

            .content{

                width: 1000px;

                height: 400px;

                background-color: orange;

                margin: 10px auto;

            }

            /*中部div的三个分区的设置*/

            .left{

                width: 200px;

                height: 400px;

                background-color: skyblue;

                /*向左浮动*/

                float: left;

            }

            .center{

                width: 580px;

                /*高度也可以用%来表示*/

                height: 100%;

                background-color: cadetblue;

                /*向左浮动*/

                float: left;

                /*设置水平外边距*/

                margin: 0 10px;

            }

            .centerheader{

                width: 580px;

                height:190px;

                background-color: darkgoldenrod;

            }

            .centerfooter{

                width: 580px;

                height: 190px;

                background-color: green;

                /*设置上下两个div之间边距为10px*/

                margin-top: 10px;

            }

            .right{

                width: 200px;

                height: 400px;

                background-color: grey;

                /*向左浮动

                 * 浮动的块之间没有边距，块与块之间 margin 为0                 *

                 * */

                float: left;

            }

            .footer{

                /*设置宽，高，背景色*/

                width:1000px;

                height:100px;

                background-color: pink;

                /*居中*/

                margin: 0 auto;

            }

        </style>

    </head>

    <body>

        <!--头部div-->

        <div class="header"></div>

        <!--中间div-->

        <div class="content">

            <!--中部div水平分区 -->

            <div class="left"></div>

            <div class="center">

                <!--小中部div垂直分区-->

                <div class="centerheader"></div>

                <div class="centerfooter"></div>

            </div>

            <div class="right"></div>

        </div>

        <!--底部div-->

        <div class="footer"></div>

    </body>

</html>

html布局小练习（百度首页）的更多相关文章

  1. 微信小程序实现首页图片多种排版布局!

    先来个效果图: 使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式! 直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发! wxml: <view class='in ...

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

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

  3. html+css 百度首页练习

    这几天看完了<css权威指南>,写了个百度页面,不带js的纯静态,主要目的就是掌握页面布局,字体颜色之类的没有深究. 写完了觉得很简单,毕竟一开始觉得只要模仿的像就行,但是缩小了浏览器窗口 ...

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

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

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

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

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

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

  7. 第八十四节，css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

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

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

  9. 为什么百度首页的HTML源代码最后一行要多一行？浪费空间呀！

     为什么百度首页的HTML源代码最后一行要多一行?浪费空间呀!

随机推荐

  1. 第一章-第六题（帮人抢票，帮人选课这些软件是否合法 你怎么看?）--By梁旭晖

    我觉得这些软件是合法的,符合道德规范的. 计算机当初设计的初衷就是简化甚至替代人类的工作.而软件作为计算机硬件的驱动着,其设计就是体现这些原则. 现在互联网上的订票,选课类型的网站还是有很多的,比如: ...

  2. Xamarin Android 绑定jar库同时将so库打包进去

    1.在创建的Bindings Library项目中,新建Assets目录: 2.Assets目录下再分别创建armeabi,armeabi-v7a,x86三个目录: 3.将so文件分布copy到三个目 ...

  3. 一起来做chrome扩展《可配置的代理》

    一.本文主要涉及相关内容: chrome.proxy pacScript browser_action popup localStroage 二.预览 (代理运行截图,图中的代理服务器有防火墙,暂不对 ...

  4. OpenGL中实现双缓冲技术

    在OpenGL中实现双缓冲技术的一种简单方法: 1.在调用glutInitDisplayMode函数时, 开启GLUT_DOUBLE,即glutInitDisplayMode(GLUT_RGB | G ...

  5. 网页语言有html，php.jsp，无论什么语言浏览器总是能正常显示，这个解析工作是浏览器完成的吗？

    不是,浏览器最基本的语言是html也就是说浏览器只看得懂html.css.js等其他的服务器端动态脚本,比如你说的php.jsp等,解析工作是在服务器完成的!打个比方,你在电脑显示屏上看到的一切东西, ...

  6. IntelliJ IDEA中如何显示和关闭----工具栏，目录栏，（转）

    工具栏:就是上面有个好多的快捷按钮的那个栏,比如撤销,上传,下载设置,扳手按钮,等等. 目录栏,就是刚刚装的时候,这个会显示,但是不知道怎么关闭,但是这个又没什么用. 如图: 就是对应的几个按钮,自己 ...

  7. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

  8. git学习手册

    #git学习手册 git: Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理.[2] Git 是 Linus Torvalds 为了帮助管理 Linux内核开发而 ...

  9. selenium RC+JAVA 笔记 一

    selenium 常用操作有:open,type,click,select,selectFrame. package com.example.tests; import com.thoughtwork ...

  10. CentOS 7 yum方式配置LAMP环境

    环境:CentOS 7 最小化安装 采用Putty连接 方法:采用YUM安装方法 目的:搭建Apache+Mysql+PHP环境 1,安装Apache yum install httpd //默认情况 ...