CSS基本知识及导航条制作实例_第1页
CSS基本知识及导航条制作实例_第2页
CSS基本知识及导航条制作实例_第3页
CSS基本知识及导航条制作实例_第4页
CSS基本知识及导航条制作实例_第5页
已阅读5页，还剩55页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML与CSS基本知识

横向导航条制作实例HTML的文件结构<html>

<head>

<title>

……

</title>……

</head>

<body>……

</body></html>html头部标签<title></title><metaname=”author”content=”…….”><metaname=”keyword”content=”…..”><metahttp-equiv=”expires”content=”mon,15sep2003”><metahttp-equiv=”refresh”content=”10”,url=…”><metahttp-equiv=”content-type”content=”text/html;charset=gb2312”>html主体部分标签<body></body>background=“……”text=#RRGGBBlink=#RRGGBBvlink=#RRGGBBalink=#RRGGBB<-text->text<script></script>

onload=“扩展函数调用串”（与<script>一同使用）html字体标签<h1></h1><caption></caption><font></font>color=#RRGGBB<basefont></basefont>html字体样式标签<i></i>斜体字<em></em>着重字<var></var>可变内容<b></b>黑体字<strong></strong>加强字<tt></tt>紧凑字<code></code>紧凑字<kbd></kbd>显示键名

<samp></samp>样本字<u></u>下划线<blink></blink>闪烁字 空格html段落标签<p></p>段落<address></address>地址区域<hr>水平分界线<center></center>向中间对齐<pre></pre>预设文字格式<blockquote></blockquote>区块引用<br>回车html链接标签<a></a>

html图像标签<img></img><map></map><area><area>html列表标签<ul></ul>无序列表<ol></ol>有序列表<li></li>每一行文字的起头<dl></dl>陈述式排列<dt></dt>dl中显示陈述的主题<dd></dd>dl中显示陈述的内容<dir></dir>清单（每行最多20字）<menu></menu>菜单html输入表单标签<form><input></input><textarea></textarea><select><option></option></select></form>html表格标签<table><tr><th></th><td></td></tr></table>XHTML比HTML更严格一定要被正确地嵌套使用。一定要有正确的组织格式。标签名称及属性名一定要用小写字母。所有的元素一定要关闭。属性值必须要被引用和取值。用id属性代替name属性。自我检查网站CSS布局的基本思想结构化标记：

所写即所想，所想即所写。CSS控制HTML页面的方式2内嵌方式1行内方式3链接方式4导入方式行内方式直接对HTML标签适用style=““<pstyle="color:#F00;background:#CCC;font-size:12px;"></p>内嵌方式将CSS代码写在<head></head>之间，并且用<style></style>进行声明1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">2<htmlxmlns="/1999/xhtml">3<head>4<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>5<title>无标题文档</title>6<styletype="text/css">7<!--8#div1{width:64px;height:64px;float:left;}9#div1img{width:64px;height:64px;}10-->11</style>12</head>13<body>14<divid="div1"><img

src="/index/images/ico/2days.gif"/></div>15全国的CSS爱好者汇聚于此，如果不来，你就OUT喽~我们的口号是：16“分享自己的欢乐与痛苦，分享自己的经验与心得，分享自己的资料与资源”17如果您也愿意，就加入我们吧~18</body>19</html>链接方式是使用频率最高，最实用的方式，只需要在<head></head>之间加上<linkhref="style.css"type="text/css"rel="stylesheet"/>3<head>4<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>5<title>无标题文档</title>6<linkhref="style.css"type="text/css"rel="stylesheet"/>7</head>8<body>9<divid="div1"><img

src="/index/images/ico/2days.gif"/></div>10全国的CSS爱好者汇聚于此，如果不来，你就OUT喽~我们的口号是：11“分享自己的欢乐与痛苦，分享自己的经验与心得，分享自己的资料与资源”12如果您也愿意，就加入我们吧~13</body></html>style.css的内容1#div1{width:64px;height:64px;float:left;}2#div1img{width:64px;height:64px;}导入方式和链接方式比较相似，采用import方式导入CSS样式表，在HTML初始化时，会被导入到HTML文件中，成为文件的一部分。四种样式的优先级低高行内方式内嵌方式链接方式导入方式CSS选择器2ID选择器1标签选择器3类选择器标签选择器1p{2font-size:12px;3background:#900;4color:090;5}<pid="one">此处为p标签内的文字</p>ID选择器1#one{2font-size:12px;3background:#900;4color:090;5}<pid="one">此处为p标签内的文字</p>类选择器1<pclass="one">此处为p标签内的文字</p>1.one{2font-size:12px;3background:#900;4color:090;5}盒子模型块状元素和内联元素块状元素(如p,div)内联元素（如a)是否允许其他元素同处一行NOYES宽度和高度是否起作用YESNO浮动float:left清除浮动清除浮动.clear{clear:both;}在HTML中加入：<divclass="clear"></div>CSS布局技术——导航条制作实训专题二导航条效果鼠标移动上去背景变黑，并且字体颜色变成白色

DreamweaverCS3软件界面【第一步】先做一个容器一个div作为容器，ID为“nav”，宽度为960px，高度为：35px，位于页面水平正中，与浏览器顶部的距离是30px；关键标签divnav#nav<divid="nav"></div>

body,div{padding:0;margin:0;}#nav{width:960px;height:35px;

background:#CCC;/*为了便于查看区域范围大小，故而加个背景色*/margin:0auto;/*水平居中*/margin-top:30px;/*顶部30px*/}HTML代码CSS代码【第二步】用无序列表放置内容

导航条中的菜单项为“CSS学习,学前准备,入门教程,提高教程,布局教程,精彩应用”。(目前有6个)ulli关键标签<divid="nav"><ul><li>CSS学习</li><li>学前准备</li><li>入门教程</li><li>提高教程</li><li>布局教程</li><li>精彩应用</li></ul></div>HTML代码#navul{width:960px;height:35px;}CSS代码效果用Float使<li>标签内容横向并排：#navul

li{float:left;}哪里不一样？为什么？怎么解决？重置：

body,div,ul,li{padding:0;margin:0;}去掉默认样式：前面的大黑圆点，是FF给li

标签定义的默认样式，在li

标签的CSS属性中加入

list-style:none;【第三步】使文字保持“车距”#navul

li{

width:100px;

float:left;list-style:none;

background:#900;}CSS代码垂直居中

line-height:35px;水平居中

text-align:center;【第四步】增加鼠标响应效果

给上面的导航加上链接；链接文字大小修改为12px;

并且规定链接样式，鼠标移上去和拿开的效果导航加链接HTML代码<divid="nav"><ul><li><ahref="#">CSS学习</a></li><li><ahref="#">学前准备</a></li><li><ahref="#">入门教程下载</a></li><li><ahref="#">提高教程</a></li><li><ahref="#">布局基础教程</a></li>

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论