WEb开发之H5+CSS篇

最新推荐文章于 2023-07-20 22:27:58 发布

全栈工程师MrL

最新推荐文章于 2023-07-20 22:27:58 发布

阅读量247

点赞数 1

分类专栏：橘子超酸辣橘子太酸辣笔记文章标签： html html5 css css3 前端

本文链接：https://blog.csdn.net/czzyw/article/details/116226722

版权

笔记同时被 3 个专栏收录

150 篇文章 1 订阅

订阅专栏

橘子太酸辣

118 篇文章 0 订阅

订阅专栏

橘子超酸辣

48 篇文章 0 订阅

订阅专栏

WEb开发之H5+CSS篇

精灵图（CSS Sprites CSS雪碧）

主要针对背景图片使用，把多个小背景图片整合到一张大图片中。
主要借助于背景位置来实现-background-position
一般情况下精灵图都是负值。（网页坐标：X轴向右移动是正值，向左移动是负值。y轴同理）

字体图标

主要用于显示网页中通用，常用的一些小图标。

icomoon

阿里巴巴矢量图标库

复制style.css中第一个代码。

@font-face {

 font-family: 'icomoon';

 src: url('fonts/icomoon.eot?4rafs4');

 src: url('fonts/icomoon.eot?4rafs4#iefix') format('embedded-opentype'),

  url('fonts/icomoon.ttf?4rafs4') format('truetype'),

  url('fonts/icomoon.woff?4rafs4') format('woff'),

  url('fonts/icomoon.svg?4rafs4#icomoon') format('svg');

 font-weight: normal;

 font-style: normal;

 font-display: block;

}

将font文件夹拖出来放到项目目录下。

字体图标的追加及加载原理。

CSS三角

CSS用户界面

界面样式，就是更改一些用户操作样式，以便一稿更好的用户体验。

更改用户的鼠标样式。

default（默认）

cursor pointer（小手） text（文本）

move（移动） not-allowed（禁止）
表单轮廓。

outline none（去掉默认边框）
防止表单域拖拽。

resize none（文本域右下角是不可以拖拽的）

**vertical - align属性使用：**用于设置图片或者表单（行内块元素）和文字垂直对齐。

baseline 默认，元素放置在父元素的基线上。

top 把元素的顶端与行中最高元素的顶端对齐。

middle 把此元素放置在父元素的中部。

bottom 把元素的顶端与行中最低元素的顶端对齐。

注意：解决图片底部默认空白缝隙。

原因：行内块元素会和文字的基线对齐。

1.给图片添加vertical-align。

2.将图片转化为块级元素，display：block

溢出的文字省略号显示

单行文本溢出显示省略号。

先强制一行内显示文本

white-space : nowrap/normal

超出的部分隐藏

overflow : hidden

文字用省略号替代超出的部分

text-overflow: ellipsis(省略号)
多行文本溢出显示省略号，适合于webKit浏览器或移动端。

overflow : hidden

text-overflow: ellipsis(省略号)

弹性伸缩盒子模型显示。

display： -webkit-box

限制在一个块元素显示的文本的行数

-webkit- line-clamp：2（行数）

设置或检索伸缩盒对象的子元素的排列方式

-webkit-box-orient：vertical

常见的布局技巧

margin负值的应用

如果盒子没有定位，则鼠标经过添加相对定位即可。

如果li都有定位，则利用z-index提高层级。

文字围绕浮动元素

行内块的巧妙运用**

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3nWu1Qgx-1619575027388)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201216194937831.png)]

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>

    \* {

      margin: 0;

      padding: 0;

    }

    

    .box {

      text-align: center;

    }

    

    .box a {

      display: inline-block;

      width: 36px;

      height: 36px;

      background-color: #ccc;

      border: 1px solid gray;

      text-align: center;

      line-height: 36px;

      color: salmon;

      text-decoration: none;

      font-size: 14px;

    }

    

    .box .prev,

    .box .next {

      width: 85px;

    }

    

    .box .current,

    .box.elp {

      color: gray;

      border: none;

      background-color: #fff;

    }

    

    .box input {

      height: 36px;

      width: 45px;

      border: 1px solid #ccc;

      outline: none;

    }

    

    .box button {

      width: 60px;

      height: 45px;

      background-color: gray;

      border: 1px solid #ccc;

    }

  </style>

  <title>Document</title>

</head>



<body>

    <div class="box">

        <a href="" class="prev">&lt;&lt;上一页</a>

        <a href="" class="current">2</a>

        <a href="">3</a>

        <a href="">4</a>

        <a href="">5</a>

        <a href="">6</a>

        <a href="" class="elp">...</a>

        <a href="" class="next">&gt;&gt;下一页</a> 到第

    <input type="text"> 页

    <button>确定</button>

  </div>

</body>



</html>

CSS三角强化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ximicsLI-1619575027392)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201216201320195.png)]

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>

    .price {

      width: 160px;

      height: 24px;

      border: 1px solid red;

      margin: 66px auto;

      line-height: 24px;

    }

    

    .left {

      float: left;

      position: relative;

      width: 90px;

      height: 100%;

      background-color: red;

      text-align: center;

      color: white;

      font-weight: 700;

      margin-right: 6px;

    }

    

    .left i {

      position: absolute;

      right: 0;

      top: 0;

      width: 0;

      height: 0;

      border-color: transparent white transparent transparent;

      border-style: solid;

      border-width: 24px 10px 0 0;

    }

    

    .price .right {

      color: grey;

      font-size: 12px;

      text-decoration: line-through;

    }

  </style>

  <title>Document</title>

</head>



<body>



    <div class="price">

    <span class="left">￥1234

      <i></i>

    </span>

    <span class="right">￥3213</span>

  </div>

</body>



</html>