Chinaunix首页 | 论坛 | 博客

泉水南

首页　| 　博文目录　| 　关于我

小闹腾

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

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

文章分类

全部博文（69）

文章存档

2017年（2）

2016年（16）

2015年（21）

2014年（30）

我的朋友
最近访客
推荐博文
百度简易界面

分类： Html/Css

2016-04-19 21:52:52

使用Sublime编写html代码：
html代码

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>百度</title>
  6.     <link rel="stylesheet" href="../css/baidu.css">
  7. </head>
  8. <body>
  9.     <div>
  10.         <img height="150" src="../img/bd_logo1.png" alt="百度图片">
  11.     </div>

  13.     <div>
  14.         <a style="display:inline-block" href="" title="">新闻</a>
  15.         <a style="display:inline-block" href="" title="">网页</a>
  16.         <a style="display:inline-block" href="" title="">贴吧</a>
  17.         <a style="display:inline-block" href="" title="">知道</a>
  18.         <a style="display:inline-block" href="" title="">MP3</a>
  19.         <a style="display:inline-block" href="" title="">图片</a>
  20.         <a style="display:inline-block" href="" title="">视频</a>
  21.         <a style="display:inline-block" href="" title="">地图</a>
  22.     </div>

  24.     <div>
  25.         <input id="ina" type="text" name="" value="" placeholder="">
  26.         <input id="inb" type="button" name="" value="百度一下" placeholder="">
  27.     </div>

  29.     <div>
  30.         <a class="twoa" style="display:inline-block" href="" title="">百科</a>
  31.         <a class="twoa" style="display:inline-block" href="" title="">文库</a>
  32.         <a class="twoa" style="display:inline-block" href="" title="">hao123</a>
  33.         <a class="twoa" style="display:inline-block" href="" title="">更多>></a>
  34.     </div>

  36.     <div>
  37.         <a class="threea" style="display:inline-block" href="" title="">把百度设为主页</a>
  38.         <a class="threea" style="display:inline-block" href="" title="">把百度添加到桌面</a>
  39.     </div>

  41.     <div>
  42.         <a class="foura" href="" title="">加入百度推广</a>
  43.         <a class="foura" href="" title="">搜索风云榜</a>
  44.         <a class="foura" href="" title="">关于百度</a>
  45.         <a class="foura" href="" title="">About Baidu</a>
  46.     </div>

  48.     <div>
  49.         @2012 Baidu <a href="" title="">使用百度前必读 京ICP证030173号*</a>
  50.     </div>
  51. </body>
  52. </html>
css文件

点击(此处)折叠或打开

  1. /*
  2. * @Author: IT - Pony
  3. * @Date: 2016-04-16 11:11:36
  4. * @Last Modified by: IT - Pony
  5. * @Last Modified time: 2016-04-16 15:49:40
  6. */
  7. *{margin:0;padding:0;}

  9. div{
  10.     text-align: center;
  11. }

  13. a{
  14.     line-height: 40px;
  15.     width: 50px;
  16. }

  18. #ina{
  19.     height: 28px;
  20.     width: 480px;
  21. }

  23. #inb{
  24.     height: 34px;
  25.     width: 100px;
  26.     font-size: 15px;
  27. }

  29. .twoa{
  30.     line-height: 60px;
  31.     width: 50px;
  32. }

  34. .threea{
  35.      width: 130px;
  36.      margin-top: 180px;
  37. }

  39. .foura{
  40.     width: 50px;
  41.     line-height: 10px;
  42. }
运行结果：


代码：

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>margin百度</title>
  6.     <link rel="stylesheet" href="../css/baidubox.css">
  7.     <script src=""></script>
  8. </head>
  9. <body>
  10.     <div id="oa">
  11.         <a href="" title="">新闻</a>
  12.         <a href="" title="">好123</a>
  13.         <a href="" title="">地图</a>
  14.         <a href="" title="">视频</a>
  15.         <a href="" title="">登录</a>
  16.         <a href="" title="">设置</a>
  17.         <input type="button" name="" value="更多产品" placeholder="">
  18.     </div>

  20.     <div id="ot">
  21.         <img height="200" src="../img/bd_logo1.png" alt="百度图片">
  22.     </div>

  24.     <div id="od">
  25.         <input id="io" type="text" name="" value="" placeholder="">
  26.         <input id="it" type="button" name="" value="百度一下" placeholder="">
  27.     </div>
  28.         
  29.     <div id="td">
  30.         <a href="" title="">把百度设为主页</a>
  31.         <a href="" title="">关于百度</a>
  32.         <a href="" title="">About Baidu</a>
  33.     </div>

  35.     <div id="sd">
  36.         @2014 Baudu <a href="" title="">使用百度前必读</a>京ICP证030173号*
  37.     </div>
  38. </body>
  39. </html>
css文件：

点击(此处)折叠或打开

  1. /*
  2. * @Author: IT - Pony
  3. * @Date: 2016-04-17 10:07:29
  4. * @Last Modified by: IT - Pony
  5. * @Last Modified time: 2016-04-17 10:52:43
  6. */
  7. #oa{
  8.     text-align: right;
  9.     word-spacing: 10px;
  10. }

  12. #ot{
  13.     text-align: center;
  14. }

  16. #od{
  17.     text-align: center;
  18. }

  20. #io{
  21.     height: 30px;
  22.     width: 450px;
  23. }

  25. #it{
  26.     height: 38px;
  27.     width: 100px;
  28.     margin-left: -9px;
  29. }

  31. #td{
  32.     text-align: center;
  33.     margin-top: 200px;
  34. }

  36. #sd{
  37.     text-align: center;
  38.     margin-top: 10px;
  39. }
运行结果：
阅读(1290) | 评论(0) | 转发(0) |
0

上一篇：Java---运算器

下一篇：必应页面

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

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

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

16024965号-6