CSS三栏布局——flex
flex布局现在越来越流行，很多框架都采用flex布局。今天我们采用flex来实现三栏布局。首先父元素设置flex:display。左右分别设置flex: 0 0 200px。代码如下所示：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
css
CSS三栏布局——双飞燕定位
这种布局方式需要对父容器设置padding，使用padding来给左右两栏空出空间如果左右两边使用绝对定位，那么方法就和上一节的方法差不多，如果使用相对定位，在结合浮动的话，方法代码如下：<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <titl
CSS三栏布局——定位
这里首先让中间栏绝对定位，两边栏相对定位；这里需要注意的是，如果中间使用绝对定位，不设置宽度的话将会撑不开容器；因此，中间使用了相对定位后，同时设置margin-left和margin-right给左右两栏一定空间，然后左右两栏不管是相对定位还是绝对定位都可以，这里我们使用绝对定位：<!DOCTYPE HTML> <html lang="en-US"> <head&g
CSS三栏布局——浮动
不使用定位，只使用浮动实现左右固定，中间宽度自适应布局实现关键：自适应部分一定要放在第一个位置，使用浮动，且宽度设置为100%，如果不设置为100%，浮动元素内容不够撑开整个宽度。左右固定部位，使用margin-left :负数，使其左右靠齐。中间自适应部分嵌套一个div，设置margin-left 和 margin-right 使其空出左右固定的宽度。代码如下：<!DOCTYPE HTML
CSS去除和修改input[type=search]后面的小x样式
默认情况下input[type=search]，当有输入时，在输入框后会有一个”x“，用于快速清除输入的内容。但有时样式和页面不搭配，需要删除或者修改样式。删除webkit-search-cancel-buttoninput[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }修改webkit-
去掉a标签内部元素文本的下划线
a标签内文本去掉下划线要给a标签内的文本去掉下划线，只需要设置a的text-decoration为none例如：a，a:hover { text-decoration: none; }a标签内元素设置text-decoration:none 问题html<a> <p>hello word</p> <a>这样p标签内的文字页会出现下划线：
用来显示页面布局，margin，padding的CSS hack
在做前端开发过程中，有时要查看整体页面的布局，padding，margin。设置是在不同浏览器的实现情况。以下Javascript脚本可以添加到浏览器的书签中，用来打开显示页面的布局，margin以及padding。CSS hack脚本javascript: (function() { var elements = document.body.getElementsByTagName('*');
禁止input文本框输入实现属性
今天想总结几个很有用的html标签，开发中经常用到，不熟悉的人可能还真不太清楚，分别是： 复制代码代码如下:readonly、disabled、autocomplete readonly表示此域的值不可修改，仅可与 type="text" 配合使用，可复制，可选择,可以接收焦点，后台会接收到传值. 复制代码代码如下:<input type="text" name="www.xxx" read
一段简单的css debugger代码
在做前端开发常常需要给元素添加一些轮廓来debug页面元素的布局，在github上看到一段很简单的js代码，它结合了css，给元素添加轮廓，以便对css，html页面观察dom元素的布局。完整代码如下：/* debug.css | MIT License | zaydek.github.com/debug.css */if (!("is_debugging" in window)) { is
重新触发CSS3 animation和@keyframes定义的动画
结合CSS3的animation和@keyframes可以给元素定义动画，定义一个标题进入的动画如下：只运行一次动画scss@keyframes my-animation { from { opacity : 0; left : -500px; } to { opacity : 1; left : 0; } } .run-
CSS3使用transition属性实现过渡效果
属性详解transition属性目的是让css的一些属性（如background）的以平滑过渡的效果出现。它是一个合并属性，是由以下四个属性组合而成：transition-property：设置应用过渡的CSS属性，如background。transition-duration：设置过渡效果花费的时间。默认是 0。transition-timing-function：设置过渡效果的时间曲线。默认是
Bootstrap在图片内居中显示文字
图片的父容器position设置为relative。文字position设置为absolute。.thumbnail { position: relative; } .caption { position: absolute; top: 45%; left: 0; &nbs
CSS让绝对定位的元素居中的办法
水平居中，设置left:0,right:0， 垂直居中，设置top:0,bottom:0。margin设置为auto<!DOCTYPE html> <html lang="en"> <head> <title>SO question 2803532</title> <style type="text/css
CSS使用flex布局和order属性对html元素排序
html如下：<div class="container"> <div class="type-a">A</div> <div class="type-b">B</div> &l
CSS应用苹果的San Francisco字体
优先选择苹果字体，并兼容其它平台的字体。font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,"Helvetica Neue",Arial,sans-serif;
CSS 输入框focus自动隐藏placeholder（兼容多浏览器）
这是使用纯CSS来说实现：当输入框获取焦点时，自动隐藏placeholder，分别支持WebKit，Firefox 4+，IE 10+。/* WebKit浏览器 */ input:focus::-webkit-input-placeholder { color:transparent; } /* Firefox 4 至 18 */ input:focus:-moz-p
html给文本输入框添加自定义的清除按钮
使用HTML 5，如果对清除按钮的样式不介意的话，可以使用search类型的输入框，它会提供一个默认的清除按钮<input type="search" placeholder="搜索" /> 如果想自定义清除按钮，则需要自己实现，这里使用jquery给出一个实现的方案：<!DOCTYPE h
解决IE11 Flex布局文本不换行的问题
在页面上使用了flex来布局，代码如下：CSS：.container{ display: flex; flex-direction: column; border: 1px solid red; align-items: center; } .item { border:
适用于PC/平板/手机设备的CSS媒体查询
用于PC，平板电脑以及手机的CSS媒体查询/* ##PC ##1281px或更高分辨率 */ @media (min-width: 1281px) { //CSS } /* ##笔记本或PC ##1025px - 1280px */ @media (min-width: 1025px) and (max-width: 128
[译]CSS变量实现酷炫的悬停效果
我最近受Grover网站上有趣悬停动画的启发。 将鼠标移动到订阅按钮上可以显示光标移动后的彩色渐变。 这个想法很简单，但效果是按钮会脱颖而出，并得到点击。我们怎样才能达到类似的效果，让我们的网站脱颖而出呢？ 其实，它不像你想象的那么难！跟踪位置我们首先要获取鼠标的位置。document.querySelector('.button').onmousemove
CSS设置placeholder字体样式
CSS标准里是没有直接对placeholder设置样式的选择器，这里主要是通过各个浏览器的兼容前缀来给输入框的placeholder设置字体样式。/* WebKit browsers*/ input::-webkit-input-placeholder { color:#999; font-s
如何使用CSS变量让响应式变得超级简单
本文是关于如何在2018年创建响应式网站的快速教程。如果你之前没有听说过CSS变量，它就是CSS的新增功能，它让你可以在样式里使用变量的功能，而无需进行任何设置。实质上，CSS变量允许你跳过设置样式的旧方式：h1 { font-size: 30px; } navbar > a { font-si
[译]5分钟内学习CSS变量
CSS自定义属性（也称为变量）对于前端开发人员来说是一个巨大的胜利。 它将变量的强大功能引入CSS，从而减少重复，代码更可读以及更灵活。另外，与CSS预处理器的变量不同，CSS变量实际上是DOM的一部分，它是有很多好处。 所以他们基本上像SASS和LESS的变量。 在这篇文章中，我会给你一个关于这种新技术如何工作的速成课程。我还创建了一个免费的关于CSS变量的课程，它
[代码] 使用less实现圆圈环形进度条（CSS3）
示例为使用less实现的环形进度条：html<div class="radial-progress" data-progress="0"> <div class="circle"> <div class="mask full">
CSS3：Flex布局
Flex是一种弹性布局，要分为两部分理解Flex：作用于容器（flex-container）的属性作用于容器里项目（flex-item）的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后，我们就可以确定了Flex分布的主轴（main axis）以及交叉轴（cross axis）。主
数据加载中