CSS - 技术教程文章
4CSS颜色和背景【图】
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------...
HTML、CSS、JS课后习作——痛风诊断APP源代码
我自己也感到这些代码非常不成熟，一定有很多可以优化的地方，就当做一个反面教材，供大家剖析、批评。index.html代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>痛风诊断评分</title><script src="js/common.js"></script><link rel="stylesheet" href="css/common.css" /></head><body background="img/p...
关于DIV CSS和XHTML CSS的理解
WEB标准是一系列标准的集合，并不是仅“DIV CSS”布局就可以实现。以CSS网页布局只是标准的基础之一。“DIV CSS”布局只是一种通俗的称呼罢了。而我们学习的目标在于以XHTML建立良好的语义化的结构，结合CSS最大程度使表现与内容相分离。 一位网友对W3C标准、重构与CSS布局的理解： 不知道从什么时候开始，在网络上到处可以看到div css，到底什么是div css呢？难道就是传说中的标准重构吗？标准从最简单的根源来说不是合理使...
CSS页面布局【图】
在设计每个页面的时候，我们先要想好页面的整体框架后再写，这样思路清晰，页面也整齐，不容易出错且容易找到出现的问题。一般我们是将页面分为上、中、下三个大容器里面。再往容器里面添加小块。小块与小块、小块与大块之间的关系就要用到浮动与定位的组合排版。 上面的布局是一个思路的例子，布局调整的时候，我们应该先按先后顺序完成上、中、下三部分，还应该用border描出边框线帮助我们定位，做好了之后再取消掉边框做下个...
巩固下CSS，CSS太复杂~
css是什么SS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个语法CSS声明总是以分号(;)结束，声明总以大括号({})括起来:CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:选择器id 用#， class用. 选择器创建外部样式表(External style she...
CSS三角形广告文字【代码】【图】
街上经常碰到一些发各类广告传单的，有一次收到一张房地产广告的传单，顺手留下来，看着里面有些广告挺吸引人，同时也想练练自己css技术，故抽空做了一下。原图某区域如下：实现上图效果是需要一些想象力的，比如三角形的构成和左右两边的空白间距，懂的这个原理，然后熟练运用border属性，一切就OK了比如其中一个三角形 <div class="arrow_ltitle1"></div> div.arrow_ltitle1 {width: 0;height: 0;border-top: 35px solid white;b...
第六周学习总结-CSS、JavaScript
2018年8月19日 这是暑假第六周，这一周我把HTML5的标签大致看完了，并且看了一些CSS和JavaScript的内容。 上一周说这周要把那个简陋的网页用CSS修饰一下，但是真正开始做时，才发现CSS真的不好弄，做出来的静态网页在360浏览器和火狐浏览器上显示的不太一样。360浏览器100%页面比例的静态网页在火狐浏览器上就会出现下拉条，看起来不美观而且又没有用。 本周学习时间将近20小时，周六日休息、复习，每天有接近1小时的时间...
php json输出有？？,css样式也不正常,去除php bom头【代码】
//只要把此文件另存为removebom.php,放在服务器根目录，然后执行，就可以去除服务器端bom，//在chrome有小红点的开始 1 <?php2//remove the utf-8 boms3//by magicbug at gmail dot com 4if (isset($_GET[‘dir‘])){ //config the basedir 5$basedir=$_GET[‘dir‘];6 }else{7$basedir = ‘.‘;8} 9$auto = 1; 10 checkdir($basedir); 11function checkdir($basedir){ 12if ($dh = opendir($basedir)) { 13while (($file = readd...
CSS语法 部分 区块
区块属性：(Block) 字间距{letter-spacing: normal;} 数值对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进{text-indent: 数值px;} 垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; texttop; middle; bottom;text-bottom词间距word-spacing: normal; 数值 空格white- space: pre;(保留) nowrap;(不换行) 显示{display:block;}(块) inline;(内嵌) list-item;(列表项...
CSS3 border属性的妙用【代码】
.ribbon {background: #45c9c8;position: absolute;width: 75px;height: 25px;line-height: 25px;top: -4px;left: -11px;font-size: 14px;color: #fff;text-align: center;font-style: normal;z-index: 1;&:after{content: "";position: absolute;width: 0;height: 0;border-left: 12px solid transparent;border-top: 5px solid #329c9b;top: 25px;left: 0px;z-index: 0;}&:before{content: "";position: absolute;right: -10px;f...
CSS_01_使用及选择器【代码】【图】
结构一、CSS基本使用1、基础Cascading Style Sheets 层叠样式表HTML标签的某些属性可以设置样式效果，但是细节处理不够HTML实现效果会出现大量重复代码，维护成本高CSS3能做到网页和内容分离，对网页中的元素的位置排版等效果进行精确控制CSS美化网页需要依赖HTML2、基本语法<style type="text/css"> body{background-color:red;color:blue; } 3、注释/* 这是注释 */ 4、CSS使用（1）行内式定义在具体的HTML标签的style属性中<p >行...
CSS选择器
最近在研究jQuery的选择器，大家知道jQuery的选择器和css的选择器非常相似，所以整理一下css选择器；css1-css3提供非常丰富的选择器，但是由于某些选择器被各个浏览器支持的情况不一样，所以很多选择器在实际css开发中很少用到。1.基础的选择器选择器含义示例*通用元素选择器，匹配任何元素* { margin:0; padding:0; }E标签选择器，匹配所有使用E标签的元素p { font-size:2em; }.info和E.infoclass选择器，匹配所有class属性中包含...
css变形属性-transform-【代码】
（1）具体常用5种：伸缩-scale、扭曲-skew、旋转-rotate、移动-translate、矩阵-matrix（a）scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩 放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中 心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小（b）skew(x,y)使元素在水平和垂直方向同时...
CSS第四课【代码】【图】
学习内容：1.标签的margin值：用来控制标签的外边距，分别控制上、右、下、左的外边距1#d1 { 2 width: 500px; 3 height: 300px; 4 background-color: red; 5 margin: 50px; 6 }当只输入一项数值时，所有方向上的外边距被统一设定，而输入两个值时，则分别控制上下、左右的外边距，四个值全部输入则分别控制上、右、下、左的外边距2.标签的padding值：用来控制标签的内边距，分别控制上、右、下、左的内边距1#d1 { 2 ...
CSS3 和 H5 笔记整理【代码】
h5增加特性 语义标签化如 section article meter footer progress等等html代码h5增加了重要的自定义属性的功能；给标签添加自定义属性 必须以data-开头自定义的属性 需要通过 dateset[]方式来获取如自定义属性 data-box获取自定义属性 dataset设置自定义属性 dataset[“box”];<!-- 定义数据列表—><datalist id="sex"> <option >男</option> <option >女</option> <option >不祥</option></datalist><!—定义度量器—><...
CSS中如果实现元素浮动和清除浮动，看这篇文章就足够了【代码】【图】
原文:CSS中如果实现元素浮动和清除浮动，看这篇文章就足够了浮动基本介绍#在标准文档流中元素分为2种，块级元素和行内元素，如果想让一些元素既要有块级元素的特点也同时保留行内元素特点，只能让这些元素脱离标准文档流即可。浮动可以让元素脱离标准文档流，可以实现让多个元素排在同一行，并且可以设置宽高度。其实浮动是通过float属性来实现的。float属性值说明表：属性值描述left设置元素向左浮动。right设置元素向右浮动。右浮...
css基础②(框模型以及position)
1、CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式element : 元素。 padding : 内边距，也有资料将其翻译为填充。 border : 边框。 margin : 外边距，也有资料将其翻译为空白或空白边。围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。 * {margin: 0;padding: 0;}padd...
CSS3选择器【代码】【图】
1、属性选择器：实例展示：html代码：<a href="xxx.pdf">我链接的是PDF文件</a><a href="#" class="icon">我类名是icon</a><a href="#" title="我的title是more">我的title是more</a>css代码：a[class^=icon]{background: green;color:#fff; } a[href$=pdf]{background: orange;color: #fff; } a[title*=more]{background: blue;color: #fff; } 结果显示：2、结构性伪类选择器1、—root:root选择器，从字面上我们就可以很清楚的理解...
html及css小结【代码】
1. HTML常用标签1.1 <meta>META标签是HTML标记HEAD区的一个关键标签，提供文档字符集、使用语言、作者等基本信息，以及对关键词和网页等级的设定等，最大的作用是能够做搜索引擎优化（SEO）。两个主流网站meta属性<!-- 淘宝 --><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="renderer" content="webkit"><meta name="spm-id" content="a21bo"><meta name="description" conte...
CSS padding 属性【代码】
定义和用法padding 简写属性在一个声明中设置所有内边距属性。说明这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。注释：不允许使用负值。 例子 padding:10px 5px 15px;上内边距是 10px右内边距和左内边距...
CSS样式三级下拉菜单【代码】
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5<title>CSS样式三级下拉菜单</title> 6<style> 7@charset "utf-8";8body{margin:0px; padding:0px; font-family:Verdana, Geneva, sans-serif; font-size:12p...
CSS透明度设置支持IE，Chrome，Firefox浏览器
CSS文件中设置如下即可filter:alpha(opacity=60); //支持IE opacity:0.6; //支持Chrome，Firefox版权声明：本文为博主原创文章，未经博主允许不得转载。原文：http://blog.csdn.net/adgjlxxx/article/details/46776991
cssText批量修改样式【代码】
cssText所有浏览器都支持。cssText 的使用 obj.style.cssText = " width:200px;position:absolute;left:100px;";正如那篇文章所提cssText会清除之前元素含有的样式，所以得使用obj.style.cssText += " width:200px;position:absolute;left:100px;";但是在IE中的最后一个分号会被删除obj.style.cssText += " ;width:200px;position:absolute;left:100px;"; //这样便能解决在IE中出现的问题了原文：http://www.cnblogs.com/m...
CSS样式适配杂记【代码】【图】
1.问：input框的对齐，制作类似百度搜索框的时候，发现IE下前面输入框和后面按钮总是不能对齐。 解答：给input框增加vertical-align:bottom;2.问：IE下display:inline-block不起作用。 答：display:inline-block后面增加*display:inline;*zoom:1;具体参见：http://www.jb51.net/css/67469.html。该文对inline-block有详细分析。3.问：如何取消inline-block元素之间的间距。 答：1.给父盒子设置font-size：0，再把当前元素的f...
CSS中表示cellpadding和cellspacing的方法【代码】
table{ border-collapse:collapse; } 原文：http://www.cnblogs.com/Harold-Hua/p/5434450.html
前端-CSS基础【代码】
1.CSScss style: 里面的写的就叫做css 每一个样式的间隔用； 全部相同的时候引用class 2.ID选择器# 代表通过id选择器查找 #i1{height: 48px;background-color: red;}3.class选择器. 代表通过class选择器查找.menu{height: 48px;background-color: aqua;}4.标签选择器标签名 代表通过标签选择器查找 span {color: red;background-color: blue;}5.标签层级选择器标签内的标签 通过标签+空格+标签 代表通过标签选择器查找 例：span标签...
CSS深入研究:display的恐怖故事解密(2) - table-cell【代码】【图】
上集《CSS深入研究:display的恐怖故事解密(1) - display-inline》已经把display的属性列表拉出来溜了，发现在这个属性恐怖面貌其实都是脆弱的伪装。除了部分常用属性外，其他的都是传说哥。既然是传说哥，请不要迷恋。就让传说继续传说着吧。这次我们来搞定table-cell这个货。（table-cell：IE6、7不支持）table-cell这个家伙在国外的网站中偶有露头，天朝由于IE6、7这两个货泛滥成灾，难有发挥，那么，这个家伙到底能干些什么呢？...
DIV+CSS两种盒子模型
盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟悉的标准盒子模型： 从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。 ...
侯策《前端开发核心知识进阶》读书笔记——html与css要点【代码】【图】
HTML 语义化根据结构化的内容，选择合适的标签。为什么要做到语义化？“合适的标签”是内容表达的高度概括，这样浏览器爬虫或者任何机器在读取 HTML 时，都能更好地理解，进而解析效率更高。这样带来的收益如下：有利于 SEO开发维护体验更好用户体验更好（如使用 alt 标签用于解释图片信息）更好的 accessibility，方便任何设备解析（如盲人阅读器）if (导航) {return <nav /> } elseif (文稿内容、博客内容、评论内容...包含标题元...
css如何实现滚动条隐藏但鼠标仍然可以滚动【代码】
在做移动端项目的时候，有些时候需要元素超出屏幕可以滚动，为了美观需要隐藏滚动条。如果只需兼容chrome和safari，可以使用自定义滚动条的伪对象选择器——：：webkit-scrollbar。 具体使用即： element::webkit-scrollbar{display:none} 或者 element::webkit-scrollbar{width:0!important} 那要在pc端实现同样的功能怎么办呢？参考 Hiding Vertical Scrollbars with Pure CSS in Chrome, IE (6+), Firefox, Opera, and Sa...