随笔分类 - Web前端学习
摘要：css代码： .logo.scaning:before { content: ""; position: absolute; left: -465px; top: -260px; width: 250px; height: 15px; background-color: rgba(255,255,2
阅读全文
摘要：css3不定宽高水平居中： 在父级元素加3句话，就可以实现子元素水平垂直居中。 justify-content:center;//子元素水平居中 align-items:center;//子元素垂直居中 display:flex; 还有2种方式可以实现水平垂直居中： 第一种实现原理：利用 margi
阅读全文
摘要：<div class='contain' ></div> <style> .contain { position: fixed; top: 50%; left: 50%; width: 600px; height: auto; transform: translateX(-50%) translat
阅读全文
摘要：父盒子没有设置高度，里面的子盒子box1由于浮动导致脱离父盒子从而无法再撑开父盒子的高度，父盒子高度因此塌陷，最终导致父盒子上下边框贴在一起。 <style> .fabox { border: 10px solid red; margin-top: 20px; } .sonbox1 { width:
阅读全文
摘要：a，形成BFC的条件： 1，浮动元素float 2，加了overflow:hidden/scoll/auto属性（也就是不能为visible） 3，加了定位属性（仅限固定定位fixed和绝对定位absolute，也就是可以脱标的定位） 4，display属性（仅限inline-block，table
阅读全文
摘要：圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决”中间栏div内容不被遮
阅读全文
摘要：熟悉移动布局的程序猿都知道在弹性布局（flexbox）和网格布局（grid）中，都有一个属性justify-content，space-evenly是其值之一。目的是实现如下效果： 这是什么效果呢？？？ 子元素均分容器空间，这是space-between和space-around均无法直接实现的效果
阅读全文
摘要：思路： 1，先做1个正方形，然后旋转45°即可让箭头分别朝向上下左右 2，需要那个朝向的箭头就分别设置这个箭头两边边框颜色，如下代码可以实现箭头朝右 div { width: 8px; height: 8px; border-top: 1px solid #666; border-right: 1p
阅读全文
摘要：li因为本身自带1个像素的边框，当鼠标悬停改变它的颜色时就会出现抖动的问题，此时只需把li的边框颜色设置为透明即可 li { width: 199px; height: 235px; border: 1px solid transparent; } li:hover { border: 1px so
阅读全文
摘要：li{transition: all .2s linear;} li:hover { z-index: 2; -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, .1); box-shadow: 0 15px 30px rgba(0, 0, 0, .1); -
阅读全文
摘要：主要是中间的分割线，效果图如下： Html代码： <div class="fuwu"> <ul> <li><a href=""><i class="iconfont icon-shizhong"></i><span>保障服务</span></a></li> <li><a href=""><i cla
阅读全文
摘要：一般适用于公告展示。 操作步骤： 1，强制性让内容不换行只在一行内显示 white-space: nowrap 2，把div这行内溢出的部分文字隐藏 overflow:hidden 3，再把div内显示不全的的文字用省略号替代 text-overflow:ellipsis
阅读全文
摘要：主要原理： 1，先把盒子宽度和高度设置为0，只剩下边框，这样的话每个边框都会变成1个三角形 2，需要三角形朝向哪个方向，先把所有边框颜色设置为透明，然后只需设置这个方向的边框颜色就可以了（箭头方向和边框方向相反，比如需要箭头朝右就需要设置左边框颜色） width: 0px; height: 0px;
阅读全文
摘要：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head> <style>.a {color : #FFFF00;} .a:hover + .b{color : #00FF00;}.a:hover
阅读全文
摘要：使用方法：.父元素:hover .子元素（hover和子元素之间需要一个空格），如： .a:hover .b 演示效果：代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .alarm:ho
阅读全文
摘要：使用场景： 比如在视频缩略图上显示播放按钮 只需在背景图属性上设置个center值即可。 background: url(../images/play.jpg) no-repeat center;
阅读全文
摘要：1，元素为浮动时（float） 2，元素被设置为绝对定位时（absolute） 3，元素被设置为固定定位时（fixed） 4，元素的display属性为设置为none隐藏时（display:none）
阅读全文
摘要：iconfont使用说明： 1，下载对应的字体包 2，解压得到iconfont.css，在网页文件中引入iconfont.css 3，使用<i class="iconfont icon-sousuo"></i>显示字体，其中iconfont是固定类目， icon-sousuo是字体css名
阅读全文
摘要：CSS绝对定位下的水平居中原理： 1，先设置div绝对定位的左侧位偏移为整个网页body的一半也就是50% 2，再设置div左侧边距margin-left为这个div自身宽度的一半 如： .box3 { width: 150px; height: 26px; position: absolute;
阅读全文
浙公网安备 33010602011771号