css高级技巧

最新推荐文章于 2022-04-21 15:55:53 发布
最新推荐文章于 2022-04-21 15:55:53 发布
阅读量118 收藏
点赞数
分类专栏： web前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44324230/article/details/107826531
版权

精灵图的使用在这里插入图片描述

用切片工具选取区域，左下角有区域的长宽和x轴y轴坐标

<style>
        .box1 {
            width: 60px;
            height: 60px;
            margin: 100px auto;
            background: url(images/jingling.png) no-repeat -182px 0;
           
        }
        .box2 {
            width: 30px;
            height: 30px;
            margin: 150px auto;
            background: url(images/jingling.png) no-repeat -152px -106px;
        }
    </style>

。
。
。

字体图标的使用

去/https://icomoon.io/下载字体图标，放到根目录下

 <style>
 @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?mu8g5e');
  src:  url('fonts/icomoon.eot?mu8g5e#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?mu8g5e') format('truetype'),
    url('fonts/icomoon.woff?mu8g5e') format('woff'),
    url('fonts/icomoon.svg?mu8g5e#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
span {
    font-size: 50px;
    color: aqua;
  font-family: 'icomoon';

}
    </style>

<body>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

    
</body>

。
。
。

三角的做法

1.等腰三角形

  <style>
  
.box {
    width: 0;
      height: 0;
      line-height: 0;
      font-size: 0;
      border: 10px solid transparent;
      border-left-color:red ;
      margin: 300px auto;
  }
    </style>

在这里插入图片描述
2.直角三角形

 .box {
    width: 0;
    height: 0;
    border-color: transparent red transparent  transparent;
    border-style: solid;
    border-width: 50px 15px 0 0;
    margin: 100px auto;
  }

在这里插入图片描述

。
。
。

用户界面样式-鼠标样式

 <ul>
        <li style="cursor: default;">默认默认默认默认默认默认</li>
        <li style="cursor: pointer;"> 小手小手小手小手小手小手</li>
        <li style="cursor: move;">移动移动移动移动移动移动移动</li>
        <li style="cursor: text;">文本文本文本文本文本文本文本</li>
        <li style="cursor: not-allowed;">禁止禁止禁止禁止禁止禁止</li>
    </ul>

。
。
。

去掉表单轮廓线和防止拖拽文本域

input { outline:none; }

。
。
。

textarea { resize:none; }
桃心雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS高级技巧
cjhxydream的博客
07-02 1326
使用精灵图核心: 显示效果 当浏览器第一次请求相关的图标时，服务器会将相关的文件一次性发送给浏览器，当再需要其他图标时就能够直接从ttf文件中获取图标，减轻服务器的压力，减少请求次数，缩短用户的等待时间。 5. vertical-align属性应用 下图蓝色标注缝隙所在，图片默认与文字是基线对齐，因此会留有部分区域用于对齐问题下部分区域......
【前端】CSS高级技巧
最新发布
qq_45764950的博客
11-04 463
将下载包里面的style.cc中的下列代码引入。为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS 雪碧）。把压缩包里面的selection.json重新上传，然后选中自己想要新的图标，重新下载压缩包，并替换原来的文件即可。注意网页中的坐标有所不同（x轴右边走是正值，左边走是负值，y轴上边走是负值，下边走是正值）。注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。字体图标iconfont，展示的是图标，本质属于字体。
12个CSS高级技巧汇总
09-24
### CSS高级技巧详解 #### 1. 使用`:not()`在菜单上应用/取消应用边框 在CSS中，`:not()`伪类可以帮助我们选择不属于特定类的所有元素，这对于处理复杂的选择器尤其有用。例如，如果你想为导航菜单中的所有项目除...
CSS高级技巧:滑动门技术
01-19
上一篇CSS教程 文章：CSS高级技巧:图片替换 滑动门(Sliding Doors) 还是决定把滑动门单独提作一种单独的技术. 它是CSS引入的一项用来创造漂亮且实用的界面的新技术, 它使用简单, 我们只需要使用两张单独的背景图片, ...
CSS 高级技巧总结(必看)
09-24
下面小编就为大家带来一篇CSS 高级技巧总结(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
node.js连接数据库写接口
qq_44324230的博客
03-15 2240
//初始化 npm init //安装依赖 npm install body-parser express mysql cors -S 引入路由，把页面拆分开： connect.js const mysql = require('mysql') const express = require('express') const app = express() const router = express.Router(); // 解析参数 const bodyParser = require('body
解决Chrome打印宋体不支持加粗效果
qq_44324230的博客
04-14 1987
解决Chrome打印宋体不支持加粗效果 在emr病历打印中（病历页面设置默认字体为宋体），使用window.print()进行前端网页打印，会发现Chrome的网页打印预览中是不支持字体加粗效果的，虽然页面效果上用font-weight是有效果的，但是就是那么神奇，打印出来就不行（具体什么原因还不知道）。 两个比较可靠的解决方案： ① 换用其他宋体字体（如华文宋体） * { font-family: STSong; } ② 就是利用文字阴影。 strong{ text-shadow:0
使用node.js完成一个完整的项目（服务器+连接数据库增删改查）（一）
qq_44324230的博客
09-28 1258
效果图 http.js // 服务器启动模块 var http = require('http'); var luyou = require('./luyou'); // 创建服务 var server = http.createServer(); // 调用luyou模块中的binds方法,设置监听事件 luyou.binds(server); // 设置服务器的监听端口 server.listen(8080,function(){ console.log('请访问 127.0.0.1:80
ccss案例：学成在线网站，浮动和定位的运用
qq_44324230的博客
08-03 660
效果图 。 。 。 。 css * { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; } .w { width: 1200px; margin: auto; } body { background-color: #f3f5f7; } .clearfix:after { content: ""; display: block;
JavaScript 入门小案例
qq_44324230的博客
09-11 556
// var year = prompt('请输入您的出生年份'); // var age = 2020-year; // var str = '您今年已经'+ age +'岁了' // alert(str) ; // var a = prompt('请输入第一个值') // var b = prompt('请输入第二个值') // var sum = parseFloat...
使用node.js完成一个完整的项目（服务器+连接数据库增删改查）（二）【使用express框架优化代码，使用formidable，cookie-session第三方框架实现图片文件上传和登录】
qq_44324230的博客
09-30 281
html文件需要放到views文件夹下 img文件，css文件需要放到publi文件夹下 http.js const express = require('express'); const yewu = require('./yewu'); const app = express(); var cs = require('cookie-session'); // 使用s-c模块 // 使用第三方中间件 app.use(cs({ // cookie 的名字键 name:'sessionId',
css网页通用布局1（直接调用）
qq_44324230的博客
07-27 255
** css网页通用布局1 ** 效果图 。 。 。 。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> * { box-sizing: border-box; } body { font-family: Arial; padding: 10px; backgroun
css遮罩层的使用
qq_44324230的博客
08-04 215
效果图 .mask { /* 隐藏遮罩层 */ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4) url(images/arr.png) no-
react getSnapshotBeforeUpdate 的应用（新闻滚动）
qq_44324230的博客
04-21 172
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</ti
css网页通用布局2（直接调用）
qq_44324230的博客
07-27 132
css网页通用布局2 效果图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>布局2 </title> <style> *{
css清除浮动
qq_44324230的博客
07-27 85
css清除浮动 1.父级after伪元素法 <style> .clearfix:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{ /* IE6、7专有 */ *zoom: 1;
CSS高级技巧：精灵图与字体图标实践指南
在CSS高级技巧的学习中，今天我们将深入探讨两个关键主题：精灵图的运用和字体图标技术。首先，让我们来了解精灵图（Sprite）的概念及其在优化网页性能中的作用。 精灵图是一种网页设计技术，通过将多个小图片合并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值