![](https://img-blog.csdnimg.cn/2019092715111047.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
web前端
文章平均质量分 92
web前端的内容
蒲竺
一个正在学习并在慢慢的进步的小码农
展开
-
WEB前端-CSS精灵技术
网页加载每一张图片都需要对服务器进行一次请求,所以对服务器的负荷会很大,可以将多个小图放到一张大图上,每个地方使用小图片都对大图进行背景定位即可,这样只需要加载一张大图片,对服务器只做一次请求,可以减少服务器的开销,提供网站的性能。概念:3个盒子浮动,左边和右边写宽高,负责加载两边的背景,中间的盒子宽度不定,让文字撑开。引入字体图标css和当前文件的css。banner部分css。按住空格键使用鼠标抓取。按住alt键滚动鼠标。原创 2022-10-28 16:33:55 · 1167 阅读 · 6 评论 -
WEB前端-弹性布局
3)换行,并反向排列(从下往上排列),wrap-reverse------从下往上,从左往右进行排列。(4)两端的空白是中间空白的一半,space-around------------环绕对齐。取值:(1)默认的排列方式,stretch--------靠上排列,但是元素之间有间距。语法:display:flex -------------设置一个弹性容器。url(),临时替换的样式-----需要在url后面加auto。(2)flex-end,在结束位置对齐--------底部对齐。原创 2022-10-27 21:11:21 · 1130 阅读 · 14 评论 -
WEB前端-定位
定位的使用:1.4种定位方式:静态、相对、绝对、固定2.4种边偏移属性:left、right、top、bottom注意:偏移值准确的理解是“距离什么位置有多少像素”。如 top:100px;距离顶部为100像素 (向下走)原创 2022-10-26 11:02:25 · 1785 阅读 · 7 评论 -
WEB前端-浮动-阴影
浮动最早期做的是图文绕排浮动的语法:float:取值:left向左浮动,right向右浮动,none取消浮动现在的浮动,用的最多是让块元素在同一行显示:就是给一行的所有块元素都加上浮动浮动的最大价值:让元素排列成一行,或者一左一右浮动的使用口诀:1.要浮动,兄弟元素也一起浮动2.浮动方向保持一致(尽量都是用左浮动)总结:1.可以做图文绕排2.主要让块元素排一行,多个元素一起浮动3.注意加了浮动以后元素的顺序,标签顺序,浮动方向4.浮动的元素脱离标准流。原创 2022-10-25 15:49:24 · 713 阅读 · 8 评论 -
WEB前端-css盒子模型
概念:就是给元素追加一个虚拟标签,由css加载,可以节省html的资源开销,必须有content属性,默认是行元素,可以进行转换。多学一招:当盒子是正方形,圆角的值是边的一半或者百分比是50%的时候,是圆(ie8以下不支持),圆角和边框没关系。a) 盒子上下摆放,上盒子有下外边距,下盒子有上外边距,两个边距会重合,以大的边距为准。b) 两个盒子嵌套关系,两个盒子对于上外边距会重合,以大的边距为准。注意:伪对象样式中,必须有content属性,否则伪对象无效。::before:在指定的标签前面添加一个对象。原创 2022-10-24 09:07:41 · 315 阅读 · 7 评论 -
WEB前端-溢出-优先级
样式表优点缺点使用情况控制范围行内样式表书写方便,权重高没有实现样式和结构相分离较少控制一个标签(少)内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面(中)外部样式表完全实现结构和样式相分离需要引入最多,强烈推荐控制整个站点(多)原创 2022-10-23 10:29:56 · 554 阅读 · 6 评论 -
WEB前端-背景属性
img和背景图片的区别: img不需要专门写宽高就能够显示在页面上 而背景图片默认是撑不开容器的 需要专门写宽高 一般产品插入图都推荐使用img 而一些小的icon 或者很少更新的图片 再或者超大的图片推荐使用背景图 而且背景图可以让内部的文字盖在上面,但是img不行(除非后期用定位)取值:no-repeat不平铺,repeat-x横向平铺,repeat-y纵向平铺,repeat横向纵向都平铺------默认。closest-side: 指定径向渐变的半径长度为从圆心到离圆心最近的边。原创 2022-10-21 09:32:38 · 5367 阅读 · 8 评论 -
WEB前端-css选择器-常用属性(属性完结)
网站删除css后会变得横七竖八,加上后又变美观了,这就是css样式的魔力。css就是给网页设置一些样式,让网页变的漂亮,更具有可读性。css全称为Cascading Style Sheets 翻译过来叫层叠样式表原创 2022-10-20 17:36:16 · 659 阅读 · 5 评论 -
WEB前端-css选择器-常用属性(后续更新)
html是网页的结构,css是网页的化妆师,让网页更美观。原创 2022-10-19 19:08:17 · 733 阅读 · 3 评论