百威
- 浏览: 711502 次
- 来自: ...
-
文章分类
最新评论
-
ranguisheng：
可以加点注释,代码不便于阅读.
用java实现数据库连接池的一个简单示例 -
abcd880129：
这样写的话，还要用专门的下载工具，不然，只能下到一个为空的ex ...
ZK下载文件时,不在服务器生成文件直接下载 -
234369425：
同上，是20
java计算阶乘 -
CodeToMyLaw：
如果目录中含有中文呢？
[^\x00-\xff] 中文的 ...
js验证文件目录格式的正确性 -
yanzhoupuzhang：
加了，还是报那个错误！
org.apache.commons.dbcp.BasicDataSource的解决方法
<html> <head> <title>标题在这里</title> </head> <body> <h2>CSS的各种标记</h2> <p>从这里开始正文的内容</p> </body> </html>
<html> <head> <title>标题在这里</title> </head> <body> <h2><font color="#0033CC" face="幼圆">标记文字01</font></h2> <p>CSS标记正文内容01</p> <h2><font color="#0033CC" face="幼圆">标记文字02</font></h2> <p>CSS标记正文内容02</p> <h2><font color="#0033CC" face="幼圆">标记文字03</font></h2> <p>CSS标记正文内容03</p> <h2><font color="#0033CC" face="幼圆">标记文字04</font></h2> <p>CSS标记正文内容04</p> </body> </html>
<html>
<head>
<title>标题在这里</title>
<style>
<!--
h2{
font-family:黑体;
color:#FF0000;
}
-->
</style>
</head>
<body>
<h2>标记文字01</h2>
<p>CSS标记正文内容01</p>
<h2>标记文字02</h2>
<p>CSS标记正文内容02</p>
<h2>标记文字03</h2>
<p>CSS标记正文内容03</p>
<h2>标记文字04</h2>
<p>CSS标记正文内容04</p>
</body>
</html>
<html>
<head>
<title>页面标题</title>
<style>
<!--
ul{
list-style-type:none;
display:inline;
}
-->
</style>
</head>
<body>
<ul>
<li>浏览器区别1</li>
<li>浏览器区别2</li>
</ul>
</body>
</html>
<html> <head> <title>标题在这里</title> </head> <body> <p style="color:#0000FF; font-size:18px; font-weight:bold;">CSS内容1</p> <p style="color:#000000; text-decoration:underline; font-style:italic;">正文CSS2</p> <p style="color:#FF33CC; font-size:28px; font-weight:bold;">CSS正文内容3</p> </body> </html>
<html>
<head>
<title>页面标题</title>
<style type="text/css">
<!--
p{
color:#FF33CC;
text-decoration:underline;
font-style:italic;
font-size:28px;
}
-->
</style>
</head>
<body>
<p>紫红色、斜体、下划线、28px的效果1</p>
<p>紫红色、斜体、下划线、28px的效果2</p>
<p>紫红色、斜体、下划线、28px的效果3</p>
<p>紫红色、斜体、下划线、28px的效果4</p>
</body>
</html>
<html> <head> <title>标题在这里</title> <link href="1.css" type="text/css" rel="stylesheet"> </head> <body> <h2>第一行标题1</h2> <p>紫红色、斜体、下划线、28px的效果1</p> <h2>第二行标题2</h2> <p>紫红色、斜体、下划线、28px的效果2</p> </body> </html>
<html> <head> <title>标题在这里</title> <style type="text/css"> <!-- @import url(1.css); --> </style> </head> <body> <h2>第一行标题1</h2> <p>紫红色、斜体、下划线、28px的效果1</p> <h2>第二行标题2</h2> <p>紫红色、斜体、下划线、28px的效果2</p> <h3>第三行标题3</h3> <p>紫红色、斜体、下划线、28px的效果3</p> </body> </html>
<html>
<head>
<title>class选择器</title>
<style type="text/css">
<!--
.first{
color:blue; /* 蓝色 */
font-size:17px; /* 文字大小 */
}
.second{
color:red; /* 红色 */
font-size:20px; /* 文字大小 */
}
.third{
color:cyan; /* 青色 */
font-size:23px; /* 文字大小 */
}
-->
</style>
</head>
<body>
<p class="first">class类别选择器1</p>
<p class="second">class类别选择器2</p>
<p class="third">class类别选择器3</p>
<h3 class="second">h3同样适用</h3>
</body>
</html>
<html>
<head>
<title>标记选择器.class</title>
<style type="text/css">
<!--
h4{ /* 标记选择器 */
color:red;
font-size:18px;
}
h4.special{ /* 标记.类别选择器 */
color:blue; /* 蓝色 */
font-size:24px; /* 文字大小 */
}
.special{ /* 类别选择器 */
color:green;
}
-->
</style>
</head>
<body>
<h4>标记选择器1.class1</h4>
<h4>标记选择器2.class2</h4>
<h4 class="special">标记选择器3.class3</h4>
<h4>标记选择器4.class4</h4>
<h4>标记选择器5.class5</h4>
<p class="special">使用于别的标记</p>
</body>
</html>
<html>
<head>
<title>ID选择器</title>
<style type="text/css">
<!--
#one{
font-weight:bold; /* 粗体 */
}
#two{
font-size:31px; /* 字体大小 */
color:#999900; /* 颜色 */
}
-->
</style>
</head>
<body>
<p id="one">ID选择器使用1</p>
<p id="two">ID选择器使用2</p>
<p id="two">ID选择器使用3</p>
</body>
</html>
<html>
<head>
<title>选择器集体声明</title>
<style type="text/css">
<!--
h1, h2, h3, h4, h5, p{ /* 集体声明 */
color:purple; /* 文字颜色 */
font-size:14px; /* 字体大小 */
}
h2.special, .special, #one{ /* 集体声明 */
text-decoration:underline; /* 下划线 */
}
-->
</style>
</head>
<body>
<h1>选择器集体声明h1</h1>
<h2 class="special">选择器集体声明h2</h2>
<h3>选择器集体声明h3</h3>
<h4>选择器选择器集体声明h4</h4>
<h5>集体声明h5</h5>
<p>选择器集体声明p1</p>
<p class="special">选择器集体声明p2</p>
<p id="one">选择器集体声明p3</p>
</body>
</html>
<html>
<head>
<title>CSS选择器的嵌套声明</title>
<style type="text/css">
<!--
p b{ /* 嵌套声明 */
color:maroon; /* 颜色 */
text-decoration:underline; /* 下划线 */
font-size:30px; /* 文字大小 */
}
-->
</style>
</head>
<body>
<p>选择器嵌套<b>使用CSS标</b>记的方法</p>
选择器嵌套之外<b>的标</b>记并不生效
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS的子选择器</title>
<style type="text/css">
ul.myList > li > a{ /* 子选择器 */
text-decoration:none; /* 没有下划线 */
color:#336600;
}
</style>
</head>
<body>
<ul class="myList">
<li><a href="http://picasaweb.google.com/isaacshun">isaac's Picasa</a>
<ul>
<li><a href="#">CSS1</a></li>
<li><a href="#">CSS2</a></li>
<li><a href="#">CSS3</a></li>
</ul>
</li>
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS的属性器</title>
<style type="text/css">
a[title=CSS1]{
text-decoration:none; /* 没有下划线 */
color:#336600;
}
</style>
</head>
<body>
<ul class="myList">
<li><a href="http://picasaweb.google.com/isaacshun">isaac's Picasa</a>
<ul>
<li><a href="#" title="CSS1">CSS1</a></li>
<li><a href="#" title="CSS2">CSS2</a></li>
<li><a href="#" title="CSS3">CSS3</a></li>
</ul>
</li>
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>设置文字效果</title>
<style type="text/css">
p{
font-family:黑体; /* 文字字体 */
font-size:35px; /* 文字大小 */
color:#0033CC; /* 颜色 */
font-weight:bold; /* 粗体 */
font-style:italic; /* 斜体 */
text-decoration:line-through; /* 删除线 */
}
</style>
</head>
<body>
<p>CSS设置文字效果</p>
</body>
</html>
<html>
<head>
<title>行间距line-height</title>
<style>
<!--
p.one{
font-size:10pt;
line-height:8pt; /* 行间距，绝对数值，行间距小于字体大小 */
}
p.second{ font-size:18px; }
p.third{ font-size:10px; }
p.second, p.third{
line-height: 1.5em; /* 行间距，相对数值，1.5倍行距 */
}
-->
</style>
</head>
<body>
<p class="one">冬至，是我国农历中一个非常重要的节气，也是一个传统节日，至今仍有不少地方有过冬至节的习俗。冬至俗称“冬节”、“长至节”、“亚岁”等。早在二千五百多年前的春秋时代，我国已经用土圭观测太阳测定出冬至来了，它是二十四节气中最早制订出的一个。时间在每年的阳历12月22日或者23日之间。</p>
<p class="second">冬至是北半球全年中白天最短、黑夜最长的一天，过了冬至，白天就会一天天变长。古人对冬至的说法是：阴极之至，阳气始生，日南至，日短之至，日影长之至，故曰“冬至”。冬至过后，各地气候都进入一个最寒冷的阶段，也就是人们常说的“进九”，我国民间有“冷在三九，热在三伏”的说法。</p>
<p class="third">在我国古代对冬至很重视，冬至被当作一个较大节日，曾有“冬至大如年”的说法，而且有庆贺冬至的习俗。《汉书》中说：“冬至阳气起，君道长，故贺。”人们认为：过了冬至，白昼一天比一天长，阳气回升，是一个节气循环的开始，也是一个吉日，应该庆贺。《晋书》上记载有“魏晋冬至日受万国及百僚称贺……其仪亚于正旦。”说明古代对冬至日的重视。</p>
</body>
</html>
<html>
<head>
<title>首字放大</title>
<style>
<!--
body{
background-color:#564700; /* 背景色 */
}
p{
font-size:15px; /* 文字大小 */
color:#FFFFFF; /* 文字颜色 */
}
p span{
font-size:60px; /* 首字大小 */
float:left; /* 首字下沉 */
padding-right:5px; /* 与右边的间隔 */
font-weight:bold; /* 粗体字 */
font-family:黑体; /* 黑体字 */
color:yellow; /* 字体颜色 */
}
-->
</style>
</head>
<body>
<p><span>端</span>午节是古老的传统节日，始于中国的春秋战国时期，至今已有2000多年历史。据《史记》“屈原贾生列传”记载，屈原，是春秋时期楚怀王的大臣。他倡导举贤授能，富国强兵，力主联齐抗秦，遭到贵族子兰等人的强烈反对，屈原遭馋去职，被赶出都城，流放到沅、湘流域。他在流放中，写下了忧国忧民的《离骚》、《天问》、《九歌》等不朽诗篇，独具风貌，影响深远（因而，端午节也称诗人节）。公元前278年，秦军攻破楚国京都。屈原眼看自己的祖国被侵略，心如刀割，但是始终不忍舍弃自己的祖国，于五月五日，在写下了绝笔作《怀沙》之后，抱石投汨罗江身死，以自己的生命谱写了一曲壮丽的爱国主义乐章。</p>
<p>传说屈原死后，楚国百姓哀痛异常，纷纷涌到汨罗江边去凭吊屈原。渔夫们划起船只，在江上来回打捞他的真身。有位渔夫拿出为屈原准备的饭团、鸡蛋等食物，“扑通、扑通”地丢进江里，说是让鱼龙虾蟹吃饱了，就不会去咬屈大夫的身体了。人们见后纷纷仿效。一位老医师则拿来一坛雄黄酒倒进江里，说是要药晕蛟龙水兽，以免伤害屈大夫。后来为怕饭团为蛟龙所食，人们想出用楝树叶包饭，外缠彩丝，发展成棕子。</p>
</body>
</html>
<html>
<head>
<title>边框</title>
<style>
<!--
img.test1{
border-style:dotted; /* 点画线 */
border-color:#FF9900; /* 边框颜色 */
border-width:6px; /* 边框粗细 */
}
img.test2{
border-style:dashed; /* 虚线 */
border-color:#000088; /* 边框颜色 */
border-width:2px; /* 边框粗细 */
}
-->
</style>
</head>
<body>
<img src="cartoon1.jpg" class="test1">
<img src="cartoon1.jpg" class="test2">
</body>
</html>
<html>
<head>
<title>图文混排</title>
<style type="text/css">
<!--
body{
background-color:543b32; /* 页面背景颜色 */
margin:0px;
padding:0px;
}
img{
float:left; /* 文字环绕图片 */
}
p{
color:#FFFF00; /* 文字颜色 */
margin:0px;
padding-top:10px;
padding-left:5px;
padding-right:5px;
}
span{
float:left; /* 首字放大 */
font-size:85px;
font-family:黑体;
margin:0px;
padding-right:5px;
}
-->
</style>
</head>
<body>
<img src="hop.jpg" border="0">
<p><span>河</span>马，偶蹄目、河马科，英文名hoppopotamus。原来遍布非洲所有深水的河流与溪流中，现在范围已缩小，主要居住在非洲热带的河流间。它们喜欢栖息在河流附近沼泽地和有芦苇的地方。生活中的觅食、交配、产仔、哺乳也均在水中进行。</p>
<p>河马的特点是吻宽嘴大，四肢短粗、躯体象个粗圆桶。胃3室不反刍。鼻孔在吻端上面，与上方的眼睛和耳朵呈一条直线。这样它全体潜伏水中只须将头顶露出水面就能嗅、视、听兼呼吸了。体长3.75-4.6米，尾长约56厘米，肩高约1.5米，体重3-4.6吨，下犬齿长约60厘米，可重达3公斤。河马皮肤排出的液体含红色色素，经皮肤反射显得象是红色的，引起了河马出“血汗”的说法。</p>
<p>河马极善游泳，在受惊时，一般避入水中。每天大部分时间在水中，潜伏水下时一般每3、5分钟把头露出水面呼吸一次，但可潜伏约半小时不出水面来换气。它们的皮肤长时间离水会干裂。河马成对或结成小群活动，老年雄性常单独活动。夜行性：它们几乎整个白天都在河水中或是河流附近睡觉或休息，晚上出来吃食，有时会顺水游出30多公里觅食。主要以水生植物为食；偶食陆地作物，以草为主，有时到田地去吃庄稼，食物短缺时，它们也吃肉，据称，河马是路地上最大的食肉动物(杂食)。河马无定居：不在一个地方长期停留，每隔数日便迁到新地方去。</p>
<p>河马繁殖期不固定,全年均繁殖,每产一仔,孕期227-240天，仔兽出生时体重27-45公斤。在人为饲养下约3岁性成熟，在野外5、6岁成熟。寿命40-50年。河马的皮下脂肪约5厘米厚。人们常猎杀它取其脂肪、肉和厚皮。脂肪可得90公斤。当地人非常珍视它的肉，肉味略同于野猪肉。牙齿质量也很好,是珍贵的雕刻材料，可作为象牙替代品。</p>
</body>
</html>
<html>
<head>
<title>利用背景颜色分块</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-color:#eaddef; /* 页面背景色 */
}
.topbanner{
background-color:#1e0c25; /* 顶端banner的背景色 */
}
.leftbanner{
width:22%; height:330px;
vertical-align:top;
background-color:#22072c; /* 左侧导航条的背景色 */
color:#FFFFFF;
text-align:left;
padding-left:40px;
font-size:14px;
}
.mainpart{
text-align:center;
}
-->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="1" width="100%" border="0">
<tr>
<td colspan="2" class="topbanner"><img src="banner1.jpg" border="0"></td>
</tr>
<tr>
<td class="leftbanner">
<br><br>首页<br><br>分类讨论
<br><br>谈天说地<br><br>精华区
<br><br>我的信箱<br><br>休闲娱乐
<br><br>立即注册<br><br>离开本站
</td>
<td class="mainpart">正文内容...</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>背景图片</title>
<style>
<!--
body{
background-image:url(bg1.jpg); /* 页面背景图片 */
}
-->
</style>
</head>
<body>
</body>
</html>
<html>
<head>
<title>背景重复</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-image:url(bg2.jpg); /* 背景图片 */
background-repeat:repeat-y; /* 垂直方向重复 */
background-color:#0066FF; /* 背景颜色 */
}
-->
</style>
</head>
<body>
</body>
</html>
<html>
<head>
<title>按钮超链接</title>
<style>
<!--
a{ /* 统一设置所有样式 */
font-family: Arial;
font-size: .8em;
text-align:center;
margin:3px;
}
a:link, a:visited{ /* 超链接正常状态、被访问过的样式 */
color: #A62020;
padding:4px 10px 4px 10px;
background-color: #ecd8db;
text-decoration: none;
border-top: 1px solid #EEEEEE; /* 边框实现阴影效果 */
border-left: 1px solid #EEEEEE;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}
a:hover{ /* 鼠标经过时的超链接 */
color:#821818; /* 改变文字颜色 */
padding:5px 8px 3px 12px; /* 改变文字位置 */
background-color:#e2c4c9; /* 改变背景色 */
border-top: 1px solid #717171; /* 边框变换，实现“按下去”的效果 */
border-left: 1px solid #717171;
border-bottom: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
}
-->
</style>
</head>
<body>
<a href="#">首页</a>
<a href="#">一起走到</a>
<a href="#">从明天起</a>
<a href="#">纸飞机</a>
<a href="#">下一站</a>
<a href="#">门</a>
<a href="#">其它</a>
</body>
</html>
<html>
<head>
<title>项目列表</title>
<style>
<!--
body{
background-color:#c1daff;
}
ul{
font-size:0.9em;
color:#00458c;
list-style-type:decimal; /* 项目编号 */
}
-->
</style>
</head>
<body>
<p>四大名著</p>
<ul>
<li>sanguo 三国演义</li>
<li>honglou 红楼梦</li>
<li>shuihu 水浒传</li>
<li>xiyou 西游记</li>
</ul>
</body>
</html>
<html>
<head>
<title>无需表格的菜单</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation li {
border-bottom:1px solid #ED9F9F; /* 添加下划线 */
}
#navigation li a{
display:block; /* 区块显示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左边的粗红边 */
border-right:1px solid #711515; /* 右侧阴影 */
}
#navigation li a:link, #navigation li a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠标经过时 */
background-color:#990020; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
-->
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Weather</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</body>
</html>
h2{
color:#0000FF;
}
p{
color:#FF33CC;
text-decoration:underline;
font-style:italic;
font-size:28px;
}
分享到：
发表评论
相关推荐
【CSS基础学习】是网页设计领域中的重要环节，它是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。CSS（层叠样式表）让网页设计者能够分离内容与表现，使得网页设计更加灵活且易于...
DIV+CSS教程——第一天XHTML_CSS基础知识
css基础1.html.Qm.apk
CSS基础知识点总结 本资源摘要信息涵盖了CSS基础知识点，包括基础认知、基础选择器、字体和文本样式、Chrome调试工具、综合案例等方面的知识点。 一、基础认知 * CSS的介绍：层叠样式表（Cascading style sheets...
本“CSS基础学习源码”是一个适合初学者的资源包，提供了丰富的实践材料，帮助理解并掌握CSS的基础知识。 首先，我们来详细探讨CSS的基础概念： 1. **选择器与声明**：CSS的核心在于选择器和声明。选择器用于定位...
### CSS基础教程知识点详解 #### 一、CSS简介 **CSS**，全称为 **Cascading Style Sheets**（级联样式表），是一种用于定义HTML文档布局的语言。它可以帮助开发者更好地控制网页的外观，如字体、颜色、间距、大小...
### CSS基础知识解析 #### 一、CSS简介 - **1.1 HTML的局限性** HTML是一种用于构建网页内容的标准标记语言。它主要用于定义网页内容的结构和意义，例如使用`<h1>`标签来表示一级标题，使用`<p>`标签来表示段落...
在IT领域，CSS...总结，学习CSS基础不仅涉及语法和选择器，还包括布局、响应式设计以及预处理器的使用。通过不断实践和了解这些概念，初学者可以逐步提升CSS技能，从而更好地设计和构建美观、功能完善的网页。
HTML和CSS基础知识点 HTML是用来描述网页的一种语言，指的是超文本标记语言（Hyper Text Markup Language），它不是一种编程语言，而是一种标记语言。HTML使用标记标签来描述网页的结构和内容。 标记语言是一套...
书名：CSS基础教程 作者：（英）柯林森 著，刘志忠 等译 来源：人民邮电出版社 出版时间：2007年09月 ISBN:9787115164629 定价：49元 内容介绍： 本书是优秀的CSS 入门书，重点讲述了如何使用CSS 实现基于Web ...
【CSS基础知识详解】 CSS，全称为Cascading Style Sheets，中文通常翻译为“层叠样式表”，是用于控制网页布局和样式的规范。它弥补了HTML在表现层设计上的局限性，让网页设计更加灵活多样。自IE 3.0开始，浏览器...
一、CSS语法规范 二、CSS选择器 （1）基础选择器 （i）标签选择器 （ii）类选择器 （iii）id选择器 （iv）通配符选择器 （2）复合选择器 （i）后代选择器 （ii）子代选择器 （iii）并集选择器 （iv）伪类选择器 三、...
### CSS基础代码详解 #### CSS入门精要：掌握核心概念与实践技巧 **CSS（Cascading Style Sheets）**，即层叠样式表，是一种用于描述网页文档（如HTML或XML）外观和格式的标记语言。它使得网页设计更加灵活、高效...
### 一、CSS基础 1. **选择器与声明**：CSS的核心是选择器和声明。选择器定位HTML元素，声明则定义样式规则，如`color:red;`表示设置文本颜色为红色。 2. **盒模型**：理解CSS盒模型至关重要，它包括元素的边距...
二、CSS基础知识点 1. CSS链接方式：将CSS文件链接到HTML文档中，以实现内容和表现的分离。这样可以提高网页的可维护性和可读性。 2. 基本标签定义：在CSS文件中，需要对一些基本的标签进行定义或重置，以确保网页...
在"前端CSS基础——常规流中练习对应图片代码"中，你可能会看到如何通过CSS控制元素在常规流中的位置和大小。例如，可以使用`display`属性来改变元素的行为，将一个内联元素转换为块级元素，或者创建一个内联块级...
HTML+CSS 基础知识点总结 HTML+CSS 是前端开发的基础技术，掌握 HTML、CSS 和 JavaScript 语言是必不可少的。下面是 HTML+CSS 基础知识点总结： 1. HTML 是网页内容的载体，内容就是网页制作者放在页面上想要让...
**CSS基础代码详解** 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和样式。本资料包包含了作者学习CSS时编写的代码，非常适合CSS初学者作为学习素材。通过阅读和理解这些...
整理好的一份关于css的知识大纲，希望能够帮助到大家，可以用来复习回顾