CSS+DIV程序设计笔记.doc

JAVA WEB前台开发部分（JS+CSS+HTML）HTML介绍HTML是一种标记语言，主要用途是开发网页使用HTML可以展现文字、图片、视频、声音等等。HTML是我们WEB开发的基础注：动态与静态的区别是看能否与网站进行交互，交互是动态，反之是静态。网页设计师：HTML+CSS+JS+FLASH+美工HTML和XHTML的区别：XTML是实现HTML向XML的过渡。HTML的运行运行原理：1、 本地运行：HTML文件使用浏览器（软件）打开。2、 远程访问运行：HTML文件放在远程服务器上面，用户通过浏览器向远程服务器发出请求进行相关信息的下载。（目前除了自己调试外基本上都是远程访问HTML文件）HTML的基本结构不管HTML文件有多复杂，它的基本结构式：内容元素又叫标记如果没有内容可以这样写案例：段落标记换行标记（一般放在末尾）字体标记size取值1到7#=1,2,3,4,5,6字体加粗第一个WEB程序设计 横看成领侧成峰远近高低各不同不识庐山真面目只缘身在此山中苏轼!-也表示换行 -HTML符号实体介绍： 在网页上显示一些特殊符号，我们需要使用html的符号实体，有些人把它称为字符实体。© 空心圆£ 英镑®版权 空格<小于号>大于号&等于号&guot;引号html 常用标记/元素，超链接。使用超链接可以让网页链接到另外一个页面。举例：表示链接到的地方在空白网页打开。如果是表示替换当前页面。html 常用标记/元素-imagehtml图片元素：等价于border是边框粗细通过1、2、3、4注：src可以是外部网站的一个图片url html常用标记/元素-table表格的主要用途：显示数据和图片，并且可以布局。代表行；代表列 align 位置包括left、right、centerbgcolor 背景颜色12代表表格中的内容的放置格式注意：表格名称是table是表格的行是表示列cellspacing=”表格空隙大小；是指两个列，行间的距离。cellpadding=”表格填充大小；各行各列中的内容被填充，这样就会在一定程度上把格子称大符号实体：课程表案例：课程表课程表注：cellspacing 是填充边框属性111注：colspan 是合并行属性222222223333333344444455555566666677777777注：rowspan 是合并列属性888888html 列表-无序列表ul/lil（没有顺序表示的列表）列表内容案例：chuanqidazhan的属性设定：例如：type=”square”空心正方形type=”disc”实心圆点type=”circle”空心圆html 列表-有序列表ol/li（有顺序表示的列表）列表内容的属性设定：例如：i 可以是以下值的任意一个：1 阿拉伯数字A 大写字母a 小写字母i 小写罗马数字 i，iiiI 大写罗马数字 I，II，案例：fankongchuanqihtml -常用元素/标记-框架-frameset/frame(同时使用不可分开)案例：aa.htmlbb.htmlall.htmlaa.html周杰伦的歌bb.html歌词all.html注：all.html 中不能带body标记，若带有body标记，则框架结构显示不出来。cols&rows纵横排列多个窗口： 框架综合案例：第一部分：总的框架结构无标题文档 第二部分：框架分支无标题文档zhou jie lun第三部分：框架分支无标题文档歌词第四部分：框架分支菜谱 星期一菜谱素菜清炒茄子花椒扁豆小葱豆腐炒白菜荤菜油闷大虾海参鱼翅红烧肉烤全羊html 常用标记/元素form表单表单用于向服务器发送请求以及处理来自服务器的相关信息 介绍：html 的表单元素，主要用于让用户输入数据，并提交给服务器。基本语法：各种元素输入框，下拉列表，文本域，密码框。表单中提供给用户的输入形式：注意：value 与name的区别，在网页内容提交服务器的时候，是提交value的内容而不是name的内容。*=text、password、checkbox(复选框)、radio(单选框)、image(图片)、hidden(隐藏的)（隐藏索引最大的好处就是既不破坏页面本身也可以提交内容）、submit(提交按钮)、reset(重新填写)#=Symbolic Name for CGI script（随意）*=是设置的控件名称。案例一：系统登录界面：登陆系统登陆界面用户名：密码： 登陆成功界面：登陆成功登陆成功！下面的要注意：action 指定把请求交给哪个页面。html 常用标记/元素-select、option、textarea案例:登陆系统登陆界面用户名：密码： /下拉菜单-请选择-上海吉林大连*请留言*/留言板请这里输入.*请选择你要上传的文件*请选择文件 表单练习：表单练习请选中你喜欢的运动项目：篮球足球网球请选择你的性别：男女下拉列表-请选择-上海北京请留言:请输入.文件控制：HTML加强练习：页面结构：,HTML文件正文写在这里 语言字符集：content 显示文本格式和字符集text/html 指当前显示的是文本格式的html文件charset 字符集格式 *代表显示字符的格式；例如：*=gdk 以gdk（中文）的字符格式显示背景色彩和文字色彩：Bgcolor-背景颜色Text-非可连接文字颜色Link-可链接文字颜色Alink-正被点击的可链接文字颜色Vlink-已经点击（访问）过的可链接文字颜色页面空白：网页显示的文字与页面边框的距离。页面左边的空白页面上方的空白标尺线 #=left,right有没有阴影字体： #=1 2 3 4字体大小 #=1 2 3 物理字体： 加粗斜体下划线字体颜色客户端字体Hello Word#=客户端字体文字布局：段落标记换行对齐方式：.#=left center right 文字对齐方式. 标题对齐方式 文字对齐方式文字分区div（将文字分区，控制区域大小及其位置，实现布局情况）Can you speak English预格式化文本： Please here is on orderfasair块引用：Iam boy闪烁：(少数浏览器闪烁)图片：当鼠标移动到图片上或者图片没读入时会在图片的位置显示相应文字提示表单：checkbox复选框Checked 表示默认选中 radio也支持默认列表框： 。Selected 表示默认选中Size 表示一次可以展现几个列表内容Multiple 多选文本域：。不换行。软回车（常用）。硬回车表格：基本语法：fooddrinkAATd 定义表元（表内数据）Tr 定义表行Th 定义表头跨多行，多列的表元素跨多列的表元素跨多行的表元素表中每个元素对齐方式 #=top middle bottom baseline 表格的色彩：表元的背景色彩和背景图像表格边框色彩：会移动的文字：基本语法： （高版本浏览器不支持）文字移动属性的设置：方向：#=left right方式：#=scroll slide alternate循环： #=次数；若未指定则循环不止（infinite）速度：延时：对齐方式：底色：面积：多媒体页面嵌入多媒体文本（EMBED）基本语法：本标记可以用来在主页面中嵌入多媒体文本，如：电影（movie），声音（sound），虚拟现实语言（vrml）.体会标记，您需要把plugin安装完备。注：要想将视频能在网络上播放需要构建流媒体服务器，不然只能在本地播放。 Src只能在本地上进行链接，如果想不构建流媒体服务器进行视频远程播放则可以加url标记。例：但是效率不高背景音乐 #=WAN 文件的URL #=循环数插入视频剪辑：用url.avi这一AVI文件来播放视频用url.gif这一GIF图像来作为视频的封面，即：在浏览器尚未完全读入AVI文件时，先在AVI播放区域显示该图像。注：start=”mouseover”表示，当鼠标放到图片上启动AVI文件。Div+css的讲解Div是什么？Div元素是用来HTML文档内大块的内容提供结构和背景元素。Css是一种用来表现HTML和XML等文件式样的计算机语言。Div+css 是网站标准中常用的术语之一，通常是为了说明与HTML网站设计标准中，不再使用表格定位技术，而采用DIV+CSS的方式实现各种定位。DIV 是用于存放内容（文字，图片，元素）的容器CSS是用于指定在div中的内容如何显示，包括这些内容的位置和外观。好处：代码简洁，内容与样式分离，节约带宽，使用CSS可以统一网站的风格。栏目1从使用元素我们可以看到CSS的基本用法。元素可以使HTML的任意元素；属性名：属性值 要参考w3C组织给出的文档CSS分类：内部CSS： Style1 Font-size:20; Color:red; Font-weight:bold;Font-style:italic;ONETWOTHREE案例如下： css1.html !- .styleless color: green; font-weight: 30px; font-style: nomal; 栏目1栏目2栏目3ONE CSS滤镜体验 text1.html !-/*滤镜的使用*/a:link img filter:gray;a:hover imgfilter:; CSS的三种选择器：类选择器名基本语法：.类选择器名属性名：属性值；案例：/*.style1 是类选择器*/.style1font-weight: bold;font-size: 20;background-color: pink; html2.html !- 新闻一 新闻二 新闻三 ID选择器：基本用法#id选择器名属性名：属性值；案例：/*#style2是一个ID选择器*/#style2font-weight: bold;font-size:60;background-color: silver; html2.html !- 新闻一 新闻二 新闻三 这是一则很重要的新闻 在HTML文件中如果要引用ID选择器，则HTML选择器：案例：/*HTML选择器*/bodycolor:orange;a:link /*链接颜色*/color:black;text-decoration: none;a:HOVER /*鼠标移到链接上会让链接有下划线*/text-decoration: underline;a:VISITED /*点击连接后链接会变成的颜色*/color:black; !- 您好北京！ 新闻一 新闻二 新闻三 这是一则很重要的新闻 go to sina 结论：当一个元素时被ID选择器、类选择器、HTML选择器修饰，优先级是ID类HTML选择器。通配符选择器：如果希望所有的元素都符合某一种样式，可以使用通配符选择器。*margin:0;padding:0可以让所有HTML元素的外边距和内边距都默认为0，有时候特别有用。注：margin 外边距；padding 内边距 若直接给margin：10 20 30 10 四个值，则margin从top开始围着元素按顺时针方向旋转（上右下左）；若出现3个值，则表示上 左 右 下；若出现两个则表示上下；若给出一个值，则表示全部；padding规范与margin是一样的。/*使用通配符选择器，对外边距和内边距清零*/*由于不同浏览器对于边距要求不一样，所以为了统一和不破坏布局最好清零*/*margin: 0;padding: 0选择器的深入讨论：父子选择器：案例：/*父子选择器*/#style2 spanfont-style:italic;font-size:80;color:yellow;这是一则很重要的新闻 注：子选择器标签是HTML可以识别的，上例的span中存在嵌套的关系。不一定只有一级的关系，可能存在多级关系（最多不超过2层） /*父子选择器*/#style2 span spanfont-style:italic;font-size:80;color:yellow;父子选择器可以适用于ID和类class选择器。一个元素被ID和CLASS同时修饰的时候，那么ID的选择器优先级大于类选择器。CSS：#new_stylefont-style: italic;color:gray;HTML：新闻一一个元素最多有一个ID选择器，但可以有多个CLASS选择器CSS中添加：/*.style1 是类选择器*/.style1font-weight: bold;font-size: 20;background-color: pink;color:black;.style4font-style: italic;text-decoration: underline;color:green;HTML文件中如何适用多个class选择器：新闻三注：在引用多个CLASS选择器的时候，用空格隔开， 当类选择器发生冲突的时候，以在CSS文件中最后出现的那个类选择器样式为准。在CSS文件中，如果有多个类和ID选择器它