Hero Unit图标题文混排
Hero Unit图标题文混排
1.几乎在每一个商业网站中都有一块焦点区域，专门用于宣传主要产品，或是展示公司标语，这一区域称为Hero Unit(主角单元)；
2.制作类似Hero Unit的网页；
代码：
Lioness of Gir
Monkeys swing merrily from tree to tree. Deer, wild, boars, and antelopes roam freely among the clump of trees. If you were to go deep into the fores5, you might even see a majestic lion, stalking its prey. This is the Gir forest in Gujarat, the only reserve forest in Asia where you can still see the king of the forest walking around.
1) 为div设置样式：
.desciptin{
width:980px;
height:980px;
background:#f39c12;
}
2)希望图片和文字居中显示，内容不要紧贴背景单元：
.desciptin{
width:980px;
height:980px;
background:#f39c12;
text-align:center;
padding:45px 60px;
}
3)但是添完padding后，div的宽度和高度超出了原来所设置的大小，解决方法：设置div的box-sizing属性为border-box；也可以通过计算将原始宽高减去内边距后，再为div设置新的宽高值；
.desciptin{
width:980px;
height:980px;
background:#f39c12;
text-align:center;
padding:45px 60px;
box-sizing:border-box;
}
4)进行细化，设置字体颜色，调整元素之间的距离等：
h1{
color:#fff;
margin:15px auto;
font-size:56px;
}
p{
color:rgba(255,255,255,.7);//设置文字带有70%透明度的白色；
}
5）希望上图下文变为左图右文，并使得图和文在垂直方向上都居中，所以将图片和文字区分为两大部分，以便后续制作；用一个div将h1和p元素包裹起来，代码如下：
Lioness of Gir
Monkeys swing merrily from tree to tree. Deer, wild, boars, and antelopes roam freely among the clump of trees. If you were to go deep into the fores5, you might even see a majestic lion, stalking its prey. This is the Gir forest in Gujarat, the only reserve forest in Asia where you can still see the king of the forest walking around.
6)实现以上描述的显示效果，最方便的方式莫过于绝对定位。要设置子元素的绝对定位，则需要先将父元素的position属性设置为relative；代码如下：
.description{
/*其他代码*/
position：relative；
}
7）设置图片和文字区域为绝对定位；为了使这两部分都居中，设置top:50%;即垂直方向上位于中点；通过设置transform属性在y方向上负向偏移50%，即向上移动其高度的一半，以实现垂直方向上的居中；代码如下：
.img , .content{
position:absolute;
top:50%;
transform:translateY(-50%);
-ms-transform:translateY(-50%); /*IE9*/
-moz-transform:translateY(-50%); /*firefox*/
-webkit-transform:translateY(-50%); /*Safari of Chrome*/
-o-transform:translateY(-50%); /*Opera*/
}
8)由于图片和文字区域在绝对定位后都成为了漂浮元素，两者的显示重叠在了一起。为了加以区分将他们设置水平方向的位置，以及文字区域宽度，代码如下：
img{
left:10%;
}
.content{
left:30%;
width:60%;
}
以上代码设置了图片的水平位置，使其与左侧的距离为总宽度的10%；然后设置了content距离左侧的距离为30%；（自己调整与图片的合适距离），设置其宽度60%；这样content距离单元最右侧的距离为（100%-30%-60%）=10%；这样，便实现了左右图文的布局效果；
用类似的方法，只需调整元素的left属性，就可以方便的将图片切换到文字右侧显示；代码如下：
img{
left:75%;
}
.content{
left:10%;
width:60%;
}
9）使用绝对定位还可以使标题显示在上方，图标和说明文字显示于其下，并左右排列，代码如下：
img{
left:100px;
top:180px;
}
.content{
left:100px;
width:80%;
top:50px;
}
.content{
left:180px;
top:120px;
}
img, .content , .content p{
position:absolute;
}
以上代码，我们去除了img和。content的垂直居中代码，分别为图片，文字区域（.content），和说明文字(.content p)设置绝对定位；
总结：本例实现了图片，标题，文字的一些布局效果，并使用了绝对定位来实现精确的位置控制。注意的是，使用像素单位的绝对定位，其优点在于定位灵活，设置方便，缺点在于很难实现自适应，他更加适合于一些布局要求非常精确，宽度和高度均固定且已知的情景。
由于绝对定位是相对于其父元素而言，因此在上述代码中，说明文字（content p）的绝对定位的数值是相对于 .content这一元素的，而非相对于整个Hero Unit.