项目2-2软文推广页面

软文推广页面首先给大家看效果图：

背景是我自己随便找了一张背景图黄颜色一种比较亮的图，所以文字应该选取黑色这样看起来使人舒服：

下面来详细说说上述图的效果如何做出来的：首先将整个图可以看成是一个section标签，然后在进行嵌套div的盒子标前签。

这个网页页面一共用到了以下类容首先是设置了一一种给新的字体（One Web, Any Device）属性如下：

List item

@font-face是CSS3的新特性，用于定义服务器字体。通过@font-face规则，开发者便可以使用用户计算机未安装的字体.

@font-face {font-family: <YourWebFontName>;src: <source> [<format>][,<source> [<format>]]*;[font-weight: <weight>];[font-style: <style>];}

List item
设置了字的投影属性为text-shadow:

选择器{text-shadow:h-shadow v-shadow  blur  color;}

List item
web字体图标：font-awesome一个开源免费的图标工具，当前的版本是4.5.0。
首先去“https://github.com/FortAwesome/Font-Awesome”地址进行下载，下载完毕后解压目录如下图所示。

现在进行制作页面：
最上面两个标题分别使用和,<h1><h2>标签，
div.description中描述信息使用<p>标签来完成，
字体图标使用<span>标签引用对应的class值来完成。
为<section>标签设置蓝色的背景图。
根据需求用

标签和CSS样式来控制文字的排列。
在 <h5>标签中应用了名称为“ITCEDSCR.ttf”的字体。
<h1>和 <h2>标签中的文字分别添加了黑色阴影。

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
兼容性良好，支持 IE8+，及所有现代浏览器。
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。
使用步骤如下：

第一步：引入项目下面生成的 fontclass 代码：<link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：<span class="iconfont icon-xxx"></span>

下面就是代码部分

首先是HTML代码：


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="iconfont.css"><link rel="stylesheet" href="sty.css"><title>图文推广</title></head>
<body><section><div><h1>One Web ,Any Device</h1><h2>万物互联，极致体验</h2></div><div><p>【HTML5】全面兼容移动设备</p><p>颠覆原生英勇 指日可待，传智播客重新定义前端开</p></div><div class="one"><div class="two"><span class=" iconfont icon-pingguo"></span><h5>原生移动APP开发</h5></div><div class="two"><span class="iconfont icon-weixin"></span><h5>微信公众台开发</h5></div><div class="two"><span class="iconfont icon-zhuomian"></span><h5>网站开发</h5></div><div class="two"><span class="iconfont icon-zhuomianbanben"></span><h5>桌面应用开发</h5></div></div></section>
</body>
</html>

下面是css代码：

.iconfont {font-family: "iconfont" ;font-size: 50px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}@font-face {font-family: my1;src: url('ITCEDSCR.TTF') ;
}
div h1{font-family: my1;font-size: 60px;text-shadow:2px 2px #222222;
}
div h2{text-shadow: 2px 2px #222222;
}
section{text-align: center;        }
.one{margin:40px;display: flex;justify-content: space-between;
}
.two{flex-direction: row;}
body{background-image: url("../../images/背景.jpg");}
div p{font-size: 20px;
}

上面式样中用到了一张小的背景图片：

以上就可以达到上图的效果

项目2-2软文推广页面相关推荐

【项目2-2】软文推广页面
前导知识点 1 字体属性合写选择器:{font:font-style || font-weight || font-size || line-height || font-family}; text ...
10.21软文推广页面
10.21软文推广页面考察内容: 1.自定义font 2.i标签的使用以及一些font图标的使用 http://sl31.gitee.io/sl_zuoyeku/fontandi/index.htm ...
网络营销推广实战宝典 2.3 软文推广
2.3.1 什么是软文推广顾名思义,软文是相对于硬性广告而言,由企业的市场策划人员或广告公司的文案人员来负责撰写的"文字广告".与硬广告相比,软文之所以叫做软文,精妙之处就在 ...
软文推广要注意这些效果会更好
软文推广比传统推广更加容易让大众接受,因为其"含蓄"的软文营销植入广告营销被作为整合营销传播的一个重要支点.软文推广也有自己的特点和禁区,不是随随便便就能拿捏准确,只有明白了软文营 ...
中小企业软文推广发布的小技巧
新闻稿发布之后,软文是否被收录.有无上最新相关.软文的点击量是多少,这些都是验证软文营销是否有效的直接标准.实际上,软文营销有无效果都是以软文的收录为前提,软文有收录才有机会上最新相关,继而企业相关信 ...
软文推广中如何选定关键词？
网络推广方式众多,但多数商户更青睐花费少,时效强,转换率高的软文推广.写软文,做推广,最重要的莫过于选对关键词! 一篇好的软文,选对了关键词,尤如找对了文章立意,而一篇好的文章,犹如一瓶陈年老酒,在网 ...
ajax .done 应该怎么写_软文推广的文章应该怎么写好呢
要做好软文的推广,首先需要知道什么是软文的推广.软文推广是另一种完全不同于硬广告的推广方式,其特点是"软".不像硬广告的方式,一上来就直接推广,很容易让观众反感.软文的推广,就是给 ...
怎么做圆一圈圈扩散效果_软文推广怎么样做才有效果？
网络营销的发展已经趋于成熟,口碑时代全面来临.无论是新品牌还是有一定知名度的老品牌,在网络上的口碑和舆情非常重要,而在网络推广的多种方式当中,软文营销是最经济也是最有效果的推广方式之一. 利用软文营销 ...
怎么做新闻软文推广？故事性新闻稿写作技巧_云媒易
很多企业在宣传推广的过程中都会使用两种推广方式,软文推广和新闻稿宣传.其实,新闻软文可以算作是软文推广的一种,但是软文的故事性更强,可信度也一般.而新闻软文的可信度更高,故事性却不强.这两种似乎对立的 ...