html布局小练习（百度首页）

绝对定位百度首页练习

<!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>

时间： 2024-11-08 18:28:18

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

Html5开发——html+css基础一（百度首页）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度</title> <style type="text/css"> *{margin: 0;padding: 0;} body{text-align: center;} .header{text-align: right;f

前一天学习了<table>和一系列的小指令用来制作表格,然后老师布置了制作百度首页的任务,看上去像是很简单结果还是弄了一天的时间,好在最后知道了错误修改的还算美观. 制作很简单,就是小细节上的东西容易出错,所以刚开始学一定要养成有了开头接着写结尾的好习惯. 最上面的一行导航栏还算简单,做好表格大小分配好百分比,剩下的超链接什么的都是再简单不过的内容了. 百度的logo和百度一下这一行起初是规划在了一个表格内,怎么调试都没办法弄好,早上尝试了把他们两个分成了两个表格就简单多了. 个人觉得最头疼的

如何不给花一分钱，关键词怎么霸屏百度首页？

如何不给花一分钱,关键词怎么霸屏百度首页?先不废话,上几个图给大家看看! 这是如何做到的呢? 第一招:搜狐自媒体不论百度指数是几十还几百上千的关键词,都可以做到首页,不光收录快,而且还可带链接,百度指数100左右的基本上可以做到百度首页. 1.首先要申请一个搜狐自媒体,用公司营业执照申请比较容易,如果个人申请,如果在其它自媒体上有自己的帐号,申请也相对比较容易,如果没有自媒体卡号,可以在猪八戒网上找人写原创文章,然后建立QQ空间.博客等其它自媒体,然后再提交申请. 2.尽量写原创和伪原创文章,

html+css 百度首页练习

这几天看完了<css权威指南>,写了个百度页面,不带js的纯静态,主要目的就是掌握页面布局,字体颜色之类的没有深究. 写完了觉得很简单,毕竟一开始觉得只要模仿的像就行,但是缩小了浏览器窗口以后问题就出来了.比如搜索框随浏览器的缩小移位什么的,然后就去看百度首页的源码,这才知道要做到固定位置,应该怎么布置盒模型的嵌套,怎么定位元素等等.仅仅把一个元素放到大概位置是不难的,但是页面元素多/不想让元素随浏览器缩放移位的话就要好好规划布局了. 总结: text-align: center; width

仿百度首页

前言:学习了一个星期的HTML和CSS,感觉有点烦躁,想做点小东西练练手.百度首页十分简洁,应该是个练手的好地方. 1. 对照着界面在纸上大概地写下了HTML结构~ 2. 图像居中显示问题. 这里使用了一个属性text-align: center; 官网上对它的描述是这样子的:This property describes how inline-level content of a block container is aligned.

网站不竞价轻松上百度首页，用这一招就够了

每一个企业都希望看到自己网站的关键词轻松快速的做到百度首页,得到更多地流量,但面临的现实是:没有专业人才做,没有大把的推广预算来烧,网站的流量少得可怜,自己又不懂,今天小胖君就和大家来分享一些经验. 一.要想网站上首页,进入网站的路得宽很多新网站往往是孤单单一个主站,外链也很少,自然导致进入网站的路径少,网站的权重自然就低.而众所周知的是外链建设是一件很苦逼的事,一条一条的发,辛苦不说还没效果!最好的办法就是能够建立自己的站群系统网站,就像开店一样,单店的生意再好也有限,如果有成百上千的店都是你

web前端入门到实战：制作一个百度首页

一. 我们制作一个百度首页作为练习,可直接复制该代码保存后缀名为.html来查看 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>d93_baidu_home_exercise</title> <style> .header{ height: 250px; /*background-color

java爬取百度首页源代码

爬虫感觉挺有意思的,写一个最简单的抓取百度首页html代码的程序.虽然简单了一点,后期会加深的. 1 package test; 2 3 import java.io.BufferedReader; 4 import java.io.InputStreamReader; 5 import java.net.URL; 6 import java.net.URLConnection; 7 8 public class Main 9 { 10 public static void main(Strin

上百度首页每天都要做的事情

首先问候在小年还奋斗在网站优化的家人们晚上好,对于我们来说上百度首页一直以来都是我们的目标,但是想要做到还是要费很大的功夫的,无论什么事情只要你有坚持不懈的目标和正确的方法其结果一定是会成功的,下面泰安网络公司阿国就分享下我对"上百度首页每天要做的事"的个人见解!(有说错的和不足还请多多评价不会剖析排行也上不去,比方这个关键字,SEO优化和网络推广的差异,有许多推广,SEO优化和网络推广差异是很大的,所以这儿面商业价值非常大,目前排行在榜首的是百度知道,第二的是有问必答网,这些网站规