3月23日html(五) 格式与布局练习：360浏览器布局

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

<title>360布局</title>

<style>

.a

{

    border:0px  #C0C0C0 solid;

    margin:5px;

    height:100px;

    right:100px;

    left:100px;

    top:100px;

    position:absolute;}

.b

{

    border: 1px #C0C0C0 solid;

    margin: 5px;

    height: 300px;

    left: 100px;

    top: 246px;

    position: absolute;

    width: 250px;

}

.c

{

    border: 1px #C0C0C0 solid;

    margin: 5px;

    height: 350px;

    top: 246px;

    position: absolute;

    width: 850px;

    right: 100px;

}

.d

{

    border: 1px #C0C0C0 solid;

    margin: 1px;

    position:absolute;

    height:200px;

    width:250px;

    top:570px;

    left: 100px;

    }

.e

{

    border: 1px #C0C0C0 solid;

    margin: 5px;

    position:absolute;

    height:620px;

    width:250px;

    top:800px;

    left: 100px;

    }

.f

{

    border: 1px #C0C0C0 solid;

    margin: 5px;

    height: 300px;

    top: 620px;

    position: absolute;

    width: 850px;

    right: 100px;

    }

.g

{

    border: 1px #C0C0C0 solid;

    margin: 5px;

    height: 470px;

    top: 950px;

    position: absolute;

    width: 850px;

    right: 100px;

    }

.h

{

    border: 1px #C0C0C0 solid;

    margin: 5px;

    height:300px;

    width:350px;

    left:100px;

    top:1430px;

    position: absolute;

    }

.i

{

    border: 1px #C0C0C0 solid;

    margin: 5px;

    height:300px;

    width:400px;

    position: absolute;

    top:1430px;

    left:450px;

    }

.j

{

    border: 1px #C0C0C0 solid;

    margin: 5px;

    height:300px;

    width:390px;

    position: absolute;

    top:1430px;

    left:850px;

    }

</style>

</head>

<body background="u=247551981,715822094&fm=21&gp=0.jpg">

<div class="a">

  <h1><font size="+4" style="margin-left:130px;"><strong> 360导航</strong>&nbsp;

  <input type="text" style="height:50px; width:500px;" /> <input type="submit" value="搜一下" style="width:60px; height:40px" />

  </font></h1>

</div>

<div></div>

<div class="c" >

<table  width="" height="" cellpadding="" cellspacing="" style="margin:5px;" >

<tr height="" align="left">

<td colspan=""><font color="#00FF00"><strong>我的网址</strong></font> </td>

</tr>

<tr height="" align="center" >

<td height="" colspan="" style="border-top:dashed thin #666"><center>

<font size="-2" color="#666666">使用一段时间后，你常用的网址会自动在这里哦，现在你也可以手动添加</font>

</center></td>

</tr>

<tr height="" align="center"   >

<td style="border-top:dashed thin #666">360搜索•商城</td>

<td style="border-top:dashed thin #666">新浪.•微博</td>

<td style="border-top:dashed thin #666">天猫•精选</td>

<td style="border-top:dashed thin #666">搜狐•视频</td>

<td style="border-top:dashed thin #666">网易•邮箱</td>

<td style="border-top:dashed thin #666">凤凰•军事</td>

</tr>

<tr height="" align="center">

<td >360游戏</td>

<td>淘宝网</td>

<td>网上购物</td>

<td>百度</td>

<td>•手机卫士</td>

<td>携程旅游</td>

</tr>

<tr height="" align="center">

<td >爱淘宝</td>

<td>360影城</td>

<td>聚划算</td>

<td>国美在线</td>

<td>东财•理财</td>

<td>央视网•直播</td>

</tr>

<tr height="" align="center">

<td >京东商城</td>

<td>58同城</td>

<td>太平洋电脑</td>

<td>世纪佳缘</td>

<td>同程旅游</td>

<td>中关村在线</td>

</tr>

</table>

<table width="" height="" cellpadding="" cellspacing="" style="margin:5px";>

  <tr align="center">

    <td width="" style="border-top:dashed thin #666">汽车之家</td>

    <td width="" style="border-top:dashed thin #666">易车网</td>

    <td width="" style="border-top:dashed thin #666">太平洋汽车</td>

    <td width="" style="border-top:dashed thin #666">安居客</td>

    <td width="" style="border-top:dashed thin #666">折800</td>

    <td width="" style="border-top:dashed thin #666">苏宁易购</td>

  </tr>

  <tr align="center">

    <td>驴妈妈旅游</td>

    <td>新华</td>

    <td>赶集网</td>

    <td>当当网</td>

    <td>途牛旅游</td>

    <td>1号店</td>

  </tr>

  <tr align="center">

    <td>珍爱婚恋网</td>

    <td>乐居二手房</td>

    <td>亚马逊</td>

    <td>艺龙网</td>

    <td>去哪网</td>

    <td>沪江网校</td>

  </tr>

  <tr align="center">

    <td>蘑菇街</td>

    <td>宜人贷</td>

    <td>唯品会</td>

    <td>聚美优品</td>

    <td>搜房网</td>

    <td>12306官网</td>

  </tr>

  <tr align="center">

    <td>猎聘网</td>

    <td>工商银行</td>

    <td>陆金所理财</td>

    <td>六间房</td>

    <td>携程机票</td>

    <td>大主宰</td>

  </tr>

</table>

<p>&nbsp;</p>

</div><br/>

<div class="b" >

  <table width="" height="" style="margin:6px">

    <tr>

      <td>电视剧</td>

      <td>综艺</td>

      <td>游戏</td>

      <td>小游戏</td>

    </tr>

    <tr>

      <td>电影</td>

      <td>直播</td>

      <td>动画</td>

      <td>漫画</td>

    </tr>

    <tr>

      <td>头条</td>

      <td>军事</td>

      <td>旅游</td>

      <td>门票</td>

    </tr>

    <tr>

      <td>彩票</td>

      <td>股票</td>

      <td>搞笑</td>

      <td>小说</td>

    </tr>

    <tr>

      <td>特价</td>

      <td>手机</td>

      <td>教育</td>

      <td>理财</td>

    </tr>

    <tr>

      <td>生活</td>

      <td>天气</td>

      <td>星座</td>

      <td>音乐</td>

    </tr>

  </table>

</div><br/>

<div class="d" >

  <table width="" height="" border="" cellpadding="" cellspacing="">

    <tr>

      <td width="" height=""><img src="1.png" width="" height=""  /></td>

      <td width="" height=""><img src="4.png" width="" height="" /></td>

    </tr>

    <tr>

      <td  width="" height=""><img src="2.png" width="" height=""  /></td>

      <td  width="" height=""><img src="6.png" width="" height="" /></td>

    </tr>

    <tr>

      <td  width="" height=""><img src="3.png" width="" height="" /></td>

      <td  width="" height=""><img src="7.png" width="" height="" /></td>

    </tr>

    <tr>

      <td  width="" height=""><img src="5.png" width="" height=""/></td>

      <td  width="" height=""><img src="8.png" width="" height="" /></td>

    </tr>

  </table>

</div>

<div></div>

<div class="e" >e</div>

<div class="f" >

  <table width="" height="" cellpadding="" cellspacing=""  style="margin:5px;">

    <tr >

      <td height="" colspan="" > <font size="-1" color="#00CC00"><strong>发现你喜欢</strong></font></td>

    </tr>

    <tr>

      <td width=""><font color="#00CC33">影视</font></td>

      <td width="">360影视</td>

      <td width="">全球追剧</td>

      <td width="">美女直播</td>

      <td width="">69美女秀</td>

      <td width="">大秧歌</td>

      <td width="">三个奶爸</td>

      <td width="" ><font size="-2" color="#808080">换一换</font></td>

    </tr>

    <tr>

      <td><font color="#00CC33">购物</font></td>

      <td>蘑菇街</td>

      <td>易购九块邮</td>

      <td>一折网特价</td>

      <td>京东服装城</td>

      <td>360购物</td>

      <td>潮男派</td>

      <td width="" ><font size="-2" color="#808080">换一换</font></td>

    </tr>

    <tr>

      <td><font color="#00CC33">游戏</font></td>

      <td>我是大主宰</td>

      <td>每日轻松游戏</td>

      <td>手机游戏中心</td>

      <td>游侠网</td>

      <td>太平洋游戏</td>

      <td>178游戏网</td>

       <td width="" ><font size="-2" color="#808080">换一换</font></td>

    </tr>

    <tr>

      <td><font color="#00CC33">热卖</font></td>

      <td>冬季女装</td>

      <td>热销解馋零食</td>

      <td>洗牙套餐三折</td>

      <td>香辣火锅涮肉</td>

      <td>量贩KTV团购</td>

      <td>儿童摄影一折</td>

      <td width="" ><font size="-2" color="#808080">换一换</font></td>

    </tr>

    <tr>

      <td><font color="#00CC33">小说</font></td>

      <td>不花钱看小说</td>

      <td>言情小说大全</td>

      <td>小说排行榜</td>

      <td>斗破苍穹</td>

      <td>奇幻仙侠</td>

      <td>最新武侠小说</td>

      <td width="" ><font size="-2" color="#808080">换一换</font></td>

    </tr>

    <tr>

      <td><font color="#00CC33">军事</font></td>

      <td>军事头条</td>

      <td>鼎盛军事</td>

      <td>铁血军事</td>

      <td>环球新军事</td>

      <td>军事装备</td>

      <td>航空间</td>

      <td width="" ><font size="-2" color="#808080">换一换</font></td>

    </tr>

  </table>

</div>

<div class="g" >g</div>

<div class="h" >h</div>

<div class="i" >i</div>

<div class="j" >j</div>

</body>

</html>

3月23日html(五) 格式与布局练习：360浏览器布局的更多相关文章

3月23日html(四) 格式与布局
一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 二.position:absolute 1.外层没有position:absolute(或relat ...
11月23日《奥威Power-BI报表集成到其他系统》腾讯课堂开课啦
听说明天全国各地区都要冷到爆了,要是天气冷到可以放假就好了.想象一下大冷天的一定要在被窝里度过才对嘛,索性明天晚上来个相约吧,相约在被窝里看奥威Power-BI公开课如何? 上周奥威公开 ...
Linux自用指令——2019年10月23日
1.ls ls命令是列出目录内容(List Directory Contents)的意思.运行它就是列出文件夹里的内容,可能是文件也可能是文件夹. ls -a 列出目录所有文件,包含以.开始的隐藏文件 ...
2016年12月23日星期五 --出埃及记 Exodus 21:18
2016年12月23日星期五 --出埃及记 Exodus 21:18 "If men quarrel and one hits the other with a stone or with ...
[分享] 从定制Win7母盘到封装详细教程 By BILL （ 10月23日补充说明）
[分享] 从定制Win7母盘到封装详细教程 By BILL ( 10月23日补充说明 ) billcheung 发表于 2011-10-23 00:07:49 https://www.itsk.com ...
2016年11月23日星期三 --出埃及记 Exodus 20:14
2016年11月23日星期三 --出埃及记 Exodus 20:14 "You shall not commit adultery.不可奸淫.
2016年10月23日星期日 --出埃及记 Exodus 19:7
2016年10月23日星期日 --出埃及记 Exodus 19:7 So Moses went back and summoned the elders of the people and set ...
2016年6月23日星期四 --出埃及记 Exodus 14:20
2016年6月23日星期四 --出埃及记 Exodus 14:20 coming between the armies of Egypt and Israel. Throughout the nig ...
Week16（12月23日）：复习
Part I:提问 =========================== 1.声明强类型视图时,使用关键字( ) A.ViewBag B.model C.Type D.Tit ...

随机推荐

i++ 与 ++i 的从字节码层面看二者的区别
/** * javap命令可以对class反汇编得到其字节码文件(此命令并不是jdk8开始的,只不过jdk8中对工具进行加强,增加了一些参数,可通过 javap -help了解) * * 注意: * ...
Android json操作之取得一个对象
1:服务端返回的json数据格式如下: {"id":"1001","name":"zhangsan","sco ...
Android 用户登录
1:服务端代码如下 <?php /** *登录成功就返回 1,否则返回 0 */ $REQUEST_METHOD=$_SERVER['REQUEST_METHOD']; if($REQUEST_ ...
IIS Server Farms集群负载
序言随着公司业务的发展,后台业务就变的越来越多,然而服务器的故障又像月经一样,时不时的汹涌而至,让我们防不胜防.那么后台的高可用,以及服务器的处理能力就要做一个横向扩展的方案,以使后台业务持续的稳定 ...
【转】Android菜单详解——理解android中的Menu--不错
原文网址:http://www.cnblogs.com/qingblog/archive/2012/06/08/2541709.html 前言今天看了pro android 3中menu这一章,对A ...
cf435C Cardiogram
C. Cardiogram time limit per test 1 second memory limit per test 256 megabytes input standard input ...
php防sql注入、xss
php自带的几个防止sql注入的函数http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2013/0318/12234.html addslashe ...
WP独立文件资源字典
有时候,开发者想把资源字典定义在单独的XAML文件中,在网上找了找,没找到比较详细的,自己弄了许久. 1. 新建xaml资源字典文件,如在根目录下“ResourceDictionary1.xaml”, ...
Eclipse中设置编码的方式
如果要使插件开发应用能有更好的国际化支持,能够最大程度的支持中文输出,则最好使 Java文件使用UTF-8编码.然而,Eclipse工作空间(workspace)的缺省字符编码是操作系统缺省的编码, ...
Android学习笔记（二）之异步加载图片
最近在android开发中碰到比较棘手的问题,就是加载图片内存溢出.我开发的是一个新闻应用,应用中用到大量的图片,一个界面中可能会有上百张图片.开发android应用的朋友可能或多或少碰到加载图片内存 ...

3月23日html(五) 格式与布局练习：360浏览器布局

3月23日html(五) 格式与布局练习：360浏览器布局的更多相关文章

随机推荐

热门专题