前端基础篇3--css高级技巧

作者:神秘网友 发布时间:2021-10-13 07:23:59

前端基础篇3--css高级技巧

一.精灵图

1.为什么需要精灵图

减少服务器接收和发送请求的次数,提高页面的加载速度

2.精灵图(sprites)的使用
  1. 原理核心:background-position
    style
        span {
            display: inline-block;
            background: url(images/abcd.jpg) no-repeat;
        }
        .p {
            width: 100px;
            height: 112px;
            /* background-color: pink; */
           background-position:  -493px -276px;
        }
        .i {
            width: 60px;
            height: 108px;
            /* background-color: pink; */
            background-position: -327px -142px;
        }
        .n {
            width: 108px;
            height: 109px;
            /* background-color: pink; */
            background-position: -215px -141px;
        }
        .k {
            width: 105px;
            height: 114px;
            /* background-color: pink; */
           background-position: -495px -142px;
        }
    /style
/head
body
    span class="p"p/span
    span class="i"i/span
    span class="n"n/span
    span class="k"k/span
/body

二.字体图标

1.优点(了解)

轻量级;
灵活性;
兼容性

2.字体图标的下载
  1. icomoon 字库
  2. 阿里 iconfont 字库
3.适用场景
  1. 如果遇到一些结构和样式比较简单的小图标,就用字体图标。
  2. 如果遇到一些结构和样式复杂一点的小图片,就用精灵图。
4.CSS 三角

做法:宽高为0,用border的各个方向去实现

    style
        .box1 {
            width: 0;
            height: 0;
            /* border: 10px solid pink; */
            border-top: 10px solid pink;
            border-right: 10px solid red;
            border-bottom: 10px solid blue;
            border-left: 10px solid green;
        }
        .box2 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: pink;
            margin: 100px auto;
        }
        .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;
        }
        .jd span {
            position: absolute;
            right: 15px;
            top: -10px;
            width: 0;
            height: 0;
            /* 为了照顾兼容性 */
            line-height: 0;  
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: pink;
        }
    /style
/head
body
    div class="box1"/div
    div class="box2"/div
    div class="jd"
        span/span
    /div
/body

三.CSS 用户界面样式

1.鼠标样式

li {cursor: pointer; }

2.取消表单轮廓和防止拖拽文本域

input {outline: none; }
textarea{ resize: none;}
文本域标签写到一行

四.vertical-align 属性应用

1.图片文字垂直居中对齐

vertical-align : middle

2.图片底部空隙
  1. 给图片添加 vertical-align:middle | top| bottom 等。
  2. 把图片转换为块级元素 display: block;

五.溢出的文字省略号显示

1.单行
white-space: nowrap; ( 默认 normal 自动换行)
  overflow: hidden;
   text-overflow: ellipsis;
2.多行
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

六.常见布局技巧

1.margin负值运用

不用担心同时走的问题
鼠标移动上去显示边框的效果

2.文字围绕浮动元素
3.CSS 三角巧妙应用

直角三角形和梯形

  style
         .box1 {
            width: 0;
            height: 0;
            /* 把上边框宽度调大 */
            /* border-top: 100px solid transparent;
            border-right: 50px solid skyblue; */
            /* 左边和下边的边框宽度设置为0 */
            /* border-bottom: 0 solid blue;
            border-left: 0 solid green; */
           /* 1.只保留右边的边框有颜色 */
           border-color: transparent red transparent transparent;
            /* 2. 样式都是solid */
            border-style: solid;
            /* 3. 上边框宽度要大, 右边框 宽度稍小, 其余的边框该为 0 */
            border-width: 100px 50px 0 0 ;

        }
        .price {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color:red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;

        }
        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }
        .origin {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    /style
/head
body
        div class="box1"/div
        div class="price"
            span class="miaosha"
                ¥1650
                i/i
            /span
            span class="origin"¥5650/span
        /div
/body
4.CSS初始化:重设浏览器的样式
/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候,鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

本文章教程介绍完毕,更多请访问跳墙网其他文章教程!

前端基础篇3--css高级技巧 相关文章

  1. 【web前端开发 | CSS】CSS高级技巧

    【web前端开发 | CSS】CSS高级技巧 文章目录 一:精灵图(sprites) 1:基本概念 2:案例 二:字体图标(iconfont) 1:基本概念(和精灵图区别) 2:字体网站 2.1 第一种 lcoMoon App 2.1.1:案例 2.2:第二种 iconfont-阿里巴巴矢量图标库 三:...

  2. 前端学习路线图与全套视频(基础篇+进阶篇+高级篇)

    前端学习路线图与全套视频(基础篇+进阶篇+高级篇) 面对这么多的知识点,有的盆友就麻爪了…… 我是谁? 我该从哪里开始看? 我该怎么看? 我该看多少? 这,是一个问题。 我们贴心的做了一个学习线路图: 然并卵,很...

  3. 前端学习路线图与全套视频(基础篇+进阶篇+高级篇)

    面对这么多的知识点,有的盆友就麻爪了 我是谁? 我该从哪里开始看? 我该怎么看? 我该看多少? 这,是一个问题。 我们贴心的做了一个学习线路图: 然并卵,很多人还是一头雾水 我们先对每阶段课程做个简单介绍: PC端...

  4. 前端-常用CSS基础篇

    CSS 一。简介 CSS是指层叠样式表( C ascading S tyle S heets),样式定义如何显示HTML元素,样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。 CSS 指层叠样式表 ( C ascading S tyle S heets)...

  5. 《Web前端设计与开发》实验二:CSS基础实验3

    《Web前端设计与开发》实验二:CSS基础实验3 3.浮动是布局中经常采用的手段,但是浮动带来的高度塌陷却为布局带来麻烦,请为下面的布局清除浮动(2种方式以上) headtitle清除浮动/titlestyle type=text/css.papa{background: lightblue;}.child...

  6. (CSS学习记录):CSS高级技巧

    (CSS学习记录):CSS高级技巧 写在前面:参考哔哩哔哩黑马程序员pink老师教程 地址:https://www.bilibili.com/video/BV14J4114768?t=328p=26 目录 CSS高级技巧 元素的显示与隐藏 display 显示(重点) visibility 可见性 (了解) overflow 溢出(重点) 显...

  7. css高级技巧

    css高级技巧 [var1] 目的 让一个元素在页面中消失或者显示出来 场景 类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现! 1.1 display 显示(重点) display 设置或检索对象是否及如何显示。 display: none 隐...

  8. css高级技巧

    一 元素的显示与隐藏 1)display实现 display:none; //隐藏元素 display:block; //显示元素 display:block; 不光有转换块元素的功能,还有显示的功能 特点:隐藏元素 不保留位置 2)visibility实现 visibility [?v?z??b?l?ti] 可见性visible [?v?z?bl] adj.

  9. CSS-04高级技巧

    CSS-04高级技巧 元素的显示和隐藏 1、display(显示) display:none; 隐藏元素 不保留位置 display:block(有显示和转换成块元素的意思 2、visibility(可见性) visivility:hidden; 隐藏元素 保留位置 visibility:visivible; 3、overflow溢出(重点 ) 检索...

  10. CSS高级技巧

    CSS高级技巧 CSS用户界面样式 所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了。 防止表单域拖拽 设置或检索在...

  11. CSS高级技巧

    CSS高级技巧 CSS高级技巧 注释快捷键ctrl+/ 1.精灵图: 为了有效减少服务器接收和发送请求的次数,提高页面 的加载速度。 使用精灵图核心: 主要针对背景图片使用,把多个小背景图片整合到一张大图片中。 这个大图片也叫sprites...

  12. CSS高级技巧滑动门

    CSS高级技巧滑动门 滑动门出现的背景 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS...

  13. CSS高级技巧之精灵图,字体图标(CSS Sprites, iconfont)

    CSS高级技巧之精灵图,字体图标(CSS Sprites, iconfont) 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速...

  14. CSS高级技巧图片、表单和文字对齐

    CSS高级技巧图片、表单和文字对齐 有宽度的块级元素居中对齐,是margin: 0 auto; 让文字居中对齐,是 text-align: center; 没有垂直居中的属性。 vertical-align 垂直对齐,它只针对于 行内元素 或者 行内块元素 , vertical-align : baseline...

  15. 前端入门必要了解的HTML+CSS的技巧有哪些

    前端入门,必要了解的HTML+CSS的技巧有哪些 HTML+CSS的技巧有哪些?怎么学好Web前端开发?经过Web前端学习的一个过程,每个人都会对前端的认识逐渐由浅入深,由一开始僵硬地使用标签和标签属性进行简单网页布局,到最后能够...

  16. 前端基础css2

    前端基

  17. 【黑马前端CSS基础】背景

    【黑马前端CSS基

  18. 前端基础简单css样式

    前端基

  19. Django基础(9): 表单Forms的高级使用技巧

    自定义字段属性和错误信息 对于每个字段你可以设置其是否为必需,最大长度和最小长度。你还可以针对每个属性自定义错误信息,见下面代码。 from django import formsclass LoginForm(forms.Form): username = forms.CharField( required=True, max_length...

  20. 【前端学习CSS基础】5种复合选择器

    【前端学习CSS基

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2021, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词