1、认识HTML标记 HTML的全称是Hyper text markup language,超文本标记语言，用于定义文档的内容结构。在HTML中，所有的标记都是成对出现的。<html>标记：是HTML文档的根元素，放在开头，表示网页文档的开始。<head>标记：出现在文档的起始部分，标明文档的头部信息，比如标题信息。<body>标记：文档的主体区域网页所要显示的内容都在这个标记内。 2、HTML元素的组成部分3、元素的层次结构一个元素的内容中可以包含其他元素，形成嵌...
在网页中，元素有三种布局模型：1、流动模型（Flow） 默认的2、浮动模型 (Float)3、层模型（Layer） 1、流动模型（Flow） 流动（Flow）模型是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占...
css是什么？层叠样式表，是一种表现HTML或者XML等文件样式的机器语言。css引用样式表的三种方式？1、行间样式表（把style直接写在<>当中）；2、内部样式表（把style写在固定的位置，方便调用）；3、外部样式表（把style写在外部文件中，这样最方便调用）。外部引用有什么优点？如果三种样式作用于一个元素，哪种样式的优先级高？就近原则，离元素越近，优先级越高层叠样式表（Cascading Style Sheets）层叠：多个样式表作用于统一个...
环境 xp ie 8 , ietester<!doctype html><html><head><meta charset="utf-8"/><style rel="stylesheet" type="text/css">*{font-size:19px;}i{color:red; font-weight:bold; margin:0 10px;}b{color:#BF7C17; margin:0 10px;}h2,p{padding:20px;}h2{background:#eee; font-size:20px;}p{font-size:15px;}p[attr]{color:blue;}p[attr="bar"]{color:pink;}p[attr~="go"]{color:green;}p[attr|="some"]{color:red;}.subEle > span { ...
CSS3动画 添加某种效果可以从一种样式转变到另一个@keyframes 创建动画 @keyframes move { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }animation 所有动画属性的简写属性，除了 animation-play-state 属性。animation-name 规定 @keyframes 动画的名称。animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。animation-timing-function 规...
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>边框距</title><style type="text/css"> div{ border: 1px solid red; width: 100px; height: 100px; } /*1.四个边设置相同的边距*/ #d1{ padding: 20px; margin: 30px; } /*2.四个边设置不同的边距*/ #d2{ padding: 10px 20px 30px 40px; margin: 10px 20px 30px 40px; } /*3.单...
css实现水平居中<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>水平居中</title><style>.box1{border: 1px solid #000;text-align: center;}.box2{display: inline-block;background-color: green;}/*...............................*/.box3{border: 1px solid #000;}.box4{display: table;margin: 0 auto;background-color: yellow;}.box5{width: 100px;margin: 0 auto;text-align: center;}/*..............
因为li是块级元素，默认占一行的，要想实现横向排列，一般通过以下两个方法：float:left 这样设置有一个问题，li浮动以后则脱离了文本流，即不占位置，如果它的父级元素有具体的样式且没有固定宽高，建议父元素清除浮动，或者设置固定宽高。display:inline-block 即把li变为行内元素且可以设置宽高以及边距，这样也有一个问题，低版本的Ie浏览器不兼容inline-block，建议在其后再加两个属性兼容低版本ie*display:inline; *zoom:1;<...
效果图如下（鼠标放置显示二级导航）：先使用浮动和盒模型完成页面布局，再使用定位使二级导航不占据空间，不影响下面轮播图的布局，具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>二级导航</title> <style> *{ margin: 0; padding: 0; } a{ t...
选择符优先级带来的样式失效:由于CSS选择符优先级可能引起某些样式失效，这个问题初学者可能会碰上，但是往往并不容易发现。代码实例:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> .mydiv{color:green;} </style> </head> <body> <div class="mydiv"> <ul> <li>蚂蚁部落</li> <li>div+css专区</li...
上一篇CSS教程 文章：CSS高级技巧:网页布局CSS阴影效果 (Drop Shadows)一点阴影可以给平板的设计增加纵深的感觉, 很多时候我们都是直接用PhotoShop直接制作带阴影的图片以供使用, 这里介绍的是一种不需要修改图片, 而只需要用CSS完成的技巧.原理:给<img />标签增加一个容器, 给容器设置一个大的阴影背景图像, 然后把<img />利用负值外补丁进行偏移, 使阴影落在图像外侧以达到效果. 备用的阴影图像 shadow.gifHTML代码如下:<div cla...
#css2中的选择器 1.元素选择器 *通配符选择符、html类型选择符、id选择符、class选择符 2.关系选择器 E F(包含选择器)、E>F(子选择器)、E+F(E元素后面相邻的F选择器) 3.伪类选择器 E:link(链接伪类选择器-默认链接) E:visited(链接伪类选择器-点击过的链接) E:hover(用户操作伪类选择器-鼠标滑过) E:active(用户操作伪类选择器-鼠标点击) E:focus(用户操作伪类选择器-过去光标) E:lang()(:lan...
本文的目标读者是入门级Web前端开发人员。 本文介绍了CSS选择符表达式引擎的基本原理。CSS选择符引擎几乎是前端开发人员每天在使用的工具。本文将逐一介绍实现该引擎的各种策略。首先，我们介绍基于W3C标准API的方法。 W3C标准的Slectors API能够支持的平台： Safari 3+, Firefox 3.1+, Internet Explorer 8+, Chrome and Opera 10+两个最常用的方法：querySelector，该函数接受一个CSS选择符字符串，返回找到的第一个元素，如果没...
CSS样式position的一个小实例代码如下： 复制代码代码如下:<!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>CSS样式position的一个小实例：z方向三层布局-成功志(www.ok12.net)</title> </head> <body> <div sty...
知识点： 1.建立框架集的方法 2.在框架和窗口之间链接的方法 3.使用内联框架的方法13.1 什么是框架： 框架是浏览器窗口中的一个矩形区域，每个框架显示的是一个完整的页面。 作者不建议使用框架，原因： 1.框架与Web的基础概念冲突 /*什么概念？*/ 2.框架化的网站的打印部分非常困难。 3.如果框架爱缺乏合适的编码，或者有合适的编码但是被用于邪恶的目的，用户可能在框架化的网站中无法看到框架外部的...