前台html-css-js极速入门_第1页
前台html-css-js极速入门_第2页
前台html-css-js极速入门_第3页
前台html-css-js极速入门_第4页
前台html-css-js极速入门_第5页
已阅读5页，还剩21页未读， 继续免费阅读

下载本文档

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

文档简介

网站开发技术实战培训

---第一课：前台htmlcssjs极速入门课程内容1、Html、css、js简要介绍（5min）2、Html基本语法结构介绍（5min）3、Html标签元素样式及布局定位举例（15min）4、Html与css：内容与样式分离（10min）5、javascript动态修改样式举例（5min）6、Jquery动作绑定举例（5min）7、实战1：首页制作（35min）8、实战2：制作有透明背景的弹出框（10min）1、前台Html、css、js简要介绍HTML是用来描述网页的一种语言。HTML指的是超文本标记语言(HyperTextMarkupLanguage)HTML不是一种编程语言，而是一种标记语言(markuplanguage)标记语言是一套标记标签(markuptag)HTML使用标记标签来描述网页1、前台Html、css、js简要介绍CSS概述CSS指层叠样式表(CascadingStyleSheets)样式定义如何显示HTML元素样式通常存储在样式表中外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一1、前台Html、css、js简要介绍JavaScript概述JavaScript被设计用来向HTML页面添加交互行为。JavaScript是一种脚本语言（脚本语言是一种轻量级的编程语言）。JavaScript由数行可执行计算机代码组成。JavaScript通常被直接嵌入HTML页面。JavaScript是一种解释性语言（就是说，代码执行不进行预编译）。1、前台Html、css、js简要介绍关系Html控制要输出哪些内容，并给内容打上标签Css通过html的标签来控制输出内容的样式和位置Js可动态修改样式或html中的标签及内容：即动作Html

显示什么内容Css

内容显示成什么样子Js动作：不同情况下不一样的内容和样子2、Html基本语法结构介绍html基本格式<标签名

属性>标签包含的内容</标签名>例如：

<div

style=“color:red;”>你好！秋</div>浏览器不会显示HTML标签，而是使用标签来解释页面的内容：2、Html基本语法结构介绍<html><head>

<tittle>标题</tittle>……</head><body><div>内容1</div><h1>内容2</h1><p>内容3</p>……</body></html><html>与</html>之间：网页全部信息<head>与</head>之间：网页说明信息<tittle>与</tittle>之间：浏览器标题<body>与</body>之间：可见的网页内容2、Html基本语法结构介绍3、Html元素样式及布局定位举例先讲规则原理，再用代码写出符合规则的布局和样式常用规则和代码均极其简单不以书上标准名词讲解，采用通俗、俗气的名词叫法，先让大家能理解，能写，然后大家再去看书，去系统、规范学习，去提高技能3、Html元素样式及布局定位举例要显示的内容必须放在body中。Body是个大硬盒子，盒子中可以放其它盒子盒子中可以放袋子盒子是硬的，有长宽高属性，默认独占一行袋子是软的，袋子没有长宽高属性，不独占一行袋子中不能放盒子（标准中规定），但浏览器多支持此非正规写法，建议不要常用Display可以使标签元素在盒子和袋子间改变Display：block块元素（盒子），inline内联元素（袋子）；各种标签默认的display属性不同Float可以使块级元素（盒子）不独占一行Html元素样式及布局定位举例开始例子，边做边学后面ppt作为提示和讲解属性用3、Html元素样式及布局定位举例盒子的主要属性：宽（width）高（height）边框（border）外边距（margin）内边距（padding）背景（background）内部内容样式（对齐方式字体颜色等）设置的宽高仅仅是是content的宽高（ie6及以前是全部的宽高，即外部虚线部分包含的区间宽高）设置的背景是包含padding和content的部分的背景3、Html元素样式及布局定位举例袋子的主要属性：没有宽高属性，没有上下边距，没有内部内容的对齐方式，其余和盒子基本一样3、Html元素样式及布局定位举例元素位置1：Body是最外面的包装大盒子，Body里面有盒子盒子又有兄弟盒子盒子也有子盒子兄弟盒子间位置按照文档中的顺序布局定位紧挨上一个盒子（盒子要独占一行）子盒子紧挨父盒子的左上角3、Html元素样式及布局定位举例元素位置2：3、Html元素样式及布局定位举例元素位置3：3、Html元素样式及布局定位举例元素位置1：Html元素属性查看w3cschool上面的教程上面可以查询对应元素，其属性含义，及其在不同浏览器中的兼容性，以及使用案例个人觉得，学习方法：了解规则原理，会用基本的几个元素，然后会查询其它元素定义，可边查边写，几个小时就能上手。就能看懂别人的布局和样式设计，就能仿写，再做一些实际的项目，看一遍基本的标准教程说明，之后基本没有代码本身的限制了。有好的想法，好的材料，然后就能写出好看的页面了。Html元素样式及布局定位举例1、新建test

html文档（dreamweaver中）2、tittle修改3、body中添加2个div4、body背景5、div：背景色，内容，位置修改，style6、div与div位置间关系7、html中文档位置，盒子模型，绝对与相对定位介绍8、classid及链接外部样式表Html元素样式及布局定位举例Body中直接写内容就可以显示，为何再加标签？不同标签简要介绍：divpspanimgtableolulainputtextarea盒子模型块级元素divptable等，内联元素spanaimginput

在高宽居中方式，占行方式上的不同Display修改元素显示类型：blockinlineinheritCss语法selector{property:value}例如：h1{color:red;font-size:14px;}层叠次序当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。1浏览器缺省设置2外部样式表3内部样式表（位于<head>标签内部）4内联样式（在HTML元素内部）因此，内联样式（在HTML元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head>标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。Css语法selector{property:value}选择器分类类（class）：以点开头如：.class1Id：以#开头如#tittle*通用配合符号，表示全部标签（tag）：选择器就是标签名如：div书写规则：1、后面的优先于前面的2、选择器间空格表示父子关系3、选择器间逗号表示并列关系4、不允许两个大括号中只有空格或者空着Css语法链接到html的方式：1、html中写入代码<styletype="text/css">……</style>2、写在外部css文件中，链接到html中<head>……<linkhref="css1.css"rel="stylesheet"type="text/css"/>……</head>Js、jq更改样式style属性js与css对照.txtJquery写法（Jq需要连接库）

$(“目标名”).css(“css属性名”,“属性值");比如你要获取id为123的div的z-index的值$("#123").css("z-index")而你要设置他的属性值的话就是这样写

$("#123").css("z-index","10")JsJq链接到html中1、外部文件的方式<scriptsrc="jsjq1.js"typ

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

温馨提示

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

最新文档

评论

0/150

提交评论