我们经常使用一些excel表格来处理数据，在html中，我们可以用table来制成表格。今天来看一下一些不同的方法。方法一：使用CSS3的background的linear-gradient属性linear-gradient表示一种线性渐变，指定好开始的坐标，以及线性渐变的参数，就可以实现背景颜色的多变。先来看效果图：看html代码：<div class="grid"></div>CSS代码： div,canvas{width: 400px;height: 280px;margin: 10px;border: 1px solid #000000;}.grid{b...
css3按钮<!doctype html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"><link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css"><script src="com/js/jquery.js" type="text/javascript"></s...
CSS Filter 是 IE 特有的技术，其他浏览器均不支持，所以为了最大的兼容性及标准化，应尽量避免为 IE 单独使用 Filter，如需要其某些特效，应同时考虑其他浏览器， 图片渐变 复制代码代码如下:<img src="..." width=400 height=300 style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100)"> 表格渐变 复制代码代码如下:<table style="FILTER: Alpha( style=1,opacity=25,finis...
伪类选择器：伪类是直接在元素后面加“:”,例如a:hover,可直接在css中用而不用在html中像类一样定义,因为是浏览器预先设定好的。a一般顺序是:a:link{} 未访问状态链接a:visited{}已访问状态链接a:hover{}鼠标悬停上时状态还有其他伪类,如first-child对应第一个子元素,last-child最后一个子元素,nth-child(even/2n)第偶数个子元素,nth-child(odd/2n+1)第奇数个子元素。 盒模型的定义： css将每个元素都看做一个盒子,包括以下属性...
表格 —— 默认样式重置表格标签： table 表格 thead 表格头 tbody 表格主体 tfoot 表格尾 tr 表格行 th 元素定义表头 td 元素定义表格单元表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充 单元格合并rowspan 属性规定单元格可横跨的行数。 <td rowspan="2"></td>colspan 属性规定单元格可...
font-family的调用方法:div {font-family:Arial,‘Times New Roman‘,‘Microsoft YaHei‘,SimHei; font:bold12px/0.75em Arial,‘Times New Roman‘,‘Microsoft YaHei‘,SimHei; }依据font-family的原则,假如客户终端不认识前面的字体,就自己主动切换到另外一种字体,另外一种不认识就切换到第三种,以此类推.假如都不能识别就调用默认字体依据font-family的字体调用原则我们能够为英文,中文,等两种字体调用不同的字体来渲染.如...
1-设置input的placeholder的字体样式input::-webkit-input-placeholder { /* Chrome/Opera/Safari */color: red; } input::-moz-placeholder { /* Firefox 19+ */ color: red; } input:-ms-input-placeholder { /* IE 10+ */color: red; } input:-moz-placeholder { /* Firefox 18- */color: red; } input:focus { /*设置input聚焦时的样式- */background-color: red; } input{border: none; /* 取消input的边框- */out...
CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)来源：互联网 作者：佚名 时间：03-28 14:17:14 【大中小】border-radius：用这个属性能实现圆角边框的效果。现在只有Mozilla/Firefox 和 Safari 3支持该属性。-webkit-border-radius：苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核； -moz-border-radius：moz这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性。 在这两个属性有值的时候...
学习来源:慕课网http://www.imooc.com/view/240先看效果图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ HTML结构 1<body> 2<div class="wrap effect"> 3<!-- effect类:是阴影类,其他元素也可以使用 --> 4<h1>Shadow Effect</h1> 5</div> 6<ul class="box"> 7<li><img src="images/photo1.jpg" alt=""></li> 8<li><img src="images/photo2.jpg" alt=""></li> 9<li><img src="images/photo3.jpg" alt=""></li>10</ul>11</body>CSS样...
Css内容： 常用样式：字体、颜色、背景。。。 字体：大小、颜色、粗细、字体Text-decoration：文本修饰{overline 上 Underline 下 Line-throung 中}Text-indent：缩进字体：Font-family：Font-style：italicFont-size：Font-weight：加粗List-style-type： none（list-style：square url）取消图标Background-image：图片Line-height：设置居中 例30pxCursor：设置鼠标光标形...
关于选择器，好多人小伙伴只用了最基本的几个选择器，感觉这玩意没有啥学的，讲道理，确实也没啥学的。但是，选择器种类掌握的越多，编写代码起来就会越轻松，为啥呢。举个例子吧！先上一串代码和效果，就知道我想表达什么了！上面一个五列的li,代码如下<style>*{margin:0;padding: 0;list-style: none}ul{display: flex}li{flex: 1;text-align: center;border-left: 1px solid red}li:nth-child(1){border-left:none}</style><ul>...
【本博客为原创：http://www.cnblogs.com/HeavenBin/】 前言： 在工作中编写CSS样式表时随着选择器层数的增加总会看到选择器又丑又长的情况，利用工作之余研究从其命名再到如何提高其性能。本博客将以“通俗易懂”、“简洁””的方式来探究CSS选择器的性能，以及叙述总结如何提升CSS选择器的性能。(2017-8-20) 一. CSS选择器性能是如何消耗的？工作原理：浏览器利用CSS选择器来匹配文档元素。工作流程：例如 #hd .nav > a { pad...
从10月8号到今天23号，来到工作已经半个月了，这是我人生中真正意义上的一次步入社会，用自己20年的坚持和努力取得的人生第一步，说实话，感觉自己真的是个lucky dog，好像是在眷顾我，所有的事情都是那么顺利，让我没有理由不珍惜现在的所有，谢谢老师，一次次的满足我的请求，这半月我收货到的不管是从为人处世，团队管理，还是技术方面都很多，所以每天晚上睡觉都会一躺就着，因为一睁开眼就会忙碌一天，不过真的真的很充实，下...
有的时候，由于页面长度不够，页面底部的页脚会很尴尬的跑上来，如图：有的同学可能会想用position:fixed;bottom:0;来永远居底。但有些场景确实不适合。这是我从YII2中找到的简单解决方案原理是将最外围的容器.warp 设置最小高度为100%，并且使用margin:0 auto -60px 将页脚吸上来。如图： demo：主要看CSS部分<html><head><meta charset="UTF-8"><title>css - 紧贴底部的页脚</title><link href="https://cdn.bootcss.com/bootstr...
思路：1，先做1个正方形，然后旋转45°即可让箭头分别朝向上下左右2，需要那个朝向的箭头就分别设置这个箭头两边边框颜色，如下代码可以实现箭头朝右div {width: 8px;height: 8px;border-top: 1px solid #666;border-right: 1px solid #666;transform: rotate(45deg); } 原文：https://www.cnblogs.com/JeffreyZhu/p/15177160.html