Chinaunix首页 | 论坛 | 博客

泉水南

首页　| 　博文目录　| 　关于我

小闹腾

  • 博客访问： 319707
  • 博文数量： 69
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 759
  • 用 户 组： 普通用户
  • 注册时间： 2014-09-09 14:15
个人简介

〆 人生就是拼命地奔跑，和华丽的跌倒。 つ

文章分类

全部博文（69）

文章存档

2017年（2）

2016年（16）

2015年（21）

2014年（30）

我的朋友
最近访客
推荐博文
九宫格导航页面

分类： Html/Css

2016-05-07 17:21:42

Sublime编写源代码：
html

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>九宫格导航页面</title>
  6.     <link rel="stylesheet" href="../css/jiugongge.css">
  7. </head>
  8. <body>
  9.     
  10.     <div id="head">
  11.           <img class="img1" src="../img/" alt="学信教育">
  12.             <div class="head1">
  13.               <img class="img2"src="../img/denglu.jpg" height="15" width="16" alt="登录">
  14.               <a href="" title="">登录</a>
  15.               <a href="" title="">注册</a>
  16.             </div>
  17.       </div>
  18.       
  19.       <div class="clear"></div>
  20.       
  21.       
  22.       <div id="middle">
  23.         <ul>
  24.             
  25.             <li class="content">
  26.                 <div class="inside3">
  27.                   <a href="" title=""><img class="imgcontent1" src="../img/shipin.jpg" alt="视频图片"></a>
  28.                 </div>
  29.                 <div class="outside3">
  30.                   <a href="" title=""><img class="imgcontent" src="../img/jingxuanshiti.jpg" alt="精选试题"></a>
  31.                 </div>
  32.             </li>
  33.             <li class="content">
  34.                 <div class="inside4">
  35.                   <a href="" title=""><img class="imgcontent" src="../img/shijuan.jpg" alt="试卷图标"></a>
  36.                 </div>
  37.                 <div class="outside4">
  38.                   <a href="" title=""><img class="imgcontent" src="../img/ziliao.jpg" alt="资料"></a>
  39.                 </div>
  40.             </li>
  41.             <li class="content">
  42.                 <div class="inside5">
  43.                     <div class="inside1">
  44.                       <a href="" title=""><img class="imgcontent" src="../img/meiriyilian.jpg" alt="每日一练"></a>
  45.                     </div>
  46.                     <div class="inside2">
  47.                       <a href="" title=""><img class="imgcontent" src="../img/zhentiyanlian.jpg" alt="真题演练"></a>
  48.                     </div>
  49.                 </div>
  50.                 <div class="outside5">
  51.                   <a href="" title=""><img class="imgcontent2" src="../img/jiaoliu.jpg" alt="交流">在线交流,让你学习考试更简单</a>
  52.                 </div>
  53.             </li>
  54.         </ul>
  55.       </div>
  56. </body>
  57. </html>
link导入css文件：

点击(此处)折叠或打开

  1. /*
  2. * @Author: IT - Pony
  3. * @Date: 2016-05-07 10:24:56
  4. * @Last Modified by: IT - Pony
  5. * @Last Modified time: 2016-05-07 16:38:47
  6. */
  7. /*声明字符编码集utf-8*/
  8. @charset "utf-8";
  9. *{
  10.     margin: 0;
  11.     padding: 0;
  12. }

  14. #head{
  15.     height: 45px;
  16.     background-color: #000;
  17. }

  19. .head1{
  20.     margin-left: 1000px;
  21.     float: right;
  22.     line-height: 45px;
  23. }

  25. /*清除浮动*/
  26. .clear{
  27.     clear: both;
  28. }

  30. .head1 a{
  31.     height: 45px;
  32.     color: #fff;
  33.     text-decoration: none;
  34.     margin-right: 20px;
  35. }

  37. .img1{
  38.     margin-left: 15px;
  39.     margin-top: 5px;
  40. }

  42. #middle{
  43.     height: 555px;
  44.     /*border: 1px solid green;*/
  45.     background-image: url("../img/beijingtupian.jpg");
  46. }

  48. .content{
  49.     height: 400px;
  50.     width: 418px;
  51.     /*border: 1px solid red;*/
  52.     float: left;
  53.     margin-top: 154px;
  54.     margin-left: 15px;
  55. }

  57. /*将无序列表前面的小黑点去掉*/
  58. ul{
  59.     list-style: none;
  60. }

  62. div .inside3{
  63.     width: 416px;
  64.     height: 255px;
  65.     /*border: 1px solid green;*/
  66.     background-color: #ae1f00;
  67. }

  69. div .inside4{
  70.     width: 416px;
  71.     height: 255px;
  72.     /*border: 1px solid green;*/
  73.     background-color: #29b77b;
  74. }

  76. div .inside5{
  77.     width: 416px;
  78.     height: 255px;
  79.     /*border: 1px solid green;*/
  80. }

点击(此处)折叠或打开

  1. div .outside3{
  2.     width: 416px;
  3.     height: 121px;
  4.     /*border: 1px solid black;*/
  5.     margin-top: 20px;
  6.     background-color: #ff8001;
  7. }

  9. div .outside4{
  10.     width: 416px;
  11.     height: 121px;
  12.     /*border: 1px solid black;*/
  13.     margin-top: 20px;
  14.     background-color: #1f62cb;
  15. }

  17. div .outside5{
  18.     width: 416px;
  19.     height: 121px;
  20.     /*border: 1px solid black;*/
  21.     margin-top: 20px;
  22.     background-color: #681bb9;
  23.     text-decoration: none;
  24. }

  26. .outside5 a{
  27.     text-decoration: none;
  28.     color: #fff;
  29.     font-size: 20px;
  30.     font-weight: bold;
  31. }

  33. .inside1{
  34.     width: 416px;
  35.     height: 121px;
  36.     /*border: 1px solid black;*/
  37.     background-color: #00c1ff;
  38. }

  40. .inside2{
  41.     width: 416px;
  42.     height: 121px;
  43.     /*border: 1px solid black;*/
  44.     margin-top: 10px;
  45.     background-color: #ff8001;
  46. }

  48. .imgcontent{
  49.     margin-top: 30px;
  50.     margin-left: 100px;
  51. }

  53. .imgcontent1{
  54.     margin-top: 30px;
  55.     margin-left: 135px;
  56. }

  58. .imgcontent2{
  59.     margin-top: 30px;
  60.     margin-left: 40px;
  61. }
运行结果：

阅读(1308) | 评论(0) | 转发(0) |
1

上一篇：BLOG页面

下一篇：简单的页面

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6