实例动画step1：改变字体颜色<h1><a href="http://www.rainleaves.com">雨打浮萍</a></h1>h1 a{color:#03c;text-decoration:none;-webkit-transition:color .5s ease-in-out;-moz-transition:color .5s ease-in-out;-o-transition:color .5s ease-in-out;transition:color .5s ease-in-out;} h1 a:hover{color:#f60; }step2：改变背景颜色<h2>专注于web前端开发</h2>h2:hover{-webkit-transition:background-color 0.5s linear;-mo...
CSSCSS被用来同时控制多重网页的样式和布局。通过使用 CSS，所有的格式化均可从 HTML 中剥离出来，并存储于一个独立的文件中。CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> <style> body {background-color:#d0e4fe; } h1 //h1是选择器 { //大括号里是一条或多条声明color:orange; //每一条声明由属性和值组成...
一、xhtml css基础知识文档类型语言编码html标签css样式css优先级css盒模型组成1）文档类型当我们用dreamweaver新建一下html格式文档时，查看源代码，会发现代码最上部有如下这句话： 这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句...
制作自己的导航条。HTML头部元素：<base> 定义了页面链接标签的默认链接地址<style> 定义了HTML文档的样式文件<link> 定义了一个文档和外部资源之间的关系练习样式表：行内样式表内嵌样式表外部样式表分别练习定义三类选择器：HTML 选择器CLASS 类选择器ID 选择器 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Hello my world</title><basehref="http://i1.sinaimg.cn/dy/weather/main/index14/007/icon...
css简介层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。要深刻理解层叠样式表，样式表说明css是负责美化网页的；而层叠表示网页可以定义多层样式，样式可以被覆盖而不会被干掉。css样式的3种用法在标签中使用style属性,如下：<h1 st...
1.基本样式： ————宽 属性：width 属性值：长度值 ————高 属性：height 属性值：长度值 ————块级元素与行内元素之间的转换 属性： display 属性值：block 转换为块级元素 inline 转换为行内元素 inline-block 转换成行内块元素 linline-block可以设置宽高，但是不会换行 2.背景属性： CSS可以用纯色调作为背景，也可以用图片作为背景 ————背...
概念z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 层级关系的比较1. 对于同级元素，默认(或position:static)情况下文档流后面的元素会覆盖前面的。2. 对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。3. IE6/7下position不为static，且z-index不存在时z-index为0，除此之外的浏览器z-index为auto。4. z-i...
今天没有写完，而且写的还有点问题，所以今天就先不上传代码了（ps：快写完了才发现布局有问题，导致代码太多，感觉写的不是很好，所以今天先分析一下布局）第一步先写一个大的div用来放ABC三个部分，这个大的div居中！第二步分别写ABC三个部分，ABC三个部分分别使用浮动（float）来定位。A和B都各使用了一张非常小的图片，通过重复（repeat）属性生成A和B第三步C部分分别写好3~16这几个模块，在通过组合利用浮动定位。分组如下： ...
最近在弄一个简单管理系统的前端，所以打算将做项目的一些个人感想以及总结简单罗列下，当然，主要针对前端的基础部分以及一些常用的前端个人简单技巧总结。主要分为js部分和css部分，下面是css的基础部分总结 一、基础知识 1、前端基本概念以及常识 web应用，主要分为前端和后端，而前端的话，主要是想用户展示内容，后端的话主要是处理用户数据。前端内容呈现中，主要有几个问题：内容是什么？如何展示内容？如何展示...
0x01 CSS基础语法及嵌入方式1. CSS基础语法格式： 选择器(选择符){属性:属性值;属性:属性值;……}注释样式：/*注释内容*/2. 嵌入方式2.1 内联方式(行内样式)就是在双标签的开始标签中嵌入特点：仅作用于本标签2.2 内部方式即在head标签中嵌入style标签及其样式特点：作用于整个页面2.3 外部导入(推荐)就是在head标签中用link链接外部的CSS文件，进行修饰(这种采取HTML和CSS代码分离的技术，十分常用)特点：作用于整个网站嵌入方式-...
css基础知识（一）1、css样式：加载css样式有以下四种：1）、外部样式 2）、内部样式 3）、行内样式 4）、导入样式<link href="layout.css" rel="stylesheet" type="text/css" />这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。 <style> h2 { color:#f00;} </style>这种形式是内部样式表，它是以<style>和</style>结尾，写在源代码的...
现在来说相对定位：如果想为元素设置层模型中的相对定位，需要设置position:relaive（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中便宜位置。相对定位完成的过程是首先按static(float)方式生成一个元素（并且元素像层一样浮动了起来），然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。那么，什么叫“偏移前的位置保留不动呢？”就是div元素...
一、Html和CSS的关系 1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这...
<!DOCTYPE html><html> <head> <title> new document </title> <meta name="author" content="xxx" /> <meta charset="utf-8"/> <style type="text/css"> div{ width:100px; height:100px; border:1px solid red; overflow:hidden; word-break:break-all; white-space:nowrap;/*不允许换行 只能在一行显示*/ text-overflow:ellipsis;/*注意必须结合 overflow:hidden; white-space:nowrap；一起使用*/ } </style> </hea...
随笔记录方便自己和同路人查阅，学习CSS时最好先学会HTML。#------------------------------------------------我是可耻的分割线-------------------------------------------<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div style="height:35px;width:400px;position:relative;"><input type="text" style="height:35px;width:370px;padding-right:30px;"/><span style="...