spry灵活布局 10.用CSS修饰美化网页 11.用模板和库（提高网页制作效率） 12.用表单创建交互式网页 13.使用行为和js代码 14.网站页面布局设计与色彩搭配的讲解 0.首先一点答疑 用dreamweaver...9.2设置APDiv的属性 在属性面板和AP元素面板中 9.2.1设置APDiv显示/隐藏属性 9.2.2.改变APDiv堆叠顺序（见上图Z） 在AP元素面板中的Z轴属性值更改...9.2.3.添加APDIV**滚动条* 解释： 溢出：AP元素面板中溢出用于控制当AP元素的内容超出AP元素的指定大小时如何在浏览器显示AP元素。的显示方法。...先新建一个APDiv，确定合适的位置，插入表格（宽度100% 间距…），填好文字 选中导航栏的一个小格子，窗口–行为–“+”来建立导航栏和下拉菜单的关系 （显示–over ；隐藏–out） 10...列表：设定项目符号和编号的外观。 定位：精确控制网页元素的位置，主要是层。
1 把所有 p 元素的背景颜色更改为红色： 2 $("p").css("background-color","red"); jQuery选择器一览： 选择器 实例 选取 * $("*") 所有元素 #id...toggle() 对被选元素进行隐藏和显示的切换 jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。...CSS 属性 描述 css() 设置或返回匹配元素的样式属性。 height() 设置或返回匹配元素的高度。 offset() 返回第一个匹配元素相对于文档的位置。...offsetParent() 返回最近的定位祖先元素。 position() 返回第一个匹配元素相对于父元素的位置。 scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。....closest() 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。 .contents() 获得匹配元素集合中每个元素的子元素，包括文本和注释节点。
jQuery 语法示例： $(this).hide() 隐藏当前元素。 $(“p”).hide() 隐藏所有段落。 $(“p.wow”).hide() 隐藏所有“wow”类型的段落。...jQuery 选择器利用了CSS的语法，从而使得开发人员能够精确的选择一个元素并修改其显示效果。...$(“#wow”) 选择第一个具有“wow”标识符的元素。 $(“div#wow”) 选择第一个具有“wow”标识符的 元素。...}); 所有位于 $(document).ready 函数内的脚步将会在DOM加载时加载，并且会在页面内容加载之前完成。 jQuery 选项 jQuery 选项是作为参数传递给一个部件的简单属性。...如果你位于印度或者中国，即使是访问同一个页面，内容也会来自于最接近你所在位置的服务器。当web浏览器加载内容时，它们通常会检查是否已经拥有一份该文件的缓存。通过使用CDN，你可以从中受益。
溢出(重点) 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。...1.4 显示与隐藏总结 属性 区别 用途 display 隐藏对象，不保留位置 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 visibility 隐藏对象，保留位置...，位于边框边缘的外围，可起到突出元素的作用。...，而是简单的裁切 text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）...5.3 精灵技术使用的核心总结 首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。 精确测量，每个小背景图片的大小和 位置。
溢出(重点) 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。...1.4 显示与隐藏总结 属性 区别 用途 display 隐藏对象，不保留位置 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 visibility 隐藏对象，保留位置...是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。...，而是简单的裁切 text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...） 注意： 一定要首先强制一行内显示，再次和overflow属性 搭配使用 ?...5.3 精灵技术使用的核心总结 首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。 精确测量，每个小背景图片的大小和 位置。
.hide( options ) 当提供hide方法一个参数时，.hide()就会成为一个动画方法。....，然后采用一个下滑动画让元素一直滑到隐藏，当高度为0的时候，也就是不可见的时，修改元素display 样式属性被设置为none。...fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果 所谓"淡出"隐藏的，元素是隐藏状态不对作任何改变，元素是可见的，则将其隐藏。...这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。...jQuery.trim()函数用于去除字符串两端的空白字符 这个函数很简单，没有多余的参数用法 需要注意： - 移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab） - 如果这些空白字符在字符串中间时
(13)表单元素的标注label：当点击标注的文本时，浏览器会自动对焦关联的表单元素，for属性规定label与哪个表单元素绑定。name和id属性必需。...="text/css"> @import url("css/stype.css"); 29.样式优先级：”就近原则”，行内样式>内部样式表>外部样式表 当有很多样式时...：预格式化，它包围的文本会保留空格和换行符 下拉列表进行多选操作：在标签中设置multiple="multiple"属性，就可以实现多选功能，在windows 操作系统下，进行多选时按下...important要写在分号的前面，但注意当网页制作者不设置css样式时，浏览器会按照自己的样式来显示网页。...: hidden; 元素只是隐藏但仍然占位置 visibility: collapse; 隐藏但不占空间，类似display:none; clip剪辑一个绝对定位的元素。
很多应试者认为CSS很简单，没多少内容，面试就是面试 JavaScript部分的内容，这些观点是错误的，面试的第一关往往会考察应试者对CSS的掌握情况。因此，CSS也常常是应试者掉入的第一个陷阱。...例如都是块级元素，当显示这些元素中间的文本时，都将从新行中开始显示，其后的内容也将在新行中显示。 行内元素可以和其他行内元素位于同一行，在浏览器中显示时不会换行。...例如等，对于行内元素，不能设置其高度和宽度。 还有一种元素是行内块级元素，比如元素等。这些元素可以和其他行内元素位于同一行，同时可以设置其高度和宽度。...有些元素会在浮动元素的下方，但是这些元素的内容并不一定会被浮动的元素遮盖。当定位内联元素时，要考虑浮动元素的边界，围绕浮动元素放置内联元素。...（1）当两个相邻的外边距都是正数时，折叠的结果是它们两者中较大的值 （2）当两个相邻的外边距都是负数时，折叠的结果是两者中绝对值较大的值。 （3）当两个外边距一正一负时，折叠的结果是两者相加的和。
在本文中，我们将分享8 种在 CSS 中隐藏元素的方法，每种方法都有优点和注意事项。 1. Opacity and Filter: Opacity 隐藏元素最简单的方法之一是调整其不透明度。...它无法设置动画，并且应用时会触发布局更改，从而影响页面上其他元素的位置。为了缓解这种情况，我们可以使用其他技术，例如定位或遏制。 4....Hidden Attribute 在 HTML 中，我们有隐藏属性，可以将其添加到任何元素以隐藏它。当存在hidden属性时，浏览器应用其默认样式，相当于设置display:none。...例如： Hidden content 当使用不允许样式更改的内容管理系统时，此属性非常有用。但是，它与使用 display ：none有相同的优点和限制。 5....但是，需要注意的是，更改位置可能会影响页面的整体布局。此外，屏幕外的元素可能无法交互，因为它们不再位于视口内。 结论 总之，CSS 提供了多种技术来隐藏网页上的元素。
缺点 图片合成比较麻烦； 背景设置时，需要得到每一个背景单元的精确位置，； 维护合成图片时，最好只是往下加图片，而不要更改已有图片。...使用visibility:hidden来隐藏内容 visibility:hidden和display:none可以隐藏的内容几乎一样，但唯一区别是它虽然隐藏了内容，但被隐藏掉的内容仍旧占据空间，这段隐藏了内容却保留空间的位置会在网页中显示为空白...使用overflow:hidden隐藏溢出内容 overflow:hidden这种方式可以隐藏掉固定区域外的内容，它可以有效控制显示区域。但应注意，使用它时需要给它定义宽度和高度，否则会无效。...当为对象设置固定定位后，该对象即处于浏览器窗口画面中的固定位置，无视文档长短、窗口大小和滚条滚动。这常见于有时打开一些网页总会有广告在侧边，太烦人了！...transform使浏览器为元素创建一个 GPU 图层 translate改变位置时，元素依然会占据其原始空间 而改变绝对定位会触发重新布局，进而触发重绘和复合。 改变绝对定位会使用到 CPU。
).text( str ); } ); 表单事件 当元素获得焦点时，会触发 focus 事件，失去焦点时，会触发 blur 事件。.../jquery-3.4.1.min.js"> $("h2").click(function(){ // 连续点击，ul 的可见和隐藏进行切换...{ alert('hello'); }) 绑定多个事件 $(".del").on('click mouseover', function() { alert('hello'); }) 元素的隐藏和显示...> DOM 和 CSS 的操作 属性函数 attr("属性") 获得元素的属性值。...next() 获取紧邻匹配元素之后的元素 prev() 获取紧邻匹配元素之前的元素 siblings([selector]) 获取位于匹配元素前面和后面的所有同辈元素 测试</button
每一个状态接收来自输入信息流的一个或多个字符，并根据这些字符更新下一个状态。当前的标记化状态和树结构状态会影响进入下一状态的决定。 初始状态是数据状态。遇到字符 < 时，状态更改为“标记打开状态”。...布局（重要） 呈现器在创建完成并添加到渲染树时，并不包含位置和大小信息。**计算这些值的过程**称为布局（layout）或重排（repaint）。这个得记住了，记准确了！为什么呢？...当DOM的变化影响了元素的几何属性（宽或高），浏览器需要重新计算元素的几何属性，由于流式布局其他元素的几何属性和位置也受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。...当渲染树的一部分（或全部）因为元素的尺寸、布局、隐藏等改变而需要重新构建。所以，每个页面至少需要一次reflow，就是页面第一次加载的时候。...html 遇到有src的scripts（没有async和defer标记）加载外部的js时，同步加载并阻塞解析html，而且加载完马上执行 遇到设置async和defer的script，创建新的线程异步加载
中的window 1.1.3 jQuery 对象和 DOM 对象 用原生 JS 获取来的对象是 DOM 对象 jQuery 方法获取的元素是 jQuery 对象。...全选选择器 $(’*"’) 匹配所有元素 类选择器 $(".class") 获取同一类class的元素 标签选择器 $(“div”) 获取同一类标签的所有元素 并集选择器 $(“div,p,li”)...$('div').stop().fadeTo(100,.3); }) }) 3.2.4 自定义动画 自定义动画：animate() ; 第一个参数传入更改的样式属性...中的hover hover(function,function) 传入2个参数，第一个参数是鼠标移入是触发的函数，第二个是鼠标移出时触发的函数 只写一个参数时，鼠标移入移出都会触发它 4.1 jQuery...，与父级没有关系 传入的参数是一个对象 //获取偏移量 $('div').offset() //更改位置 $('div').offset({ top: 200, left: 100
display: none display: none;是CSS1规范，无兼容性问题，该属性值表示此元素不会被显示，依照词义是真正隐藏元素，使用这个属性，被隐藏的元素不占据任何空间，用户交互操作例如点击事件都不会生效...当使用该属性将元素从显示状态切换为隐藏状态时，元素不占据原本的空间，会触发浏览器的重绘与回流。为这个属性添加过渡动画是无效的，他的任何不同状态值之间的切换总是会立即生效。...display: block display: block;是CSS1规范，无兼容性问题，该属性值表示此元素将显示为块级元素，此元素前后会带有换行符，元素独占一行，封闭后自动换行，默认宽度为100%，可以指定宽度和高度...display: inline display: inline;是CSS1规范，无兼容性问题，该属性值表示此元素会被显示为内联元素，元素会生成一个或多个内联元素框，这些框不会在自身之前或之后产生换行符，...display: table display: table;是CSS2规范，兼容性良好，该属性值表示此元素会作为块级表格来显示，类似，表格前后带有换行符。
函数位于一个document ready函数中，我们需要在js中加载该函数文档 // jQuery入口函数 $(document).ready(function(){ //jQuery代码 }...); /*******************************/ $(function(){ //jQuery代码 }); 选择器语法: jQuery的选择器语法格式和CSS的调用方法一样的哦...).ready(function) |将函数绑定到文档的就绪事件（当文档完成加载时） | |$(selector).click(function) |触发或将函数绑定到被选元素的点击事件 | |...|触发、或将函数绑定到指定元素的 submit 事件 | |toggle() |绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。...结束的所有元素 [attribute *= value] 选取属性值包含value的所有元素 表单过滤选择器 表单属性过滤选择器 jQuery效果 隐藏和显示 (hide/show) <!
可以运用到布局（因为当其内元素和父元素宽度相等时没有问题但是只要加了一点padding和margin整个布局就崩溃了）和表单元素（表单中除了checkbox和radio外默认都是2px的border）上...22、元素竖向的百分比设定是相对于容器的高度吗？ PS：当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的。...src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。...当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。...参数是auto时候，子元素内容大于父元素时出现滚动条。 参数是visible时候，溢出的内容出现在父元素之外。 参数是hidden时候，溢出隐藏。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 实例： 在元素上移动鼠标。...在下面的实例中，当点击事件在某个 元素上触发时，隐藏当前的 元素： $("p").click(function(){ $(this).hide(); }); dblclick() 当双击元素时...; } ); focus() 当元素获得焦点时，发生 focus 事件。 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。...","#cccccc"); }); blur() 当元素失去焦点时，发生 blur 事件。...jQuery css() – 返回 CSS 属性 返回第一个匹配元素的css属性值 jQuery css() – 设置 CSS 属性 设置 所有配置元素指定的 CSS 属性 jQuery css(
正如你将看到的，这使得我们能够在任何时间点轻松地将进度条和时间范围同步。 继续，当视频被播放我们就更新上述元素的值，以便进度条发挥作用。...然后，我们获取 data-seek 的值并检查其是否有效。如果有效，我们获取该值并更新视频播放过的时间和进度条的位置。...我们有一个按钮，根据视频音频的状态展示，和一个控制音频范围的 input 元素。 首先，当 #volume 元素的值发生更改，我们要做的就是更改视频的音频大小。我们也要更新视频当前的图标。...当视频被静音，音频值就会存放在 volume 元素 data-volume 属性上，以便当视频取消静音时，我们可以恢复音频状态之前的值。...切换视频控件 视频控件会占用一些空间并阻挡用户查看一些内容。当它们不被使用的时候将其隐藏起来比较好，然后当鼠标移动到视频上方再显示它们。
元素会被显示为内联元素，该元素前后没有换行符 inline-block 行内块元素，元素既有内联元素的特性，又有块元素的特性 none 元素隐藏 5.2 浮动 float属性 值 说明 left 元素向左浮动...1.设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置 ； 2.设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响 ； 3.设置相对定位的盒子原来的位置会被保留下来...，这意味着它们对其他元素的定位不会造成影响 ； 4.元素位置发生偏移后，它原来的位置不会被保留下来； 5.一般定位都是相对定位和绝对定位配合使用，父级元素先相对定位，子元素再绝对定位； 使用场景...0 ； 2.设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系 ； 3.z-index值大的层位于其值小的层上方； 7、动画 7.1 变形 transform 函数...：hover 鼠标悬停和划过时的显示效果 ：active 控制按钮被点击时的显示效果 ：focus 获得聚焦对象的元素 ：checked 选中 2.媒体查询：通过@media属性判断设备的尺寸
领取专属 10元无门槛券
手把手带您无忧上云
