W3School-CSS 分类 (Classification) 实例
CSS 分类 (Classification) 实例
CSS 实例
- CSS 背景实例
- CSS 文本实例
- CSS 字体(font)实例
- CSS 边框(border)实例
- CSS 外边距 (margin) 实例
- CSS 内边距 (padding) 实例
- CSS 列表实例
- CSS 表格实例
- 轮廓（Outline)实例
- CSS 尺寸 (Dimension) 实例
CSS 分类 (Classification) 实例- CSS 定位 (Positioning) 实例
- CSS 伪类 (Pseudo-classes)实例
- CSS 伪元素 (Pseudo-elements)实例
01如何把元素显示为内联元素和块级元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>01如何把元素显示为内联元素和块级元素</title>
<style type="text/css">
p.one {
display: inline;
}
div {
display: none;
}
span {
display: block;
}
</style>
</head>
<body>
<p class="one">我这个段落被设置为内联元素。我这个段落被设置为内联元素。我这个段落被设置为内联元素。</p>
<p class="one">哥俩好，我也是inline元素！哥俩好，我也是inline元素！哥俩好，我也是inline元素！</p>
<div>我不是p而是div，所以内容不会显示出来！</div>
<p>我是一个段落随便写点啥我是一个段落随便写点啥<span>我这个span元素被设置为块级元素。。块级元素。。！！</span>我是一个段落随便写点啥我是一个段落随便写点啥一个段落随便写点啥我是一个段落随便写点啥我是一个段落随便写点啥我是一个段落随便写点啥<span>所以我们两个span元素就换行了。。换行了。。！！</span>我是一个段落随便写点啥我是一个段落随便写点啥我是一个段落随便写点啥</p>
</body>
</html>
02浮动属性的简单应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>02浮动属性的简单应用</title>
<style type="text/css">
img {
float: right;
}
</style>
</head>
<body>
<p>
<img src="2.jpg" /> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text. This is some text. This is some text. This is some text.
</p>
</body>
</html>
03将带有边框和边界的图像浮动于段落的右侧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>03将带有边框和边界的图像浮动于段落的右侧</title>
<style type="text/css">
img {
float: right;
border: 1px solid black;
margin: 0px 0px 15px 20px;
}
</style>
</head>
<body>
<p>
<img src="2.jpg" /> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text. This is some text. This is some text. This is some text.
</p>
</body>
</html>
04带标题的图像浮动于右侧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>04带标题的图像浮动于右侧</title>
<style type="text/css">
div {
width: 300px;
float: right;
border: 1px solid black;
margin: 0px 0px 15px 20px;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="2.jpg" />
<br /> CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is
some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some
text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text. This is some text.
</p>
</body>
</html>
05使段落的首字母浮动于左侧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>05使段落的首字母浮动于左侧</title>
<style type="text/css">
span {
float: left;
width: 0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
</style>
</head>
<body>
<p>
<span>T</span>his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is
some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some
text. This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is
some text. This is some text. This is some text. This is some text.
</p>
<p>
在上面的段落中，文本的第一个字母包含在一个 span 元素中。这个 span 元素的宽度是当前字体尺寸的 0.7 倍。span 元素的字体尺寸是 400%，行高是 80%。span 中的字母字体是 "Algerian"
</p>
</body>
</html>
06创建水平菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>06创建水平菜单</title>
<style type="text/css">
ul {
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a {
float: left;
width: 7em;
text-decoration: none;
color: white;
background-color: purple;
padding: 0.2em 0.6em;
border-right: 1px solid white;
}
a:hover {
background-color: #ff3300
}
li {
display: inline
}
</style>
</head>
<body>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
<li><a href="#">链接4</a></li>
</ul>
<p>
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。
</p>
</body>
</html>
07创建无表格的首页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>07创建无表格的首页</title>
<style type="text/css">
div.container {
width: 100%;
border: 3px solid yellow;
margin: 0;
line-height: 150%;
}
div.header,
div.footer {
padding: 0.2em;
color: green;
background-color: purple;
clear: left;
}
h1.header {
margin: 0;
padding: 0.2em;
}
div.left {
float: left;
width: 160px;
padding: 1em;
margin: 0;
}
div.content {
margin-left: 200px;
border-left: 1px solid black;
padding: 1em;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1 class="header">浣溪沙·一曲新词酒一杯</h1>
</div>
<div class="left">
<p>听一支新曲喝一杯美酒，还是去年的天气旧日的亭台，西落的夕阳何时再回来？</p>
</div>
<div class="content">
<h2>浣溪沙·一曲新词酒一杯</h2>
<p>一曲新词酒一杯，去年天气旧亭台。夕阳西下几时回？</p>
<p>无可奈何花落去，似曾相识燕归来。小园香径独徘徊。</p>
</div>
<div class="footer">此词虽含伤春惜时之意，却实为感慨抒怀之情。</div>
</div>
</body>
</html>
08定位：相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>08定位：相对定位</title>
<style type="text/css">
h2.left {
position: relative;
left: -20px;
}
h2.right {
position: relative;
left: 50px;
}
</style>
</head>
<body>
<h2>我是位于正常位置的标题,相对定位会按照我的原始位置对我进行移动</h2>
<h2 class="left">样式 "left:-20px" 从我的左侧位置减去 20 像素</h2>
<h2 class="right">样式 "left:50px" 向我的左侧位置增加 50 像素</h2>
</body>
</html>
09定位：绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>09定位：绝对定位</title>
<style type="text/css">
h2.abs {
position: absolute;
left: 100px;
top: 150px;
}
</style>
</head>
<body>
<h2 class="abs">我是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>
</html>
10定位：固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>10定位：固定定位</title>
<style type="text/css">
p.one {
position: fixed;
left: 10px;
top: 30px;
}
p.two {
position: fixed;
right: 10px;
top: 30px;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>
</body>
</html>
11如何使元素不可见
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>11如何使元素不可见</title>
<style type="text/css">
h1.visible {
visibility: visible;
}
h1.invisible {
visibility: hidden;
}
</style>
</head>
<body>
<h1 class="visible">这是可见的标题</h1>
<h1 class="invisible">这是不可见的标题</h1>
</body>
</html>
12把表格元素设置为collapse
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>12把表格元素设置为 collapse</title>
<style type="text/css">
tr.no {
visibility: collapse;
}
</style>
</head>
<body>
<table border="1">
<tr class="yes">
<td>中国
W3School-CSS 分类 (Classification) 实例的更多相关文章
- CSS 分类 (Classification) 实例
CSS 分类 (Classification) 实例CSS 分类属性 (Classification)CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素 ...
- CSS 分类 (Classification)
★★CSS 分类属性 (Classification)★★ ⑴CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度 ...
- 【转】精选30个优秀的CSS技术和实例
今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...
- 精选30个优秀的CSS技术和实例
精选30个优秀的CSS技术和实例 投递人 墙头草 发布于 2008-12-06 20:57 评论(97) 有17487人阅读 原文链接 [收藏] « » 今天,我为大家收集精选了30个使用纯CSS ...
- css技术和实例
今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...
- 30个优秀的CSS技术和实例 By 彬Go 2008-12-04
在这里可发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等…这些实例都是使用纯CSS和HTML实现的.单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文),单击每个实例 ...
- CSS 尺寸 (Dimension) 实例
CSS 尺寸 (Dimension) 实例CSS 尺寸属性CSS 尺寸属性允许你控制元素的高度和宽度.同样,还允许你增加行间距. 属性 描述height 设置元素的高度.line-height 设置行 ...
- CSS 边框(border)实例
CSS 边框(border)实例:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS 边框属性属性 描述bo ...
- CSS 字体(font)实例
CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...
随机推荐
- Cesium原理篇：6 Renderer模块(2: Texture)
Texture也是WebGL中重要的概念,使用起来也很简单.但有句话叫大道至简,如果真的想要用好纹理,里面的水其实也是很深的.下面我们来一探究竟. 下面是WebGL中创建一个纹理的最简过程: var ...
- TCP三次握手，四次挥手
前言 在面试的过程中,TCP的传输协议经常会出现.以前我参加面试的过程中就被问到过,现在轮到我面试其他人的时候,我也会问一些相关的问题.作为一名开发者,无论使用什么样的开发语言,最基本的网络知识一定要 ...
- 第0/24周 SQL Server 性能调优培训引言
大家好,这是我在博客园写的第一篇博文,之所以要开这个博客,是我对MS SQL技术学习的一个兴趣记录. 作为计算机专业毕业的人,自己对技术的掌握总是觉得很肤浅,博而不专,到现在我才发现自己的兴趣所在,于 ...
- SignalR的Javascript客户端API使用方式整理
SignalR的服务端提供了两种实现方式,分别是PersistentConnection和Hub,这两种方式的侧重点不同: PersistentConnection更接近于底层,编程接口比较简单,传输 ...
- 为Linux重新开发MVC,有图有真相
1.写在前面 就连我们自己开始时也在问自己:我们为什么要开发一套MVC,微软的难道不可用用吗? 一开始的理由很简单.为了更好地跨平台部署;在Linux部署过.NET的人们应该知道, 部署起来是有点繁琐 ...
- 一步一步拆解一个简单的iOS轮播图（三图）
导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... ...
- SetZOrder 无效
<SetZOrder的BUG描述>1.部分情况下会出现SetZOrder无效的情况,原因是,你需要调整的对象的父节点是CCSprite2.在调用setZOrder方法的时候.会调用_set ...
- [WCF编程]10.操作：回调操作
一.回调操作概述 WCF支持服务将调用返回给它的客户端.在回调期间,许多方面都将颠倒过来:服务将成为客户端,客户端将编程服务.回调操作可以用在各种场景和应用程序中,但在涉及事件或者服务发生时间需要通知 ...
- Java日期时间操作的一些方法
1. 获得Calendar实例: Calendar c = Calendar.getInstance(); 2. 定义日期/时间的格式: SimpleDateFormat sdf =new Simpl ...
- Tomcat问题，不能正确访问http://localhost:8080/
最近在学Struts2框架部分的内容,但是eclipse中配置tomcat遇到了很大的问题,当辛辛苦苦的配置完了之后,竟让连小猫的首页都不能访问,http://localhost:8080/输入了之后 ...