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

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

文章分类

全部博文(69)

文章存档

2017年(2)

2016年(16)

2015年(21)

2014年(30)

分类: Html/Css

2016-04-19 22:02:17

使用Sublime编写代码:
HTML代码

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>必应</title>
  6.     <link rel="stylesheet" href="../css/biying.css">
  7.     <script src=""></script>
  8. </head>

  9. <body>
  10.     <div>
  11.         <div id="od">
  12.             <a href="" title="">图片</a>
  13.             <a href="" title="">视频</a>
  14.             <a href="" title="">学术</a>
  15.             <a href="" title="">词典</a>
  16.             <a href="" title="">地图</a>
  17.             <a href="" title="">更多</a>
  18.             <a href="" title="">Office Online</a>
  19.             <a href="" title="">Outlook.com</a>
  20.         <div class="co">
  21.             <img src="../img/diqiu.jpg" alt="地球图片">
  22.             <a href="" title="">Switch to Beining English</a>
  23.             <a href="" title="">登录</a>
  24.             
  25.             
  26.             <img class="cf" src="../img/shezhi.jpg" alt="设置图片">
  27.         </div>
  28.     </div>

  29.     <div>
  30.         <div id="td">
  31.             <img src="../img/b_ying.png" alt="必应图片">
  32.             <input class="ct" type="text" name="" value="">
  33.            
  34.             <img class="cs" src="../img/sousuo.png" alt="搜索图片">

  35.             <div class="ce">
  36.                 <img src="../img/tu1.jpg" alt="图片">
  37.                 <img src="../img/tu2.jpg" alt="图片">
  38.                 <img src="../img/tu3.jpg" alt="图片">
  39.                 <img src="../img/tu4.jpg" alt="图片">
  40.             </div>
  41.         </div>
  42.     </div>

  43.     <div>
  44.         <div id="sd">
  45.             <a href="" title="">@2016 microsoft</a>
  46.             <a href="" title="">沪ICP备10042051号</a>
  47.             <a href="" title="">隐私声明和Cookie</a>
  48.             <a href="" title="">使用条款</a>
  49.             <a href="" title="">广告</a>
  50.             <a href="" title="">帮助</a>
  51.             <a href="" title="">反馈</a>
  52.         </div>
  53.     </div>
  54. </body>
  55. </html>
css文件:

点击(此处)折叠或打开

  1. /*
  2. * @Author: IT - Pony
  3. * @Date: 2016-04-17 10:58:06
  4. * @Last Modified by: IT - Pony
  5. * @Last Modified time: 2016-04-17 23:19:51
  6. */
  7. *{
  8.     margin: 0;
  9.     padding: 0;
  10. }

  11. /*第一块*/
  12. #od{
  13.     height: 50px;
  14.     background-color: #333333;
  15. }

  16. #od a{
  17.       color: #fff;
  18.       text-decoration: none;
  19.       line-height: 50px;
  20.       margin-left: 15px;
  21. }

  22. #od .co{
  23.     display: inline;
  24.     margin-left: 300px;
  25. }

  26. #od img{
  27.     margin-right: -12px;
  28.     margin-bottom: -4px;
  29. }

  30. #od .cf{
  31.     margin-left: 70px;
  32. }

  33. /*第二块*/
  34. #td{
  35.     height:500px;
  36.     background-image: url(../img/biying1.jpg);
  37. }

  38. #td img{
  39.     margin-left: 100px;
  40.     margin-bottom: -16px;
  41. }

  42. #td .ct{
  43.     height: 43px;
  44.     width: 480px;
  45.     margin-top: 100px;
  46.     margin-left: 10px;
  47.     border: 0;
  48. }

  49. #td .cs{
  50.     margin-left: -8px;
  51. }

  52. #td .ce{
  53.     width: 1200px;
  54.     text-align: right ;
  55. }

  56. .ce img{
  57.     margin-top: 290px;
  58.     margin-right: -85px;
  59. }

  60. /*第三块*/
  61. #sd{
  62.     height: 50px;
  63.     background-color: #333333;
  64.     text-align: right;
  65. }

  66. #sd a{
  67.     color: #fff;
  68.     text-decoration: none;
  69.     line-height: 50px;
  70.     margin-right: 15px;
  71. }
运行结果:
阅读(1252) | 评论(0) | 转发(0) |
0

上一篇:百度简易界面

下一篇:float布局

给主人留下些什么吧!~~