笔记-轻松学习网页设计 - 好知网-重拾学习乐趣-Powered By Howzhi

同学笔记最热最新

第34讲 css盒子模型的笔记

css控制列表功能语法列表属性 list-style：list-style-type list-style-position list-style-image列表项目类型 list-style-type：none（无符号） disc（实体的小圆点） circle（空心的小圆点） square（实心的小方块） decimal（1,2,3...） lower-roman（i,ii,iii...）upper-roman（I,II,III...） lower-alpha（a,b,c...） upper-alpha（A,B,C...）列表项目位置 list-style-position：inside（列表项目往右移） outside（列表项目正常显示）列表项目图片 list-style-image：URL（list-style-image：url（lmk.gif））none 不会显示任何图像经验：控制列表，给列表加背景图片的时候，不要使用它的list-style-image属性 css控制元素的尺寸功能语法设置元素的宽度 width：100px；设置元素高度 height：100px；设置元素最小宽与高 min-width：50px；min-height：50px；（IE6不支持）设置元素最大宽与高 max-width：50px；max-height：50px；设置元素的外边距 margin：上左下右设置元素的内边距 padding：上右下左Div+Css网页布局第三课Div+CSS网页布局目标网页元素分类css盒子模型常见的div+css布局方式什么是div一、div是什么div是一个容器，能够放置内容，例如：<div>内容</div>说明：XHTML页面中的每一个标签对象几乎都可以称得上是一个容器，例如：<h1>这是一段标题</h1>div是XHTML中指定的专门用户布局设计的容器对象。CSS布局中，div是这种布局的核心对象，做一个简单的布局只需要两样东西div与CSS。因此也有人称CSS布局为div+css布局。css盒子模型W3C组织建议把所有网页上的对象都放在一个盒（box）中——盒子模型设计师可以通过创建定义来控制这个盒子的属性，这些对象包括段落、列表、标题、图片以及层<div>盒子模型主要定义四个领域：内容（content）、填充（padding）、边框（border）和边界（margin）。这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。整个盒子模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成。

by Keiven 0 0
第32讲 css控制背景图片的笔记

css控制背景功能语法背景 background：颜色图片平铺方式固定方式位置背景颜色 background-color：#ccc；背景图像 background-image：url（背景图像的位置及全称）背景图像的平铺方式 background-repeat：[repeat、no-repeat、repeat-x、repeat-y]背景图像的位置 background-position：top[left center right]、center[left center right]、bottom[left center right]；x坐标y坐标[第一个值是水平位置，第二个值是垂直位置。左上角是0 0。单位是像素（0px 0px）]背景图像的依附方式 background-attachment：[scroll、fixed]

by Keiven 1 1
第31讲 css选择符的详解的笔记

div+css网页布局第二课 css高级css选择符类型1、类型选择符就是html文档中的元素（作用于html标记）如p{属性:值}2、类选择符：可以自己定义样式，应用于一个或多个网页元素，类在网页中可以出现多次，用于定义重复的样式。类以英文"."开头，后面的名字自己定义，类定义后还需要在网页中加入class=类名称，加以调用。如：.warning{属性：值}<p>...</p>3、ID选择符：与类基本相似，只是一英文"#"开头，因为ID具有唯一性，所以在网页中只能出现一次，用于定义只出现一次的样式。如：#main{属性：值}<p id="warning">...</p>4、通配选择符：*{属性：值}，用于定义所有元素5、包含选择符：语法e1 e2{属性：值}，·含义是所有被e1包含的e2，·如：table td{属性：值}·同时给某个元素应用多个类于ID·<p class="a1 a2"id="a6">...</p>6、选择符分组：将同样的样式定义用于多个选择符，选择符之间用逗号分隔。如：p,div,.warning{属性：值}7、标签指定式选择符：如果既想使用id或class，也想同时使用标签选择符h1#content{}表示针对所有id为content的h1标签h1.p1{}表示针对所有class为p1的h1标签8、组合选择符：将以上选择符进行组合使用h1. p1{}表示h1标签下的所有class为p1的标签h1.p1,#content h1{}

by Keiven 0 0
第30讲 css伪类的使用的笔记

css伪类自定义链接的css类a.类名称：状态css伪类用于向某些选择器添加特殊的效果语法：选择符：伪类名称{属性：值}例如：a:hover{color:#000}:focus设置对象在成为输入焦点（该对象的onfocus时间发生时的样式(IE6/7不支持)）。

by Keiven 0 0
第29讲 css控制链接的笔记

css控制连接——css伪类状态语法未访问的链接 a:link{color:#000}已访问的链接 a:visited{color:#000}鼠标移动到链接上 a:hover{color:#000}鼠标按下链接 a:active{color:#000}css控制链接的顺序必须是：link 、：visited、：hover、：active ，否则根据css的层叠以及继承的特点，会覆盖掉之前的样式。

by Keiven 0 0
第28讲 css文本控制属性的笔记

css样式使用小技巧：要想让css有更好的兼容性，要注意css属性的默认值，默认值在不同的浏览器上是不同的

by Keiven 0 0
第27讲 css优先级的笔记

css布局与传统html布局比较1、传统html布局缺点：html标记控制布局繁琐，修改麻烦每个页面都要单独控制，网站更新工作量大2、css布局优点：css样式功能强大，布局灵活，修改方便多个页面可以通过一个css文件控制，网站更新方便快捷。 css控制文本1、设置对象中文本缩进语法：text-indent:lengthtext-indent:2em2、文本水平对齐方式语法：text-align:left/center/right3、对象中空白处理语法：white-space:normal（自动换行）、pre（换行和空白受保护）、nowrap（强制在同一行显示）4、文本大小写控制语法：text-transform:none（正常大小）、capitalize（每个单词的第一个字母转换成大写）、uppercase（转换成大写）、lowercase（转换成小写）5、元素的垂直对齐方式语法：vertical-align：sub（设置文字为下标）、super（设置文字为上标）、top（把元素的顶端与行中最高元素的顶端对齐）、text-bottom（把元素的底端与父元素的底端对齐） css样式的特点1、继承：网页中子元素，将继承父元素的样式例如：要控制P标签中文字大小，可以直接给body标记加样式。2、层叠：网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式。后面定义的样式，会覆盖前面定义的样式。 css优先级四种方式的优先级：内联式（行内样式）>内嵌式（内部式）>链接式（外部式）>@import导入式css优先权：就近原则作用范围越小，优先级越高离要修饰目标越近的样式优先级越高选择符优先级：行内>ID选择符>class类选择符>html标记类型选择符我们可以采用！important语法来提升优先级p{background-color:#FFCCCC !inportant;IE6不支持该语句background-color:#66CCCC}

by Keiven 0 0
第26讲 css在网页中的应用方式的笔记

css在网页中的应用方式1、内联式样式表：直接写在现有的标记中，如：<p style="color:red">...</p>2、嵌入式样式表：使用“<style></style>”标签嵌入都html文件的头部中的<head>标记内，如：<syle type="text/css"></style>用于当浏览器不支持样式表时，不会将3、外部链接式样式表：将样式表写在一个独立的.css文件中，然后再页面head区<head>标记内用<link>标签调用它，如：<link href="main.css" rel="stylesheet" type="text/css">4、导入式样式表：导入式样式比表与链接式样式表的功能基本相同，只是语法和动作方式上略有不同，同样也将导入样式代码写在<head>标记内。语法：<style type="text/css">@import url("basic.css");</style>

by Keiven 1 1
第25讲 css控制文字属性下的笔记

css控制字体1、设置字体样式语法：font-style:normai（正常）、italic（斜体）、oblique（斜体）2、修饰文字语法：text-decoration:none（正常） underline（下划线） overline（上划线） line-through（删除线）3、字符间距语法：letter-spacing:normal（默认）length（长度单位）4、单词间距word-spacing:normal（默认）length（长度单位）

by Keiven 1 1
第24讲 css控制文字属性中的笔记

ID及类的名称必须以英文字母开头

by Keiven 0 0
第23讲 css控制文字属性上的笔记

css简介一、概念：css是cascading style sheets（层叠样式表）的简称。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助css的强大功能，网页将在你丰富的现象力下千变万化。实际上css的代码都是由一些最基本的语句构成的。css可以作为html、xhtml、xml的样式控制语言。二、css语法结构选择符{属性：值}例如：body{font-size：12px;}参数说明：1、选择符（selecto）：指明这组样式所要针对的对象。可以是一个xhtml标签，如body，h1；也可以是定义了特定的id或class的标签，如#main选择符表示选择<div id="main">，即一个被制定了main为id的对象。2、属性（proprety）：选择符的样式属性，如颜色、大小、定位、浮动方式等。3、值（value）：是指属性的值。4、同时可以为一个选择符定义多个属性，每个属性之间用分号“;”分割。css长度单位相对长度单位说明em 相对于当前对象内文本的字体尺寸相当于倍数px 像素（pixel）推荐使用绝对长度单位说明——基本上用不到in 英寸cm 厘米mm 毫米pt 点（point）颜色单位说明十六进制如：color.#ff0000 颜色名称如：color.red三原色单位如：rgb(255,0,0)一般最常用的是十六进制，三原色单位的原理【红（r），绿（g），蓝（b）】混合而成。每个值域在0-255之间。css控制字体功能语法设置字号 font-size:12px设置字色 color:#00000设置字体 font-family:"黑体"（中文网页中最常用宋体，英文是Arial）设置行高 line-height:150% line-height:1.5em 小技巧：如果是12px、14px 行高设置在1.5-1.8之间为佳字号越大，行高越小设置字体粗细 font-weight:normail（正常） bold（粗体）css选择符类型1、类型选择符就是html文档中的元素（作用于html标记）如p{属性:值}2、类选择符：可以自己定义样式，应用于一个或多个网页元素，类在网页中可以出现多次，用于定义重复的样式。类以英文"."开头，后面的名字自己定义，类定义后还需要在网页中加入class=类名称，加以调用。如：.warning{属性：值}<p class="warning">...</p>3、ID选择符：与类基本相似，只是一英文"#"开头，因为ID具有唯一性，所以在网页中只能出现一次，用于定义只出现一次的样式。如：#main{属性：值}<p id="warning">...</p>

by Keiven 1 1
第22讲 css基础理解表现与结构分离的笔记

Div+Css网页布局css样式基础一、什么是web标准web标准不是某一个标准，而是有W3C和其他标准化组织制定的一系列的标准的集合。包含我们所熟悉的html、xhtml、javascript以及css等。二、web标准的目的在于创建一个统一的用于web表现层的技术标准，以便于通过不同浏览器或终端设备向最终用户展示信息内容。三、采用标准的好处1、提高页面浏览速度。使用css方法，比传统的web设计方法之少节约50%以上的文件尺寸。2、缩短改版时间，将表现（样式/外观）与内容（信息/数据）相分离。只要简单的修改几个css文件就可以重新设计一个有成千上万页面的站点。3、降低网站流量的费用。带宽要求降低（代码更简洁），成本降低。4、更容易被搜索引擎搜索到。提高排名。5、内容能被更广泛的设备所访问。包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等。四、web标准的构成web标准主要由三部分组成：结构(structure)、表现（presentation）和行为(behavior)。理解表现和结构分离web标准的好处之一是“理解表现和内容分离”——那这到底是什么意思呢？首先得先明白一些基本的概念：内容、结构、表现和行为。1、内容：就是制作者放在页面内真正想要让访问者浏览的信息。2、结构：使内容更加具有逻辑性和易用性（类似于：1级2级标题、正文、列表等把他们成为结构）3、表现：用于修饰内容的外观的样式的东西称为表现。4、行为：对内容的交互及操作效果，如通过JS判断表单提交等。

by Keiven 1 1
第21讲 html 框架标记应用的笔记

将浏览器窗口一分为二——框架实现网页之中嵌套网页——框架框架的功能：将浏览器窗口，划分为不同的区域，每个区域，可以包含不同的网页。以实现多个网页在一个浏览窗口中显示的效果。写框架时不需要写body标记<frameset rows="控制行数及行高(用逗号隔开)" cols="控制列数及列宽(用逗号隔开)" framespacing="框架间距" frameborder="是否显示框架边框(yes,no/1,0)" border="边框宽度" bordercolor="边框颜色"><frame src="被包含的文件路径及名称" name="框架名称" noresize="是否允许改变框架尺寸"(true/false) scrolling="滚动条显示控制"(yes/no/auto)></frameset>

by Keiven 0 0
第20讲 html 多媒体标记应用的笔记

多媒体元素标记FLASH动画的插入使用<embed>...</embed>标记插入FLASH动画属性值说明src url flash路径width 像素/百分比 flash宽度height 像素/百分比 flash高度wmode transparent 使flash背景部分透明插入mp3音乐<object align=middle class=OBJECT classid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95 id=MediaPlayer width=356 height=80><param name="ShowStatusBar" value="true"><param name="AutoStart" value="true"><param name="Filename" value="love.mp3"></object>插入背景音乐：<bgsound src="音乐文件名及路径" loop="循环次数">如loop=-1即为无限循环插入视频wmv格式<embed src="tmcq.wmv"></embed>网络流媒体视频的插入<embed src="url" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

by Keiven 1 1
第19讲 html 表单常用标记下的笔记

列表框1、菜单式<select name="列表框名称"><option selected="selected"（哪个为初始选择，就添加selected语句(只能有一个) value="提交值"）>列表1</option><option value="提交值">列表2</option>...</select>选择分组<optgroup label="分组名称"></optgroup>2、列表式<select name="列表框名称" size="显示的行数" multiple（如果允许多选，则有该命令；否则没有此命令）><option value="提交值">列表1</option>...</select>例如：<select name=target size=3 multiple="multiple"> <option value=普通朋友>普通朋友</option> <option value=爱人 selected>爱人</option></seclect>浏览框<input name=“名称” type="file" size="显示长度"/>表单外框<fieldset>...</fieldset>定义围绕表单中元素的边框<legend>...</legend>legend元素为fieldset元素定义标题多行文本框<textarea name="多行文本框名称" cols="每行中的字符数" rows="显示的行数">初始内容</textarea>按钮<input type="按钮类型（reset(重置表单)、submit(提交表单就是注册)、button(普通按钮)）" name="按钮名称" value=“按钮显示文本”/>图片按钮<input name="图片按钮名称" type="image" src="图片路径"/>隐藏域<input name="名称" type="hidden" value="提交值"/>隐藏域是服务器想看见但不想让用户看到的东西

by Keiven 1 1
第18讲 html 表单常用标记上的笔记

表单元素标记单行文本框<input name="文本名称" type="text" value="初始值(默认文字)" size="显示字符数" maxlength="最多容纳字符数" readonly="readonly"（设置为只读） disabled="disabled"（设置为不可操作）/>密码框<input name="文本框名称" type="password" value="初始值" size="显示字符数"/>单选框<input name="单选框名称" type="radio" value=“提交值” checked="checken"（是否默认被选中）/>复选框<input name="复选框名称" type="checkbox" value="提交值" checked="checked"（是否默认被选中）/><label>标签<label>标注内容</label>标签为input元素定义标注（标记）。<label>标签的for属性应当与相关元素的id属性相同<label for="man">男</label><input type=radio name=sex value=男 id=“man”>

by Keiven 0 0
第17讲 htmlform标记详解的笔记

表单标记form标记用于创建一个表单，定义表单的开始与结束，它是一个容器，用于包含其他表单原色，例如文本框、单选框等。表单元素必须入在form标记内才有作用。<>form action=url（传送目标，处理表单信息的服务器端应用程序）method=处理表单数据的方法(POST/GET)如果不写method则默认提交方式为get，name=表单名称>表单原色</form>POST 方法可以传递大量信息GET方法将值附加到请求该页的URL中。适合传递少量信息（默认方式）

by Keiven 0 0
第16讲 html链接类型2的笔记

5、空连接就是没有目标端点的链接格式<a href="#">显示内容</a>例如：设为首页<a href="#" onClick="this.style.behavior='url(#default#homepage)'.this.sethomepage('http://www.souhu.com')">设为首页</a>添加收藏<a href="#"onClick="javascript.window.extermal.addfavorite('http://www.sohu.com'.'搜狐')">加入收藏夹</a>6、脚本链接：是一种特殊的链接，当单机设置脚本链接的文本或图像时，可以运行相应的JS语句。常用的脚本链接：例如<a href=javascript:window.open("http://www.163.com")>网易</a>关闭窗口：输入javascript:window.close()打开窗口：输入javascript:window.open('文件名')

by Keiven 0 0
第15讲 html链接类型的笔记

在html代码中图片标记的两侧不要有空白超链接Hyperlink语法<a href=链接目标 title="注释" target="打开链接窗口的形式">显示内容</a>_blank在新窗口中打开_self在自身窗口中打开（默认值）_parent在上一级窗口中打开，框架会经常使用_top在浏览器的整个窗口中打开，忽略任何框架链接的类型（链接要有回路）1、内部链接：当前文档与目标文档在同一站点内<a href=目标文档位置及全称>2、外部链接：当前文档与目标文档不在同一站点内<a href=URL>3、Email链接：并允许访问者向指定的地址发送邮件<a href=mailto:电子邮件地址>4、局部链接（锚点）：跳转到同一网页或其他文档中的指定位置。创建锚点：<a name="锚点名称">显示内容</a>链接锚点：<a href="#锚点名称">显示内容</a>5、空连接：就是没有目标端点的链接。<a href="#">显示内容</a>

by Keiven 0 0
第14讲 html超链接标记基础的笔记

超链接hyperlink<a href=“链接目标” titlte=“注释” target=“打开连接窗口的形式”>显示内容</a>_blank 在新窗口中打开_self在自身窗口中打开（默认值）_parent在上一级窗口中打开_top在本窗口顶级中打开

by Keiven 0 0

你感兴趣的课程

开始学习

互联网产品织梦CMS基础教程

13万+浏览/ 2589学员/ 4.3评分

免费

开始学习

互联网产品 Google Analytics 数据分析教程

10万+浏览/ 1897学员/ 4.6评分

免费

开始学习

IT互联网 DEDECMS仿站教程

4万+浏览/ 492学员/ 4.6评分

免费

学员动态

我听开始学习课时第1讲 html标记语法基础

我听加入课程轻松学习网页设计

Necole_Huang 开始学习课时第1讲 html标记语法基础

稍安勿躁开始学习课时第1讲 html标记语法基础

好学的H 开始学习课时第1讲 html标记语法基础

课程最新笔记

第1讲 html标记语法基础的笔记
SEO大神带你入门学习群 327371919 【1】每天都有最新免费SEO基础课程学习！【2】SEO高手群内指导解答问题、分析网站！【3】群内分享最新高清SEO教程、全套wordpress建站教程和织梦dedecms教程！
第2讲 html控制文字标记的笔记
html标记是一种标记语言，用来控制网页内容，网页布局。html标记是一种标记语言，用来控制网页内容，网页布局。html标记是一种标记语言，用来控制网页内容，网页布局。html标记是一种标记语言，用来控制网页内容，网页布局。html标记是一种标记语言，用来控制网页内容，网页布局。html标记是一种标记语言，用来控制网页内容，网页布局。html标记是一种标记语言，用来控制网页内容，网页布局。html标记是一种标记语言，用来控制网页内容，网页布局。html标记是一种标记语言，用来控制网页内容，网页布局。html标记是一种标记语言，用来控制网页内容，网页布局。
第1讲 html标记语法基础的笔记
html标记是一种标记语言，用来控制网页内容，网页布局。html标记是一种标记语言，用来控制网页内容，网页布局。html标记是一种标记语言，用来控制网页内容，网页布局。
第1讲 html标记语法基础的笔记
十四分钟十九秒是讲解怎样制作初步网页的视频，很重要！

课程最新问题