业务中常用属性2
1、实现单行文字省略号
white-space: nowrap;
: 文字强制一行显示overflow: hidden;
: 文字溢出隐藏text-overflow: ellipsis;
文字溢出省略号
.box {
width: 150px;
height: 200px;
border: 1px solid #000;
/* 文字强制一行显示,不换行 */
white-space: nowrap;
/* 溢出隐藏 */
overflow: hidden;
/* 文字溢出省略号 */
text-overflow: ellipsis;
}
2、控制背景图片大小 background-size:值;
background-size: contain;
背景图片等比例缩放,显示完整,有可能铺铺不满盒子background-size: cover;
背景图片等比例缩放,铺满盒子,背景图片有可能显示不完整background-size: 400px 200px;
写2个数值,第1个代表宽,第2个代表高background-size: 400px auto;
写1个数值,代表宽,另外一个值高默认auto,等比例缩放background-size: 50% 50%;
写百分比的值,参考是盒子的宽高
.box {
width: 1000px;
height: 300px;
border: 1px solid #000;
background: url(图片路径) repeat;
/* 控制背景图片大小 */
background-size: 50% 50%;
}
3、背景渐变属性
background-image:linear-gradient( to 方位名词 ,颜色 ,颜色);
写一个方位名词代表水平或垂直方向,写两个方位名词代表对角线,颜色为两种或两种以上
.box {
width: 600px;
height: 500px;
border: 1px solid #000;
/* 背景渐变 是背景图片的一种特殊情况
括号里边逗号隔开,
控制渐变方向 可以写1个或者2个方位名词, left right top bottom */
/* background-image: linear-gradient(to bottom, green, red);
background-image: linear-gradient(to top, green, red);
background-image: linear-gradient(to right, green, red, blue);*/
background-image: linear-gradient(to right top, rgba(50, 205, 84, 0.514), skyblue);
}
背景颜色渐变写百分比 background-image:linear-gradient(45deg,颜色5%,颜色95%)
- 度数如坐标轴+上面为0度顺时针依次90度,180度,270度 45度在0度和90度之间
- 第一个颜色后面的百分之比是渐变起始的位置 ,最后一个百分比是渐变结束的位置
/* 渐变写百分比,是渐变起始位置到渐变的结束位置 */
background-image: linear-gradient(90deg, red 90%, green 96%);
4、盒子阴影属性 box-shadow: -20px 20px 20px 2px #333;
- 第1个值是阴影水平偏移量,正值向右,负值向左
- 第2个值是阴影垂直偏移量,正值向下,负值向上
- 第3个值是阴影模糊范围
- 第4个值是阴影大小
- 第5个值是阴影颜色
5、盒子内阴影属性 inset
.box {
width: 300px;
height: 300px;
background-color: green;
margin: 100px auto;
/* 内阴影 inset */
box-shadow: inset 0px 0px 100px 0px yellow;
}
6、文字阴影属性 text-shadow: -20px -30px 10px red;
- 第1个值是阴影水平偏移量,正值向右,负值向左
- 第2个值是阴影垂直偏移量,正值向下,负值向上
- 第3个值是阴影模糊范围
- 第4个值阴影颜色
.box {
font-size: 100px;
font-weight: 700;
/* 文字阴影*/
text-shadow: -20px -30px 10px red;
}
7、属性过渡 transition: all 2s;
过渡是样式慢慢变化的过程, 过渡需要2个状态, 通常过渡属性添加到默认状态, 谁动给谁加。
.box {
width: 200px;
height: 200px;
background-color: #ccc;
/* all 全部属性过渡, 2s过渡时间 */
transition: all 2s;
}
.box:hover {
background-color: #f00;
border-radius: 50%;
}
字体图标(矢量图,线条组成,放大后不虚,SVG格式)
- 链入字体图标样式文件 iconfont.css
- 标签调用 iconfont类 和打开demo-index fontclass 找到对应类名
平面 (2d) 转换 transtorm : 值 ;
不脱标
位移 translate()
括号里面用逗号隔开
- 写两个值。 第一个值x轴 , 正值向右,负值向左。第二个值Y轴,正值向下,负值向上。
transform: translate(-100px, -100px);
- 写一个值。 x轴正值向右,负值向左。
transform: translate(100px);
- 写百分比。 参考自身宽高
transform: translate(10%, 20%);
- 设置单个方向位移。
translateX() translateY()
transform: translateX(100px) translateY(100px);
位移实现绝对定位居中 (不能设置宽高的盒子)
position: absolute;
/* 向右走父元素宽度的一半 */
left: 50%;
/* 向下走父元素高度的一半 */
top: 50%;
/* 向左走子元素自身宽的一半,向上走子元素自身高的一半 */
transform: translate(-50%, -50%);
旋转 rotate (值 deg)
deg 度数 正值顺时针 负值逆时针
transform: rotate(360deg);
圆点 transform-origin:值;
设置转换圆点
- 写两个方位名词 left right top bottom center
transform-origin: left center;
- 写数值 第一个值x轴 第二个值 y轴
transform-origin: 50px 100px;
- 写百分比 参考自身宽高 第一个值x轴 第二个值y轴
transform-origin: 10% 50%;
转换复合属性写法 transform: translate() rotate() ;
/* 转换复合属性写法,注意位移写在前边 */
transform: translate(500px) rotate(360deg);
注意 : 位移写在前边
缩放 transform:scale;
- 写一个值 :代表宽度, 高度等比例缩放, 大于一放大, 小于一缩小
- 写两个值 :第一个值代表宽度的缩放比例, 第二个值代表高度的缩放比例
/* 2d转换之缩放 值 >1 放大 <1缩小*/
transform: scale(.5);
transform: scale(2, 3);
SEO 搜索引擎优化
作用: 提高网站自然排名。
三大标签文本
- title: 标题
<title> 标题内容 </title>
- description: 网页描述
<meta name="description" content=" 描述内容 ">
- keywords: 关键词
<meta name="keywords" content=" 关键字内容 ">
注 : meta 标签元信息 给搜索引擎和浏览器渲染用的
HTML 补充:语义化标签
<body>
<!-- 网站头部 -->
<header></header>
<!-- 导航 -->
<nav></nav>
<!-- 侧边栏 -->
<aside></aside>
<!-- 区块 -->
<section></section>
<!-- 文章 -->
<article></article>
<!-- 底部 -->
<footer></footer>
</body>
本章注意点:
- 行内元素只能设置左右的内外边距,不要设置上下的内外边距
- logo优化 先放h1,提权,提高重要性,搜索引擎优先推荐, a标签里边设置背景图片
<style> .logo a { display: block; width: 207px; height: 70px; background: url(../images/logo.png) no-repeat; /* 控制背景图片尺寸 */ background-size: cover; } </style> <body> <div class="logo"> <h1> <a href="index.html"></a> </h1> </div> </body>
- 位移和定位的区别: 写百分比时相对定位参考父元素,位移参考自身
- 行内元素不能直接使用转换(
transform
)属性,要先转换模式display: block;