HTMLCSS布局练习---360导航页面
2024-04-29 20:18:19
一共分为7个部分：由HTML和CSS外部样式表做成
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>好123-上网从这里开始</title> <link href="Untitled-练习360外部样式表.css" rel="stylesheet" type="text/css" /> </head><body background="未标题-1.jpg"> <div id="导航栏"><div id="logo"><img src="3605.png"/></div> <div><input type="text" id="文本框"></div> <div><input type="button" value="好搜一下" id="按钮" /></div> </div> <div id="右上"> <table height="200px" width="500px"> <tr align="center"><font size="1"> <td><a href="http://www.baidu.com">好搜</a>•<a href="http://www.ganji.com/">360商城</a></td> <td><a href="http://www.baidu.com">新浪</a>•<a href="http://www.ganji.com/">微博</a></td> <td><a href="http://www.baidu.com">天猫</a>•<a href="http://www.ganji.com/">圣诞狂欢</a></td> <td><a href="http://www.baidu.com">搜狐</a>•<a href="http://www.ganji.com/">视频</a></td> <td><a href="http://www.baidu.com">网易</a>•<a href="http://www.ganji.com/">邮箱</a></td> <td><a href="http://www.baidu.com">凤凰</a>•<a href="http://www.ganji.com/">军事</a></td> </tr></font> <tr align="center"><font size="1"> <td><a href="http://www.baidu.com">360游戏</a></td> <td><a href="http://www.baidu.com">淘 宝 网</a></td> <td><a href="http://www.ganji.com/">购物</a>•<a href="http://www.ganji.com/">团购</a></td> <td><a href="http://www.ganji.com/">百度</a>•<a href="http://www.ganji.com/">热搜</a></td> <td><a href="http://www.ganji.com/">360</a>•<a href="http://www.ganji.com/">手机卫士</a></td> <td><a href="http://www.ganji.com/">携程旅游</a></td> </tr></font> <tr align="center"><font size="1"> <td><a href="http://www.ganji.com/">爱 淘 宝</a></td> <td><a href="http://www.ganji.com/">360影视</a></td> <td><a href="http://www.ganji.com/">聚 划 算</a></td> <td><a href="http://www.ganji.com/">国美在线</a></td> <td><a href="http://www.ganji.com/">东财</a>•<a href="http://www.ganji.com/">理财</a></td> <td><a href="http://www.ganji.com/">央视</a>网•<a href="http://www.ganji.com/">直播</a></td> </tr></font> <tr align="center"><font size="1"> <td><a href="http://www.ganji.com/">京东商城</a></td> <td><a href="http://www.ganji.com/">58 同 城</a></td> <td><a href="http://www.ganji.com/">太平洋电脑</a></td> <td><a href="http://www.ganji.com/">世纪佳缘</a></td> <td><a href="http://www.ganji.com/">同程旅游</a></td> <td><a href="http://www.ganji.com/">中关村在线</a></td> </tr></font> <tr> <td colspan="6"><hr /> </td> </tr><tr align="center"><font size="1"> <td><a href="http://www.ganji.com/">汽车之家</a></td> <td><a href="http://www.ganji.com/">易车网</a></td> <td><a href="http://www.ganji.com/">太平洋汽车</a></td> <td><a href="http://www.anjuke.com/">安居客</a></td> <td><a href="http://out.zhe800.com/">折800</a></td> <td><a href="http://www.suning.com/"><font color="#00FF00">苏宁易购</a></td> </tr></font> <tr align="center"><font size="1"> <td><a href="http://www.4399.com/">4399小游戏</a></td> <td><a href="http://www.people.com.cn/">人民</a> • <a href="http://www.xinhuanet.com/">新华</a></td> <td><a href="http://www.ganji.com/">赶集网</a></td> <td><a href="http://union.dangdang.com/">当当网</a></td> <td><img src="素材/wan.ico" height="15"> <a href="http://www.tuniu.com/">途牛旅游网</a></td> <td><a href="http://www.yhd.com/"><font color="#00FF00"><b><i>一号店</i></b></a> <a href="http://cms.yhd.com"><font color="#FFFF00" size="-1"><b><i>抢福袋</i></b></a></td> </tr></font> <tr align="center"><font size="1"> <td><a href="http://www.zhenai.com/">珍爱婚恋网</a></td> <td><a href="http://www.moonbasa.com/">梦芭莎</a></td> <td><a href="http://www.amazon.cn/">亚马逊</a></td> <td><a href="http://www.elong.com/">艺龙网</a></td> <td><a href="http://www.qunar.com/">去哪儿网</a></td> <td><a href="http://www.meilishuo.com/">美丽说</a></td> </tr></font> <tr align="center"><font size="1"> <td><a href="http://www.meituan.com/">美团网</a></td> <td><a href="http://www.letv.com/">乐视视频</a></td> <td><img src="素材/bitbug_favicon (33333).ico" height="15"/> <a href="http://n.vip.com/">唯品会</a></td> <td><a href="http://www.jumei.com/"><font color="#FFFF00">聚美优品</a></td> <td><a href="http://www.fang.com/">搜房网</a></td> <td><a href="http://www.mogujie.com/">蘑菇街</a></td> </tr></font> <tr align="center"><font size="1"> <td><a href="http://www.liepin.com/">猎聘网</a></td> <td><a href="http://www.111.com.cn/">1药网</a></td> <td><a href="http://t.lu.com/">陆金所理财</a></td> <td><a href="http://www.6.cn/?src=z9weij928">六房间</a></td> <td><a href="http://u.ctrip.com/">携程机票</a></td> <td><a href="http://www.12306.cn/">12306</a> • <a href="http://12306.360.cn/">抢票</a></td> </tr></font></table> </div> <div id="右下"><table height="200px" width="500px"> <tr> <td><a href="http://t.lu.com/"><font color="#00FF00" size="1"><b>发现你喜</b>欢</font></a></td> <td></td> </tr> <tr><font size="1"> <td><a href="http://www.12306.cn/"> 影视</a></td> <td><a href="http://www.12306.cn/">360影视</a></td> <td><a href="http://www.12306.cn/">全球追剧</a></td> <td><a href="http://www.12306.cn/">美女主播</a></td> <td><a href="http://www.12306.cn/">69美女秀</a></td> <td><a href="http://www.12306.cn/">大秧歌</a></td> <td><a href="http://www.12306.cn/">三个奶爸</a></td> <td><a href="http://www.12306.cn/"><font size="-1" color="#999999">换一换</font></a></td> </tr></font> <tr><font size="1"> <td><a href="http://www.12306.cn/"> 购物</a></td> <td><a href="http://www.12306.cn/">蘑菇街</a></td> <td><a href="http://www.12306.cn/">易购9块邮</a></td> <td><a href="http://www.12306.cn/">一折网特价</a></td> <td><a href="http://www.12306.cn/">京东服装城</a></td> <td><a href="http://www.12306.cn/">360购物</a></td> <td><a href="http://www.12306.cn/">潮南派</a></td> <td><a href="http://www.12306.cn/"><font size="-1" color="#999999">换一换</font></a></td> </tr></font> <tr><font size="1"> <td><a href="http://www.12306.cn/"> 游戏</a></td> <td><a href="http://www.12306.cn/">我是大主宰</a></td> <td><a href="http://www.12306.cn/">每日轻松网游</a></td> <td><a href="http://www.12306.cn/">手机游戏中心</a></td> <td><a href="http://t.lu.com/">游侠网</a></td> <td><a href="http://www.12306.cn/">太平洋游戏</a></td> <td><a href="http://www.12306.cn/">178游侠网</a></td> <td><a href="http://www.12306.cn/"><font size="-1" color="#999999">换一换</font></a></td> </tr></font> <tr><font size="1"> <td><a href="http://www.12306.cn/"> 热卖</a></td> <td><a href="http://t.lu.com/">秋冬女装</a></td> <td><a href="http://www.12306.cn/">热解馋零食</a></td> <td><a href="http://www.12306.cn/">洗牙套餐3折</a></td> <td><a href="http://www.12306.cn/">香辣火锅刷肉</a></td> <td><a href="http://www.12306.cn/">限量版KTV团购</a></td> <td><a href="http://www.12306.cn/">儿童摄影1折</a></td> <td><a href="http://www.12306.cn/"><font size="-1" color="#999999">换一换</font></a></td> </tr></font> <tr><font size="1"> <td><a href="http://www.12306.cn/"> 小说</a></td> <td><a href="http://www.12306.cn/">不花钱看小说</a></td> <td><a href="http://www.12306.cn/">言情小说大全</a></td> <td><a href="http://www.12306.cn/">小说排行榜</a></td> <td><a href="http://www.12306.cn/">斗破苍穹</a></td> <td><a href="http://t.lu.com/">奇幻仙侠</a></td> <td><a href="http://www.12306.cn/">最新武侠小说</a></td> <td><a href="http://t.lu.com/"><font size="-1" color="#999999">换一换</font></a></td> </tr></font> <tr><font size="1"> <td><a href="http://www.12306.cn/"> 军事</a></td> <td><a href="http://t.lu.com/">军事头条</a></td> <td><a href="http://www.12306.cn/">鼎盛军事</a></td> <td><a href="http://t.lu.com/">铁血军事</a></td> <td><a href="http://www.12306.cn/">环球新军事</a></td> <td><a href="http://t.lu.com/">军事装备</a></td> <td><a href="http://www.12306.cn/">航空网</a></td> <td><a href="http://t.lu.com/"><font size="-1" color="#999999">换一换</font></a></td> </tr></font> </table></div> <div id="左上"><table height="150px" width="240px" cellpadding="4"> <tr><font size="1"> <td><a href="http://www.baidu.com"> 新闻</font></a><span>•</span><a href="http://www.hao123.com/">视频</a></td> <td><a href="http://www.baidu.com">电影</a><span>•</span><a href="http://www.hao123.com/">电视剧</a></td> </tr></font> <tr ><font size="1"> <td><a href="http://www.baidu.com"> 购物</a><span>•</span><a href="http://www.hao123.com/">团购</a></td> <td><a href="http://www.baidu.com">彩票</a><span>•</span><a href="http://www.hao123.com/">理财</a></td> </tr></font> <tr ><font size="1"> <td><a href="http://www.baidu.com"> 活期</a><span>•</span><a href="http://www.hao123.com/">基金</a></td> <td><a href="http://www.baidu.com">小说</a><span>•</span><a href="http://www.hao123.com/">海淘</a></td> </tr></font> <tr><font size="1"> <td><a href="http://www.baidu.com"> 游戏</a><span>•</span><a href="http://www.hao123.com/">小游戏</a></td> <td><a href="http://www.baidu.com">动漫</a><span>•</span><a href="http://www.hao123.com/">直播秀</a></td> </tr></font> <tr ><font size="1"> <td><a href="http://www.baidu.com"> 搞笑</a><span>•</span><a href="http://www.hao123.com/">解梦</a></td> <td><a href="http://www.baidu.com">教育</a><span>•</span><a href="http://www.hao123.com/">度假</a></td> </tr></font> <tr ><font size="1"> <td><a href="http://www.baidu.com"> 查询</a><span>•</span><a href="http://www.hao123.com/">星座</a></td> <td><a href="http://www.baidu.com">机票</a><span>•</span><a href="http://www.hao123.com/">火车票</a></td> </tr></font> <tr ><font size="1"> <td><a href="http://www.baidu.com"> 手机</a><span>•</span><a href="http://www.hao123.com/">娱乐</a></td> <td><a href="http://www.baidu.com">商城</a><span>•</span><a href="http://www.hao123.com/">好药</a></td> </tr></font> </table> </div> <div id="左中"><table height="100px" width="240px" cellpadding="0"> <tr><td><a href="http://www.hao123.com/"><img src="3602.png" height="60px" width="230px"/></a></td></tr> <tr><font size="1"><td><a href="http://www.hao123.com/">子韬杨幂游戏秀恩爱单身狗哭了</a></font></td></tr> <tr><font size="1"><td><a href="http://www.hao123.com/">装备靠打，玩就知道</a></font></td></tr> </table></div> <div id="左下"><table height="140px" width="240px"> <tr> <td colspan="3"><font color="#00FF00" size="1"><b>猜你爱看</b></font></td><td><a href="http://t.lu.com/"><font size="-1" color="#999999">换一下</font></a></td> </tr> <tr align="center"> <td><a href="http://www.hao123.com/">头条</a></td> <td><a href="http://www.hao123.com/">八卦</a></td> <td><a href="http://www.hao123.com/">正能量</a></td> <td><a href="http://www.hao123.com/">军事</a></td> </tr> <tr> <td rowspan="3" colspan="4" align="center"><a href="http://www.hao123.com/"><img src="3603.png" height="60px" width="230px" /></a></td> </tr> <tr></tr> </table></div> </div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <div id="广告"><a href="htpp://www.baidu.com/"><img src="3607.png"></a></div> </body> </html>
@charset "utf-8";
/* CSS Document */
<style type="text/css">
*
{margin:0px;padding:0px;}a:link
{color:#000;text-decoration:none;}
a:visited
{color:#000;text-decoration:none;}
a:hover
{color:red;text-decoration:underline;}
a:active
{color:orange;text-decoration:underline;}#导航栏
{background-color:#FFF;margin:10px;height:60px;width:1000px;position:absolute;}
#右上
{background-color:#FFF;border:1px solid gray;margin:10px;height:200px;width:500px;right:10px;top:80px;position:absolute;}#右下
{background-color:#FFF;border:1px solid gray;margin:10px;height:200px;width:500px;right:10px;top:290px;position:absolute;}
#左上
{background-color:#FFF;border:1px solid gray;margin:10px;height:150px;width:240px;left:10px;top:80px;position:absolute;}
#左中
{background-color:#FFF;border:1px solid gray;margin:10px;height:100px;width:240px;left:10px;top:240px;position:absolute;}
#左下
{background-color:#FFF;border:1px solid gray;margin:10px;height:140px;width:240px;left:10px;top:350px;position:absolute;}#logo
{width:100;
height:20px;
left:200px;
top:10px;
position:absolute;
}#文本框
{width:400px;
height:20px;
top:10px;
left:320px;
alignment-adjust:middle;
position:absolute;
}
#按钮
{width:100px;
height:30px;
top:10px;
left:730px;
position:absolute;}#广告
{margin:10px;height:150px;width:166px;right:2px;bottom:2px;position:fixed;}</style>显示结果图片如下：
页面内广告如下图：
转载于:https://www.cnblogs.com/0927wyj/p/5078027.html
HTMLCSS布局练习---360导航页面相关推荐
- 【软件篇】~ 为什么打开谷歌浏览器就是360导航页面呢？
目录: 0. 前言 1. 为什么打开谷歌浏览器就是360导航页面呢? 1.1 问题描述 1.2 解决步骤 声明 0. 前言 已经有两三天没更新博客了,为什么呢? 那肯定是有原因的,悄悄告诉你们,我这两 ...
- 你见过这么干净的360导航页面吗？
如果厌烦了如此"美丽干净"的360导航页面: 不妨来试试另外的360导航页面: 不废话,直接上链接:传送门 记得收藏哦~ 对了,如果感觉不错的话,点赞,关注,订阅~ 悄悄得告诉你, ...
- Microsoft edge 浏览器打开是360导航解决方法
Microsoft edge 浏览器打开是360导航解决方法 1.如果没安装360安全软件,去Microsoft edge里面设置 2.如果打开仍是360导航页面,是因为360安全软件更改了默认打开页 ...
- 后台管理页面布局（左侧导航长度根据右侧内容无限延伸）
2019独角兽企业重金招聘Python工程师标准>>> 如图为标准后台管理页面布局,左侧导航布局一般是设置高度100%来适应所有尺寸的显示器打开的浏览器高度. 但是这种布局会 ...
- 页面布局让footer居页面底部_网站页面结构与关键词布局技巧
网站页面布局的优化是搜索引擎优化的重要组成部分,也是网站关键词排名能否进入百度前三页甚至首页的关键,那么,网站布局优化怎么做更有利于排名?关于这点,我们分几点来讲解. 搜索引擎优化 一.网站站内结构布 ...
- Edge/IE浏览器主页被篡改为360导航的快捷解决方法
Edge/IE 浏览器主页被篡改为360导航的快捷解决方法 1.打开自带的电脑管家 找到浏览器保护 打开页面如下 2.同时打开360找到主页防护 打开页面如下,按要求操作 1.打开自带的电脑管家 找到 ...
- 如何解决chrome一打开就是360搜索页面（亲测有效）
今天为了下一个工具软件的破解版结果中招了,被强制装上了360浏览器,之后马上卸载但是打开chrome的时候出现了360搜索页面 在网上也是找到了很多种方法,最后将可行的方案进行介绍. 右键chrome ...
- 取消edge浏览器打开时默认的360导航窗口
问题描述: 每次打开edge浏览器时,总是默认打开360导航窗口,还需要开新的窗口,关掉360导航窗口. 而且很多时候,明明已经通过浏览器设置打开时是新页面,或者某一网页(比如百度). 这是因为360 ...
- edge浏览器360导航删不掉？解铃还须系铃人，亲测有用。
网络上常见的方法比如设置浏览器默认打开页面.修改regedit软件默认设置,这些操作通常管用,但有时候不行. 这里推荐一种方法肯定可以. 小编亲测可用. edge浏览器360导航删不掉?解铃还须系铃人 ...
最新文章
- 新手UI设计师需要掌握的知识和技能
- CTFshow php特性 web150plus
- C指针原理(16)-C指针基础
- 新增房源服务实现之新增房源RESTful接口的开发
- caffe2安装篇（二） ubuntu16.04 安装方法
- Android 控件 - Button
- WordPress基础教学：绝对必装的JetPack外挂
- C 语言实例 - 判断三边能否构成三角形
- Hadoop集群安装(真分布式)
- linux常用命令(4)——系统管理2
- UIPikerView的属性
- matlab常微分方程2次初值问题,MATLAB求解二阶常微分方程初值问题
- 基数排序-LSD-golang
- 分布图用什么软件制作，公司区域分布图怎么做
- [转载]英语语音断句规则
- Windows上安装Nessus
- CVPR2022目标检测文章汇总+创新点简要分析
- 如何找出电脑内的重复文件，查找电脑磁盘重复文件的方法
- 百度地图 测距功能 DistanceTool 在不同浏览器下标注不一致的解决办法，打开新地图测距不生效的解决办法
- c语言二重指针做参数,C语言二重指针的运用