css

最新文章

CSS三栏布局——flex

flex布局现在越来越流行,很多框架都采用flex布局。今天我们采用flex来实现三栏布局。首先父元素设置flex:display。左右分别设置flex: 0 0 200px。代码如下所示:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

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应用苹果的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变量的课程,它

CSS3:Flex布局

Flex是一种弹性布局,要分为两部分理解Flex:作用于容器(flex-container)的属性作用于容器里项目(flex-item)的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。主