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