反复调啊调，还是padding和margin，一个下午快过去了，IE对贴边距离不能准确体现的问题又冒出来了，我简直无计可施，相比opera和mozilla就很听话，但是我能放弃IE吗？不可能，宁愿迁就IE，!important似乎作用不大，有时候似乎IE也认可!improtant，没时间去研究到底!improtant出了什么问题了。几个小时就是乏味的调调调，又始终调不好，伴随着拳头在键盘上落下，鼠标在天空中飞扬，时不时还得出去走走，抽几支烟，怀恋一下表格。最终我实在没办法做到完美还原了，只好换了一种表现形式，先凑合着。我把对比图给出，大家可以看到，差别很大的。可能有人会觉得在这里过分的注重细节了，但我不觉得，我觉得所有的表现设计应该在设计稿里体现，做页面的部分只是一个还原过程，尽量不在制作过程中去进行版面设计。如果制作不能准确还原，那么就会对设计加以限制。

设计稿：


还原页面

　　另外，说一个我的经验，算经验吧：做网页设计的时候不是天马行空、随心所欲的，应该充分考虑到制作。对于我一般而言，单个页面的制作时间几乎忽略不计，根本不用考虑太多，也没什么难度，因为我在做设计的时候，就充分考虑进了制作的合理和限制，所以当设计稿完成之时，页面的制作也就在心中完成了。表格的切分，嵌套，切割图片时gif和jpg的分界，甚至高度宽度间距，样式表的使用等等全部心中有数，制作自然轻轻松松。
　　出现无法还原的情况，我只好归于我的div技术还不好，毕竟表格我用了4年，而div从接触到运用才不到2天，另外设计稿也不是基于div来设计的，这么一想，稍稍释然。下班了，徒弟伸过头来，我哭丧着脸，很沮丧的告诉她：唉，今天做不完了。她走了，我留下，继续向下做。
　　突然发现background的正确表达，于是回头回头，将所有的background属性精简，也算郁闷中一大快事。
　　对于内容，分成3块，标题、内容、更多，这时我依旧不清楚

和，于是看了看其他网站代码，发现可以使用来定义文本内容，于是没多想一口气用3个

/

/

，代码如下：

页面我只给出一个li的定义，其他都是复制粘贴了。

页面


    
◆ 青岛市2001-2002年度金桥工程科技咨询先进集体
    
1、青岛捷能汽轮机股份有限公司科协技术专家组

            2、铁道部南车四方机车股份有限公司科协技术专家组

            3、青岛海晶化工集团有限公司科协技术专家组

            4、重汽集团专用汽车公司科协技术专家组

            5、青岛钢铁集团公司科协技术专家组

            6、海军四八零八厂科协技术专家组
    
| 详细内容|

样式表

#indexcontent_top_adnewscontent li#adnews_01
{
	margin: 0 0 5px 1px;
}
#indexcontent_top_adnewscontent li#adnews_02
{
	width: 303px;
	margin: 0 0 5px 0;
}
#indexcontent_top_adnewscontent li#adnews_03
{
	height: 143px;
	margin: 0 0 0 1px;
}
#indexcontent_top_adnewscontent li#adnews_04
{
	height: 143px;
	width: 303px;
	margin: 0 0 0 0;
}
h3
{
	margin: 0;
	padding: 0;
	font-size : 9pt;
	font-weight : bold;
	font-family : 宋体;
}
h3 a
{
	text-decoration: none;
}

h3 a:link
{
	color: #000;
}

h3 a:visited
{
	color: #000;
}

h3 a:hover
{
	color: #ED1C24;
}
h4
{
	margin: 4px 10px 0 10px;
	padding: 0;
	color: #006;
	font-size : 9pt;
	font-weight : normal;
	font-family : 宋体;
}
h5
{
	color: #900;
	margin: 0;
	padding: 0;
	text-align : right; 
	font-size : 9pt;
	font-weight : bold;
	font-family : 宋体;	
}
h5 a
{
	text-decoration: none;
}

h5 a:link
{
	font-weight : normal;
	color: #900;
}

h5 a:visited
{
	font-weight : normal;
	color: #900;
}

h5 a:hover
{
	font-weight : normal;
	color: #ED1C24;
}

　　剩下又是padding，margin的调整，不过调了一天的padding，margin，现在调整速度也较快了。做完这部分就赶快扔掉，不再想，再想就要发疯了。继续向下做。



　　这一块最初我看作是中间一块，命名div为indexcontent_middle。先解决这一块的上部分，左边广告，右边专题区域。难度依然是上下两条2px的黑色分界，IE会不听话的贴边。对于广告那块，我最终的办法是设置为背景图，虽然这样不好，假如使用FLASH就不行了，但是折腾了一天，没心力了。对于右边，调了一下，可以使用margin和!important解决。中间有个插曲，我依旧不知道

，所以对于每个图片旁边的三行标题，正好我刚使用了，所以自然我就顺延定义了

。结果发现只有

有用，其他两个没用，纳闷，一查样式表手册，哦，原来只是从1－6，靠，顺便就把这个标记熟悉了，回头想起之前使用的

显然不合理。但是，但是，我再也不想去动那一块了，先不管了。对于专题区域的布局，display: block;，好，代码如下：

页面


    

        

        
    
    

        

            

            

                
八厂科协技术专家组

                        连理工大学校园里

                        程9月启动实现

           
            

            

                
八厂科协技术专家组

                        连理工大学校园里

                        程9月启动实现

           
            

            

                
八厂科协技术专家组

                        连理工大学校园里

                        程9月启动实现

           
        
    

样式表

/* -----------正文中----------- */
#indexcontent_middle
{
	position: relative;
	width: 770px;
	height: 750px;
	margin: 0 auto;
	padding: 0;
	background: #FC0;
}

/* ---广告区域---*/
#indexcontent_middle_ad
{
	float: left;
	width: 150px;
	height: 54px;
	background-color: #ED1C24;
}
#indexcontent_middle_ad ul
{
	margin: 0;
	padding: 0;
	width: 150px;
	height: 54px;
	LIST-STYLE-TYPE: none;
	background: url(/Edu/uppic/200507/20050731124130427.jpg) 0px 2px no-repeat;
}

/* ---专题区域---*/
#indexcontent_middle_subject
{
	float: right;
	width: 620px;
	height: 54px;
	background-color: #000;
}
#indexcontent_middle_subject ul
{
	margin: 0;
	margin-top: 3px;
	margin-top: 2px !important;
	padding: 0;
	width: 620px;
	height: 50px;
	display: block;
	LIST-STYLE-TYPE: none;
	background: url(/Edu/uppic/200507/20050731124131688.jpg);
}
#indexcontent_middle_subject li
{
	float: left;
	margin: 0;
	padding: 0;
}
#indexcontent_middle_subject li#img
{
	margin: 4px 6px 3px 7px;
	border: 1px #ED1C24 solid;
	padding: 0;
	width: 78px;
	height: 40px;
	background: #ED1C24;
}
#indexcontent_middle_subject li#text
{
	text-align: left !important;
	margin: 5px 0 3px 0;
	padding: 0;
}
h6
{
	color: #900;
	margin: 0;
	padding: 0;
	text-align : left; 
	font-size : 9pt;
	font-family : 宋体;	
	line-height : 14px;
}
h6 a
{
	text-decoration: none;
}

h6 a:link
{
	font-weight : normal;
	color: #900;
}

h6 a:visited
{
	font-weight : normal;
	color: #900;
}

h6 a:hover
{
	font-weight : normal;
	color: #ED1C24;
}

　　调完这个，天色很暗了，不能再做了，再晚就没车回家了，两脚一蹬，椅子向后一滑，我远远的，歪着头，斜斜的望着今天的成绩。真是悲哀，还叫嚷着今天就要做完，看看，这才做了多少，还有多少没做，即便做了的不少也是勉强完成，我太狂妄了。
　　不再嚣张，我就像一个战败的将军一样，灰溜溜的离开空荡的公司，灰溜溜的搭上车，灰溜溜的回到家，灰溜溜的钻进被窝，灰溜溜的睡。
　　后来回想，虽然这一天我并没有完成多少，但是坚持不懈的反复调试和思考摸索实践，让我对标准有了更深入的理解，在一些属性的使用上也开始熟练起来，这些一堆积，终于，速度在第三天出来了。

爆牙齿 2004 8 19

 

上一页  [1] [2] [3] 下一页