京东方校园招聘页面重构

            京东方项目上线过程中，加班到凌晨5点，这次加班乐帝总结经验教训，前端基础还是不牢固，在实际项目中一知半解问题暴露，幸好有新胜这样的良师益友帮助，所谓良师益友在于提供直接帮助的同时，给予授人以渔的教诲。这是这份实习最让乐帝感到珍惜的。

   如上篇对《写给大家看的css书》的总结，乐帝对布局的理解又上了一个新的台阶。那么就从京东方项目页面入手，来重构之前布局。重构后资源地址。

   整个详情页，当初出现的问题归结为几个：

• 标签不够语义化，嵌套层次太多。
• 图片与文字并列，没有实现文字与图片居中对齐。
• 背景图的设置。

  标签语义化的改进：

  首先减少不必要的嵌套关系，并列结构使用无序列表来替换之前滥用的div。

  链接标签内部嵌套span即行内元素，否则不符合web标准。

   图文并列的问题：

   

<div class='rec-des-title'>
            <span>技术开发工程师</span>
        </div>

   标题结构如上，内层采用内联元素span。标题样式如下：

.rec-des-title{
	text-align: center;
/*外层div不用设置具体高度和行高，而由内部元素撑起*/
	padding: 40px 0 42px 0;
	background-color: #eee;
}
.rec-des-title span{
	display: inline-block;
	background: url(images/j_icon_cgzy.png) no-repeat 0 0;
	padding-left: 72px;
	/*行内元素特点，可以设置padding给背景图充分的空间*/
	height: 50px;
	background-size: 58px 50px;
	font-size: 14px;
	line-height: 50px;
	color: #404042;
}

  外层元素首先设置内联元素居中显示，内层span元素设置inline-block使其具有行内元素和块级元素共同的属性。

   并设置背景图及大小，由padding定义为盒子内容与盒子之间的距离，故采用padding-left很方便将文字与背景图分开。

   设置height即span高度为背景图高度，同时设置line-height与height等高，实现文字与背景图居中对齐显示。
    图文并列对齐问题的核心就在于设置文字line-height与图片height等高即可。

<div class="rec-des-info">
                <img src="images/icon1.png">
                <div class="rec-des-detail">
                    <h3>基本信息</h3>
                    <ul>
                        <li>薪资范围：面议</li>
                        <li>招聘人数：1人</li>
                        <li>发布时间：2014-09-09</li>
                        <li>截止时间：2014-09-09</li>
                    </ul>
                </div>
            </div>

   对应h3样式如下：

.rec-des-detail h3{
	height:34px;
	line-height: 34px;
	/*这里设置标题高与图片高等高，再设置行高就可以自动，以实现文字在图片居中*/
	color: #07aa73;
	font-size: 15px;
	margin-bottom: 20px;
	font-weight:normal;
}

   这里列高与图片高度相同，从而实现了居中对齐。

ul li{
	line-height: 22px;
	/*用的最多的就是列高了处理文字的*/
}

   这里设置了列表项列高，用于处理行之间距离。

   视觉稿一般都采用640px，而切图时，只需要测量出像素，再除以2即可。

  因此不像之前视觉都将素材准备好，在这家单位，前端工程师负责更多，这段比较难受的时间，也是学习提高最快的时间。不会的可以问同事，这样的日子值得珍惜。