1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <title>360布局</title>
  3. <style>
  4. .a
  5. {
  6.     border:0px  #C0C0C0 solid;
  7.     margin:5px;
  8.     height:100px;
  9.     right:100px;
  10.     left:100px;
  11.     top:100px;
  12.     position:absolute;}
  13. .b
  14. {
  15.     border: 1px #C0C0C0 solid;
  16.     margin: 5px;
  17.     height: 300px;
  18.     left: 100px;
  19.     top: 246px;
  20.     position: absolute;
  21.     width: 250px;
  22. }
  23. .c
  24. {
  25.     border: 1px #C0C0C0 solid;
  26.     margin: 5px;
  27.     height: 350px;
  28.     top: 246px;
  29.     position: absolute;
  30.     width: 850px;
  31.     right: 100px;
  32. }
  33. .d
  34. {
  35.     border: 1px #C0C0C0 solid;
  36.     margin: 1px;
  37.     position:absolute;
  38.     height:200px;
  39.     width:250px;
  40.     top:570px;
  41.     left: 100px;
  42.     }
  43. .e
  44. {
  45.     border: 1px #C0C0C0 solid;
  46.     margin: 5px;
  47.     position:absolute;
  48.     height:620px;
  49.     width:250px;
  50.     top:800px;
  51.     left: 100px;
  52.     }
  53. .f
  54. {
  55.     border: 1px #C0C0C0 solid;
  56.     margin: 5px;
  57.     height: 300px;
  58.     top: 620px;
  59.     position: absolute;
  60.     width: 850px;
  61.     right: 100px;
  62.     }
  63. .g
  64. {
  65.     border: 1px #C0C0C0 solid;
  66.     margin: 5px;
  67.     height: 470px;
  68.     top: 950px;
  69.     position: absolute;
  70.     width: 850px;
  71.     right: 100px;
  72.     }
  73. .h
  74. {
  75.     border: 1px #C0C0C0 solid;
  76.     margin: 5px;
  77.     height:300px;
  78.     width:350px;
  79.     left:100px;
  80.     top:1430px;
  81.     position: absolute;
  82.  
  83.     }
  84. .i
  85. {
  86.     border: 1px #C0C0C0 solid;
  87.     margin: 5px;
  88.     height:300px;
  89.     width:400px;
  90.     position: absolute;
  91.     top:1430px;
  92.     left:450px;
  93.  
  94.     }
  95. .j
  96. {
  97.     border: 1px #C0C0C0 solid;
  98.     margin: 5px;
  99.     height:300px;
  100.     width:390px;
  101.     position: absolute;
  102.     top:1430px;
  103.     left:850px;
  104.  
  105.     }
  106.  
  107. </style>
  108.  
  109. </head>
  110.  
  111. <body background="u=247551981,715822094&fm=21&gp=0.jpg">
  112.  
  113. <div class="a">
  114.   <h1><font size="+4" style="margin-left:130px;"><strong> 360导航</strong>&nbsp;
  115.   <input type="text" style="height:50px; width:500px;" /> <input type="submit" value="搜一下" style="width:60px; height:40px" />
  116.   </font></h1>
  117.  
  118. </div>
  119. <div></div>
  120. <div class="c" >
  121. <table  width="" height="" cellpadding="" cellspacing="" style="margin:5px;" >
  122. <tr height="" align="left">
  123. <td colspan=""><font color="#00FF00"><strong>我的网址</strong></font> </td>
  124. </tr>
  125. <tr height="" align="center" >
  126. <td height="" colspan="" style="border-top:dashed thin #666"><center>
  127. <font size="-2" color="#666666">使用一段时间后，你常用的网址会自动在这里哦，现在你也可以手动添加</font>
  128. </center></td>
  129. </tr>
  130. <tr height="" align="center"   >
  131. <td style="border-top:dashed thin #666">360搜索•商城</td>
  132. <td style="border-top:dashed thin #666">新浪.•微博</td>
  133. <td style="border-top:dashed thin #666">天猫•精选</td>
  134. <td style="border-top:dashed thin #666">搜狐•视频</td>
  135. <td style="border-top:dashed thin #666">网易•邮箱</td>
  136. <td style="border-top:dashed thin #666">凤凰•军事</td>
  137. </tr>
  138. <tr height="" align="center">
  139. <td >360游戏</td>
  140. <td>淘宝网</td>
  141. <td>网上购物</td>
  142. <td>百度</td>
  143. <td>•手机卫士</td>
  144. <td>携程旅游</td>
  145. </tr>
  146. <tr height="" align="center">
  147. <td >爱淘宝</td>
  148. <td>360影城</td>
  149. <td>聚划算</td>
  150. <td>国美在线</td>
  151. <td>东财•理财</td>
  152. <td>央视网•直播</td>
  153. </tr>
  154. <tr height="" align="center">
  155. <td >京东商城</td>
  156. <td>58同城</td>
  157. <td>太平洋电脑</td>
  158. <td>世纪佳缘</td>
  159. <td>同程旅游</td>
  160. <td>中关村在线</td>
  161. </tr>
  162. </table>
  163. <table width="" height="" cellpadding="" cellspacing="" style="margin:5px";>
  164.   <tr align="center">
  165.     <td width="" style="border-top:dashed thin #666">汽车之家</td>
  166.     <td width="" style="border-top:dashed thin #666">易车网</td>
  167.     <td width="" style="border-top:dashed thin #666">太平洋汽车</td>
  168.     <td width="" style="border-top:dashed thin #666">安居客</td>
  169.     <td width="" style="border-top:dashed thin #666">折800</td>
  170.     <td width="" style="border-top:dashed thin #666">苏宁易购</td>
  171.   </tr>
  172.   <tr align="center">
  173.     <td>驴妈妈旅游</td>
  174.     <td>新华</td>
  175.     <td>赶集网</td>
  176.     <td>当当网</td>
  177.     <td>途牛旅游</td>
  178.     <td>1号店</td>
  179.   </tr>
  180.   <tr align="center">
  181.     <td>珍爱婚恋网</td>
  182.     <td>乐居二手房</td>
  183.     <td>亚马逊</td>
  184.     <td>艺龙网</td>
  185.     <td>去哪网</td>
  186.     <td>沪江网校</td>
  187.   </tr>
  188.   <tr align="center">
  189.     <td>蘑菇街</td>
  190.     <td>宜人贷</td>
  191.     <td>唯品会</td>
  192.     <td>聚美优品</td>
  193.     <td>搜房网</td>
  194.     <td>12306官网</td>
  195.   </tr>
  196.   <tr align="center">
  197.     <td>猎聘网</td>
  198.     <td>工商银行</td>
  199.     <td>陆金所理财</td>
  200.     <td>六间房</td>
  201.     <td>携程机票</td>
  202.     <td>大主宰</td>
  203.   </tr>
  204. </table>
  205. <p>&nbsp;</p>
  206. </div><br/>
  207. <div class="b" >
  208.   <table width="" height="" style="margin:6px">
  209.     <tr>
  210.       <td>电视剧</td>
  211.       <td>综艺</td>
  212.       <td>游戏</td>
  213.       <td>小游戏</td>
  214.     </tr>
  215.     <tr>
  216.       <td>电影</td>
  217.       <td>直播</td>
  218.       <td>动画</td>
  219.       <td>漫画</td>
  220.     </tr>
  221.     <tr>
  222.       <td>头条</td>
  223.       <td>军事</td>
  224.       <td>旅游</td>
  225.       <td>门票</td>
  226.     </tr>
  227.     <tr>
  228.       <td>彩票</td>
  229.       <td>股票</td>
  230.       <td>搞笑</td>
  231.       <td>小说</td>
  232.     </tr>
  233.     <tr>
  234.       <td>特价</td>
  235.       <td>手机</td>
  236.       <td>教育</td>
  237.       <td>理财</td>
  238.     </tr>
  239.     <tr>
  240.       <td>生活</td>
  241.       <td>天气</td>
  242.       <td>星座</td>
  243.       <td>音乐</td>
  244.     </tr>
  245.   </table>
  246. </div><br/>
  247.  
  248. <div class="d" >
  249.   <table width="" height="" border="" cellpadding="" cellspacing="">
  250.     <tr>
  251.       <td width="" height=""><img src="1.png" width="" height=""  /></td>
  252.       <td width="" height=""><img src="4.png" width="" height="" /></td>
  253.     </tr>
  254.     <tr>
  255.       <td  width="" height=""><img src="2.png" width="" height=""  /></td>
  256.       <td  width="" height=""><img src="6.png" width="" height="" /></td>
  257.     </tr>
  258.     <tr>
  259.       <td  width="" height=""><img src="3.png" width="" height="" /></td>
  260.       <td  width="" height=""><img src="7.png" width="" height="" /></td>
  261.     </tr>
  262.     <tr>
  263.       <td  width="" height=""><img src="5.png" width="" height=""/></td>
  264.       <td  width="" height=""><img src="8.png" width="" height="" /></td>
  265.     </tr>
  266.   </table>
  267. </div>
  268. <div></div>
  269. <div class="e" >e</div>
  270. <div class="f" >
  271.   <table width="" height="" cellpadding="" cellspacing=""  style="margin:5px;">
  272.     <tr >
  273.       <td height="" colspan="" > <font size="-1" color="#00CC00"><strong>发现你喜欢</strong></font></td>
  274.     </tr>
  275.     <tr>
  276.       <td width=""><font color="#00CC33">影视</font></td>
  277.       <td width="">360影视</td>
  278.       <td width="">全球追剧</td>
  279.       <td width="">美女直播</td>
  280.       <td width="">69美女秀</td>
  281.       <td width="">大秧歌</td>
  282.       <td width="">三个奶爸</td>
  283.       <td width="" ><font size="-2" color="#808080">换一换</font></td>
  284.     </tr>
  285.     <tr>
  286.       <td><font color="#00CC33">购物</font></td>
  287.       <td>蘑菇街</td>
  288.       <td>易购九块邮</td>
  289.       <td>一折网特价</td>
  290.       <td>京东服装城</td>
  291.       <td>360购物</td>
  292.       <td>潮男派</td>
  293.       <td width="" ><font size="-2" color="#808080">换一换</font></td>
  294.     </tr>
  295.     <tr>
  296.       <td><font color="#00CC33">游戏</font></td>
  297.       <td>我是大主宰</td>
  298.       <td>每日轻松游戏</td>
  299.       <td>手机游戏中心</td>
  300.       <td>游侠网</td>
  301.       <td>太平洋游戏</td>
  302.       <td>178游戏网</td>
  303.        <td width="" ><font size="-2" color="#808080">换一换</font></td>
  304.     </tr>
  305.     <tr>
  306.       <td><font color="#00CC33">热卖</font></td>
  307.       <td>冬季女装</td>
  308.       <td>热销解馋零食</td>
  309.       <td>洗牙套餐三折</td>
  310.       <td>香辣火锅涮肉</td>
  311.       <td>量贩KTV团购</td>
  312.       <td>儿童摄影一折</td>
  313.       <td width="" ><font size="-2" color="#808080">换一换</font></td>
  314.     </tr>
  315.     <tr>
  316.       <td><font color="#00CC33">小说</font></td>
  317.       <td>不花钱看小说</td>
  318.       <td>言情小说大全</td>
  319.       <td>小说排行榜</td>
  320.       <td>斗破苍穹</td>
  321.       <td>奇幻仙侠</td>
  322.       <td>最新武侠小说</td>
  323.       <td width="" ><font size="-2" color="#808080">换一换</font></td>
  324.     </tr>
  325.     <tr>
  326.       <td><font color="#00CC33">军事</font></td>
  327.       <td>军事头条</td>
  328.       <td>鼎盛军事</td>
  329.       <td>铁血军事</td>
  330.       <td>环球新军事</td>
  331.       <td>军事装备</td>
  332.       <td>航空间</td>
  333.       <td width="" ><font size="-2" color="#808080">换一换</font></td>
  334.     </tr>
  335.   </table>
  336. </div>
  337. <div class="g" >g</div>
  338. <div class="h" >h</div>
  339. <div class="i" >i</div>
  340. <div class="j" >j</div>
  341. </body>
  342. </html>

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

  1. 3月23日html(四) 格式与布局

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 二.position:absolute 1.外层没有position:absolute(或relat ...

  2. 11月23日《奥威Power-BI报表集成到其他系统》腾讯课堂开课啦

    听说明天全国各地区都要冷到爆了,要是天气冷到可以放假就好了.想象一下大冷天的一定要在被窝里度过才对嘛,索性明天晚上来个相约吧,相约在被窝里看奥威Power-BI公开课如何?        上周奥威公开 ...

  3. Linux自用指令——2019年10月23日

    1.ls ls命令是列出目录内容(List Directory Contents)的意思.运行它就是列出文件夹里的内容,可能是文件也可能是文件夹. ls -a 列出目录所有文件,包含以.开始的隐藏文件 ...

  4. 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 ...

  5. [分享] 从定制Win7母盘到封装详细教程 By BILL （ 10月23日补充说明 ）

    [分享] 从定制Win7母盘到封装详细教程 By BILL ( 10月23日补充说明 ) billcheung 发表于 2011-10-23 00:07:49 https://www.itsk.com ...

  6. 2016年11月23日 星期三 --出埃及记 Exodus 20:14

    2016年11月23日 星期三 --出埃及记 Exodus 20:14 "You shall not commit adultery.不可奸淫.

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

  8. 2016年6月23日 星期四 --出埃及记 Exodus 14:20

    2016年6月23日 星期四 --出埃及记 Exodus 14:20 coming between the armies of Egypt and Israel. Throughout the nig ...

  9. Week16（12月23日）：复习

    Part I:提问 =========================== 1.声明强类型视图时,使用关键字(    ) A.ViewBag    B.model    C.Type    D.Tit ...

随机推荐

  1. c语言实现BMP图像转换为灰度图

    当初是自己要装X,非要用c来写信息隐藏作业,装了X,就得付出实践.查了好久资料,到期末才把作业交了,这里总结一下. 这道题是将真彩图转换为灰度图. 关于BMP文件结构,这是困扰了我好久的问题,上网查了 ...

  2. 如何访问google

    http://www.williamlong.info/archives/3983.html http://jingyan.baidu.com/article/29697b91316f2fab20de ...

  3. 【Beta】阶段汇总

    [项目文档&API文档] PhyLab2.0需求与功能分析改进文档(NABCD) PhyLab2.0设计分析阶段任务大纲(α) 团队个人贡献分分配规则 功能规格说明书 [Phylab2.0]B ...

  4. jdk8新特性之lambda expressions

    本文分两部分: 语法简单说明 lambda的使用 注:这两部分内容均以类+注释的方式进行说明,并且内容均来自官方教程(https://docs.oracle.com/javase/tutorial/j ...

  5. BZOJ3396: [Usaco2009 Jan]Total flow 水流

    3396: [Usaco2009 Jan]Total flow 水流 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 45  Solved: 27[Sub ...

  6. BZOJ3390: [Usaco2004 Dec]Bad Cowtractors牛的报复

    3390: [Usaco2004 Dec]Bad Cowtractors牛的报复 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 43  Solved:  ...

  7. Qt入门（6）——Qt的界面布局

    Qt提供四种布局: VBoxLayout:垂直布局 HBoxLayout:水平布局 GridLayout:二维布局. FormLayout: 窗体布局

  8. 2013第38周日Java文件上传下载收集思考

    2013第38周日Java文件上传&下载收集思考 感觉文件上传及下载操作很常用,之前简单搜集过一些东西,没有及时学习总结,现在基本没啥印象了,今天就再次学习下,记录下自己目前知识背景下对该类问 ...

  9. HDU_2046——骨牌铺放问题,递推

    Problem Description 在2×n的一个长方形方格中,用一个1× 2的骨牌铺满方格,输入n ,输出铺放方案的总数. 例如n=3时,为2× 3方格,骨牌的铺放方案有三种,如下图:   In ...

  10. LA 4794 - Sharing Chocolate dp

    题意 有一块\(x*y\)的巧克力,问能否恰好分成n块,每块个数如下 输入格式 n x y a1 a2 a3 ... an 首先\(x \times y 必然要等于 \sum\limits_{i=1} ...