<!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样式表</title>

    	<style type="text/css">

			.divclassB{

				width:100px;

				height:100px;

				border:1px green dotted;

				background:#0F0	;

				margin-top:10px;

				}

		*{

			font:"黑体";

			margin:0px;

			padding:0px;}

		div{

			background-color:#C00}

		#DD{

				width:100px;

				height:100px;

				border:1px green dotted;

				background:#0F0	;

				margin-top:10px;

			}

        </style>

    	<link href="Untitled-2.css" rel="stylesheet" type="text/css" />

</head>

    <body>

    	<div class="divclassA" style="width:100px; height:100px; border:1px red solid;">内联样式表</div>

        <div class="divclassB">内嵌样式表</div>

        <div class="divclassC"></div>

        <div class="divclassD" id="DD" name="dd"></div>

    </body>

</html>

　　样式表的几点常用：background-color：  背景颜色

background-image：url                           设置图片背景

background-repeat平铺      repeat-x 横向平铺

background-position：center 背景居中

background-position：right top 图片在右上角

font-family 字体

font-weight：bold 加粗

font-style：italic 倾斜

text-decoration：underline下划线

text-align：center 水平居中对齐 left right

vertical-align：middle 垂直居中 top bottom

{margin in：opx auto；}自动居中

hover  鼠标移上去

position与absolute

 


外层没有position：absolute（或relative），div相对于浏览器定位。有的话，div相对于边框定位

.divclassA :hover{cursor:pointer}有小手

a{ text-decoration：none}有下划线

a：hover{text-decoration：underline}鼠标移上去有下划线

a：active{background：black}点击一瞬间背景变黑

a：visited 所有被访问的链接

导航栏简易制作

<!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>无标题文档</title>

	<style type="text/css">

    	#nav{

			width:800px;

			height:100px;

			border:1px solid black;

			margin:0px auto;

			}

		.nav-banner{

			text-align:center;

			line-height:100px;

			width:20%;

			height:100px;

			float:left;

			position:relative;

			}

    	.nav-banner:hover{

			background-color:#0F9;

			color:#F00;

			cursor:pointer;

			}

    </style>

</head>

<body>

	<div id="nav">

    	<div class="nav-banner">第一导航</div>

        <div class="nav-banner">第二导航</div>

        <div class="nav-banner">第三导航</div>

        <div class="nav-banner">第四导航</div>

        <div class="nav-banner">第五导航</div>

    </div>

</body>

</html>

　　

深度理解CSS样式表，内有彩蛋....的更多相关文章

  1. CSS样式表继承详解

    最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...

  2. css样式表：样式分类，选择器。样式属性，格式与布局

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

  3. HTML css 样式表

    CSS样式表 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14 ...

  4. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  5. 网站开发综合技术 第二部分 CSS样式表

    第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1 ...

  6. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

  7. HTML基础（三）——css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  8. DOM与CSS样式表

    在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...

  9. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

随机推荐

  1. 开源免费且稳定实用的.NET PDF打印组件itextSharp（.NET组件介绍之八）

    在这个.NET组件的介绍系列中,受到了很多园友的支持,一些园友(如:数据之巅. [秦时明月]等等这些大神 )也给我提出了对应的建议,我正在努力去改正,有不足之处还望大家多多包涵.在传播一些简单的知识的 ...

  2. Jvm 内存浅析 及 GC个人学习总结

    从诞生至今,20多年过去,Java至今仍是使用最为广泛的语言.这仰赖于Java提供的各种技术和特性,让开发人员能优雅的编写高效的程序.今天我们就来说说Java的一项基本但非常重要的技术内存管理 了解C ...

  3. 在禅道中实现WORD等OFFICE文档转换为PDF进行在线浏览

    条件: 安装好禅道的服务器 能直接浏览PDF的浏览器(或通过 安装插件实现 ) 文档转换服务程序(建议部署在另一台服务器上)     实现 原理: 修改禅道的文件预览功能(OFFICE文档其使用的是下 ...

  4. 敏捷转型历程 - Sprint3 Grooming

    我: Tech Leader 团队:团队成员分布在两个城市,我所在的城市包括我有4个成员,另外一个城市包括SM有7个成员.另外由于我们的BA离职了,我暂代IT 的PO 职位.PM和我在一个城市,但他不 ...

  5. fedora上部署ASP.NET——（卡带式电脑跑.NET WEB服务器）

    andrew,20130601,guilin 本文记录在树莓派(fedora)上部署ASP.NET MVC2 的过程. 本文共分为六部分,分别是前置条件,Apache的安装,Mysql的安装,安装mo ...

  6. Web API 入门指南 - 闲话安全

    Web API入门指南有些朋友回复问了些安全方面的问题,安全方面可以写的东西实在太多了,这里尽量围绕着Web API的安全性来展开,介绍一些安全的基本概念,常见安全隐患.相关的防御技巧以及Web AP ...

  7. （转）利用libcurl获取新浪股票接口, ubuntu和openwrt实验成功(三)

    1.  利用 CURLOPT_WRITEFUNCTION 设置回调函数, 利用 CURLOPT_WRITEDATA 获取数据指针 官网文档如下 CALLBACK OPTIONS CURLOPT_WRI ...

  8. ABP框架搭建项目系列教程基础版完结篇

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 经过前面十二篇的基础教程,现在终于该做个总结了. 回顾 第一篇,我们建议新手朋友们先通过ABP官网的启动模板生成解决方案,因为这样 ...

  9. 关于python中的flush问题

    今天写了一个控制台下的进度条小程序,遇到了关于flush的问题,在这里小小的总结一下. 首先在要flush的字符串必须后边加上'\r'(回车) 将数据送入缓冲区这样在新打印字符的时候就可以将原来的显示 ...

  10. iOS开发中静态库之".framework静态库"的制作及使用篇

    iOS开发中静态库之".framework静态库"的制作及使用篇 .framework静态库支持OC和swift .a静态库如何制作可参照上一篇: iOS开发中静态库之" ...