重构之美－迎接网站设计的来临

页面

<div id="indexcontent_top">
    ……
    <div id="indexcontent_top_form">
        ……
    </div>
    <div id="indexcontent_top_adnewscontent">
        <ul>
            <li id="adnews_01"></li>
            <li id="adnews_02"></li>
            <li id="adnews_03"></li>
            <li id="adnews_04"></li>
        </ul>
    </div>
</div>

样式表

/* ---内容新闻区域---*/
#indexcontent_top_adnewscontent
{
	float: right;
	margin:0;
	padding:0;
	width:620px;
	height:auto;
}
#indexcontent_top_adnewscontent ul
{
	float: left;
	margin:0;
	padding:0;
	width:620px;
	height:auto;
	LIST-STYLE-TYPE: none;
	background: #000;
}
#indexcontent_top_adnewscontent li
{
	float: left;
	DISPLAY: block; 
	TEXT-ALIGN: left;
	width: 302px;
	height: 142px;
	padding: 3px;
	background:url(/Edu/uppic/200412/20041217124144460.jpg) 1px 1px repeat-x #FFF;
	line-height : 17px;
}
#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;
}

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

设计稿：


还原页面

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

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

页面

<li id="adnews_02">
    <h3><a href="#">◆ 青岛市2001-2002年度金桥工程科技咨询先进集体</a></h3>
    <h4>1、青岛捷能汽轮机股份有限公司科协技术专家组<br />
            2、铁道部南车四方机车股份有限公司科协技术专家组<br />
            3、青岛海晶化工集团有限公司科协技术专家组<br />
            4、重汽集团专用汽车公司科协技术专家组<br />
            5、青岛钢铁集团公司科协技术专家组<br />
            6、海军四八零八厂科协技术专家组</h4>
    <h5>|<a href="#" title="点击查看详细内容"> 详细内容</a>|</h5>
</li>

样式表

#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;
}

上一页  [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]  ... 下一页  >>