今天这个网页，其实用以前的基本方法也可以做出来。在这里主要是用到了CSS3的新特性font-face以及fontawesome的应用。
这一部分的主要框架如下图：
黑色的div里面存放的是英文。h3和p标记存放的相应的文字。紫色的div里面是存放的图标和文字，这里的图标不是插入的图片。是使用fontawesome完成的。通过设置边距来实现了四个图标的分布效果。
下面是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>软文推广页面</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<div class=bg>
<div class="text1"><strong>One World,Any Device</strong></div>
<h3 align="center">万物互联，极致体验</h3><br>
<P>【HTML5】全面兼容移动设备</P>
<p>原生应用指日可待，传智播客重新定义前端开发</p>
<div style="padding-top: 70px;">
<div>
<i class="fa fa-apple" style="font-size: 50px;margin-left: 12%;color: white;"></i>
<i class="fa fa-weixin" style="font-size: 50px;margin-left: 20%;color: white;"></i>
<i class="fa fa-television" style="font-size: 50px;margin-left: 20%;color: white;"></i>
<i class="fa fa-laptop" style="font-size: 50px;margin-left: 20%;color: white;"></i>
</div>
<div>
<h5 style="margin-left: 11%;">原生移动APP</h5>
<h5 style="margin-left: 16%;">开发微信公共平台升级</h5>
<h5 style="margin-left: 17%;">网站的开发</h5>
<h5 style="margin-left: 19%;">桌面应用开发</h5>
</div>
</div>
</div>
</body>
</html>
- font-face属性的使用方法
@font-face{
font-family：<YourWebFont>；
src:url(),url()…；
font-weight:样式；
}这一部分中链入的font-awesome样式表中设置的属性就不详细说明了，就只要掌握它的用法就行了。其中index.css设置里页面的显示样式。bg类是设置里外层div的背景以及宽高；text1类是设置了英文的字体、字号以及它的位置等，其中用到的font-face属性在上面已经进行了说明；H5是实现图标下面的小字处于同一行；通用选择器实现的是设置所有元素为白色。
.bg{
width: 100%;
height: 600px;
background: url(bg.jpg) no-repeat;
background-size: contain;
}
.text1{
padding-top: 90px;
font-family:first;
font-size: 100px;
text-align: center;
}
@font-face {
font-family:first;
src: url(fonts/KUNSTLER.ttf),
url(fonts/ITCEDSCR.ttf);
font-weight: bolder;
}
h5{display: inline;}
p{text-align: center;}
*{color: white;}