本文也算是一篇教程，可以给 hugo 网站加个搜索功能，并且实现热更新，体验感更好。...2. js代码 在 /layouts/_default 新建一个模板文件 search.html，大致的结构参考其他模板文件，然后写入我们需要的内容。...首先是一个简单的 html 结构，给input绑定一个事件。...: center; height: 36px; } .search #searchTerm { width: 100%; height: 100%; outline: none; border...resultsContainer div a { display: block; width: 100%; padding: 6px 10px; transition: all 0.1s linear; border-radius
给博客园加一个会动的小人-spig.js 效果大概是这样，感觉十分可爱qvq ? ? 那么怎么添加呢？ 首先需要开通js/html权限。...然后在页脚html代码中加入以下代码 js的地址,代码在下面"> border-radius:5px;-webkit-border-radius:5px;border-radius:5px...顺便吐槽一句，原作者给的api都挂的差不多了，然鹅我是个js菜鸡连get/post都不会，所以凑合着改了一下api，欢迎各位大佬给出更好的解决方案qwq //右键菜单 jQuery(document)....~~","从前有座山，山上有座庙，庙里有个老和尚给小和尚讲故事，讲：“从前有座……”"]; var i = Math.floor(Math.random() * msgs.length)
今天是国庆节也是中秋节，首先祝大家节日快乐，本文我们使用 Python 来给自己的头像加一个小国旗或小月饼。...月饼 对于月饼，同样的也可以用 Python 来画一个，月饼组成元素主要包括：外层圆形的花纹轮廓、内层轮廓和文字。...给头像加个小国旗，效果如下： ? 给头像加个小月饼，效果如下： ?源码对我最大的支持 在公众号后台回复 201001 获取。
注意要把显示的元素加在 hover 后面 六、元素整体透明度 属性名：opcity （取值：0-1） 配合js...属性：border-collapse:collapse; （ 给table标签加） 八、CSS画三角形 书写一个盒子 (宽高都为0)...盒子添加四个方向的border 保留一个方向的border，其他的颜色设置透明（transparent） .one{...创建一个盒子 2. 通过PxCook量取小图片大小，将小图片的宽高设置给盒子 3. 将精灵图设置为盒子的 背景图片 4. ...通过PxCook测量小图片左上角坐标，分别取 负值 设置给盒子的background-position：x y 精灵图的标签都用行内标签 移动背景图位置：backkground-position
（图片来自网络） 从上图看出： 标准盒模型： 盒子总宽度 = width + padding + border + margin; 盒子总高度 = height + padding + border +...width/height 包含了 padding 和 border 值 以上就是标准化理解，我来说说我的理解： 在CSS中，我们给一个div设置了width（宽度） 对于标准盒模型(content-box...)： 设置的width就是我内容的宽度，如果你还要加padding / margin之类的，你就只有向外面挤。...那如果我还要加padding和margin怎么办？只能压缩真正的内容显示区域了，整个盒子的宽度和高度依然不变。...JS获取宽高度 （1）dom.style.width/height 只能取到行内样式的宽和高，style 标签中和 link 外链的样式取不到。
然后，点击「换个头像」来选择你想要加圣诞帽的图片。 点击「开始制作」后，选择下方的圣诞帽，这款小程序提供了 27 款圣诞帽/头饰供你挑选，点击载入任意圣诞帽/头饰，手动拖拽调整大小，角度和位置。
方法一： <script type= "text/javascript"> //保留三位小数，toLocaleString() 方法可把一个 Numbe...
一、CSS盒子模型 ? ...盒子的构成为： 1.盒子的内容区：content. 2.盒子的边框：border（border-top、border-right、border-bottom、border-left）.... 3.盒子的边框与内容之间的距离：padding(padding-top、padding-right、padding-bottom、padding-left). 4.盒子与盒子之间的距离：...要考虑到内填充、外填充、边框、边界的存在） （在使用外边距时一定要注意浏览器的兼容性，不兼容的情况下，可以使用给外面的盒子加边框的方法来解决此问题；除了值为零的情况下，所有的非零的值后面都要加单位）... [3]外填充属性margin（内外填充属性都可以使用关键字-方向的方法来进行css操作，但一般还是使用直接用关键字的方法来控制，如：margin-top、margin-right、margin-bottom
前一段时间在淘宝买了个毛绒玩具（蓝胖子），收到快递，在拆解过程中： 1.width 装玩具的盒子的宽度 2.height 装玩具的盒子的宽度 3.border 装玩具的盒子的厚度 4.padding 玩具和盒子之间的距离...（蓝胖子不能压瘪，要不然差评，所以它被保护的很好） 5.margin 我快递盒子和放快递的大盒子之间的距离 有个现象是，当盒子的长和宽固定后， border 和 padding 增加，都会改变整体的尺寸...因为 padding 增加后（即玩具和盒子之间的填充泡沫太多了）盒子被撑大了；border 增加后（商家比较有良心，换了个特厚实的盒子），所以快递变大了。...我们可以通过将函数名赋值给元素事件属性的方式将事件和函数关联起来。...封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全.
盒子中的区域 一个盒子中主要的属性就5个：width、height、padding、border、margin。...} 真实占有宽度= 左border + 左padding + width + 右padding + 右border 加padding 需要减width ?...清除浮动方法1：给浮动的元素的祖先元素加高度。 如果一个元素要浮动，那么它的祖先元素一定要有高度。高度的盒子，才能关住浮动。 ? 只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。... 6 7 → 设置height 8 9 10 clear:both;法 最简单的清除浮动的方法，就是给盒子增加...墙用自己的身体当做了间隙。
calc() 可以通过计算的方式给元素加尺寸，比如： width：calc(25% - 4px); box-sizing 1、content-box 默认的盒子尺寸计算方式 2、border-box...red;设置盒子顶部边框为3像素宽的红色的实线 border-left 设置盒子左边边框的三个属性 如：border-left:3px dotted red;设置盒子左边边框为3像素宽的红色的点线 border-right...设置盒子右边边框的三个属性 如：border-right:2px dashed red;设置盒子右边框为2像素宽的红色的虚线 border-bottom 设置盒子底部边框的三个属性 如：border-bottom...:1px solid red;设置盒子底部边框为1像素宽的红色的实线 border 同时设置盒子的四个边框，如果四个边的样式统一就使用它 如：border:1px solid #000 设置盒子四个边都是...，如：box-sizing:border-box 将盒子的尺寸计算方法设置为按边框计算，此时width和height的值就是盒子的实际尺寸 border-collapse 设置表格边框是否合并，如：border-collapse
0px; padding: 0px; } 此时，我们再看一下，样式（把上次的代码再给大家粘贴一下）： lesson4.html <!...: 10px solid #f00; border-left: 10px solid #0f0; border-right: 10px solid #00f; border-bottom...这是因为行内元素是不能修改宽和高的，这时候我们用display: inline-block就可以了： ?...现在又出现了另一个问题，就是大家发现上面两个盒子中间多了一个空白的地方，而且空白地方无法选中，说实话如果你用inline-block那么中间这个间距就是默认自带的了(如果非要去掉就要加float: left...现在我们盒子和浏览器边缘是没有间距的，现在我们希望它离浏览器有一段距离，我们加一个margin: 10px;属性，然后再看： ? 我们看到它和浏览器之间有了边距，我们再来看一下现在盒子的大小： ?
浏览器给默认的margin大小是8个像素，此时占据了整个页面的一大部分区域，而不是全部区域。...认识width、height 真实占有宽度 = 左border + 左padding + width + 右padding + 右border 如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减...padding，加padding的时候就要减width。...方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。...题目2：现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。 ?
id一般配合js使用。 #id+{CSS} 通配符选择器。在极特殊情况下才会用到。找到页面中所有的标签，设置样式。...一般直接属性连写：如：border : 10px solid red; 当只给盒子的某个方向单独设置边框：border - 方位名词 : 10px solid red 例如，下面代码设置盒子模型：...（分隔父子元素的margin-top） 给父元素设置overflow：hidden 转换成行内块元素 设置浮动 行内元素加margin和padding只有水平生效 ---- 附加：父盒子中小盒子居中方法...解决 给父元素设置高度（脱裤子放屁，来回麻烦） (额外标签法)：在父元素最后加个块级元素，给块级元素设置clear:both==>缺点：麻烦 (单伪元素清除法)：在2的基础上，用伪元素替代额外标签，...如： /*只给左上、右上、右下进行了赋值*/ border-radius: 40px 80px 120px; 效果： 案例： 1.画圆圈：（盒子必须是正方形，边框圆角为盒子宽高一半） 添加属性
但是它只针对于行内元素或者行内块元素有效 让图片和文字垂直居中，修改的是img或者textarea属性,行内块元素都可以 图片底侧空白缝隙解决： bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐（给图片加边框就可以看见...webkit-line-clamp: 2; /* 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient : vertical; 8.常见布局技巧 margin负值的运用 两个盒子加边框...1px，浮动，贴紧会出现 1 + 1 = 2px，从而边框加粗，要解决该状况： 所以给右边盒子添加margin-left: -1px，让每个盒子 margin 往左侧移动 ，-1px 正好压住相邻盒子边框...此时如果要让盒子发生变化，标准流中的盒子发生变化就会因为重叠有一部分不会变，所以提高当前盒子的层级即可： 如果没有定位，则加相对定位(保留位置，并且能覆盖标准流) 如果有定位，则加 z-index...把这些链接盒子转换为行内块，之后给父级大盒子指定 text-align: center，行内块元素会水平居中，之后操作就轻车熟路了。
二、css3和css2的区别 css3在原有的基础上新增了很多css属性选择器，伪类选择器，伪对象选择器以及动画 H5=html5 + css3 +js 大前端：js 1.内减模式 可以将padding...内边距和边框带来增大盒子的影响去掉 语法：box-sizing:border-box; 无标题文档 这是盒子2 这是盒子3 这是盒子...1 这是盒子2 这是盒子3 这是盒子...:1px solid #000; /* 加过渡效果，必须是在元素原本的样式上面加，不在伪类上加 */ transition:transform 2s linear; } img:hover{
用 对象:字符串数组 储存 用户可能访问的路径。...hidden 设定是否隐藏 data- 设定组件自定义的数据，封装在事件对象中，在事件发生的时候传递数据给 事件处理函数。...组件类别由两个封装，最后一个加/。 第一个中可以写组件的参数。 样式控制 为了让一些组件使用相同的配置类，使用view进行组件划分 (和html的div作用相同) 。...像素的间隔 border-radius: 50%; 图片圆形边框 问题： 1.赋值分散 2.严重依赖页面结构和实际内容大小 使用弹性盒子： .container { background-color...把弹性盒子的设定封装在container中，每个页面都可以调用。 注意：container放在全局用（app.wxss），某个page的wxss中的东西不能给其他page用。
定位 将盒子定在某一个位置 自由的漂浮在其他盒子的上面 —— CSS 离不开定位，特别是后面的 js 特效。 2....它相当于 border 里面的none， 不要定位的时候用。 静态定位 按照标准流特性摆放位置，它没有边偏移。...z-index 的特性如下： 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上； 如果属性值相同，则按照书写顺序，后来居上； 数字后面不能加单位。...所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。...（我们以前是用padding border overflow解决的） 也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。 6. 综合演练 - 淘宝轮播图 ?
周围出现阴影，表现出被选中的效果二、代码实现提前导入jQuery文件：js...">1.HTML代码用jQuery实现元素被点击选中的效果 元素1 元素2...:1px solid #aaabad;width:700px;margin:auto;}/*给盒子设置样式*/.box>div {border: 3px solid dodgerblue;margin:...30px auto;padding: 15px;border-radius: 10px;/* 定义元素的变化参数，持续时间0.5s，元素所有属性都变化 */transition: all 0.5s;-...0.5s;}#all-selected:hover{background-color:#c9c9c9;}3.JS代码 // 设置一个变量symbol，来判断当前的状态是否为选中
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
