css课堂起笔记基础依赖前10章HTML与CSS前台前端页面设计

1、20140826=基础依赖（前 10 章）：HTML 与 CSS 前台(前端)页面设计/开发：html+css+javascript(java述性的语言”)为什么叫前台？语言，直译为“java 描只需要客户端的浏览器就可以运行。阻挡了 java（）的运行 。前台的代码/程序：一定是可以正常拷贝下来的。）网页设计/开发：程序开发语言 (不是最主流)+（后端（：）数据库 sqlServer2005/2008为什么叫？这些开发出来的程序必须装载在“服务器”中才能够运行。的程序：因为在服务器中，所以很难盗取。+(是目前开发最受欢迎的搭档)jQuery 非常流行，简单高效的语言风格也基本与 java/c

2、/C+/javascript 相同。VB.netJava=着眼点：应用（第 11 章）AjavaJavascript(jQuery)+html+CSS循环语句更象 C+/Cfor(i=0;i=j+5;i+;); ; ;更象 C+/C for(i=0;i=j+5;i+;); ; ;If 语句中国教育和科研计算机网Baidu 搜索：选项卡（也称“”）的切换效果Firefox-full-latest156.火狐-.exe）-.hk（苹果：挪威 Opera现在版：31.0=HTML网页（代码）大体的组成：第一部分：文档类型（无法使用）（无法使用）Edu：自建：自建：HTML5 标准第一行是这样的：HT

3、ML4.01是长期使用的一种HTML 标准，将逐渐被建议不用或作废，同时所取代-将某些不好的增加了一些新的。XHTML 1.0曾经是HTML4.01 的升级版，但是后来国际 web 标准xhtml 并不好。是一个过渡标准/过渡产品。们发现，HTML5 是世界的标准，但是所做出来的 HTML5 的网页必须要有：支持 HTML5 的浏览器才可以正确浏览。IE6.0白宫/ 中国HTML5（通过别人）第二部分：P45HTML 实体(意为：某些特殊的字符要在网页中呈现，的特别表示法。)必须使用设计的网页头部-主体部分新浪博客：把上面的代码放到博客中去。&开头分号结尾 设计的网页头部主体部分“”SEO-/

4、谷歌 搜索引擎优化src=”source/.js”= 20140828Macromedia Dreamweaver8/阿 多 比 公 司 adobeCS5/CS6 PS CS6DreamweaverCS1/CS2/CS3/CS4/浏览器：（先不考虑 IE6.0，IE9.0 以上兼容性来讲基本同firefox）受欢迎：开源火狐 Firefox 31.0（免费）。Firefox-full-latest156.exe基本上取代Discuz!荔香站在大学期间开发的ered by discuz!X3建站会不会一个？1GB-精简几 MB设置：从首页开始 6 层首页/子页面/技术含量：首页最高OEE（只有英

5、文版）：于）（是指前台程序及网页，不能Offline Explorer Entrise 6.3服务器托管公司：租用服务器空间PS艺术设计程序+SQLserver开发+数据库HTML 5也是采用 html5，又可以很好兼容 IE6P 19firefox 的偷取别人的第 7 章：超#abc#代表空锚的名称为 abc超就是一种特殊的“锚”a 代表超anchor 锚在某些内容外面套上一组：比如要实现滚动效果，需要套上。属性FastStone具.exeCapture7.7单文件版绿色版 强大的截图工HTML/javascript/css插件 firebugPx 像素点P45 特殊字符某些字符在网页代码中

6、本身就有，如果要显示它，则必须将它采用“特殊字符”来表示。比如小于号和大于号，在网页中不能直接打否则很可能会被浏览器认为是“不予显示。但遗憾的是。P45”法)(符号实体表示方法) (符号实体表示方法)(数字实体表示方的博客发博客文章：请分析以下代码的功能： 无标题文档 预解释Html 代码中的再多的空格，实际浏览的效果“只保留一个空格”。代码中的所有回车产生的空行效果，浏览器一概忽略。Editplus 源代码编辑器ultraedit 源代码编辑器的效这是果。的测试页面，专门测试选项卡的切换如何实现。= 20140902：spanaimg行内块：divpul 和 lipremarquee定位和浮

7、动外链式 CSS 样式表大部分都是成双成对出现的，有开始，有结尾。比如：.只有开始，省略结尾（但是一般要用 /结尾），比少数如：一般不这样写（虽然这样写也合法）：“模仿”S“er 蜘蛛程序”-宏“硅谷” 回地图创立。公司：htt htt httkeywords关键字description描述.hk/.my/.sg/这一行是了一个“外链式样式表（外链式 CSS）”样式表起什么作用？作用是：对网页中的各个元素进行定位/布局/美化。这一行是：预先载入了一个 javascript 程序（通常也称为：java程序），以备后用。如何猜测这些 javascript 程序起什么作用？又比如：是预先载入了edu

8、_2011.js这个程序。试着找到edu_2011.js 并打开它（就用 dreamweaver 打开），发现这个js 程序中只是定义了两个函数：一个函数名为 showdate()另外一个函数名为 showsel()。这两个函数都不带任何参数，是一对空括号，注意括号中不要输入空格。这两个函数只是定义了，但是没有执行，要执行它们，必须要“调用”。怎样调用呢？很简单，只要在需要的地方，再写一个.就可以调用。 showdate();=，这组经常会用到，用它来实现一个“矩形框”。给这个 div 框取了一个 class 名称（也称为“类的名称”）为top_bg960px;93px;FastStone具.

9、exeCapture7.7单文件版绿色版 强大的截图工一个一个的 div 从上到下，从左到右，堆成一个庞大的丰富的网页。内容段落#A3B4CE#808080#E6EDF5网页制作中级工/高级工动手操作得来的东西很难忘记。=2014-9-5 周五 12-1 班：spanaimg行内块：divpul 和 liDW8 设计视图的效果“的实际浏览效果。参考”，最终效果应该看浏览器艺术设计多幅.jpg.gif(动画)-通常会用 javascript 程序实现.png切换的动画效果不要太大，最多几MB，一般为 KB 级。将来会大量用到 div通俗讲 div 是一个方框，用来容纳其他的或者内容。class=

10、top_bg 表示：为这个 div 取了一个名字（以后称为 class 名称，也叫“类名”）框线默认是“隐藏”的。流式的：流水一般撑高外链式 CSS大量用这种。不用“内嵌式”。凡事一定要从最简单着手，先慢，慢多了才能快。width:960px;=20140912 周五 12 节dangdang亚马逊天猫前端设计=HTML4.01/5+CSS+javascript(jQuery)dreamweaverCS4CS5500MB复旦大学的白宫（国外服务器上外国的）HTML 5盒子display:none; display:block;隐藏显示中国教育和科研计算机网 CERNET为什么要隐藏.，让它不显

11、示出来？不显示它是因为“上有这些字，更漂亮”。但是在代码中保留了 h1，是因为等搜索引擎往往会将h1(主标题)认为是最重要的信息，保存在搜索数据库中。网盘P30纸上得来终觉浅 站在巨人的肩膀上！最重要的标题（一级标题）CSSdiv 就是一个“通用的框”,每个元素都是一个“矩形框”，可以一个框中再套另一个框，层层嵌套。类名（就是它的一个名字），可以与其他的名字重复。添加 CSS：P51 例 5-3 05 行：外部样式表文件（ 1 ） 拷 贝 ： （2）新建一个 1.css 文件，保存到 css 文件夹中。P55Html 中少动为妙！背景调试法：加一个背景，不需要的时候再删除或隐藏（注释掉它）=1

12、1 章：=20140913 补周二 13网盘：共享慢多了才能快！2 班/1-4 节：没有难度，没有，没有实用价值，却大讲特讲！网页制作“中级工”证！高度 height:auto;自动，就是依靠其中的内容把它撑高。P31 /前斜杠（也叫斜杠）后斜杠（也叫：| 竖杠反斜杠）试出来/猜得到猜来的！不是“学来的”“背诵来的”height:高度，身高。high 高的，高高的。margin: 0px auto;的正中间）用来使某一个元素左右居中（在屏幕“知其然，知其所以然！”！(第 11 章)第四章：Ttsup subq dfnde bdostrong云网盘搜索引擎（行动）常用的网盘搜索白宫 采用了 ht

13、ml5网页标准技术人民隐的“元素”：为什么要隐藏？值得研究！div 就是一个“可以存放各种各样内容”的“框”或“盒子”。盒子模型。这个盒子默认情况下是“隐藏了边框”的。挂上 CSS 文件。“背景调试法”-当你不知道这个框长得如何，多大大多高的情况下，你人为设置一个“背景颜色”，以便你能够把握这个“框”的实际大小。1.css-这就是 CSS 样式表文件（必须在网页挂上钩）。divbackground-color: #FF0000; height:93px;width:960px;CSS 样式表P55 5.3 CSS 样式选择器class=top_bg 这就是某个元素的“class 名称”#FF0

14、000 纯红#0000FF 纯蓝#CCFF00 纯绿P31的作用：竟然可以用在制造一个“空白缝隙”（大小可以通过 CSS 灵活调节）上。标准指法：bl10height:10px;p 元素竟然会自动加上：上下边距 16px其实，不仅 p 元素，任何元素都会被浏览器自动加上一些上下左右的边距。而且令人讨厌的是，不同的浏览器往往加的边距值不一样。如果你要去掉这些该死的边距：body,div,p margin:0; padding:0;P30 标题以上这些标题，关键不在于字体的大小，而在于它到底是几级。因为字的大小是可以随时用 CSS 来调节的，但是级别却决定了它在“”等搜索引擎中的地位。= 2014

15、0915网盘共享：http:/P51css 文件如何写？（最大）Wide: 宽的High:高的widthheight这个 div 框默认是“隐藏了边框线，也没有背景颜色”的，所以看不到。background-color: #FF0000;背景调试法。该死的边距：外边距 和 内边距=2014-9-16 周二 1-4CSS 模仿网页的步骤：2第一步：用 firefox(FF 27.0-32.0)打开要模仿的那个网页：default.htm，并且打开“查看元素”窗口。第二步：在桌面上新建一个文件夹，取名为当天日期。你自己做的所有东西请全部放入该文件夹。第三步：启动 dreamweaver(DW) C

16、S4/或者 DW 8，新建一个网页，并且保存为 1.html（或者 1.htm）,DW 请切换到“拆分视图”。把被模仿的那个网页也用 DW 打开。第四步：拷贝 default.html 中的以下行并且也将其粘贴到1.html 中/head之前。（以下行肯定是在/head之前）：第五步：利用 DW，新建一个 CSS 文件，保存在 20140916文件夹中的 css 文件夹中，命名为 1.css第六步：将上述第四步中的红色部分，改为：css/1.css提示：将来大部分难点集中在 1.css 的编辑处理上面。第 七 步 ： 开 始 从 上 到 下 模 仿 网 页 的 主 体 部 分网页中所有的都是一

17、个一个的“矩形框”，框也可以叫“盒子”。“盒子模型”div 是一个“通用的框”。背景调试法。P55：样式选择器对某一个已经取好 class名称的 div( 比如class名称为top_bg)，请采用以下方法操控它：集中了很多人智慧！站在巨人的肩膀！言必称“CSS” “HTML5”言必称“JQuery”台灯式扫描：CSS 的注释：/*div.top_bg*/的div.top_bgwidth:960px; height:93px;/*background-color:#F00;*/“语句”应该这样写：属性名：属性值；要使某一个元素居中，请用：margin: 0px auto;外边距：上 右 下 左

18、；= 2014-9-19 周五00Firefox 32.0Firebug 附加的一个组件，是第margin:4px 10px;开发的。在 CSS 看来，每一个都是一个“矩形框”（盒子,默认隐藏边框线，默认不带背景。可以“背景调试法”让明确地感觉个这个框长得什么模样），CSS 模型通常称为“盒子模型”，学习 CSS，需要对盒子模型有较深入的理解。anchor 锚超English内边距：padding: 20px(上)0(右)20px(下)720px(左)；= 20140922 周一 12外边距：margin:1右 下上左；margin: 4px 10px省略下 省略左;以下三种写法是一样的：ma

19、rgin: 4px 10px 4px 10px; margin: 4px 10px;10px 4px;如果写成这样：margin: 4px；表示上右下左都是相同。margin:0；在 firebug 中，某一个元素（就是一个方框）的外边距会用黄颜色显示。该死的外边距/内边距默认情况浏览器会自动给它加上“上/下外边距”。 display:none;不显示并且不占据位置。display:block;显示某一个元素的内边距（padding,本意为“填充”），在 firebug中是以“紫颜色”来显示的。就是指：该元素离它的“下属”之间有一定的间隔/空隙（顺序是：上右下左）。安装好 firefox32.

20、0 及其组件 firebug2.0（工具菜单/附加组件）第十一章：P197：浮动布局 float=20140923 周二.pdf安装好 Firefox32.0 浏览器提供的组件 Firebug2.0：工具/附加组件安装好第div.top_bg 这个框中：还嵌套了 3 个元素（每个元素都是一个框）把这被嵌套的 3 个元素称为：div.top_bg 的子元素细节：P55 选择器#；外边距：某元素的外边距，就是指该元素（注：任何一个元素都是一个“矩形框”）离它的父元素有一定的间隙，这个间隙就是此元素的“外边距”。（在 firebug 中，选中某个元素，其外边距 margin 区域会用“黄色”显示出来

21、）标准写法：margin:上 右 下 左；比如 margin: 4px 10px 4px 10px;其他写法：比如 margin: 4px 10px；（省略：下 margin: 4px 10px 4px;（省略：左）左）省略了哪一个边距，就是与它的“对家”是一样的。margin: 0；某个元素如果没有指定宽度值 width，那么这个元素就会自动展开到与它的“父亲元素”一样宽。至于高度则依靠它里面的内容“撑高”。一个元素可以有三个名称：1、 它本身的名。使用方法：比如：h12、class 名称（中文翻译为：类名称） h1.date3、id 名称（通常称为：id 号，在整个网页各个 ID 号必须唯一） h1#bd1内边距：padding（填充）选中某一个元素后，该元素的内边距在 firebug 中会以“紫色”显示出来。这个元素的内边距是什么意思呢？是指这个元素与它的“子元间有一定的空隙，这个空隙就是它的“内边距”。写法上与外边距的写法相同，遵守“上右下左”顺时针的写法。text-decorationdecoration：修饰（专门指下划线，中划线，上划线）underlineline-throuth overline盒模型结论一：没有（就是没有设