项目2-2软文推广页面

最新推荐文章于 2022-10-25 19:55:00 发布

Mr_jianghanlin

最新推荐文章于 2022-10-25 19:55:00 发布

阅读量4k

点赞数 3

分类专栏：前端文章标签： css css3 html5

本文链接：https://blog.csdn.net/mr_jianghanlin/article/details/104909779

版权

前端专栏收录该内容

23 篇文章 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;
}

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

在这里插入图片描述

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

Mr_jianghanlin

关注

3
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
项目2-2软文推广页面

*## 软文推广页面首先给大家看效果图：背景是我自己随便找了一张背景图黄颜色一种比较亮的图，所以文字应该选取黑色这样看起来使人舒服：下面来详细说说上述图的效果如何做出来的：首先将整个图可以看成是一个section标签，然后在进行嵌套div的盒子标前签。这个网页页面一共用到了以下类容首先是设置了一一种给新的字体（One Web, Any Device）属性如下：List item@f...
复制链接

扫一扫