新视网站建设联系qq,如何制作一个手机app,东莞网站开发培训哪里有,viewjs wordpress1.❤️❤️前言~#x1f973;#x1f389;#x1f389;#x1f389; Hello, Hello~ 亲爱的朋友们#x1f44b;#x1f44b;#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章#xff0c;请别吝啬你的点赞❤️❤️和收藏#x1f4d6;#x1f4d6;。如果你对我的…1.❤️❤️前言~ Hello, Hello~ 亲爱的朋友们这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章请别吝啬你的点赞❤️❤️和收藏。如果你对我的内容感兴趣记得关注我以便不错过每一篇精彩。 当然如果在阅读中发现任何问题或疑问我非常欢迎你在评论区留言指正️️。让我们共同努力一起进步 加油一起CHIN UP 个人主页E绵绵的博客 所属专栏 1. JAVA知识点专栏 深入探索JAVA的核心概念与技术细节 2.JAVA题目练习 实战演练巩固JAVA编程技能 3.c语言知识点专栏 揭示c语言的底层逻辑与高级特性 4.c语言题目练习 挑战自我提升c语言编程能力 5.Mysql数据库专栏 了解Mysql知识点提升数据库管理能力 6.html5知识点专栏 学习前端知识更好的运用它 7. css3知识点专栏 在学习html5的基础上更加熟练运用前端 8.JavaScript专栏 在学习html5和css3的基础上使我们的前端使用更高级 持续更新中敬请期待❤️❤️ 2.精灵图Sprites 为了有效地减少服务器接收和发送请求的次数提高页面的加载速度出现了CSS精灵技术 核心原理将网页中的一些小背景图像整合到一张大图中这样服务器只需要一次请求就可以了 1.精灵技术主要针对于背景图片的使用就是把多个小背景图片整合到一张大图片中 2.该大图当背景后是以左上角对齐的所以要让其他小背景图片插入进去就要移动大背景图 3.移动大背景图片的位置此时可以使用 background-position。 4.一般情况下都是往上往左移动所以数值是负值往左移动所以是负值。 5.使用精灵图的时候需要精确测量每个小背景图片的大小和位置根据位置然后移动相应距离。 精灵图的优点很多但是缺点也很明显 1.图片文件还是比较大的 2.图片本身放大和缩小会失真 3.一旦图片制作完毕想要更换非常复杂 此时有一种技术的出现很好的解决了以上问题就是字体图标 iconfont 3.字体图标iconfont 字体图标使用场景 主要用于显示网页中通用、常用的一些小图标。展示的是图标本质属于字体。 优点
轻量级一个图标字体比一系列的图像要小一旦字体加载了图标就会马上渲染出来减少了服务器的请求
灵活性本质其实是文字可以很随意的改变颜色产生阴影透明效果旋转等
兼容性几乎支持所有的浏览器 步骤 字体图标的下载 字体图标的引入(引入到我们html页面中) 字体图标的追加(以后添加新的小图标) 3.1字体图标的下载 icomoon字库外网不需要登录即可下载 http://icomoon.io
1.点击 IcoMoon App
2.选择需要的图标
3.点击Generate Font
4.点击下载
阿里 iconfont字库免费但是需要登录iconfont-阿里巴巴矢量图标库 3.2字体图标的引入 生成之后点击download 1.把下载包里面的 fonts 文件夹放入页面根目录下 2.在CSS样式中全局声明字体简单理解把这些字体通过css引入到我们页面中
右键打开 style.css复制如图代码引入我们自己的CSS文件中 3.html标签内添加小图标
我们打开解压文件中的 demo.html 复制想要的图标粘贴进 span/span标签中 mac不显示小框框直接复制即可 4.给标签定义字体
span {font-family: icomoon;font-size: 100px;color: pink;}
注意标签中的 font-family 的值和我们之前引入字体图标的font-family 必须一样这里均为 icomoon如果上面改为pink,下面也是pink
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylefont-face {font-family: icomoon;src: url(fonts/icomoon.eot?aoa0ns);src: url(fonts/icomoon.eot?aoa0ns#iefix) format(embedded-opentype),url(fonts/icomoon.ttf?aoa0ns) format(truetype),url(fonts/icomoon.woff?aoa0ns) format(woff),url(fonts/icomoon.svg?aoa0ns#icomoon) format(svg);font-weight: normal;font-style: normal;font-display: block;}span {font-family: icomoon;font-size: 100px;color: pink;}/style
/head
bodyspan/spanspan/span
/body
/html 3.3字体图标的追加
如果工作中原来的字体图标不够用了我们需要添加新的字体图标到原来的字体文件中。 以 icomoon字库 网为例点击网站内import icons 把压缩包里面的 selection.json 重新上传然后选中自己想要新的图标重新下载压缩包并替换原来的文件即可。
4.css三角做法
我们要设定盒子宽高是0并且指定边框不同边框长度会造成不同的现象最经典的是四个相同长度边框生成如下的第一个图。所以生成一个三角就可以让其他三个边框变为透明色留一个就行。 div{width0height:0;/*下面两句为了兼容问题*/line-height:0;font-size0border: 50px solid transparent;border-left-color: green;} 5.CSS用户界面样式 所谓的界面样式就是更改一些用户操作样式以便提高更好的用户体验。 更改用户的鼠标样式表单轮廓防止表单域拖拽 1.鼠标样式 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状以下是pointer可以所属的很多值 li {cursor: pointer;
} 2.表单轮廓线outline
给表单添加 outline:0; 或者outline: none;样式后就可以去掉默认的蓝色边框
input { outline: none; } 3.防止拖拽文本域
textarea { resize: none; }
本来默认文本域可以无限放大加入该代码后就可以控制了正常文本域我们都是防止其被拖拽 6.vertical-align属性 vertical-align: 使用场景经常用于设置图片或者表单行内块元素和文字垂直对齐。官方解释用于设置一个元素的垂直对齐方式但是它只针对于行内元素或者行内块元素有效 让图片和文字垂直居中修改的是img或者textarea属性,行内块元素都可以 图片底侧空白缝隙解决 bug图片底侧会有一个空白缝隙原因是行内块元素会和文字的基线对齐给图片加边框就可以看见 主要解决办法有两种 给图片添加 vertical-align : middle | top |bottom 等推荐 把图片转换为块级元素 display:block;因为块级元素不会有vertical-align 属性 7.溢出的文字省略号显示
单行文本溢出省略号显示 必须满足三个条件
/* 1.先强制一行内显示文本 */
white-space: nowrap; /*默认 normal 是自动换行nowrap是强制一行显示文本*//* 2.超出的部分隐藏 */
overflow: hidden;/* 3.文字用省略号替代超出的部分*/
text-overflow: ellipsis;
/*ellipsis:省略号*/
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylediv {width: 150px;height: 80px;background-color: pink;margin: 100px auto;/*换行*//*white-space: normal;*/white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
/style
bodydiv啥也不说此处省略一万字/div
/body
/html
多行文本溢出显示省略号显示 多行文本溢出显示省略号有较大的兼容性问题适合于webKit浏览器或移动端(移动端大部分是webKit内核) overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient : vertical; 8.常见布局技巧 margin负值的运用 两个盒子加边框1px浮动贴紧会出现 1 1 2px从而边框加粗要解决该状况 所以给右边盒子添加margin-left: -1px让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框。 此时如果要让盒子发生变化标准流中的盒子发生变化就会因为重叠有一部分不会变所以提高当前盒子的层级即可如果没有定位则加相对定位(保留位置并且能覆盖标准流) 如果有定位则加 z-index !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
styleul li {position: relative;float: left;list-style: none;width: 150px;height: 200px;border: 1px solid red;margin-left: -1px;}/*ul li:hover{1.如果li没有定位,鼠标经过添加相对定位position: relative;border: 1px solid blue;}*/ul li:hover {/*2.如果li有定位则利用z-index提高层级*/z-index: 1;border: 1px solid blue;}
/style
bodyulli1/lili2/lili3/lili4/lili5/li/ul
/body
/html 文字围绕浮动元素
巧妙运用浮动元素不会压住文字的特性 先准备大盒子左边盒子浮动右边不需要盒子文字会自动环绕 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style* {margin: 0;padding: 0;}.box {width: 300px;height: 160px;background-color: pink;margin: 0 auto;padding: 5px;}.pic {/*左边盒子浮动*/float: left;height: 157px;width: 226px;margin-right: 5px;}.pic img {width: 100%;}
/style
bodydiv classboxdiv classpicimg srcimg/图层2.png alt/divp比较快不愉快VB采用无多擦VB我饿预测误差不饿完不成/p/div
/body
/html 行内块巧妙运用 因为这里块很多用浮动就有点麻烦不如直接用行内块行内块本身之间就有点距离浮动还需要设置。 把这些链接盒子转换为行内块之后给父级大盒子指定 text-align: center行内块元素会水平居中之后操作就轻车熟路了。 三角强化 我们不只是能做出如上最简单的三角形还能根据不同边框长度做出更多不同的三角形在这三角形的做法我就只说一种另外的你们自己去探索。此外还说一点不能做出三角形的情况。 当边框的左边右边都为0或者上面下面都为0时就没有三角形其他情况都存在。 width:0
height:0
border-color:transparent red transparent transparent
border-style:solid
border-width:22px 8px 0 0 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box1 {width: 0;height: 0;/*把上边框宽度调大*/border-top: 100px solid transparent;border-right: 50px solid red;/*左边和下边边框宽度设置为0*/border-bottom: 0px solid blue;border-left: 0px solid green;}/style
/head
bodydiv classbox1/div
/body
/html
