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>
<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> </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 ...
随机推荐
- java之多线程的理解
线程的属性 (1)线程的状态 线程在它的生命周期中可能处于以下几种状态之一: New(新生):线程对象刚刚被创建出来: Runnable(可运行):在线程对象上调用start方法后,相应线程便 ...
- IOS学习：ios中的数据持久化初级（文件、xml、json、sqlite、CoreData）
IOS学习:ios中的数据持久化初级(文件.xml.json.sqlite.CoreData) 分类: ios开发学习2013-05-30 10:03 2316人阅读 评论(2) 收藏 举报 iOSX ...
- P1337 fibonacci数列（tyvj）
http://www.tyvj.cn/p/1337 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 著名的斐波那契数列f[n]=1 ...
- U8800安装软件显示无效的URI问题
看到很多人遇到这个问题,其中包括我自己,最后找到可行的解决办法,现整理出来一个新帖,有同样问题的U友可以参考下. 手机先连接电脑,进入USB存储状态,然后在计算机上找到SD卡目录下的.android_ ...
- 【Linux】部署apache
部署前的准备: 1.安装apr #wget http://mirror.bit.edu.cn/apache/apr/apr-1.4.8.tar.gz #tar -zxvf apr-1.4.8.tar. ...
- Android 查看是否有存储卡插入
String status=Environment.getExternalStorageState(); 2 3 if ( status.equals ( Enviroment.MEDIA_MOU ...
- POJ 3009 深度优先搜索
问题:打冰球.冰球可以往上下左右4个方向走,只有当冰球撞到墙时才会停下来,而墙会消失.当冰球紧贴墙时,不能将冰球往那个方向打.冰球出界就当输,超过10次还没将冰球打到目标位置也当输.求用最小次数将冰球 ...
- Java 反射机制详解
动态语言 动态语言,是指程序在运行时可以改变其结构:新的函数可以被引进,已有的函数可以被删除等在结构上的变化.比如众所周知的ECMAScript(JavaScript)便是一个动态语言.除此之外如Ru ...
- 字符流；字节流；带缓冲的输入输出流；以及用scanner读文件
概念: InputStream类是字节输入流的抽象类,是所有字节输入流的父类. OutputStream类是字节输入流的抽象类,是所有字节输出流的父类. In(可以理解为读)Out(可以理解为写) 一 ...
- Highcharts 异步加载数据曲线图表
导入 data.js 文件 异步加载数据需要引入以下js 文件: <script src="http://code.highcharts.com/modules/data.js&quo ...