第一阶段——day09

唐山吴彦祖

于 2019-11-20 10:50:29 发布

阅读量126

点赞数

分类专栏：前端开发文章标签：第一阶段——day09

本文链接：https://blog.csdn.net/weixin_45825818/article/details/103158103

版权

前端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

day09

传统布局：盒模型（width,border,padding,margin）

浮动（图文环绕，盒子并排）

定位绝对定位子绝父相（复杂，层级关系）

小米项目

1：前期准备

项目的文件夹

在这里插入图片描述

网页三剑客

网站标题

<title> 小米商城 - Redmi Note 8、小米CC9、小米MIX 3，小米电视官方网站</title>

title : 4-6词前后权重依次减小

关键词

<meta name="keywords" content="小米,小米9,小米cc9,Redmi K20,Redmi Note 8,小米MIX3,小米商城">

描述

<meta name="description" content="小米商城直营小米公司旗下所有产品，包括小米手机系列小米CC9、小米9、小米MIX 3，Redmi 红米系列Redmi K20 Pro、Redmi Note 8，小米电视、红米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持。">

icon

 <!-- 引入外部资源的标签   rel 引入文件的类型-->
 <link rel="shortcut icon" href="./favicon.ico">

代码规范

文件命名规范，图片命名规范，css书写顺序

公共样式

字体图标

https://www.iconfont.cn阿里矢量图标库

在这里插入图片描述

Unicode方式引入

Unicode 是字体在网页端最原始的应用方式，特点是：

兼容性最好，支持 IE6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

Unicode 使用步骤如下：

第一步：拷贝项目下面生成的 `@font-face`

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}

记住改成自己的文件路径!!!

第二步：定义使用 iconfont 的样式

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步：挑选相应图标并获取字体编码，应用于页面

<span class="iconfont">&#x33;</span>

iconfont 全局类必须加

font-class 引用

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

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

使用步骤如下：

第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span>

盒子阴影

box-shadow:  水平阴影尺寸  垂直阴影的尺寸  模糊距离  阴影的尺寸  颜色  内inset/外阴影(outset默认值) ;

文字阴影

text-shadow: 水平阴影尺寸  垂直阴影的尺寸  模糊距离    颜色 ;
  text-shadow: +10/-10px +10/-10px 20px red; 
                0px 0px 3px pink;

+10px +10px 阴影出现在右下侧
-10px -10px 阴影出现左上册

在这里插入图片描述


    <style>
        body {
            background-color: #ccc;
        }
    .box {
        width: 300px;
        height: 400px;
        background-color: #fff;
        margin-left: 100px;
        margin-top: 100px;
        line-height: 400px;
        text-align: center;
        box-shadow: 0px 0px 20px 0px rgba(0,0,0,.5) inset ;
        /* 文字阴影 */
        text-shadow: 10px 10px 20px red;
        font-size: 40px;

       
        
    }
    .box:hover {
       
    }
    .ao,.tu {
        width: 400px;
        height: 200px;
        background-color: #22B368;
        line-height: 200px;
        text-align: center;
        font-size: 100px;
        font-weight: 800;
        color: #22B368;
    } 
    .ao {
        /* 叠加阴影  上左是黑 , 右下是白 */
        text-shadow: -1px -1px 2px #000 , 1px 1px 2px #fff;
    }
    .tu {
         /* 叠加阴影  上左是黑 , 右下是白 */
         text-shadow: -1px -1px 2px #fff , 1px 1px 2px #000;

    }
    
    
    </style>
</head>
<body>
    <div class="box">
        sajdfd
    </div>

    <div class="ao">
       凹陷 

    </div>
    <div class="tu">
      凸起来
    </div>
</body>
</html>

x 2px #000;

}


</style>

sajdfd

<div class="ao">
   凹陷 

</div>
<div class="tu">
  凸起来
</div>

```

唐山吴彦祖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一阶段——day09

day09传统布局：盒模型（width,border,padding,margin）浮动（图文环绕，盒子并排）定位绝对定位子绝父相（复杂，层级关系）小米项目1：前期准备项目的文件夹网页三剑客网站标题<title> 小米商城 - Redmi No...
复制链接

扫一扫