Chinaunix首页 | 论坛 | 博客

泉水南

首页　| 　博文目录　| 　关于我

小闹腾

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

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

文章分类

全部博文（69）

文章存档

2017年（2）

2016年（16）

2015年（21）

2014年（30）

我的朋友
最近访客
推荐博文
简单的页面

分类： Html/Css

2016-06-03 09:03:41

sublime编写源代码：

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>个人中心主页</title>
  6.     
  7.     <link rel="stylesheet" href="../css/gerenzhongxin.css">
  8. </head>
  9. <body>
  10.     <div id="content">
  11.         <div id="head">
  12.             <div class="one_div">
  13.                 <img src="../img/hongqi_CN.jpg" height="18" width="72" alt="国旗_CN">
  14.             </div>
  15.             <div class="lianjie">
  16.                 <img src="../img/home.jpg" height="19" width="20" alt="小房">
  17.                 <a href="#" title="">你好，请登录</a>
  18.                 <a href="#" title="">免费注册</a>
  19.                 <a href="#" title="">帮助中心</a>
  20.                 <a href="#" title="">联系我们</a>
  21.             </div>

  23.             <div class="two_div">
  24.                 <img src="../img/hai_log.jpg" height="39" width="177" alt="">
  25.             </div>

  27.             <div id="middle">
  28.                 <div class="personal">
  29.                     <a href="" title="">个人中心</a>
  30.                 </div>
  31.                 <div class="center">
  32.                     <a href="" title="">personal center</a>
  33.                 </div>

  35.                 <div class="information">
  36.                     <div class="lside">
  37.                         <div class="lside_head">
  38.                             <img src="../img/touxiang.jpg" height="76" width="80" alt="">
  39.                         </div>
  40.                     <div class="shuzi">
  41.                         13426234299
  42.                     </div>
  43.                     <div class="ge_shu">
  44.                         <img src="../img/ge_one.jpg" height="32" width="32" alt="">
  45.                         <img src="../img/ge_two.jpg" height="32" width="32" alt="">
  46.                         <img src="../img/ge_three.jpg" height="32" width="32" alt="">
  47.                         <img src="../img/ge_four.jpg" height="32" width="32" alt="">
  48.                     </div>
  49.                     <div class="hight">
  50.                         <img src="../img/hight.jpg" height="32" width="148" alt="">
  51.                     </div>
  52.                     <div class="ziliao">
  53.                         <img src="../img/blue_ziliao.jpg" height="32" width="200" alt="">
  54.                     </div>
  55.                     <div class="mima">
  56.                         <a href="" title="">修改密码</a>
  57.                     </div>
  58.                     <div class="gray">
  59.                         
  60.                     </div>
  61.                 </div>
  62.                     <div class="rside">
  63.                         <div class="personal_info">
  64.                             <img src="../img/ge_blue.jpg" height="35" width="600" alt="">
  65.                         </div>
  66.                         <div class="input_one">
  67.                             <font color="#cc0000" size="1px">*手机号码输入错误，请重新输入</font><br />
  68.                             <input type="text" name="" value="姓名">
  69.                         </div>
  70.                         <div class="input_two">
  71.                             <input type="text" name="" value="出生日期"><br />
  72.                             <input type="text" name="" value="手机号码"><br />
  73.                             <input type="text" name="" value="电子邮件"><br />
  74.                             <input type="text" name="" value="身份证号"><br />
  75.                             <input type="text" name="" value="职位"><br />
  76.                         </div>

点击(此处)折叠或打开

  1.                         <div class="input_three">
  2.                             <a href="" title=""><img src="../img/blue_tijiao.jpg" height="30" width="180" alt=""></a>
  3.                         </div>
  4.                     </div>
  5.                 </div>

  7.             </div>
  8.             <div id="footer">
  9.                 <div class="four_div">
  10.                     <img src="../img/footer.jpg" height="260" width="1308" alt="">
  11.                 </div>
  12.                 <div class="five_div">
  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="">新闻中心 </a>
  19.                 </div>
  20.             </div>
  21.         </div>
  22.     </div>
  23. </body>
  24. </html>
css文件：

点击(此处)折叠或打开

  1. /*
  2. * @Author: IT - Pony
  3. * @Date: 2016-05-21 11:02:46
  4. * @Last Modified by: IT - Pony
  5. * @Last Modified time: 2016-05-30 14:46:51
  6. */

  8. /*utf-8编码集*/
  9. @import charset"utf-8";
  10. *{
  11.     margin: 0;
  12.     padding: 0;
  13. }

  15. #head{
  16.     height: 35px;
  17.     background: #343331;
  18. }

  20. .one_div{
  21.     margin-left: 300px;
  22.     display: inline;
  23. }

  25. .one_div img{
  26.     margin-top: -5px;
  27.     vertical-align: middle;
  28.     display: inline;
  29. }

  31. .lianjie{
  32.     line-height: 35px;
  33.     margin-left: 300px;
  34.     display: inline;
  35. }

  37. .lianjie a{
  38.     text-decoration: none;
  39.     margin-left: 25px;
  40.     color: #fff;
  41.     font-size: 13px;
  42. }

  44. .lianjie img{
  45.     vertical-align: middle;
  46.     margin-right: -25px;
  47.     margin-top: -5px;
  48. }

  50. .two_div{
  51.     height: 96px;
  52.     background: url(../img/two_none.jpg);/*背景图片*/
  53.     margin-top: -1px;/*两块之间有1px距离*/
  54. }

  56. .two_div img{
  57.     float: left;
  58.     margin-top: 25px;
  59.     margin-left: 360px;
  60. }

  62. /*中间div的高*/
  63. #middle{
  64.     height: 580px;
  65. }

  67. .personal{
  68.     margin-top: 20px;
  69.     margin-left: 280px;
  70. }
  71. .personal a{
  72.     text-decoration: none;
  73.     color: #858484;
  74.     font-weight: bold;
  75.     font-size: 30px;
  76. }

  78. .center{
  79.     margin-left: 300px;
  80. }
  81. .center a{
  82.     text-decoration: none;
  83.     color: #888888;
  84.     font-size: 10px;
  85. }

点击(此处)折叠或打开

  1. .information{
  2.     height: 480px;
  3.     /*border: 1px solid green;*/
  4.     margin-top: 20px;
  5. }

  7. .lside{
  8.     height: 480px;
  9.     width: 200px;
  10.     border: 1px solid #dededf;
  11.     float: left;
  12.     margin-left: 250px;
  13. }

  15. .lside_head img{
  16.     margin-top: 25px;
  17.     margin-left: 60px;
  18. }

  20. .ziliao{
  21.     margin-top: 15px;
  22. }

  24. .shuzi{
  25.     text-align: center;
  26.     color: #333333;
  27.     font-size: 16px;
  28.     margin-top: 5px;
  29. }

  31. .mima{
  32.     text-align: center;
  33.     font-size: 16px;
  34.     margin-top: 15px;
  35. }
  36. .mima a{
  37.     text-decoration: none;
  38.     color: #646464;
  39.     font-weight: bold;
  40. }

  42. .gray{
  43.     width: 100px;
  44.     border-bottom: 1px solid #dedede;
  45.     margin-top: 10px;
  46.     margin-left: 50px;
  47. }

  49. .ge_shu{
  50.     text-align: center;
  51.     margin-top: 10px;
  52. }

  54. .hight{
  55.     text-align: center;
  56.     margin-top: 10px;
  57. }
运行结果：


阅读(1252) | 评论(0) | 转发(0) |
0

上一篇：九宫格导航页面

下一篇：一张简单的3DsMax场景图

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

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

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

16024965号-6