设为首页收藏本站

自学it网-公益PHP培训!

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2180|回复: 2

做了一个很糟糕的仿布尔的HTML... [复制链接]

Rank: 2

发表于 2017-8-12 22:18:20 |显示全部楼层
感觉自己水平太次了..就这么一点页面..我大概折腾了3.4个小时..

而且超多地方没处理好的..比如中间那个JAVA的图片..和另外2个不一样大..就变这样了..

几乎所有的居中什么的都是自己手写的margin-left...

CSS和页面也写的极其混乱..

我知道有很多地方写的很差...但是不知道怎么优化..

有没有大佬比较空闲的..能顺便瞅一瞅..看一看...给我指点下...



FireShot Capture 1副本.jpg





仿布尔.zip (657.84 KB, 下载次数: 432)

使用道具 举报

Rank: 2

发表于 2017-8-12 22:19:19 |显示全部楼层
看看我的CSS...大概就知道有多糟糕了..

  1. #clr{
  2.         clear:both;
  3.         width: 0px;
  4.         height: 0px;
  5. }

  6. #container{
  7.         width:1200px;
  8.         margin-left:auto;
  9.         margin-right:auto;

  10. }

  11. #header{
  12.         width: 1200px;
  13.         height:130px;


  14. }
  15. #top{
  16.         height:30px;
  17.         background: #EEE;


  18. }

  19. #nav-left{
  20.         display: block;
  21.         height:30px;
  22.         float:left;
  23.         font:13px/30px "微软雅黑";
  24.         margin-left:10px;
  25. }
  26. #nav-right{
  27.         display: block;
  28.         height:30px;
  29.         float:right;
  30.         font:13px/30px "微软雅黑";
  31.         margin-right:10px;
  32. }
  33. #nav{
  34.         height:100px;
  35.         background:rgb(249,249,249);
  36.         border-bottom-left-radius:10px;
  37. }
  38. .logo{
  39.         display: block;
  40.         float:left;
  41. }
  42. ul.nav{
  43.         display:inline;
  44.         height:100px;
  45. }
  46. li.nav{
  47.         float:left;
  48.         height: 100px;
  49.         font: 20px/100px "微软雅黑";
  50.         margin-left: 33px
  51. }
  52. div#photo{
  53.         margin-top:10px;
  54.         height:500px;
  55. }

  56. #main{
  57.         height:420px;
  58.         margin-top:10px;
  59. }
  60. div.lside{
  61.         width:890px;
  62.         height:420px;
  63.         float:left;
  64. }
  65. #l-top{
  66.         height:35px;
  67.         background: rgb(245,245,245);
  68.         border-radius:5px;
  69.         margin-bottom:5px;

  70. }

  71. h1{

  72.         height:35px;
  73.         font:bold 17px/35px "微软雅黑";
  74.         float:left;
  75. }

  76. #l-main{
  77.         height:380px;
  78.         margin-top:5px;
  79. }

  80. .xiangmu{
  81.         width:290px;
  82.         height:380px;
  83.         background-image:url(../images/xk-bg.jpg);
  84.         margin: 0px 3.3px;
  85.         float: left;
  86. }

  87. div.tubiao{
  88.         width:290px;
  89.         padding:30px 0px;
  90.         padding-left:50px;
  91. }
  92. .logo1{
  93.         display: block;
  94.         float:left;
  95.         margin-right:10px;
  96. }
  97. h2{

  98.         height:35px;
  99.         font:18px/35px "微软雅黑";
  100.         margin-bottom:10px;
  101.         margin-left:10px;
  102. }

  103. .miaoshu{
  104.         color:white;
  105. /*        display: block;*/
  106.         background: #EE4200;
  107.         padding: 5px;
  108.         border-radius:5px;
  109. }
  110. ul.shijian1{
  111.         margin-left:20px;
  112.         margin-bottom:30px;
  113. }
  114. li.shijian1{
  115.         display: block;
  116.         margin-bottom:15px;
  117. }
  118. .zixun{
  119.         color:red;
  120.         border:1px solid red;
  121.         border-radius:5px;
  122.         padding: 0 20px
  123. }

  124. .qiangzuo{
  125.         font-size: 30px;
  126.         margin-left:50px;
  127.         padding: 0 30px;
  128.         background: white;
  129.         border:1px solid #EEE;
  130.         border-radius:5px;
  131. }

  132. .rside{
  133.         width:300px;
  134.         margin-left:5px;
  135.         float: right;
  136. }
  137. ul.wenzhang{
  138.         margin-left:15px;
  139. }
  140. li.wenzhang{
  141.         list-style-type:disc;
  142.         margin: 15px 0px;
  143.         font: 13px "宋体";
  144. }

  145. #footer{
  146.         height:200px;
  147.         background: black;
  148.         margin-top:10px;
  149. }

  150. #row1{
  151.         width:1200px;
  152.         margin-right:auto;
  153.         margin-left:auto;
  154.         padding-top:50px;

  155. }

  156. #women{
  157.         width:400px;
  158.         height:114px;
  159.         color:white;
  160.         font:15px/30px "微软雅黑";
  161.         border-right:1px solid white;
  162.         float:left;
  163. }
  164. #daohang1{
  165.         width:430px;
  166.         padding: 30px;
  167.         float:left;
  168.         border-right:1px solid white;
  169. }

  170. div a{
  171.         color: white;
  172.         display:block;
  173.         float:left;
  174.         margin: 5px 20px;

  175. }

  176. #erweima{
  177.         width:122px;
  178.         height:122px;
  179.         margin-left:60px;
  180. }
复制代码


使用道具 举报

Rank: 1

发表于 2018-4-20 17:42:36 |显示全部楼层
服部小五郎 发表于 2017-8-12 22:19
看看我的CSS...大概就知道有多糟糕了..

你自己从上到下梳理一遍,然后css中的很多可以单独一排的你就单独一排,用可读的单词可读性就要好很多,你这根本就没人想要看啊?

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

Archiver|自学it网 ( 京ICP备12009156号 )  

GMT+8, 2018-5-26 04:33 , Processed in 0.035944 second(s), 7 queries , Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部