css系列（6）css的运用（二）
本节继续介绍css在html页面重的应用实例。
(1)div的border-style属性:
none: 无样式
hidden: 除了同表格的边框发生冲突的时候,其它同none
dotted: 点划线
dashed: 虚线
solid: 实线
double: 双线,两条线加上中间的空白等于border-width的取值
groove: 槽状
ridge: 脊状,和groove相反
inset: 凹陷
outset: 凸出,和inset相反
<html>
<head>
<title>示例6.1</title>
<style>
div{
width: 200px;
height: 200px;
float:left
}
#div_01{
border-style: outset;
border-bottom-color: red;
border-width: 50px;
}
#div_02{
border-style: inset;
border-bottom-color: red;
border-width: 50px;
}
#div_03{
border-style: dotted;
border-width: 5px;
}
#div_04{
border-style: solid;
border-color: red;
border-width: 5px;
}
</style>
</head>
<body style="margin:0px;">
<div id="div_01"></div>
<div id="div_02"></div>
<div id="div_03"></div>
<div id="div_04"></div>
</body>
</html>
(2)用ul和li制作的导航栏:
<!DOCTYPE html>
<html>
<head>
<title>示例6.2</title>
<!--type属性干嘛的-->
<style type="text/css">
* {
margin:0px;
}
div {
background-color:yellow;
height:35px;
width:800px;
margin:0px auto;
}
ul li {
float:left;
list-style:none;
width:150px;
line-height:30px;
}
A:hover {
font-size:x-large;
background-color:pink;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">公司简介</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">交易大厅</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
(3)列表与div的混合:
<!DOCTYPE html>
<html>
<head>
<title>示例6.3</title>
<style type="text/css">
* {
font-size:12px;
margin:0px;
}
.divIndex {
height:390px;
width:300px;
margin:0px auto;
padding:0px;
}
.div1 {
height:35px;
width:300px;
background-color:#248AD4;
color:white;
text-indent:30px;
line-height:35px;
}
.t1 {
font-weight:bolder;
text-indent:10px;
line-height:25px;
}
.t2 {
color:#236EB2;
border-bottom:1px dashed #cccccc;
line-height:25px;
}
.t3 {
color:red;
text-align:right;
font-weight:bolder;
border-bottom:1px dashed #cccccc;
}
.t4 {
color:blue;
font-weight:bolder;
text-align:right;
border-bottom:1px dashed #cccccc;
}
</style>
</head>
<body>
<div class="divIndex">
<table id="td1" cellpadding="0px" cellspacing="0px">
<tr>
<td>
<div class="div1">程序设计学习进程信息</div>
</td>
</tr>
<tr>
<td>
<table cellpadding="0px" cellspacing="0px" width="300px">
<tr>
<td class="t1">基础班</td>
<td></td>
</tr>
<tr>
<td class="t2">北京-2014年6月14号</td>
<td class="t3">预约报名中</td>
</tr>
<tr>
<td class="t2">北京-2014年5月5号</td>
<td class="t4">爆满已开班</td>
</tr>
<tr>
<td class="t2">广州-2014年6月21号</td>
<td class="t3">预约报名中</td>
</tr>
<tr>
<td class="t2">北京-2014年5月20号</td>
<td class="t4">爆满已开班</td>
</tr>
<tr>
<td class="t1">进阶班</td>
<td></td>
</tr>
<tr>
<td class="t2">北京-2014年6月4号</td>
<td class="t3">预约报名中</td>
</tr>
<tr>
<td class="t2">北京-2014年4月26号</td>
<td class="t4">爆满已开班</td>
</tr>
<tr>
<td class="t2">广州-2014年6月22号</td>
<td class="t3">预约报名中</td>
</tr>
<tr>
<td class="t2">广州-2014年5月13号</td>
<td class="t4">爆满已开班</td>
</tr>
<tr>
<td class="t1">高级班</td>
<td></td>
</tr>
<tr>
<td class="t2">北京-2014年6月14号</td>
<td class="t3">远程班预约报名中</td>
</tr>
<tr>
<td class="t2">北京-2014年6月4号</td>
<td class="t3">远程班预约报名中</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
(4)伪选择器:
a标签的四个属性:
1.a:link{text-decoration:none ; color:#c00 ;}
2.a:visited {text-decoration:none ; color:#c30 ;}
3.a:hover {text-decoration:underline ; color:#f60 ;}
4.a:active {text-decoration:none ; color:#F90 ;}
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。写的时候尽量按照顺序。
<html>
<head>
<title>伪选择器</title>
<style type="text/css">
p:hover {
color: blue;
cursor: pointer;
font-size: 20px;
}
#p_firstline:first-line {
font-size:25px;
} #p_firstletter:first-letter {
font-size:30px;
color:red;
}
a:hover {
text-decoration:none;
color:red;
font-size:25px;
}
a:active {
color:purple;
font-size:30px;
}
</style>
</head>
<body>
<p id="p_firstline">
通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。<br/>
不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那
时候对标准的支持并不是企业的优先选择。</p>
<p id="p_firstletter">比方说，Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。我们又该如何是
好呢？
</p>
<a href="##">伪选择器</a><br />
<a href="##">MenAngel</a><br />
<a href="##">sunjimeng</a><br />
<a href="##">孙继锰</a><br />
</body>
</html>
(5)设置背景图片:
<html>
<head>
<style type="text/css">
div.div1 {
width:300px;
height:200px;
background-image: url(http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_background.gif);
background-repeat: repeat-x;
}
div.div2{
width:300px;
height:200px;
background-image: url(http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_background.gif);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
css系列（6）css的运用（二）的更多相关文章
- css系列教程--css文件的创建
css文件的创建:1.外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.cs ...
- 深入理解css系列：css定位
一.概述 1.默认文档流定位方式 (1).HTML默认文档以流模式定位,即内容元素按照先后顺序依次上下定位: (2).HTML标签元素总体分为块状元素.内联元素.内联块状元素,可通过该标签对应的DOM ...
- CSS系列(8) CSS后代选择器和子选择器详解
一.CSS后代选择器详解 1, 生动介绍基本概念 一个标签嵌B在另一个标签A内部,B就是A的后代. 而且,B的后代也是A的后代,这就叫“子子孙孙无穷尽也”. 比如: <div> < ...
- 我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色，如何使用火狐浏览器的Firebug插件查看网页的字体
一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体 ...
- CSS系列：CSS常用样式
1. 通用样式 Base.css * { margin:; padding:; } body { width: 1000px; margin: 0 auto; font-size: 12px; fon ...
- CSS系列：CSS选择器
选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...
- CSS系列：CSS的继承与层叠特性
1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...
- CSS系列：CSS中盒子模型
盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...
- CSS系列：CSS中盒子之间的关系
1. 标准文档流 标准文档流是值在不使用其他的雨排列和定位相关的特殊CSS规则时,各种元素的排列规则. 1.1 块级元素(block level) 块级元素不会排在同一行中,总是以一个块的形式表现出来 ...
- CSS系列：CSS中盒子的浮动与定位
1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为l ...
随机推荐
- postgresql on centos (sequelize+pg+nodejs):Failed to find PostgresSQL server.Pleast double check your settings
公司的一个项目,使用的nodejs做服务端,数据库是postgresql,在本地时一切ok,放在centos时,postgresql配置ok,可以远程访问,但是nodejs在centos启动时,就会报 ...
- Linux Linux常用命令二
whoami 我是谁命令 --该命令用户查看当前系统当前账号的用户名 --由于系统管理员通常需要使用多种身份登录系统,李儒通常使用普通用户登录系统,然后再以su命令切换到root身份对系统进行灌篮.这 ...
- 第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件
jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...
- onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发. onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本. onload 和 onunl ...
- Linux shell （ssh批量配置免秘）读取配置文件，进行远程操作
需要目标机器安装有 expect 命令 分成五个文件config.ini(配置文件).id_ras.pub(公钥).read.sh(一个函数,用于读取配置文件).test.sh(执行文件).run.s ...
- linux 分区格式查看
Linux分区格式查看 两个文件 /etc/fstab 和/etc/mtab /etc/fstab是用来存放文件系统的静态信息的文件,当系统启动的时候. 系统会自动地从这个文件读取信息,并且会自动将此 ...
- RAC中数据文件创建到了本地路径（非系统表空间） 使用rman转移
环境: 11.2.0.1 + RHEL5.8 參考文档ID:1678747.1 1.模拟创建 一节点: SQL> create tablespace tdb datafile '/u02/app ...
- 2017 css新特性
2017年要学习的三个CSS新特性 这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东 ...
- 检测手机中是否安装了google地图，没有则提示安装，并跳转到地图查找特定的地点
/** * 检测手机中是否安装了某个特定的app,若没有提示安装 */ PackageInfo name_2 = null; try { // 若没有这个包名会异常 name_2 = getPacka ...
- PHP中foreach详细解读
oreach 语法结构提供了遍历数组的简单方式.foreach 仅能够应用于数组和对象,如果尝试应用于其他数据类型的变量,或者未初始化的变量将发出错误信息.有两种语法: foreach (array_ ...