css样式模板代码
篇一:模板CSS样式的分类定义文档
所有模块(内容模块、功能模块和自定义模块)除按照自身样式
定义显示效果还会继承该模块当前所在区域的样式表的定义。当这几种样式定义不冲突时会叠加样式表来显示效果;当这几种样式定义冲突时会按照一定的优先级对“冲突样式”进行选择性的使用。
继承性:下级自动继承上级样式
例如:首页A区域内容able.HomeAreaA tbody td设定字体黑色、大小12px、字体加粗;而首页A01区域内容table.HomeAreaA01 tbody td没有设定字体颜色及大小;那么最终A01区域内容显示效果会是字体黑色、大小12px、字体加粗。
优先级:1.功能模块自身样式表设定高于系统其它样式表设定,无论放置在何处都会以自身样式设定为准 例如:当“推荐网站”功能模块放置在首页A01区域,table.websit td
(推荐网站标题样式)设定字体红色、大小12px;而table.HomeAreaA01 td(A01区域标题样式)设定字体黑色、大小12px、字体加粗;那么最终放置在首页A01区域的推
1
荐网站显示效果会是字体红色、大小12px、字体加粗。
2.最小范围样式设定高于外围样式设定
例如:首页A01区域标题table.HomeAreaA01 thead td
设定字体黑色、大小12px;而首页A区域标题able.HomeAreaA thead td设定字体黄色、大小12px、字体加粗;那么最终A01区域标题显示效果会是字体黑色、大小12px、字体加粗。
功能模块CSS样式:
信息反馈CSS样式:
首页、内容页CSS样式:
网页链接样式:
感谢会员zhangyhc提的建议和帮助将css样式表名称分类~
篇二:DIV+CSS模板_DIV+CSS模板
div+css
欢迎访问DIVCSS5-DIV+CSS网!本站以通俗易懂讲解和
分析让您了解和轻松学习到DIV CSS(CSS技术)、轻松实现xhtml标准网页重构制作。
说明:大家可以通过DIVCSS5主站上的所有免费CSS
足可学会DIV CSS技术 - 如果需要深入系统、较短时间达到理想效果可进入CSS培训班学习提升自己,学习我们思维与创业精神;如需DIV CSS制作可以进入CSS5。
2
DIVCSS5-DIV+CSS网站使用指南-CSS学习指南:
1、网页制作新手可以试着进入html基础栏目了解 /html/ 必备的HTML基础
2、CSS新手可以从CSS基础开始学习 /rumen/ 必备的DIV CSS基础
3、有了一定CSS基础和html基础,有兴趣可以进入其它栏目逐步了解CSS加深DIV+CSS技术,寻找自己疑问和答案!
4、有什么问题可进入CSS论坛(/bbs/)交流、提交疑,问我们将全力为您解答疑问~
什么是CSS,CSS是什么,
CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表又被我们称为CSS样式,CSS样式又被作为一种能制作出各种样式网页的技术统称。在以后网页重构用到css的时候自然会对CSS样式更加深层次的认识CSS,知道CSS作用。 什么是DIV+CSS,DIV CSS是什么,
简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。首先认识DIV是用于搭建html网页结构(框架)标签,像<b、<h1、<span等html标签一样,再认识CSS是用于创建网页表现(样式/美化)样式表统称,通过css来设置div标签样式,这一切常常我们称之为div+css。
CSS基本
3
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
4
? ? css 高度(height) ? css 宽度(width) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
css class ? css 列表 ? css 圆边 ? css 父级子级 ? css 指针 ? ? ?
CSS入门基本教程
?
?
?
? ? ? ? ?
?
?
?
?
?
?
?
?
?
?
? ? 什么是CSS选择器, ? DIV+CSS布局 ? ? ? ? ? ? ? ? ? ?
Html入门基本教程
5
?
?
?
?
?
?
?
?
? ? ? HTML页面结构 ? 什么是源代码,什么是源文件, ? htm、html、shtml区别 ? 什么是伪静态, ? 认识head标签 ? head之meta标签 ? ? UTF-8 GBK UTF8
GB2312之间的区别和关系
制作CSS工具
?
?
?
?
? ? ? ? ? ?
? ? IETester-必备浏览器集合安装包 ? 开发DIV+CSS需要验证的浏览器
原文网址: /
div css Tab菜单(图+下载) (未取到正文内容)
6
纯DIV CSS按钮(图+例子+下载)
<!DOCTYPE html
<html
<head
<title50个CSS超炫丽button按钮样式代码-</title
<link href=button.css rel=stylesheet type=text/css /
<!-- --
</head
<body
<A href=DIVCSS5</A|<A href=CSS</A <form id=form1 name=form1 method= action=/ target=_blank
<div class=d1
<input type=submit value=Update
onMouseOver=this.style.borderColor='#75cd02'
onMouseOut=this.style.borderColor='#dcdcdc' class=btn1 pbtn1 /
<input type=submit value=Delete
onMouseOver=this.style.borderColor='#f76b00'
onMouseOut=this.style.borderColor='#dcdcdc' class=btn2 pbtn1 / <input type=submit value=Reset
7
onMouseOver=this.style.borderColor='#86c6f7'
onMouseOut=this.style.borderColor='#dcdcdc' class=btn3 pbtn1 /<br / <input type=button value=Submit class=btn4 /
<input type=button value=Button class=btn5 /
<input type=button value=Add Group class=btn6
onMouseOver=this.style.backgroundPosition='left -35px'
onMouseOut=this.style.backgroundPosition='left top' /<br /
<button type=button class=pbtn2<img
src=image/button/register.gif alt=register /</button
<button type=button class=pbtn2 btn8<img src=image/button/favorite.gif alt=favorite /</button
<button type=button class=pbtn2 btn9<img src=image/button/help.gif alt=help /</button<br /
<input type=button class=btn10
onMouseOver=this.style.backgroundPosition='left -40px'
onMouseOut=this.style.backgroundPosition='left top' value=Submit / <input type=button class=btn11
onMouseOver=this.style.backgroundPosition='left
8
-40px'
onMouseOut=this.style.backgroundPosition='left top' value=Sbumit / <input type=button class=btn12
onMouseOver=this.style.backgroundPosition='left -40px'
onMouseOut=this.style.backgroundPosition='left top' value=Sbumit /<br / <button type=button class=pbtn3</button
<button type=button class=pbtn3 btn14</button
<button type=button class=pbtn3
btn15</button<br /
<button type=button class=btn16</button
篇三:html网页布局模板
1 html笔记
一、HTML的概述(了解)
a.html是什么 : hypertext markup language 超文本标
记语言超文本:音频,视频,图片称为超文本。. 标记 :
<英文单词或者字母称为标记. 一个HTML页面都是由各
种标记组成。
b.作用:编写HTML页面。
程).
HTML页面直接由浏览器解析执行。
9
二、HTML的历史(了解)
三、HTML的网络术语(明白)
* 网页 :由各种标记组成的一个页面就叫网页 .
* 主页(首页) : 一个网站的起始页面或者导航页面 .
* 标记:<p称为开始标记 </p称为结束标记. 也叫标签.每个标签都规定好了特殊的含义。
* 元素:<p内容</p 称为元素.
* 属性: 给每一个标签所做的辅助信息。
* xhtml: 符合XML语法标准的HTML。
* dhtml:dynamic,动态的。javascript + css + html 合起来的页面就是一个dhtml * http:协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP 邮件传输协议,ftp:文件传输协议. c.HTML语言不是一个编程语言(有编译过程),而是一个标记语言(没有编译过
四、HTML的编辑工具(了解)
五、HTML的
(知道)
*.HTML是一个弱势语言
*.html 不区分大小写 *.html页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个*.notepad 记事本 *.editplus : 语法高亮显示 技巧: 根据颜色判断单词是否出错。 (不是100%) *.ultraedit : 根据颜色判断单词是否出错,可以显示2进制数据. *.dw(dreamweaver,专业工具)
10
代码提示. 字符,比如dos系统)
*.html 的结构 1)
部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。<!doctype html是HTML5标准。
2)head部分: 不会显示在页面上。作用是告诉浏览器一些页面的额外信息。
六、HTML的各种标签(掌握)
明确:每个标签都有私有属性。也都有公有属性。
html中表示长度的单位都是像素。HTML只有一种单位就是像素。
body:
bgcolor: 背景颜色 background:背景图片 3)body部分:我们缩写的代码必须放在此标签內。
1.排版标签
所有的浏览器默认情况下都会忽略空格和空行
2 字体标签
P:p代表一个段落 属性: align:对齐方式. 取值:left,right,center <br代表是换行。 hr: color: 线的颜色 size : 线的粗细 width: 线的长短 两种写法: 1) 绝对值 eg: 5002) 相对值: 50% noshade: 不要阴影 align: 对齐方式 取值: left,right,center center: 内容居中 pre: 预定义格式标签 .告诉浏览器不要忽略空格和空行 div: 块级标签
11
必须单独占据一行 属性: align : span: 块级标签 不换行字体标记 h1...h6:定义字体大小 属性: align :居中 font:
颜色的写法有3种: 1)英文单词: red 2)十六进制:#00ffcc 3)RGB(三原色) : new
RGB(124,156,23)
号
size:字体大小 face:字体类型 特殊字符: <小于 大于 & &符号 双引号'单引 © 版权 ™商标 空格 扩展:绐 b: 加粗 strong: 加粗 i:斜体 em: 斜体 u: 下划线 s: 中划线(删除线) sup: 上标 sub: 下标.
img: 代表是一副图片
属性: src : 图片的路径
两种写法:a) :
相对路径 路径是相对页面所在的路径 两个3.图像标记
标记.和.. ,分表代表当前目录和父路径
b) :绝对路径
1) : 以盘符开始的路径
eg: C:\Documents and Settings\Administrator\桌面\day01_html\上课示例/images/1.jpg
网络路径
2) : eg: /imageswidth: 宽度 height:高度Alt:当图片
12
显示不出来的时候代替图片显示的内容 title: 提示性文本 border: 边框 热点: 就是特定的位置添加超链。
<img src=images/1.jpg width=300 height=300
usemap=#Map border=0 /
<map name=Map id=Map
<area shape=circle
coords=122,81,38 href=demo_字体标签.html /
</map
4.清单标记
列表标签:3种a.无序列表ul 属性:type : 值: disc(默认,实心原点),square(实心方点),circle(空心圆)
b.有序列表(OL)属性: type:取值:1(阿拉伯数字,默认),a,A,i,I start: 从几开始
相关热词搜索:样式 模板 代码 css 表格css样式模板 css样式模板下载
13