css学习
关注
分享
扫一扫
像焰火一样。
步履不停
展开
-
css背景线性渐变
background:-webkit-linear-gradient(起始方向,颜色1,颜色2,...);1.背景渐变必须添加浏览器私有前缀 ,如-webkit-（Safari 和 Chrome）、-moz- （Firefox）、 -o-（Opera）、-ms-（IE）。2.起始方向可以是方位名词或者是度数，默认为top。gradient [ˈɡreɪdiənt] n. (尤指公路或铁路的)坡度，斜率，倾斜度; (温度、压力等的)变化率，梯度变化曲线; ...原创 2021-11-11 01:43:44 · 371 阅读 · 0 评论 -
盒子水平垂直居中
1.定位2. top: 50%; left:50%; transform: translate(-50%,-50%);3.行内块元素使用translate无效原创 2021-10-17 10:28:44 · 72 阅读 · 0 评论 -
网站TDK的seo（搜索引擎）优化
网页必须有三大标签来符合seo优化1.title：是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。做法：网站名（产品名）-网站介绍（尽量不超30个汉字），例如：<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title><title>小米商城 - 小米11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站</title>2.description：简要说明网站的业务和主题做原创 2021-09-20 17:00:57 · 314 阅读 · 0 评论 -
如何添加网站图标favicon
1.制作图标（1）把图标切成png（2）把png图片转换成ico图标，转换网站：https://www.bitbug.net/2.将图标放到网站根目录下3.在html中引入图标<head>...<link rel="shortcut icon" href="favicon.ico" /></head>...原创 2021-09-20 16:34:24 · 230 阅读 · 0 评论 -
如何用省略号代替溢出文字
1.单行文本溢出（1）强制一行内显示文本 white-space：nowrap；nowrap:不换行（2）超出部分隐藏：overflow：hidden；（3）文字的超出部分用省略号代替 text-overflow：ellipsis；ellipsis 英[ɪˈlɪpsɪs] n. 省略; 省略号; 2.多行文本溢出（有兼容性问题）（1）overflow：hidden；（2）text-overflow：ellipsis；（3）弹性伸缩盒子模型 display：-...原创 2021-09-19 03:45:14 · 117 阅读 · 0 评论 -
解决图片底部的空白缝隙
1.原因：图片（行内块元素）和文字默认基线对齐，所以生出了缝隙。2.解决方法方法一：给图片添加vertical-align属性(⭐推荐使用) img{ /* top | middle | bottom 任选其中一个*/ vertical-align: top | middle | bottom; }方法二：把图片转化为块级元素，块级元素没有vertical-align属性 img{原创 2021-09-19 03:22:56 · 345 阅读 · 0 评论 -
如何使图片和文字垂直对齐（vertical-align：middle；）
vertical-align是适用于行内或行内块元素的、设置垂直对齐的方式。1.图片和文字居中对齐 <img src="img/zxj.jpg" alt="" width="100px" height="100px">zxj我老婆真好看 img{ vertical-align: middle; }2.vertical-align: baseline | top | middle | bottom（1...原创 2021-09-19 03:09:12 · 1428 阅读 · 1 评论 -
css用户界面样式
1.鼠标样式cursor2.取消表单轮廓线 <input type="text"> input{ outline: none; }3.防止文本域拖拽 <textarea name="" id="" cols="30" rows="10"></textarea> textarea{ resize: none; }.原创 2021-09-18 16:55:54 · 71 阅读 · 0 评论 -
如何使用字体图标
1.字体图标的下载（1）https://icomoon.io/→IcoMoon App→选择图标→Generate Font→Download，获得压缩包（2）iconfont-阿里巴巴矢量图标库2.字体图标的引入（1）把下载的压缩包中的fonts文件夹放到要使用该字体图标的页面的根目录下（2）在css样式中全局声明字体，字体文件通过css引入页面，代码如下：<style>@font-face { font-family: 'icomoon'; src:原创 2021-09-18 02:14:41 · 237 阅读 · 0 评论 -
css学习之精灵图的使用
精灵图技术适用于背景图片，把多个小背景图片整合到一张大图片中。1.背景设置为精灵图，background：url（）；2.移动背景图片的位置，使用background-position，移动距离是目标图片的x和y坐标（往左往上是负值）。3.步骤1，2 合起来写，如：background：url(img/sprites.png) no-repeat x y ；...原创 2021-09-17 17:30:49 · 400 阅读 · 0 评论