CSS - 技术教程文章
CodeIgniter(3.1.4)框架使用静态文件（js,css）【图】
调整目录结构： 可以在控制器中这样加载视图：* 加载url辅助类。 views视图中可以这样引用静态文件： 则最终的静态文件url会生成这样： 原文：http://www.cnblogs.com/hfultrastrong/p/6819042.html
css盒模型简介----神奇的盒子【图】
css盒模型是网页布局中的基石，就好比大盒套小盒，环环相扣，缺一不可。那接下来就简单的介绍一下盒模型。Come on,逆战来也！！！1. 盒模型的结构 从里到外包括：content（内容）-----------------手机 padding（内填充 补白）----泡沫 border（边框） -----------------包装盒 margin（外边距）---------------盒子与外...
CSS3+HTML5特效1 - 上下滑动效果【代码】【图】
先看看效果，把鼠标移上去看看。backfront 1. 本实例需要以下元素： a. 外容器 box b. 内容器 border c. 默认显示内容 front d. 滑动内容 back2. 外容器BOX的Height为200px，Width为200px；1.box1{ 2 position: relative; 3 top: 100px; 4 left: 100px; 5 width: 200px; 6 height: 200px; 7 border: 1px solid #ccc; 8 overflow: hidden; 9 }3. 内容器BORDER的Height为200%，Width为100%，Top为-100%； 1.bord...
html5 css
本文转自：http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 一、"自适应网页设计"的概念2010年，Ethan Marcotte提出了"自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。如果屏...
DIV+CSS网页布局常用的一些基础知识整理【代码】【图】
CSS命名规范一．文件命名规范 全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；二．常用类/ID命名规范页 眉：header内 容：content容 器：container页 脚：footer 版 权：copyright 导 航：menu主导航：mainMenu子导航：subMenu 标 志：logo标 语：banner标 题：title侧边栏：sidebar 图 标：Icon注 释：note搜 索：search按 钮：btn登 录：login链 接...
CSS3 object-fit 属性【代码】
做项目经常会遇到图片列表展示，图片一般是用户从后台上传的，上传的图片尺寸千差万别。如果前端不控制图片大小，整个排版就会很乱，如果给定长宽，图片又会变形，用背景图片来处理有特别麻烦。这个问题一直苦恼了我好久，最近终于找到解决办法了。css有一个object-fit属性，用来指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框，效果类似于微信小程序里image标签的mode属性。1.首先是一个html结构，然后给定图片高宽...
CSS3 选择器
纪念一次惋惜的面试经历，明明知道但是保守的没有全说出来。。。first face _shp欣 在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）选择器例子例子描述CSS.class.intro选择 class="intro" 的所有元素。1#id#firstname选择 id="firstname" 的所有元素。1**选择所有元素。2elementp选择所有 <p> 元素。1element,elementdiv,p选择所有 <...
css书写规范以及如何写出赏心悦目的代码
css书写规范： 1. 编码统一为utf-8;2. 协作开发及分工: i根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件,同时根据页面相似程序，事先写好大体框架文件。共用css文件base.css由i书写, 协作开发过程中, 每个页面务必都要引入, 文件包含reset及头部底部样式, 此文件不可随意修改;3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id...
CSS截取字符串，多余文字用省略号显示
最近才知道css也有这么叼炸天的一面~~~做个类似论坛的页面，用户头像70px，但是用户名没法限定啊，英文中文都可以，你说他要是取个“我的名字好长呀，你该怎么办呢”，那老衲不就蛋疼菊花紧了~~幸好，老衲于不幸中的万幸中发现了css这么叼炸天的一面，以前一直不知道，写出来分享给大家很简单，大屁不多放，直接开菊花：css里面如下设置：a.name{line-height: 30px;text-align: center;text-overflow:ellipsis;//让超出的用...实现...
CSS3实现投影效果【代码】
Webkit引擎定义了-webkit-box-reflect属性，该属性能够实现投影效果，具体语法如下：-webkit-box-reflect: <direction> <offset> <mask-box-image>属性取值说明如下：<direction>：定义反射方向，取指包括above、below、left和right。<offset>：定义反射偏移的距离，取指包括数值或者百分比，其中百分比是根据对象的尺寸进行确定，如果省略该参数值，则默认为0。<mask-box-image>：定义遮罩图像，该图像将覆盖投影区域。如果省略该...
CSS样式【图】
CSS简介层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 属性和属性值属性属性的名字是一个合法的标识符，它...
CSS3
frameset 框架 分为水平框架 垂直框架 不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。transition 过渡transition-pro...
CSS自定义滚动条样式
转自：http://www.yiyifly.com/blog/下面是代码:html {overflow: auto;}body {position: absolute;top: 0;left: 0;bottom: 0;right: 0;overflow-y: scroll;overflow-x: hidden;}/*滚动条宽度*/::-webkit-scrollbar {width: 8px;}/* 轨道样式 */::-webkit-scrollbar-track {}/* Handle样式 */::-webkit-scrollbar-thumb {border-radius: 10px;background: rgba(0,0,0,0.2);}/*当前窗口未激活的情况下*/::-webkit-scrollbar-thumb:wi...
关于CSS中的元素定位【代码】【图】
---恢复内容开始---CSS 定位和浮动CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。一切皆为框div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相...
CSS之:active选择器【代码】
Active的一段话 active的英文解释为“积极的”，表现在鼠标上就是点击的意思。关于active选择器最多的示例恐怕就是应用在链接上面的，然而打开链接是一个一瞬间的动作，这不能很好的体现active选择器的特点。 Active的特点其实我们打开一个带有active链接，激活acive是有一个过程的，就是点击模块后直到松开模块。如果我们不指定这个过程所花费的时间，笔者认为其默认花费零点几秒。<!DOCTYPE html> <html><head><title>a</title><...
css属性2【代码】
css属性<style>div{border: 1px solid red;width: 100px;}.div1{width: 100px;height: 100px;/*外边距*//* margin: 50px; */}.div2{width: 200px;height: 200px;padding: 50px;/*设置盒子的属性，让width和height就是最终盒子的大小*/box-sizing: border-box;}.div3{float: left;}.div4{float: left;}.div5{float: right;}</style> <div class="div2"><div class="div1"></div></div><div class="div3">aaaa</div> <div class="di...
《CSS3实战》笔记--溢出文本省略：text-overflow和文本换行显示：word-wrop【代码】【图】
通过阅读和学习书籍《CSS3实战》总结 《CSS3实战》/成林著.—北京机械工业出版社2011.5语法：text-overflow：clip | ellipsis | ellipsis-word取值简单说明：clip属性值表示不显示标记，而是简单的裁切。ellipsis属性值表示当对象内文本溢出时显示省略标记，省略标记插入的位置是最后一个字符。ellipsis-word属性值表示当对象内文本溢出时显示省略标记，省略标记插入的位置是最后一个词（word）。?实际上，text-shadow属性仅用于决...
css中的四种定位方式示例介绍
复制代码代码如下:/*通配符选择器*/ *{ margin:0px; padding:0px; } /*div的选择器*/ .div1{ border:1px solid red; background:silver; width:60px; height:30px; float:left; margin-left:5px; } .div2{ position:relative; left:10px; top:10px; width:100px; height:80px; background:pink; float:left; margin-left:5px; } /*相对定位，他原来的空间任然保留*/ #spe{ position:relative; top:40px; left:20px; } /*绝对定位:元...
CSS3 （一）
text-shadow属性:文本阴影 text-shadow: 5px 5px 5px #FF0000; 向右5像素 向下5像素 模糊程度5像素 红色#s1 {font-size:40px; font-family:微软雅黑; -webkit-transition:1s all ease; text-shadow:0 0 0 black,0 0 0 black,0 0 0 black;}#s1:hover {text-shadow:0 0 10px black,0 0 10px black,0 0 10px black;} -webkit-linear-gradien属性：文本线性渐变 -webkit-linear-gradien( 30deg, rgba(255,0,0,0.8) 0%, rgba(0,255...
精选12个时尚的 CSS3 效果【附源码下载】【图】
这里是精选的12个很炫的 CSS3 效果。CSS3 是对 CSS 规范的一个很大的改善和增强，它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写复杂的 JavaScript 代码才能实现的效果，如今只需要简单的写几句 CSS3 代码就能实现。超炫的 CSS3 页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗列了一组动画，可以被应用到页面切换过程中，创造出很有趣的导航效果。源码下载...
HTML-HTML5+CSS3权威指南阅读（五、深入理解viewport）
1.手机浏览器与桌面浏览器的不同现在手机浏览器的显示分辨率与桌面浏览器差不多，但是手机的尺寸比电脑要小很多。一个没做过响应式处理的网站，在手机和电脑上显示完全一样的内容， 不可避免的会出现字体被缩小的现象。想象一下电脑里12号字体缩小好几倍的效果吧。 所以如果将web网页移植为wap应用上，还是有许多问题需要考虑。2.理解两个viewport的概念做过wap开发的都知道 html的 <meta name=”viewport”> ,这是一个从iphone引入...
MVC-采用Bundles方式引入css和js文件【代码】【图】
优点：修改js或css时会自动生成hash版本号。缺点：需要在BundleConfig中先添加对应的文件，然后在html中再引用对应的bundle，多操作了一步。web.config中 <compilation debug="true" targetFramework="4.5" />1、BundleConfig 如果是调试模式，前端页面会显示真实的js、css路径，生产环境是会显示前面的路径。在bundles中还可以使用通配符引用。 bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{...
html引入css不显示问题【代码】【图】
html{width: 100%;height: 100%;margin:0px;padding:0px; }body{margin:0px;padding:0px;width: 100%;height: 100%; }#container{background:yellow;width: 100%;height: 100%;margin:0px;padding:0px; }试过很多次,如果不把html的高度宽度设定,那么全页面就没有任何值; 在引入css时特别注意路径问题; 比如 下图 css 和html分别为一个文件夹; 里面的内容导入要使用../css/layout.css 原文：http://www.cnblogs.com/JohnChen-happ...
css3新属性transform 3D的基础笔记.【代码】【图】
研究了下css3中的 transform变换属性中的3D属性效果和看到的一篇好文章了解到了3D的学习;好文章地址:http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ 下面只是自己能读懂自己写的代码例子:<style>#box{-webkit-perspective:800px;//定义3D场景大小-webkit-transform-origin:50% 50%;//定义3D场景的中心点perspective:800px;transform-origin:50% 50%;}.box{width:200px;height:20...
css 变量教程【代码】
一、变量的声明声明变量的时候，变量名前面要加两根连词线（--）。body { --foo: #7F583F; --bar: #F7EFD2;} 上面代码中，body选择器里面声明了两个变量：--foo和--bar。它们与color、font-size等正式属性没有什么不同，只是没有默认含义。所以 CSS 变量（CSS variable）又叫做"CSS 自定义属性"（CSS custom properties）。因为变量与自定义的 CSS 属性其实是一回事。你可能会问，为什么选择两根连词线（--）表示变量？因为$foo被...
CSS制作华为mate8手机模型示例【代码】【图】
CSS制作华为mate8手机模型效果图 1.HTML代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div class="phone"><div class="body"></div><div class="head"></div><div class="cinema"></div><div class="button"></div><div class="screen"></div><div class="probutton"></div><div class="brobutton"></div></div><hr><div class="RotateButton"></div></body></html> 2.CSS代码*{list-...
CSS布局 ——从display，position， float属性谈起(转)【代码】【图】
页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结果页面漏洞百出，错误匪夷所思，关于盒模型我就不多说了，网上很多，注意一下IE和其他浏览器（W3C规范）的区别就好了。 块级元素与行内元素首先谈谈人们...
css设置各种中文字体如雅黑、黑体、宋体、楷体等等
.selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } 说明： 加上中文名“微软雅黑”是为了兼容opera。 MicrosoftJhengHei为微软正黑体，STHeiti为华文黑体，MingLiu记得11px下的中文有着不凡的效果。 在css中推荐使用中文字体的英文表示法，以下附常见中文字体的英文名： Mac OS的一些： 华文细黑：STHeiti Light [STXihei] 华文黑体：STHeiti 华文楷体：STKaiti 华文宋体：STSon...
HTML&CSS基础学习笔记1.6-html的文本操作标签【图】
文本也许是HTML里最常见的元素了，所以我们有必要对HTML的文本操作标签做下认识。1. <em>，<i>内的文字呈现为倾斜效果；2. <strong>，<b>内的文字呈现为加粗效果；3. <b>，<i>只是单纯的为了让文本具有某种特殊样式，而<strong>，<em>不仅带有特殊样式，而且也表达了某种语义；4. 在单纯的为了达到某种样式的情况下，建议使用不带有语义的标签。体验如下：http://www.mayacoder.com/lesson/lesson?lesson_id=28&knowledge_id=5原文...
CSS3实现加载中的动画效果【代码】【图】
本篇文章由：http://xinpure.com/css3-implementations-of-loading-an-animation-effect/Loading 的菊花图形组合的不太好，基本上实现这个功能了动画解析这个动画用到的 CSS3 特性:transform 主要使用 transform 属性的 rotate，将线条组合成 Loading 图形 (也就是常见的菊花图形)animation 实现将线条颜色由浅到深，再由深到浅来回变换的动画，通过 animation-delay 属性来使颜色的变换产生过渡的效果，从而达到类似于 Loading ...