简单的个人网站模板,wordpress流量统计插件,网站建设硬件条件,17网站一起做视频参考#xff1a;B站Pink老师 今天是CSS学习的第十二天#xff0c;今天开始的笔记对应Pink老师课程中的CSS第七天的内容。 本节重点#xff1a;CSS高级技巧 本章目录 本节目标1. 精灵图1.1 为什么需要精灵图1.2 精灵图使用案例#xff1a;拼出自己的名字 2. 字体图标2.…视频参考B站Pink老师 今天是CSS学习的第十二天今天开始的笔记对应Pink老师课程中的CSS第七天的内容。 本节重点CSS高级技巧 本章目录 本节目标1. 精灵图1.1 为什么需要精灵图1.2 精灵图使用案例拼出自己的名字 2. 字体图标2.1 字体图标的产生2.2 字体图标的优点2.3 字体图标下载2.4 字体图标的引入2.5 字体图标的追加 3. CSS三角4. CSS用户界面样式什么是界面样式4.1 鼠标样式 cursor4.2 轮廓线 outline4.3 防止拖拽文本域resize 5. vertical-align属性应用5.1 图片、表单、文字对齐5.2 解决图片底部默认空白缝隙问题 6. 溢出的文字省略号显示6.1 单行文本溢出显示省略号6.2 多行文本溢出显示省略号 7. 常见布局技巧7.1 margin负值的运用7.2 文字围绕浮动元素7.3 行内块元素的妙用7.4 CSS三角强化 8. CSS初始化 本节目标
能够使用精灵图能够使用字体图标能够写出CSS三角能够写出常见的CSS用户界面样式能够说出常见的布局技巧
1. 精灵图
1.1 为什么需要精灵图
其目的是为了有效减少服务器接收和发送请求的次数提高页面加载速度。 精灵图样式如下
1.2 精灵图使用
参考代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box1 {width: 60px;height: 60px;/* background-color: pink; */margin: 100px auto;background: url(images/sprites.png) -182px 0 no-repeat;/* background-position: -182px 0; */}.box2 {width: 27px;height: 25px;background: url(images/sprites.png) -155px -106px no-repeat;margin: 200px;}/style
/headbodydiv classbox1/divdiv classbox2/div
/body/html结果展示
核心总结
精灵图主要针对于小的背景图片使用主要借助于背景位置来实现background-position一般情况下精灵图都是负值注意方向与正负的对应
案例拼出自己的名字
参考代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylespan {display: inline-block;background: url(images/abcd.jpg) no-repeat;}.a {width: 110px;height: 118px;background-color: pink;background-position: 0 -9px;}.u {width: 111px;height: 110px;background-position: -475px -422px;}.d {width: 97px;height: 115px;background-position: -364px -9px;}.i {width: 60px;height: 108px;background-position: -327px -142px;}/style
/headbodyspan classaa/spanspan classuu/spanspan classdd/spanspan classii/span
/body/html这里可以根据自己想选择的字母自己调整参数。 结果展示
2. 字体图标
2.1 字体图标的产生
使用场景主要用于显示网页中通用、常用的一些小图标 精灵图有很多优点但其缺点明显
图片文件较大图片本身放大和缩小会失真一旦图片制作完毕想要更换很复杂 所以出现了字体图标iconfont 字体图标可以为前端工程师提供一种方便高效的图标使用方式展示的虽然是图标但其本质属于字体。
2.2 字体图标的优点 轻量级减少服务器请求渲染速度快。 灵活性本质是文字可以随意改变颜色、产生阴影、透明效果、旋转等。 兼容性几乎支持所有浏览器。 注字体图标不能替代精灵技术只是对工作中图标部分技术的提升和优化。 总结 如果遇到一些结构样式简单的小图标。用字体图标。 如果遇到一些结构和样式复杂一点的小图片用精灵图。
2.3 字体图标下载
推荐以下两个网站 icomoon字库http://icomoon.io 阿里iconfont字库http://www.iconfont.cn/
2.4 字体图标的引入
注意下载完毕后不要删除源文件后续需要使用 使用过程如下
把下载包里的fonts文件夹放入页面根目录下在CSS样式中全局声明字体写到style中这段声明可以在下载的字体文件中的style.css中找到。 在html标签内添加小图标 添加的小图标是图上红圈圈住的地方。设计样式即可
参考代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/*字体声明*/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;}span {font-family: icomoon;font-size: 100px;color: pink;}/style
/headbodyspan/spanspan/span
/body/html效果展示
2.5 字体图标的追加
在import icons中上传原压缩包中的selection.json,然后选中自己想要的新的图标重新下载压缩包替换原文件即可。
3. CSS三角
一些常见三角形用CSS画出来即可不必做成图片或字体图标。示意图如下 想让其变为三角形代码如下
div {width: 0;height: 0;/*下面两句为了适配低版本浏览器可写可不写*/line-height: 0;font-size: 0;border: 50px solid transparent;border-left-color: pink;}参考代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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: -9px;width: 0;height: 0;/*为了照顾兼容性*/line-height: 0;font-size: 0;border: 5px solid transparent;border-bottom-color: pink;}/style
/headbodydiv classbox1/divdiv classbox2/div!-- div classjdspan/span/div --
/body/html结果展示 相当于只留下了左边三角。 案例京东三角 代码去掉上面的div和span注释 效果 我们做的就是三角和长方形盒子的结合。
4. CSS用户界面样式
什么是界面样式
所谓界面样式就是更改一些用户操作样式以更好提升用户体验。
更改用户的鼠标样式表单轮廓防止表单域拖拽
4.1 鼠标样式 cursor li {cursor: pointer;}设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
属性值描述default小白默认pointer小手move移动text文本not-allowed禁止
参考代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyulli stylecursor: default;我是默认的小白鼠样式/lili stylecursor: pointer;我是鼠标小手样式/lili stylecursor: move;我是鼠标移动样式/lili stylecursor: text;我是鼠标文本样式/lili stylecursor: not-allowed;我是鼠标禁止样式/li/ul
/body/html结果展示 这里截图无法显示效果结果就是放在不同的语句上鼠标会变成不同的形状。
4.2 轮廓线 outline
给表单添加outline: 0;或者outlinenone;样式之后就可以去掉默认的蓝色边框。
input { outline: none;}4.3 防止拖拽文本域resize
textarea {resize:none;}注textarea和/textarea最好在一行不然会出现文本域的文字输入部分距离最开始有很大空白的问题。 4.2和4.3的参考代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleinput,textarea {outline: none;}textarea {resize: none;}/style
/headbody!--1.取消表单轮廓--input typetext!--2.防止拖拽文本域--textarea name id/textarea
/body/html结果展示 修改前 修改后
5. vertical-align属性应用
场景用于设置图片/表单行内块元素和文字垂直对齐。 官方解释用于设置一个元素的垂直对齐方式只针对行内元素/行内块元素有效。 语法
vertical-align: baseline|top|middle|bottom;值描述baseline默认。基线对齐。top与行内最高元素顶端对齐middle放置父元素中部bottom行元素顶端与最低元素顶端对齐
5.1 图片、表单、文字对齐
图片、表单都属于行内块元素默认的vertical-align是基线对齐。 垂直对齐设置vertical-align: middle;即可
5.2 解决图片底部默认空白缝隙问题
bug:图片底侧会有1个空白缝隙原因是行内块元素会和文字基线对齐。 两种方法解决
给图片添加vertical-align:middle|top|bottom等。推荐使用把图片转换为块级元素 display:block;(这样就不涉及基线对齐方法因为转换为了块级元素)
参考代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {border: 2px solid red;}img {/* vertical-align: bottom; */display: block;}/style
/headbodydivimg srcimages/ldh.jpg alt/div
/body/html结果展示 可以看到图片和红色边框中间没有空白缝隙了。
6. 溢出的文字省略号显示
6.1 单行文本溢出显示省略号
单行文本溢出显示省略号必须满足三个条件 /*强制一行显示默认normal自动换行*/white-space: nowrap;/*溢出部分隐藏*/overflow: hidden;/*文字用省略号替代超出部分*/text-overflow: ellipsis;参考代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 150px;height: 80px;background-color: pink;margin: 100px auto;/*显示不开自动换行*//* white-space: normal; *//*强制一行显示*/white-space: nowrap;/*溢出部分隐藏*/overflow: hidden;/*省略号*/text-overflow: ellipsis;}/style
/headbodydiv啥也不说此处省略一万字/div
/body/html结果展示
6.2 多行文本溢出显示省略号
多行文本溢出显示省略号有较大兼容性问题适合于webkit浏览器或移动端移动端大部分是webkit内核 overflow: hidden;text-overflow: ellipsis;/*弹性伸缩盒子模型显示*/display: -webkit-box;/*限制在一个块元素显示的文本行数*/-webkit-line-clamp: 3;/*设置或检索伸缩盒对象的子元素排列方式*/-webkit-box-orient: vertical;这个效果更推荐后台人员来做这里用的时候直接复制即可但要理解每句的意思。
参考代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 150px;height: 65px;background-color: pink;margin: 100px auto;overflow: hidden;text-overflow: ellipsis;/*弹性伸缩盒子模型显示*/display: -webkit-box;/*限制在一个块元素显示的文本行数*/-webkit-line-clamp: 3;/*设置或检索伸缩盒对象的子元素排列方式*/-webkit-box-orient: vertical;}/style
/headbodydiv啥也不说此处省略一万字啥也不说此处省略一万字啥也不说此处省略一万字/div
/body/html结果展示
7. 常见布局技巧
7.1 margin负值的运用
让每个盒子margin往左侧移动-1px加margin-left:-1px;
参考代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleul li {position: relative;float: left;list-style: none;width: 150px;height: 200px;border: 1px solid red;margin-left: -1px;}ul li:hover {/*如果盒子没有定位鼠标经过添加相对定位即可*//* position: relative; *//*如果li都有定位则利用z-index提高层级*/z-index: 1;border: 1px solid blue;}/style
/headbodyulli1/lili2/lili3/lili4/lili5/li/ul
/body/html结果展示
有一个很奇怪的问题按照代码应该全部是细线框但是有些显示就是看起来很粗并且更换电脑和浏览器之后不同位置的线框会看起来很粗如果有人知道是为什么可以在评论区告诉我一下谢谢啦
鼠标经过某个盒子的时候提高当前盒子的层级即可如果没有定位则加相对定位保留位置如果有定位则加z-index 如果不提高层级显示效果如下 显示不完全所以需要提高层级。
7.2 文字围绕浮动元素
巧妙运用浮动元素不会压住文字的特性。
参考代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.box {width: 300px;height: 70px;background-color: pink;margin: 0 auto;padding: 5px;}.pic {float: left;width: 120px;height: 60px;/* background-color: blue; */margin-right: 5px;}.pic img {width: 100%;}/style
/headbodydiv classboxdiv classpicimg srcimages/img.png alt/divp【集锦】热身赛-巴西0-1秘鲁 内马尔替补 两人血染赛场/p/div
/body/html结果展示 浮动后文字会自动环绕而不需要单独设置格式。
7.3 行内块元素的妙用
给父盒子添加text-align: center;那么其中行内元素、行内块元素都会水平居中。
参考代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.box {text-align: center;}.box a {display: inline-block;width: 36px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;text-align: center;line-height: 36px;text-decoration: none;color: #333;font-size: 14px;}.box .prev,.box .next {width: 85px;}.box .current,.box .elp {background-color: #fff;border: none;}.box input {height: 36px;width: 45px;border: 1px solid #ccc;outline: none;}.box button {width: 60px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;}/style
/headbodydiv classboxa href# classprevlt;lt;上一页/aa href# classcurrent2/aa href#3/aa href#4/aa href#5/aa href#6/aa href# classelp.../aa href# classnextgt;gt;下一页/a到第input typetext页button确定/button/div
/body/html结果展示 用上述方法将其排列在一行且水平居中。
7.4 CSS三角强化
三角强化是想实现下面效果 原理解释一个矩形加一个三角组合而成 首先我们需要一个直角三角形,做法如下 width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 10px 0 0;完整代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box1 {width: 0;height: 0;/*把上边框调大*//* border-top: 100px solid transparent;border-right: 50px solid skyblue; *//*左边和下边的边框宽度为0*//* border-bottom: 0px solid blue;border-left: 0px solid green; *//*可以简写*//*只保留右边边框有颜色*/border-color: transparent red transparent transparent;/*样式都是solid*/border-style: solid;/*上边框宽度要大右边框宽度稍小其余边框为0*/border-width: 100px 50px 0 0;}.price {width: 160px;height: 24px;line-height: 24px;border: 1px solid red;margin: 100px 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
/headbodydiv classbox1/divdiv classpricespan classmiaosha1650i/i/spanspan classorigin5650/span/div
/body/html结果展示 左上角的三角形是我们测试时写的代码中有所以也展示在上面了。
8. CSS初始化
不同浏览器对有些标签的默认值不同为了消除不同浏览器对HTML文本呈现的差异照顾浏览器的兼容我们需要对CSS初始化。即重设浏览器样式这里以京东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
} *//*这里和之前一样目前的vscode中会报错*/Unicode编码字体 把中文字体的名称用相应的Unicode编码来代替可以有效避免浏览器解释CSS代码出现乱码的问题。 比如 黑体 \9ED1\4F53 宋体 \5B8B\4F53 微软雅黑\5FAE\8F6F\96C5\9ED1
————————————————————————————————————————— 第七天知识点已讲解完毕下面即将更新课程HTML和CSS3提高的内容哦(ง •_•)ง有什么问题都可以在评论区进行讨论哦
