本文已参与「新人创作礼」活动， 一起开启掘金创作之路。
大家好，我是洋哥。今天给大家介绍一下每日一题——CSS选择器简单应用。
题目要求
请通过HTML和CSS代码来实现如下图所示效果的网页
建议用时：10-15分钟
难度：简单
知识点考察
这道题对HTML和CSS多个知识点进行考察，但集中考察的是CSS的选择器的使用以及CSS的基本布局。
问题分析
第一，我们可以看出左边图片与右边的文字块是对齐的，要实现这个效果，一般套个table
第二，看左边，插入一个图片即可用img
第三，看右边的文字块，我们可以看出三种突出文字样式，金色、红色、蓝色，为了简便可以在CSS中用选择器来定义文字样式，红色的因为它是嵌在一行里的可以用标签选择器<span>，蓝色和金色可以用类选择器也可以用id选择器，里面还有一个超链接用<a>，还有一个首行缩进，将text-indent设置为2em即可。
相关知识点复习
选择器格式
selector {
property:value;
}
标记选择器
一个HTML页面由很多不同的标记组成，例如<p>、<h1>、<div>等。CSS标记选择器就用于声明这些标记的CSS样式。
tagName {
property:value;
}
类选择器
类选择器用来为一系列标记定义相同的呈现方式。
.className {
property:value;
}
ID选择器
ID选择器和类选择器在设置格式的功能上类似，都是对特定属性的属性值进行设置。
ID选择器的一个重要功能是用做网页元素的唯一标识，所以，一个HTML文件中一个元素的ID属性值中惟一的。
定义ID选择器的语法格式如下。
#idName{
property:value ;
}
div和span
div表示独占一行，而span表示行内
text-indent属性
text-indent属性可以对特定选项的文本进行首行缩进，取值可以是长度值或百分比。
代码实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
span {
color: red;
font-size:24px;
font-weight:700;
}
.blue {
color:#39F;
}
a {
font-style:italic;
}
.jin {
color:#FC6;
font-weight:900;
}
img {
float:left;
margin: 10px;
padding: 5px;
}
#b {
text-indent:2em;
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="images/1.jpg"
</td>
<td paddding="16px">
<p class="jin">Web前端开发工程师</p>
<p class="blue">技术要求：</p>
<p id="b">了解常用的JS框架，如jQuery、YUI等；掌握最基本的JavaScript计算方法编写；对目前互联网流行的网页制作方法(Web2.0)HTML+CSS,以及各大浏览器兼容性有较多的了解；
基本掌握前沿技术(HTML5+CSS3)。<a href="#"> Web前端技术</a>你究竟掌握了多少...
</p>
<p class="blue">更新时间：2015年05月19日20点（已有<span>323</span>人点赞）</p>
<hr>
<p class="jin"> 相关技术文章<span>8</span>篇</p>
</td>
</tr>
</table>
</body>
</html>
总结和建议
这道题难度不大却在日常网站中经常见到，在工作中遇到这种情况可以说是小菜一碟。
