CSS学习笔记11——用户界面(精灵图,字体图标,鼠标样式,溢出文本省略号,文本域等)

基于51单片机的电压表【0-20V,ADC0832,4051,自动量程】(仿真) 自动换挡式数字电压表就是一个基于单片机的能自动切换量程的数字电压表,其作用是在使用低位的AD转换实现高精度电压测量,可以测量0~20V的电压,并且具有0~0.2V(待测电玉低于0.2V时),0~2V(待测电压低于2V时)和0~20V三个量程自动匹配测量,当待测电压值发生变化时,电压表可以根据输入电压情况自动选择合适的量程进行测量,并且把测量结果显示出来。(2)实现电压表精度测试,最高精度要求0.01V;(1)实现0~20V分3档式电压表; 阅读详情

用户界面样式

精灵图(sprites)

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

原理:把多个小图汇成一张大图,调整背景大图位置来在相应位置显示图标

  • 用background-position调整背景大图的位置

字体图标(iconfont)

优点:

  1. 轻量级
  2. 灵活性
  3. 兼容性

简单的小图标

  • 下载网站

icomoon.io

外网

www.iconfont.cn

国内

字体图标的引入

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?p4ssmb');
  src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
    url('fonts/icomoon.woff?p4ssmb') format('woff'),
    url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

字体图标的追加

网站里点击import icons按钮重新上传selection.json文件,选中新的图标,重新下载压缩包

鼠标样式cursor

li {cursor:pointer;}
属性值描述
default小白 默认
pointer小手
move移动
text文本
not-allowed禁止

轮廓线 outline

input {outline:none;}
<!--或outline:0;-->

去除文本框默认的蓝色轮廓线

防止拖拽文本域 resize

textarea { resize:none;}

文本域右下角不可以被拖拽


vertical-align属性应用

经常用于设置图片或者表单(行内块元素)和文字垂直对齐

vertical-align: baseline | top | middle | bottom
值描述
baseline默认。元素放在父元素的基线上
top把元素顶端与行中最高元素顶端对齐
middle把此元素放在父元素中部
bottom把元素顶端与行中最低的元素的顶端对齐

解决图片底部默认空白缝隙问题

图片作为行内块元素,默认会和文字的基线对齐,导致底侧有空白缝隙

  • 解决方式:
  1. 给图片添加vertical-align:middle | top | bottom 等 (提倡)
  2. 把图片转化为块级元素:display:block; (块级元素独占一行)

溢出的文字省略号显示

单行文本溢出显示省略号

/* 先强制一行内显示文本*/
white-space:nowrap;   /*nowrap:不换行,默认normal自动换行*/
/* 隐藏超出的部分*/
overflow:hidden;
/* 文字用省略号替代超出部分*/
text-overflow:ellipsis;

多行文本溢出显示省略号

有较大兼容性问题,适合webkit浏览器或者移动端(移动端大部分是webkit内核)

overflow:hidden;
text-overflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display:-webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp:2;
/*设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient:vertical;
Python爬虫实战:利用最新技术高效爬取百度贴吧帖子内容 本文将详细介绍如何使用Python最新技术栈构建一个高效的百度贴吧爬虫,包括requests-html异步请求、BeautifulSoup4解析、数据存储到MongoDB以及应对反爬机制等完整解决方案。文章包含5000余字详细教程和完整代码实现。网络爬虫(Web Crawler)是一种自动获取网页内容的程序,广泛应用于搜索引擎、数据分析和内容聚合等领域。Python凭借其丰富的库生态系统成为爬虫开发的首选语言。贴吧作为中文互联网最大的兴趣社区,包含大量有价值的UGC内容。动态加载内容处理登录状态维持。 阅读详情

相关推荐

支持找回微信删除好友!一款人人可用的全能微信数据分析工具

找回删除好友、查看删除记录、恢复聊天信息....

1726

CSS基础知识day6 精灵图、字体图标、css三角形、文字溢出处理、css初始化代码、常见的布局技巧、鼠标样式、防止拖拽文本域、轮廓线、vertical-align属性(行内块元素)

所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验。 更改用户的鼠标样式 表单轮廓 防止表单域拖拽。

2301_77358195的博客 1198

Chapter 5 Gate Drivers and Level Shifters

Gate driver如下图所示, 包括功率管(带保护), Gate driver, Level shifter, Gate Supply 和Dead-time control.

2304_76736886的博客 2241

06CSS笔记——精灵图、字体图标、用户界面样式、溢出文字、常见布局、初始化

精灵图主要针对于小的背景图片使用。主要借助于背景位置来实现—。一般情况下精灵图都是负值。(千万注意网页中的坐标: x轴右边走是正值,左边走是负值, y轴同理。

昭与云的博客 1041

Autosar结合simulink的汽车应用层软件开发实例

本文基于汽车应用开发案例,并结合Autosar相关知识,生成具有Autosar标准的汽车应用层开发代码,以供学习和参考。以上就是本篇内容,主要是利用Simulink创建Autosar接口并进行端口映射的方法。

m0_64899535的博客 2153

k8s 100个高频面试题

以下是 100 个 Kubernetes(k8s)高频面试题及其答案,涵盖了 Kubernetes 的核心概念、架构、组件、工作原理以及实际应用。答案:Master 节点组件:API Server:提供 RESTful API 接口,用于与集群交互。etcd:分布式键值存储,用于存储集群的配置数据和状态信息。Controller Manager:运行各种控制器进程,负责维护集群的状态。Scheduler:负责将 Pod 调度到合适的节点上运行。Worker 节点组件:Kubelet:运行在每个节点上的代理,

wankll的专栏 2780

CSS精灵图、字体图标、鼠标样式、溢出省略号、用户界面技巧

转载自:https://jerry-z-j-r.github.io/2021/02/11/HTML-CSS-Cheat-Sheet-11/ (来自 JERRY) CSS精灵图、字体图标、鼠标样式、溢出省略号、用户界面技巧一、精灵图1.1 为什么需要精灵图?1.2 精灵图(sprites)的使用二、字体图标2.1 字体图标的产生2.2 字体图标的优点2.3 字体图标的下载2.4 字体图标的引入2.5 字体图标的追加2.6 字体图标加载的原理三、CSS三角四、CSS用户界面样式4.1 什么是界面样式4.2 鼠

qq_45064040的博客 571

头歌操作系统2.3系统调用命令ls执行的系统调用

设置版本0内核为分析对象。然后一直c直到虚拟机出现。然后一直c就是答案了。

m0_74128952的博客 1万+

精灵图、字体图标、CSS三角、常见的CSS用户界面样式、vertical-align属性应用、溢出文字省略号显示、常见的布局技巧

1.原因:为了有效地减少服务器接收和发送请求地次数,提高页面地加载速度,出现了CSS精灵技术 2.核心:(1)主要针对小的背景图片使用(2)主要借助于背景位置来实现background-position(3)一般情况下精灵图都是复制(往上往左移动负值)1.展现的是图标,但本质还是字体 2.优点:轻量级、灵活性、兼容性 3.(1)如果遇到一些结构和样式比较简单的小图标,就用字体图标 (2)如果遇到一些结构和样式复杂一点的小图片,就用精灵图 4.个人推荐阿里iconfont字库 ......

weixin_52583990的博客 693

使用Python爬虫抓取旅游景点评价数据并进行热度可视化

景点热度通常由景点的评分、评论数以及游客的热情度来决定。高热度的景点通常意味着更高的游客评分和更多的游客评论。热度不仅反映了景点的受欢迎程度,还可以揭示某些景点的潜力和存在的问题。评分:游客对景点的综合评分,通常是0到5分。评论数:景点的评论数量,反映了游客对景点的关注程度。热度变化:在一定时间内,景点的评价和评论数量变化,能够反映景点的热度波动。通过使用Python爬虫技术抓取旅游景点的评价和评论数据,我们能够深入分析景点的热度,并通过数据可视化工具将这些信息展示给用户。

2201_76125261的博客 1282

【图像拼接(Image Stitching)】关于【图像拼接论文精读】专栏的相关说明,包含专栏使用方法、阅读顺序、创新思路、文章汇总、源码汇总、数据集汇总等。总之,【图像拼接论文相关】看这一篇就够了

为什么会有这篇文章?因为专栏简介里写不下太多东西,只能通过这篇文章和大家交流,算是一个专栏阅读指南吧。说点心里话本来吧,我只想用优快云来记录自己学习【图像拼接】领域论文的过程,对每篇文章有个细致的理解,方便自己反复查阅。设置为付费也是因为涉及论文和本人其他项目需要,防止查重和其他问题,所以价格最开始设置的是专栏付费价格里最高的。起初,确实没有人看,一切也都平淡地度过着。

主要更新底层视觉(去噪、超分等)相关的科研内容,形式为【论文精读】+【论文复现】 4万+

11.【CSS精灵图background-position、字体图标@font-face{}、画小三角形、cursor、outline、resize、vertical-align、溢出省略号】

文章目录【CSS精灵图、字体图标、三角、鼠标样式、用户界面样式、溢出省略号】前端小抄(11)一、精灵图1.1 为什么需要精灵图?1.2 精灵图(sprites)的使用1.3 案例:拼单词二、字体图标2.1 字体图标的产生2.2 字体图标的优点2.3 字体图标的下载2.4 字体图标的引入2.5 字体图标的追加2.6 字体图标加载的原理三、CSS三角四、CSS用户界面样式4.1 什么是界面样式4.2 鼠标样式 cursor4.3 轮廓线 outline4.4 防止拖拽文本域 resize五、vertical-a

你说的白是什么白_ 502

【异常】Cursor报错We‘re having trouble connecting to the model provider. This might be temporary

在使用Cursor编辑器进行AI交互操作时,界面弹出如下报错提示,导致无法正常调用模型服务,影响使用流程:We’re having trouble connecting to the model provider. This might be temporary - please try again in a moment. 该报错核心含义为Cursor编辑器无法正常连接至背后的AI模型服务提供商(如OpenAI、Anthropic等),属于连接类异常,并非编辑器本身运行故障。经排查,该报错不具备破坏性,仅

奶爸的编程之路,也就一周冷个三天 1693

CSS 常用效果样式以及布局技巧

CSS 高级技巧1. 圆角边框2. 盒子阴影3. 文字阴影4. 元素的显示与隐藏4.1 display 属性实现元素的显示与隐藏4.2 visibility 属性实现元素的显示与隐藏4.2 overflow 属性实现元素的显示与隐藏5. 精灵图5.1 为什么需要精灵技术5.2 精灵技术讲解5.3 精灵技术使用的核心总结25.4 制作精灵图6. 字体图标6.1 字体图标的产生6.2 字体图标的优点6.3 使用字体图标 - 下载6.4 字体图标 - 引入6.5 字体图标 - 追加7. CSS 三角形7.1 CS

来杯卡布奇诺的博客 3650

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化

文章目录1. 精灵图1.1 为什么需要精灵图1.2 精灵图(sprites)的使用1.3 案例:拼出自己的名字 1. 精灵图 1.1 为什么需要精灵图 精灵图的由来 一个网站的页面需要大量的小图片或者小图标,但是大量的图片如果放在服务器上,每次当打开网站并且向服务器发送请求,那么请求的次数将大大增加 因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites、CSS 雪碧) 核心原理 将众多小图标合并到同一张图上,用来减轻 htt

imByte的博客 807

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

前端与移动开发-----CSS(精灵图+字体图标+CSS 三角+溢出的文字省略号显示)

CSS 1. 精灵图(重点) 使用精灵图(目的): 为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites、CSS 雪碧)。 核心原理: 将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。 精灵图(sprites)的使用 使用精灵图核心: 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。 这个大图片也称为 sprites 精灵图 或者 雪碧图 移动背景图片位置, 此时可以使用 backgr

東三城的博客 800

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

⑦CSS精灵图&字体图标&CSS三角&CSS用户界面样式&vertical-align属性应用&溢出文字省略号显示&常见布局技巧&CSS初始化

1.精灵图 1.2精灵图的使用 使用精灵图核心总结: 1.精灵图主要针对于小的背景图片使用。 2.主要借助于背景位置来实现–background-position。 3. -般情况下精灵图都是负值。( 千万注意网页中的坐标: x轴右边走是正值,左边走是负值,y 轴同理。) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

LINZHONG21的博客 412

【CSS】CSS入门笔记第三弹~

CSS入门教程,定位详细版

森姐姐的博客 1000

css高级技巧--前端如此简单

文章目录1.1精灵图1.2 字体图标1.3CSS 三角1.4 CSS 用户界面样式鼠标样式 cursor轮廓线 outline防止拖拽文本域 resize1.5 vertical-align 属性1.6溢出的文字省略号显示1.7 常见布局技巧1. margin负值运用2. 文字围绕浮动元素3. 行内块巧妙运用4. CSS 三角强化5.网页初始化代码 ## 1.CSS 高级技巧 1.1精灵图 CSS 精灵技术(也称 CSS Sprites、CSS 雪碧) 原理:将网页中的一些小背景图像整合到一张大图中

weixin_45447134的博客 538

CSS学习04

网页中常见一些三角形,使用 CSS 直接画出来就可以,不必做成图片或者字体图标。height : 0;我们用css 边框可以模拟三角效果宽度高度为0我们4个边框都要写, 只保留需要的边框颜色,其余的不能省略,都改为 transparent 透明就好了为了照顾兼容性 低版本的浏览器,加上 font-size: 0;

醉意在诗里的博客 286

vito的Web前端学习 Day8(CSS)

学习精灵图、字体图标、精灵图和字体图标对比、CSS三角制作、鼠标样式、轮廓线 outline、防止拖拽文本域、vertical-align实现行内块和文字垂直居中对齐、图片低侧空白缝隙解决方案、溢出的文字省略号显示、marign负值巧妙运用、文字围绕浮动元素巧妙运用、行内块的巧妙运用、CSS三角巧妙运用、CSS初始化

vitocool的博客 631

【CSS】易忘知识点-课程笔记

一.精灵图(sprites)的使用 二.字体图标 字体图标的引入 三.CSS 三角制作 四.溢出的文字省略号显示单行文本溢出显示省略号多行文本溢出显示省略号(了解) 五.其他 鼠标样式 cursor 轮廊线 outline 防止拖拽文本域resize vertical-align 居性应用 解决图片底部默认空白缝隙问题 六.案例 1.京东价格条显示 2.淘宝轮播图 3.页码显示

650

CSS基础(三)

11、界面样式 常见的界面样式: 更改用户的鼠标样式 表单轮廓 防止表单域的拖拽 解决图片或表单问题 溢出操作 11.1 鼠标样式 cursor li { /* 小手样式 */ cursor: pointer; } 设置在对象上移动时的鼠标样式: default:小白(默认) pointer:小手 ``move:`:移动 text:文本 not-allowed:禁止 11.2 轮廓线 outline 给表单添加 outline:0 或 outline:onne 样式后,就可以去掉默认的蓝

Gcc_Notepad的博客 498

前端基础知识第六章---CSS

前言 ❤️ 遇事不决,可问春风,春风不语,既随本心 ❤️

battledao的博客 1301

CSS学习记录6

1 精灵图1.1 精灵图的使用移动背景图片位置,使用background-position注意:一般情况都是往上往左移动,所以数值是负值。

m0_46973957的博客 402

前端CSS3常用基础知识总结

CSS是(CascadingStyleSheets)的简称.CSS是也是一种标记语言,其主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式等。选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式属性和属性值以“键值对”的形式出现属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等属性和属性值之间用英文“”分开多个“键值对”之间用英文“;”进行区分上方。...............

不想学习的打工人的博客 4713
上一篇: CSS学习笔记10——元素的显示与隐藏&&布局技巧之margin,三角形
下一篇: HTML学习笔记4——HTML5新特性(多媒体,表单属性)
green_pine_
博客等级 码龄2年 125粉丝 24原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值