随笔分类 - 前端html+css
摘要：每次公众号排版都去找免费模板，找的头都秃了，但其实好多编辑器（秀米和这个一样）都可以白嫖，教程很简单（需要简单能看懂代码（认识阿拉伯字母就行）） 这个96编辑器一直在用，模板超级多，基本上不用再为排版发愁了，一个模板套着弄，直接填文字内容换图片就可以，其实免费的已经够用了，但如果有VIP那就更加完美
阅读全文
摘要：方法一：通过 <router-link :to="">我要跳转，别拦我</router-link> 首页列表： 在这里我用a标签进行跳转，在vue里面使用<router-link></router-link> //注意：这里的router-link在前台解析的时候会自动变成a标签 <router-l
阅读全文
摘要：html代码如下 <div class="btn-home"> 这是一个按钮 <div class="line"></div> </div> css代码如下 查看代码 .btn-home{ position: relative; background-color: #fa5e2e; border:
阅读全文
摘要：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style type="text/css"> .bg{background-color: #666666;} </style> <u
阅读全文
摘要：Bootstrap 导航栏 | 菜鸟教程 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 响应式的导航栏</title> <link rel="stylesheet" href="https://c
阅读全文
摘要：效果 在线查看 代码少，都在HTML里 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
阅读全文
摘要：css3鼠标经过内容区时，边框线条特效效果制作。 html: <div class="strength grWidth hidden"> <div class="homeTitle"> <h2>为什么选择优胜空间？</h2> </div> <ul class="strengthMain"> <li>
阅读全文
摘要：ul li ：后代选择器，ul 里所有的 li 元素，包括 ol 里的 li ; ul>li ：子代选择器，下一级的DOM节点，不包括 ol 里的 li 。 ul>ol>li ：子代选择器必须一代接一代。 1 <ul> 2 <li>111</li> 3 <li>222</li> 4 <li>333<
阅读全文
摘要：前言 不像响应式布局，通过media query，设置几个变化点来适配，流体排版通过调整大小，适配所有设备宽度。这个方法可以使我们开发的网页，在几乎所有屏幕尺寸上都可以使用。但出于一些原因，它的使用率还远远没有响应式技术高。 在印刷的历史上，排版是根深蒂固的。关于“流体”的概念，在传统思想里并不存在
阅读全文
摘要：使用Sass优雅并高效的实现CSS中的垂直水平居中 移动端总结 布局神器：display:flex css3中提出了一种新的布局模式：弹性盒子（flex box）。 它是一种当页面需要适应不同的屏幕大小和设备类型时确保元素拥有恰当的行为的布局方式。 目的是更好的对一个容器中的子元素进行排列，对齐，和
阅读全文
摘要：使用@keyframes规则，可以创建动画。 在动画的过程中，可以多次更改css样式的设定。 对于指定的变化：发生时用0%，或关键字“from”和“to”，这与0%和100%相同。 0%：开头动画。 100%：动画完成。 语法：@keyframes animationname { keyframes
阅读全文
摘要：无论如何改动border，margin与padding的值，都不会导致box总尺寸发生变化。 建议学习和设置此属性： *{box-sizing:border-box} 不改变box-sizing的话，边框计算结果如下 width(宽度) + padding(内边距) + border(边框) = 元
阅读全文
摘要：最近的一个项目中要使文字垂直排列，也就是运用了CSS的writing-mode属性。 writing-mode最初时ie中支持的一个属性，后来在CSS3中增添了这一新的属性，所以在ie中和其他浏览器中的语法会有区别。 1.0 CSS3标准 writing-mode:horizontal-tb;//默
阅读全文
摘要：在css样式文件中增加如下代码：（建议放在文件最上方） ::selection { background: hsla(5, 92%, 76%, 0.8); color: #fff; }
阅读全文
摘要：详解使用CSS3的@media来编写响应式的页面
阅读全文
摘要：一般网站如果制作按钮，多做一些互动，可以让客户获得更好的体验。 例如鼠标滑过按钮，让背景颜色从左往右滑出来（或者从右往左都可以）： <a target="_blank" href="#" class="butn white"><span>观众预登记</span></a> 默认状态的css： .but
阅读全文
