HTML&CSS布局练习---360导航页面
一共分为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:;
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>
显示结果图片如下：
页面内广告如下图：
HTML&CSS布局练习---360导航页面的更多相关文章
- CSS入门指南-4：页面布局
这是<CSS设计指南>的读书笔记,用于加深学习效果. display 属性 display是 CSS 中最重要的用于控制布局的属性.每个元素都有一个默认的 display 值.对于大多数元 ...
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- DIV+CSS布局-固定页面开度布局
DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...
- 一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- (转)一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- 使用Div + CSS布局页面
在设计网页时,能够控制好各个模块在页面中的位置是非常关键的.本章将讲解利用Div+CSS对页面元素进行定位的方法. Div是HTML中指定的专门用于布局设计的容器对象 Div是CSS布局的核心对象. ...
- Html和CSS布局技巧
单列布局水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- css012 css布局简介
css012 css布局简介 一. 网页布局的类型 网页布局的类型 1.固定宽度 2.流式 3.相应式web设计 二. 如何进行css布局 1.强大的<div>标签 网页的h ...
随机推荐
- 转centos65安装简测mysql cluster 7.3.7
MySQLCluster是sharednothing分布式架构,ndb存储引擎把数据放置于内存中.可以做到无单点故障.由运行于不同服务器上的的多种进程构成,组件包括SQL节点,NDBD数据节点,管理程 ...
- Java for LeetCode 164 Maximum Gap
Given an unsorted array, find the maximum difference between the successive elements in its sorted f ...
- ShortestPath:Six Degrees of Cowvin Bacon(POJ 2139)
牛与电影 题目大意:就是一群牛,又在玩游戏了(怎么你们经常玩游戏),这个游戏规则如下,把牛拆分成一个一个组,并且定义一个“度”,规定在一个组的牛与他自己的度为0,与其他牛的度为1,不同组的牛不存在度, ...
- codeforces B. Eight Point Sets 解题报告
题目链接:http://codeforces.com/problemset/problem/334/B 一开始看到题目,有点怯,理解了题目后,其实并不难.这句话是突破口 three distinct ...
- HDU 5745 La Vie en rose (DP||模拟) 2016杭电多校联合第二场
题目:传送门. 这是一道阅读理解题,正解是DP,实际上模拟就能做.pij+1 指的是 (pij)+1不是 pi(j+1),判断能否交换输出即可. #include <iostream> # ...
- icon font字体图标字库汇总
最近在研究icon font图标字库,找了一些比较好的在线字库.大都是开源的,而且各有特色! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个i ...
- CUDA学习笔记（四）——CUDA性能
转自:http://blog.sina.com.cn/s/blog_48b9e1f90100fm5h.html 四.CUDA性能 CUDA中的block被划分成一个个的warp,在GeForce880 ...
- .net学习笔记----二级域名站点共享Session状态
前面一篇文章提到了如何在使用了ASP.NET form authentication的二级站点之间共享登陆状态, http://www.cnblogs.com/jzywh/archive/2007/0 ...
- soft lockup和hard lockup介绍
转自:http://www.cnblogs.com/openix/p/4034530.html 转自:http://blog.csdn.net/panzhenjie/article/details/1 ...
- 亿条数据在PHP中实现Mysql数据库分表100张
当数据量猛增的时候,大家都会选择库表散列等等方式去优化数据读写速度.笔者做了一个简单的尝试,1亿条数据,分100张表.具体实现过程如下: 首先创建100张表: $i=0; while($i<=9 ...