CSS - 技术教程文章

纯CSS3编写的面包屑导航收集【图】

整理了10个纯CSS3制作的面包屑导航,这些都是通过CSS3来编写,十分方便,而且实用。有些文章附有教程,大家可以研究学习一下。漂亮面包屑导航查看网站扁平化面包屑导航查看网站圆形风格面包屑导航查看网站CSS面包屑导航查看网站CSS3面包屑导航制作教程查看网站黄色的CSS Breadcrumbs教程查看网站CSS3 Breadcrumbs查看网站扁平化风格面包屑制作教程查看网站CSS 面包屑菜单制作方法查看网站五个不同风格的面包屑导航CSS制作教程查看网...

第四课初识css

一.引入样式 1.行内样式表 <h1 style="color: red;font-size: 18px;">10-30</h1> 2.内部样式表(在head标签里面,title标签下面) <style type="text/css"> h2{ color: yellow; font-size: 20px; } </style> 优点 方便在同页面中修改样式 缺点 不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底 3.外部样式表 嵌入式 <link href="../css/index.css" rel="stylesheet" type="text/css"/> 导...

css基础总结一【代码】

最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结。主要分为js部分和css部分,下面是css的基础部分总结 一、基础知识  1、前端基本概念以及常识    web应用,主要分为前端和后端,而前端的话,主要是想用户展示内容,后端的话主要是处理用户数据。前端内容呈现中,主要有几个问题:内容是什么?如何展示内容?如何展示...

css文本设置

常用的应用文本的css样式:color 设置文字的颜色,如: color:red;font-size 设置文字的大小,如:font-size:12px;font-family 设置文字的字体,如:font-family:‘微软雅黑‘;font-style 设置字体是否倾斜,如:font-style:‘normal‘; 设置不倾斜,font-style:‘italic‘;设置文字倾斜font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗line-height 设置文字的行高,设置行高相当于在...

html5+CSS3实现的炫酷超链接特效

今天为大家介绍一个非常炫酷的超链接特效。在你做一些前端的网页时可以在里面去用上这些前卫时尚的效果。这些超链接特性,大都是借助伪元素、svg、HTML5动画来实现的。效果都很漂亮,不信看下面。用你的鼠标悬停在这些链接上,你就能体验和传统链接完全不一样的感觉。当然最重要的一点:你需要使用现代浏览器才能有更好的体验效果,比如谷歌浏览器或火狐浏览器。演示效果和下载请看:http://yusi123.com/3236.html1. [代码]节选其中...

CSS 确定选中变红色【代码】

textarea:focus { border: 1px solid #f4645f; outline: none; } blockquote { border-left: 4px solid #f4645f; } pre { padding: 0; background: none; border: none; } ::-moz-selection { color: #ffffff; background: #f4645f; text-shadow: none; } ::selection { color: #ffffff; background: #f4645f; text-shadow: none; } 原文:http://www.cnblogs.com/archoncap/p/5883294.html

css3弹性盒子模型【代码】【图】

当下各种手机,平板尺寸不一,如果盒模型只能固定尺寸,不能随意压缩,将不能很好的迎合这个时代。所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model)。  弹性盒模型可以水平布局,可以垂直布局,还可以调换顺序,可以设置不等的百分比等。1.弹性盒子column分栏 1<h2>1.弹性盒子column分栏</h2> 2<div class="freebox"> 3<img src="image/moon.jpg" alt="天宫二号"/> 9月15日晚10点04分,八月十五中秋节夜晚,甘肃酒...

css写圆角效果【代码】【图】

.introTips i{position: absolute;display: block;top: 8px;right: 8px;width: 0;height: 0;font-size: 0;line-height: 0;border-top: 5px solid #fff;border-right: 3px solid transparent;border-left: 3px solid transparent; } 原文:http://www.cnblogs.com/zhidong123/p/4940273.html

css中内容生成器

一,内容生成器:content 补充before和after伪类选择器: 1):将内容添加到某个选择器定义的单个或者多个元素的每一个实例之前或者之后 2)与before选择器配合使用(同理大家想下会不会有after?); content的作用: 1,作用:在被选元素的内容前面插入内容; 2,用法:使用content属性指定要插入的内容; 3,可以设置插入内容的样式; content的使用作用:对HTML内容修饰; 常用的值:u...

C#用户控件实战01_CSS布局【图】

很多应用系统的主页布局,一般采用如下案例所示布局较多,如下图的CSS布局框架,上、中、下,接下来我们演示,在C#中实现如下的业务架构布局。代码范例:在<body></body>中1.整体定义一个盒子(box) 原文:https://www.cnblogs.com/ximi07/p/10996551.html

DHTML 动态HTML 包含HTML CSS JavaScript dom

HTML 负责提供标签,对数据进行标记封装CSS 负责提供样式属性,对数据进行样式定义DOM 负责将标记文档和标签等内容解析成对象,并在 对象中定义属性和行为,就可以指挥对象做事情。JAVASCRIPT 负责网页页面的行为(该怎么动),动态效果的体现,需要程序设计语言来完成。 基本步骤1、定义页面机构,HTML;2、定义页面样式:CSS;3、动态效果,对象已经被DOM解析驻留在内存;3.1、明确事件源;3.2、明确事件动作;3.3、定义出来方式...

CSS OM【代码】

虽然放在 DOM 分类里面,但是 CSS OM 并不属于 DOM,而是并行的。仅为方便查找。document.styleSheets<style title="hello">a {color: red;} </style> <link rel="stylesheet" title="x" href="data:text/css,p%7Bcolor: blue%7D"> Rulesdocument.styleSheets[0].cssRulesdocument.styleSheets[0].insertRule("p{color: pink}", 0)document.styleSheets[0].removeRule(0)RuleCSSStyleRule selectorText Stringstyle k-v结构CSSChar...

简单的css js控制table隔行变色

(1)用expression鼠标滑过变色:<style type="text/css"><!-- table { background-color:#000000; cursor:hand; width:100%; }td {onmouseover:expression(onmouseover=function (){this.style.borderColor =‘blue‘;this.style.color=‘red‘;this.style.backgroundColor =‘yellow‘}); onmouseout: expression(onmouseout=function (){this.style.borderColor=‘‘;this.style.color=‘‘;this.style.backgroundColor =‘‘}...

理解CSS中的数学表达式calc()【代码】

定义  数学表达式calc()是calculate计算的缩写,它允许使用+、-、*、/这四种运算符,可以混合使用%、px、em、rem等单位进行计算  兼容性: IE8-、safari5.1-、ios5.1-、android4.3-不支持,android4.4-4.4.4只支持加法和减法。IE9不支持用于backround-position  [注意]+和-运算符两边一定要有空白符<style>.test1{ border: calc( 1px + 1px ) solid black; /* calc里面的运算遵循*、/优先于+、-的顺序 */ width: ...

css加载字体跨域问题

刚才碰到一个css加载字体跨域问题,记录一下。站点的动态请求与静态文件请求是不同的域名的。站点的域名为 www.domain.com,而静态文件的域名为 st.domain.com。问题:页面中加载css文件:<link rel="stylesheet" href="http://st.domain.com/css/uniform.css" />此css中调用了外部字体如下:@font-face { font-family: ‘FontAwesome‘; src: url(‘../font/fontawesome-webfont.eot‘);}浏览器报请求跨域的错误。解决方案:我们...

CSS

CSSid选择器:id选择器顾名思义就是给一个元素加上一个名字 比如说我要给一个div里面加一个背景颜色红色 先给一个div一个命名,id前面要加一个“#”号来表示 <div id=“mingzi”></div> #mingzi {background-color: red;} 这就是id选择器 当然di选择器也可以和生派选择起一起用,比如说我想给一个div里...

div css背景颜色半透明 文字不透明兼容ie、火狐等浏览器

针对透明背景,包括背景图片和背景色(兼容IE,FF,OP等浏览器)一、背景完全透明 .bg{background:transparent } 二、背景半透明这里要分两个div,一个单独设置背景透明度,另外一个放内容 margin-top:-33px;使用这个方法让文字叠加在透明背景图上。css: .bg{ width: 1000px; height:33px; background-color:#fffff; background-image:url(img.jpg);filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3; -khtml-opacity: 0.3;}...

CSS样式

常用属性Class、id、style、title使用 <title> 标签定义HTML文档的标题使用 <base> 定义页面中所有链接默认的链接目标地址。使用 <meta> 元素来描述HTML文档的描述,关键词,作者,字符集等。 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。对拥有相同类名称的元素进行设置样式对带有指定属性的 HTML 元素设置样式1.内联样式-在HTML元素中使用"style" 属性2.内部样式表-在HTML文档头部<head>区域使用<style>元素来包CSS...

css背景透明【代码】

css设置div背景透明有3种方法方法一:1 opacity:0~1这个方法有个缺点,就是内容也会跟着透明方法二:1 background-color:rgba(0,0,0,0~1)这个方法会使div背景透明,并且不会影响到div里的内容。方法三:1 background: transparent;这个方法会使div背景透明,并且不会影响到div里的内容。原文:https://www.cnblogs.com/wodewei/p/14762445.html

您可能不知道的CSS元素隐藏“失效”以其妙用【代码】

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2191一、CSS元素隐藏在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。后宫选秀——一个一个看。{ display: none; /* 不占据空间,无法点击 */ }{ visibility: hidden; /* 占据空间,无法点击 */ }{ position: absolute; clip:rect(1px 1px 1px 1px)...

css

今天学习了很多的知识,理解和记忆的东西都很多。昨天老师布置了一个作业,回来用css做一个网页,现在不用表格做网页了,现在用css。知识点今天不整理了,都整理在笔记本和电脑上了,从回来就开始写作业,写了好久。下面是自己练习的东西,做一下记录: opacity:0.5; 透明度border-radius:10px;圆角 border-bottom-left-radius:10px; 左下角成圆角10像素 border-bottom-right-radius:20px; /*右下角成圆形2...

CSS3之position【图】

CSS3之position1、取值(1)absolute(2)fixed(3)inherit(4)relative(5)static(6)!important2、实现源码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3之position</title> <style type="text/css...

CSS构造文本【代码】

<style type="text/css"> /*字体*/ body{font-family:"Microsoft Yahei";/*或者用这个,font-family:"微软雅黑"*/font-size:12px; /*字体大小(像素)*/color:#654; /*颜色为:#665544,左边是简写*/font-weight:bold; /*粗体*/font-style:italic;/*斜体*/text-decoration:underline;/*下划线*/text-decoration:line-through;/*删除线*/ } p{text-indent:2em;/*缩进*/line-height:2em;/*行高*/word-spacing:50px;/*单词间隔*/letter-spa...

[转载]IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例 —— 浏览器

1.区别IE和非IE浏览器CSS HACK代码 #divcss5{background:blue; /*非IE 背景藍色*/background:red \9; /*IE6、IE7、IE8背景紅色*/} 2.区别IE6,IE7,IE8,FF CSS HACK 【区别符号】:「\9」、「*」、「_」【示例】: #divcss5{background:blue; /*Firefox 背景变蓝色*/background:red \9; /*IE8 背景变红色*/*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/} 【说明】:因为IE系列浏览器可读「\9」,而I...

jquery对css操作

1.css取得p的颜色:$(document).ready(function(){ var p= $("p").css("color"); alert(p);});设置段落字体的颜色为红色:$(document).ready(function(){ $("p").css("color","red");});设置段落字体的颜色为红色并且背景色为蓝色:$(document).ready(function(){ $("p").css({color:"red",background:"blue"});});<body><div>test1</div><div id="d" >test2</div> <input type="text" value="文本框" /> <input ty...

记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。【代码】【图】

前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来。  题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应。当屏幕小于600px时,3栏会分别占用一行。像这样当屏幕大于600px时,是这样   我做出来用了css3的@media,如果不用这个,好吧,水平有限想不出来。。。下面是代码:<!DOCTYPE> <html> <head> <style> body{margin: 0 ;padding: 0; } @media screen and (min-wi...

前端CSS【代码】

列表标签ul标签:无序列表 ol标签:有序列表 li标签:写在ul和ol标签里面的dl标签:定义列表 dt标签和dd标签:都写在dl里面的 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <ul><li>111</li><li>222</li><li>333</li> </ul> <ol><li>111</li><li>222</li><li>333</li> </ol> <d1><dt>选项</dt><dd>111</dd><dd>222</dd> </d1> </body> </html> 表单标签form标签:action属...

用CSS绘制最常见的形状和图形【代码】【图】

#rectangle {width: 200px;height: 100px;background: red; }#circle {width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px; }/* 可以使用百分比值(大于50%),但是低版本的Android不支持 */#oval {width: 200px;height: 100px;background: red;-moz-border-radius: 100px / 50px;-webkit-border-radius: 100px / 50px;border-radius: 100px / 50px; }/* 可以使...

CSS3+CSS+HTML实现网页【代码】【图】

效果图: 代码实现:样式部分style.css:*{margin: 0;padding: 0; } body{background-color: #673929;font-size: 16px;font-family: "微软雅黑" } #conters{margin: 0 auto;width: 900px; }#header{height: 220px;margin-bottom: 5px;position: relative; } #icon-list{position: absolute;top:170px;right: 30px;width: 130px;height: 30px;/*font-size: 0;*/ }#nav{height: 30px;background: #09c;margin-bottom: 5px;font:18px...

CSS3之设计动态立体盒子【代码】【图】

CSS3设计3D效果图使用到CSS3中的变形、缩放、倾斜。只写了兼容Gecto的。发张图片鼓励自己<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.cube{position:fixed;left:50%;top:12px;}.cube p{line-height:144px;font-size:12px;}.cube h2{font-weight:bold;}.cube.one{top:200px;left:50%;margin-left:-200px;}.topFace, .leftFace, .rightFace div /*统一三面的尺寸*/{width:272px;height:26...