360导航初做(修改版) - 柒寒

hanazawalove 2021-11-19 原文


360导航初做(修改版)


修正了窗口化界面,格式布局会乱的bug

HTML代码:

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>360</title>
  6 <link href="360.css" rel="stylesheet" type="text/css" />
  7 </head>
  8 
  9 <body leftmargin="200" rightmargin="200" topmargin="100">
 10 <div id="a">
 11 <table width="943" height="150" border="0" cellpadding="0" cellspacing="0">
 12 <form>
 13 <tr height="50">
 14 <td></td>
 15 <td align="center"><a href="#">网页</a></td>
 16 <td align="center"><a href="#">视频</a></td>
 17 <td align="center"><a href="#">图片</a></td>
 18 <td align="center"><a href="#">音乐</a></td>
 19 <td align="center"><a href="#">微博</a></td>
 20 <td align="center"><a href="#">问答</a></td>
 21 </tr>
 22 <tr height="50">
 23 <td align="right"><select size="1"><option>综合搜索</option>
 24 <option>谷歌搜索</option>
 25 <option>百度搜索</option>
 26 </select></td>
 27 <td align="center" width="120" colspan="6"><input type="text" size="120" /></td>
 28 <td align="left"><input type="submit" value="搜一下" /></td>
 29 </tr>
 30 <tr height="50">
 31 <td></td>
 32 <td></td>
 33 <td></td>
 34 </tr>
 35 </form>
 36 </table>
 37 </div>
 38 <div id="b">
 39 <table width="250" height="200" border="0" cellpadding="0" cellspacing="0">
 40 <tr align="center">
 41 <td><a href="#">新闻·视频</a></td>
 42 <td><a href="#">电影·电视剧</a></td>
 43 </tr>
 44 <tr align="center">
 45 <td><a href="#">购物·海淘</a></td>
 46 <td><a href="#">彩票·理财</a></td>
 47 </tr>
 48 <tr align="center">
 49 <td><a href="#">活期·定期</a></td>
 50 <td><a href="#">小说·智能</a></td>
 51 </tr>
 52 <tr align="center">
 53 <td><a href="#">游戏·小游戏</a></td>
 54 <td><a href="#">动漫·直播秀</a></td>
 55 </tr>
 56 </table>
 57 </div>
 58 <div id="c">
 59 <table width="680" height="250" border="0" cellpadding="0" cellspacing="0">
 60 <tr align="center" height="17%">
 61 <td width="17%"><a href="#">360游戏</a></td>
 62 <td width="17%"><a href="#">淘宝网</a></td>
 63 <td width="17%"><a href="#">网上购物</a></td>
 64 <td width="17%"><a href="#">百度</a></td>
 65 <td width="17%"><a href="#">360卫士</a></td>
 66 <td width="17%"><a href="#">携程</a></td>
 67 </tr>
 68 <tr align="center" height="17%">
 69 <td width="17%"><a href="#">爱淘宝</a></td>
 70 <td width="17%"><a href="#">360影视</a></td>
 71 <td width="17%"><a href="#">聚划算</a></td>
 72 <td width="17%"><a href="#">国美在线</a></td>
 73 <td width="17%"><a href="#">理财</a></td>
 74 <td width="17%"><a href="#">央视·直播</a></td>
 75 </tr>
 76 <tr align="center" height="17%">
 77 <td width="17%"><a href="#">京东商城财</a></td>
 78 <td width="17%"><a href="#">58同城</a></td>
 79 <td width="17%"><a href="#">太平洋电脑</a></td>
 80 <td width="17%"><a href="#">世纪佳缘</a></td>
 81 <td width="17%"><a href="#">同城旅游</a></td>
 82 <td width="17%"><a href="#">中关村在线</a></td>
 83 </tr>
 84 <tr height="1px">
 85 <td colspan="6"><div style="border-top:1px dotted #000"></div>
 86 </td>
 87 </tr>
 88 <tr align="center" height="17%">
 89 <td width="17%"><a href="#">汽车之家</a></td>
 90 <td width="17%"><a href="#">易车网</a></td>
 91 <td width="17%"><a href="#">太平洋汽车</a></td>
 92 <td width="17%"><a href="#">安居客</a></td>
 93 <td width="17%"><a href="#">折800</a></td>
 94 <td width="17%"><a href="#">苏宁易购</a></td>
 95 </tr>
 96 <tr align="center" height="17%">
 97 <td width="17%"><a href="#">驴妈妈旅游</a></td>
 98 <td width="17%"><a href="#">人民·新华</a></td>
 99 <td width="17%"><a href="#">赶集网</a></td>
100 <td width="17%"><a href="#">当当网</a></td>
101 <td width="17%"><a href="#">途牛旅游网</a></td>
102 <td width="17%"><a href="#">1号店</a></td>
103 </tr>
104 <tr align="center" height="17%">
105 <td width="17%"><a href="#">珍爱婚恋网</a></td>
106 <td width="17%"><a href="#">乐居二手房</a></td>
107 <td width="17%"><a href="#">亚马逊</a></td>
108 <td width="17%"><a href="#">艺龙网</a></td>
109 <td width="17%"><a href="#">去哪儿网</a></td>
110 <td width="17%"><a href="#">沪江网校</a></td>
111 </tr>
112 </table>
113 
114 </div>
115 <div id="d">d</div>
116 <div id="e">e</div>
117 <div id="f">f</div>
118 <div id="g">g</div>
119 <div id="h">h</div>
120 <div id="i">i</div>
121 </body>
122 </html>

CSS代码: 

 

 1 @charset "utf-8";
 2 /* CSS Document */
 3 <style>
 4 *
 5 {margin:0px;
 6 padding:0px;}
 7 #a
 8 {
 9     border:2px solid #000;
10     height:150px;
11     width:940px;
12     }
13 #b
14 {
15     border:2px solid #000;
16     margin-top:10px;    
17     height:200px;
18     width:250px;     
19     }
20 #c
21 {
22     border:2px solid #000;
23     margin-top:10px;
24     height:250px;
25     width:680px;
26     left:460px;         //把所有的right改成left即可
27     top:254px;
28     position:absolute;}
29 #d
30 {
31     border:2px solid #000;
32     margin-top:10px;
33     height:100px;
34     width:250px;
35     position:absolute;}
36 #e
37 {
38     border:2px solid #000;
39     margin-top:10px;
40     height:200px;
41     width:680px;
42     left:460px;
43     top:518px;
44     position:absolute;
45     }
46 #f
47 {
48     border:2px solid #000;    
49     margin-top:10px;
50     height:800px;
51     width:250px;
52     top:580px;
53     position:absolute}
54 #g
55 {
56     border:2px solid #000;    
57     margin-top:10px;
58     height:500px;
59     width:680px;
60     top:732px;
61     left:460px;
62     position:absolute;}
63 #h
64 {
65     border:2px solid #000;
66     margin-top:10px;
67     height:135px;
68     width:680px;
69     left:460px;
70     top:1245px;
71     position:absolute;}
72 #i
73 {
74     border:2px solid #000;
75     margin-top:10px;
76     height:200px;
77     width:940px;
78     top:1392px;
79     position:absolute;
80     }
81 a:link
82 {
83     color:#000;
84     text-decoration:none;}
85 a:visited
86 {
87     color:#F03;
88     text-decoration:none;}
89 a:hover{
90     color:#F00;
91     text-decoration:underline;}
92 a:active{
93     color:#6F0;
94     text-decoration:underline;}
95 </style>

 

 

 

效果为:

发表于
2016-03-24 14:32 
柒寒 
阅读(220
评论(0
编辑 
收藏 
举报

 

版权声明:本文为hanazawalove原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/hanazawalove/p/5315431.html

360导航初做(修改版) - 柒寒的更多相关文章

  1. Jquery跳出each循环 – 世界之大追梦者

    Jquery跳出each循环 jquery each循环,要实现break和continue的功能:break […]...

  2. Socket通信原理 – zzsuje

    Socket通信原理     对TCP/IP、UDP、Socket编程这些词你不会很陌生吧?随着网络技术的发展 […]...

  3. 在线流程图设计工具 – 大宝pku

    在线流程图设计工具 http://www.gliffy.com/gliffy/#   Gliffy支持中文,其 […]...

  4. java 多线程总结篇1之——基本概念 – Tison

    java 多线程总结篇1之——基本概念 1、什么是线程 进程:每个进程都有独立的代码和数据空间(进程上下文), […]...

  5. Android Gradle 依赖配置:implementation & api

    背景: Android Gradle plugin 3.0开始(对应Gradle版本 4.1及以上),原有的依 […]...

  6. 如何设计一个成功的logo – IT同学会

    如何设计一个成功的logo 如何设计一个成功的logo,下面跟IT同学会电脑教程网一起学习下吧。 首先我们需要 […]...

  7. JDK 源码解析 —— 集合(一)数组 ArrayList

    JDK 源码解析 —— 集合(一)数组 ArrayList 1. 概述 ArrayList ,基于 [] 数组 […]...

  8. CI/CD持续集成/持续部署 敏捷开发     北漂–我的2018

         敏捷软件开发(英语:Agile software development),又称敏捷开发,是一种从1 […]...

随机推荐

  1. 电信、网通、联通等恶意DNS劫持跳广告页面的解决方法

    中国电信、网通、联通ADSL用户必读:中国电信、网通、联通劫持dns(中国电信、网通、联通劫持ie浏览器)解决 […]...

  2. css3+jquery制作3d旋转相册 – 不会飞的麻雀

    css3+jquery制作3d旋转相册 首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有 […]...

  3. [Python网络编程]一个简单的TCP时间服务器

    服务器端: 1.创建一个面向网络的TCP套接字对象socket, 2.绑定地址和端口 3.监听 4.当有客户端 […]...

  4. 国产中标麒麟Linux部署dotnet core 环境并运行项目 (三) 部署运行WEB API项目

    部署dotnet Core Web API 上一步的文章,是我们公司最核心的一个ORM组件,在中标麒麟系统完成 […]...

  5. 【电池完全宝典】手机首次充电方法及关于锂电池充电的正确知识

    首次充电方法及关于手机锂电池充电的知识 在手机中,无论是从技术角度评估还是从价格方面的考虑,电池都占有十分重要 […]...

  6. XCodeGhost表明:为了安全,开发工具应该从官方网站下载

    今天的热门话题就是XCode编译器,这个神器在火热的移动互联网浪潮下也被人利用了,据文章分析 (XCode编译 […]...

  7. 软考视频总结(二)——细化学习A

           软考A部分主要是计算机与软件工程的基础知识,主要涉及的内容有数据结构和算法基础、编译原理、操作系 […]...

  8. git 清除本地git commit的内容

    由于我经常git add . , 然后再git commit -m “文字说明”,这样 […]...

展开目录

目录导航