精华内容
下载资源
问答
  • Java怎么操作XML文件

    2012-09-11 16:43:00
    无疑XML文件成了最好的选择。所以知道怎么操作XML文件还是需要的 1. 介绍 1)DOM(JAXP Crimson解析) DOM是与平台和语言无关的方式表示XML文档的官方W3C标准。DOM是以层次结构组织的节点或信息片断...

    有时候我们有的东西需要保存在本地。。无疑XML文件成了最好的选择。所以知道怎么操作XML文件还是需要的微笑


    1. 介绍
    1)DOM(JAXP Crimson解析器)
    DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准。DOM是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中寻找 特定信息。分析该结构通常需要加载整个文档和构造层次结构,然后才能做任何工作。由于它是基于信息层次的,因而DOM被认为是基于树或基于对象的。DOM 以及广义的基于树的处理具有几个优点。首先,由于树在内存中是持久的,因此可以修改它以便应用程序能对数据和结构作出更改。它还可以在任何时候在树中上下 导航,而不是像SAX那样是一次性的处理。DOM使用起来也要简单得多。
    2)SAX
    SAX处理的优点非常类似于流媒体的优点。分析能够立即开始,而不是等待所有的数据被处理。而且,由于应用程序只是在读取数据时检查数据,因此不需要将数 据存储在内存中。这对于大型文档来说是个巨大的优点。事实上,应用程序甚至不必解析整个文档;它可以在某个条件得到满足时停止解析。一般来说,SAX还比 它的替代者DOM快许多。
    选择DOM还是选择SAX? 对于需要自己编写代码来处理XML文档的开发人员来说, 选择DOM还是SAX解析模型是一个非常重要的设计决策。 DOM采用建立树形结构的方式访问XML文档,而SAX采用的事件模型。
    DOM解析器把XML文档转化为一个包含其内容的树,并可以对树进行遍历。用DOM解析模型的优点是编程容易,开发人员只需要调用建树的指令,然后利用 navigation APIs访问所需的树节点来完成任务。可以很容易的添加和修改树中的元素。然而由于使用DOM解析器的时候需要处理整个XML文档,所以对性能和内存的要 求比较高,尤其是遇到很大的XML文件的时候。由于它的遍历能力,DOM解析器常用于XML文档需要频繁的改变的服务中。
    SAX解析器采用了基于事件的模型,它在解析XML文档的时候可以触发一系列的事件,当发现给定的tag的时候,它可以激活一个回调方法,告诉该方法制定 的标签已经找到。SAX对内存的要求通常会比较低,因为它让开发人员自己来决定所要处理的tag.特别是当开发人员只需要处理文档中所包含的部分数据 时,SAX这种扩展能力得到了更好的体现。但用SAX解析器的时候编码工作会比较困难,而且很难同时访问同一个文档中的多处不同数据。
    3)JDOM http://www.jdom.org
    JDOM的目的是成为Java特定文档模型,它简化与XML的交互并且比使用DOM实现更快。由于是第一个Java特定模型,JDOM一直得到大力推广和 促进。正在考虑通过“Java规范请求JSR-102”将它最终用作“Java标准扩展”。从2000年初就已经开始了JDOM开发。
    JDOM与DOM主要有两方面不同。首先,JDOM仅使用具体类而不使用接口。这在某些方面简化了API,但是也限制了灵活性。第二,API大量使用了Collections类,简化了那些已经熟悉这些类的Java开发者的使用。
    JDOM文档声明其目的是“使用20%(或更少)的精力解决80%(或更多)Java/XML问题”(根据学习曲线假定为20%)。JDOM对于大多数 Java/XML应用程序来说当然是有用的,并且大多数开发者发现API比DOM容易理解得多。JDOM还包括对程序行为的相当广泛检查以防止用户做任何 在XML中无意义的事。然而,它仍需要您充分理解XML以便做一些超出基本的工作(或者甚至理解某些情况下的错误)。这也许是比学习DOM或JDOM接口 都更有意义的工作。
    JDOM自身不包含解析器。它通常使用SAX2解析器来解析和验证输入XML文档(尽管它还可以将以前构造的DOM表示作为输入)。它包含一些转换器以将 JDOM表示输出成SAX2事件流、DOM模型或XML文本文档。JDOM是在Apache许可证变体下发布的开放源码。
    4)DOM4J http://dom4j.sourceforge.net
    虽然DOM4J代表了完全独立的开发结果,但最初,它是JDOM的一种智能分支。它合并了许多超出基本XML文档表示的功能,包括集成的XPath支持、 XML Schema支持以及用于大文档或流化文档的基于事件的处理。它还提供了构建文档表示的选项,它通过DOM4J API和标准DOM接口具有并行访问功能。从2000下半年开始,它就一直处于开发之中。
    为支持所有这些功能,DOM4J使用接口和抽象基本类方法。DOM4J大量使用了API中的Collections类,但是在许多情况下,它还提供一些替 代方法以允许更好的性能或更直接的编码方法。直接好处是,虽然DOM4J付出了更复杂的API的代价,但是它提供了比JDOM大得多的灵活性。
    在添加灵活性、XPath集成和对大文档处理的目标时,DOM4J的目标与JDOM是一样的:针对Java开发者的易用性和直观操作。它还致力于成为比 JDOM更完整的解决方案,实现在本质上处理所有Java/XML问题的目标。在完成该目标时,它比JDOM更少强调防止不正确的应用程序行为。
    DOM4J是一个非常非常优秀的Java XML API,具有性能优异、功能强大和极端易用使用的特点,同时它也是一个开放源代码的软件。如今你可以看到越来越多的Java软件都在使用DOM4J来读写 XML,特别值得一提的是连Sun的JAXM也在用DOM4J.
    2…… 比较
    1)DOM4J性能最好,连Sun的JAXM也在用DOM4J.目前许多开源项目中大量采用DOM4J,例如大名鼎鼎的Hibernate也用DOM4J来读取XML配置文件。如果不考虑可移植性,那就采用DOM4J.
    2)JDOM和DOM在性能测试时表现不佳,在测试10M文档时内存溢出。在小文档情况下还值得考虑使用DOM和JDOM.虽然JDOM的开发者已经说明 他们期望在正式发行版前专注性能问题,但是从性能观点来看,它确实没有值得推荐之处。另外,DOM仍是一个非常好的选择。DOM实现广泛应用于多种编程语 言。它还是许多其它与XML相关的标准的基础,因为它正式获得W3C推荐(与基于非标准的Java模型相对),所以在某些类型的项目中可能也需要它(如在 JavaScript中使用DOM)。
    3)SAX表现较好,这要依赖于它特定的解析方式-事件驱动。一个SAX检测即将到来的XML流,但并没有载入到内存(当然当XML流被读入时,会有部分文档暂时隐藏在内存中)。
    3. 四种xml操作方式的基本使用方法

    xml文件:


    Xml代码收藏代码
    1. <?xmlversion="1.0"encoding="GB2312"?>
    2. <RESULT>
    3. <VALUE>
    4. <NO>A1234</NO>
    5. <ADDR>四川省XX县XX镇XX路X段XX号</ADDR>
    6. </VALUE>
    7. <VALUE>
    8. <NO>B1234</NO>
    9. <ADDR>四川省XX市XX乡XX村XX组</ADDR>
    10. </VALUE>
    11. </RESULT>

    Java代码收藏代码
    1. 1)DOM
    2. importjava.io.*;
    3. importjava.util.*;
    4. importorg.w3c.dom.*;
    5. importjavax.xml.parsers.*;
    6. publicclassMyXMLReader{
    7. publicstaticvoidmain(Stringarge[]){
    8. longlasting=System.currentTimeMillis();
    9. try{
    10. Filef=newFile("data_10k.xml");
    11. DocumentBuilderFactoryfactory=DocumentBuilderFactory.newInstance();
    12. DocumentBuilderbuilder=factory.newDocumentBuilder();
    13. Documentdoc=builder.parse(f);
    14. NodeListnl=doc.getElementsByTagName("VALUE");
    15. for(inti=0;i<nl.getLength();i++){
    16. System.out.print("车牌号码:"+doc.getElementsByTagName("NO").item(i).getFirstChild().getNodeValue());
    17. System.out.println("车主地址:"+doc.getElementsByTagName("ADDR").item(i).getFirstChild().getNodeValue());
    18. }
    19. }catch(Exceptione){
    20. e.printStackTrace();
    21. }
    22. 2)SAX
    23. importorg.xml.sax.*;
    24. importorg.xml.sax.helpers.*;
    25. importjavax.xml.parsers.*;
    26. publicclassMyXMLReaderextendsDefaultHandler{
    27. java.util.Stacktags=newjava.util.Stack();
    28. publicMyXMLReader(){
    29. super();
    30. }
    31. publicstaticvoidmain(Stringargs[]){
    32. longlasting=System.currentTimeMillis();
    33. try{
    34. SAXParserFactorysf=SAXParserFactory.newInstance();
    35. SAXParsersp=sf.newSAXParser();
    36. MyXMLReaderreader=newMyXMLReader();
    37. sp.parse(newInputSource("data_10k.xml"),reader);
    38. }catch(Exceptione){
    39. e.printStackTrace();
    40. }
    41. System.out.println("运行时间:"+(System.currentTimeMillis()-lasting)+"毫秒");}
    42. publicvoidcharacters(charch[],intstart,intlength)throwsSAXException{
    43. Stringtag=(String)tags.peek();
    44. if(tag.equals("NO")){
    45. System.out.print("车牌号码:"+newString(ch,start,length));
    46. }
    47. if(tag.equals("ADDR")){
    48. System.out.println("地址:"+newString(ch,start,length));
    49. }
    50. }
    51. publicvoidstartElement(Stringuri,StringlocalName,StringqName,Attributesattrs){
    52. tags.push(qName);}
    53. }
    54. 3)JDOM
    55. importjava.io.*;
    56. importjava.util.*;
    57. importorg.jdom.*;
    58. importorg.jdom.input.*;
    59. publicclassMyXMLReader{
    60. publicstaticvoidmain(Stringarge[]){
    61. longlasting=System.currentTimeMillis();
    62. try{
    63. SAXBuilderbuilder=newSAXBuilder();
    64. Documentdoc=builder.build(newFile("data_10k.xml"));
    65. Elementfoo=doc.getRootElement();
    66. ListallChildren=foo.getChildren();
    67. for(inti=0;i<allChildren.size();i++){
    68. System.out.print("车牌号码:"+((Element)allChildren.get(i)).getChild("NO").getText());
    69. System.out.println("车主地址:"+((Element)allChildren.get(i)).getChild("ADDR").getText());
    70. }
    71. }catch(Exceptione){
    72. e.printStackTrace();
    73. }
    74. }
    75. 4)DOM4J
    76. importjava.io.*;
    77. importjava.util.*;
    78. importorg.dom4j.*;
    79. importorg.dom4j.io.*;
    80. publicclassMyXMLReader{
    81. publicstaticvoidmain(Stringarge[]){
    82. longlasting=System.currentTimeMillis();
    83. try{
    84. Filef=newFile("data_10k.xml");
    85. SAXReaderreader=newSAXReader();
    86. Documentdoc=reader.read(f);
    87. Elementroot=doc.getRootElement();
    88. Elementfoo;
    89. for(Iteratori=root.elementIterator("VALUE");i.hasNext(){
    90. foo=(Element)i.next();
    91. System.out.print("车牌号码:"+foo.elementText("NO"));
    92. System.out.println("车主地址:"+foo.elementText("ADDR"));
    93. }
    94. }catch(Exceptione){
    95. e.printStackTrace();
    96. }
    97. )


    展开全文
  • 小日本视频转换

    2011-11-07 16:03:30
    老枯不明白到底是怎么控制的。 RT-CBR (实时固定码率):连GOP层次的码率优化也不做了的CBR,快一点,质量不高 RT-CQ (实时固定品质):连GOP层次的码率优化也不做了的CQ,快一点,质量不高 6)码率:这个码率是...
  • jQuery总结

    2020-02-03 15:17:50
    目录 什么是jQuery: 为什么用jQuery: 怎么用jQuery: 引入: js库库文件 版本: jQuery两把利器: ...层次选择器: 过滤选择器 表单选择器 工具方法: jQuery属性: CSS模块 style样...

    目录

    什么是jQuery:

    为什么用jQuery:

    怎么用jQuery:

    引入:

    js库库文件

    版本:

    jQuery两把利器:

    核心函数:

     jQuery函数使用:

    核心对象:

    基本行为:

    核心函数和核心对象关系

     

    选择器:

    简介:

    分类:

    基本选择器:

    层次选择器:

    过滤选择器

    表单选择器

    工具方法:

    jQuery属性:

    CSS模块

    style样式

    位置坐标:

    尺寸:

    筛选模块

      过滤:

    查找:

    文档处理(CUD)模块

     插入:

     删除:

     更新:

    事件模块

     绑定事件

     优缺点:

       常用事件:

     区别:

    解绑事件

    事件委托:

     理解:

     好处:

     编码:

    事件坐标

    事件相关:

    定时调用

    延时调用

    类的操作:(class)


    什么是jQuery:

    • 最重要的是查询,写的更少,做的更多
    • 一个优秀的JS函数库(封装了Dom,BOM)
    • 使用率高,中大型WEB项目开发首选
    • 用的匿名函数调用,传的参数是window---jQuery库
    • 封装简化DOM操作(CRUD)/AJAX

     

    为什么用jQuery:

    • 强大选择器:方便快速查找DOM元素
    • 隐式遍历(迭代):一次操作多个元素
    • 读写合一:读数据/写数据用的是一个函数
    • 事件处理
    • 链式调用
    • DOM操作(CUD)
    • 样式操作
    • dom和bom用起来太麻烦

     

    怎么用jQuery:

    需要下载,引入

    引入:

    1.服务器本地库,引入到项目中

    //引用jQuery
    <script type="text/javascrript" src="path"></script>
    
    <script type="text/javascrript">
    </script>

    2.CDN远程库:(上线用远程)

    网站:bootCDN

    引入操作

    1:直接复制标签

    好处:减轻你的服务器压力

     

    js库库文件

    开发库:测试版

    生产库:开发库的压缩版,体积更小,运行速度更快

     

    版本:

    1.x:兼容老版本,文件更大

    2.x:部分IE8及以下不支持,文件小,执行效率更高

    3.x完全不再支持IE8及以下版本,提供一些新的API,提供不包含ajax/动画API的版本

     

    jQuery两把利器:

    核心函数:

    • $/jQuery
    • $===jQuery  //true
    • jQuery向外暴露的就是jQuery函数,可以直接使用

     jQuery函数使用:

    1.作为一般函数调用:$(parram)

    • 参数作为函数:当DOM加载完成后,执行此回调函数
    • 参数为选择器字符串:查找所有匹配的标签,并将它们封装成jQuery对象
    • 参数为DOM对象:将DOM对象封装成jQuery对象
    • 参数为html标签字符串(用的少):创建标签对象并封装成jQuery对象
    //需求一:点击按钮,显示按钮的文本,显示一个新的输入框
    
    //1.1)参数作为函数:当DOM加载完成后,执行此回调函数
    $(function(){ //绑定文档加载完成的监听
    //1.2)参数为选择器字符串:查找所有匹配的标签,并将它们封装成jQuery对象
        $('#btn').click(function(){ //绑定点击事件监听
            //this是什么?发生事件的dom元素(<button>)
            //alert(this.innerHTML)
            //1.3)参数为DOM对象:将DOM对象封装成jQuery对象
            alert($(this).thml())
            //1.4)参数为html标签字符串(用的少):创建标签对象并封装成jQuery对象
            $('<input type="text" name="msg3"/><br/>').appendTo('div')
        })
    })

    2.作为对象使用:$.xxx()

    • $.each():隐式遍历数组
    • $.trim():去除两端的空格

    核心对象:

    • $()就是个对象(object)
    • 执行$()返回的对象--将标签转换为了一个对象
    • 使用核心对象:$().XXX()
    • jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)
    • 伪数组的概念:1.是object对象,不是array 2.有length属性 3.有数值下标属性 4.没有数组特别的方法:forEach(),push(),pop(),splice()
    • jQuery对象拥有很多有用的属性和方法,让程序员能方便的操作dom

    基本行为:

    • size()/length:包含的DOM元素个数
    • [index]/get(index):得到对应位置的DOM元素
    • each():遍历包含的所有DOM元素
    • index():得到在所在兄弟元素中的下表

     

    核心函数和核心对象关系

    jQuery向外暴露的是函数,直接可用($/jQuerry),jQuery对象是执行jQuery函数得到($())

    //jQuery基本框架
    (function(window){
        var jQuery=function(){
             return new xxx()
        }   
     window.$=window.jQuery=jQuery
    })(window)

    回调函数:是有事件触发执行,没有事件触发不执行,其他的函数直接执行,不需要触发

     

    选择器:

    简介:

    1. 选择器本身只是一个有特定语法规则的字符串,没有实质的用处
    2. 它的基本语法规则使用的就是CSS的选择器语法,并对其进行了扩展
    3. 只有调用$(),并将选择器作为参数传入才能起作用
    4. $(selector)作用:根据选择器规则在整个文档中查找所有匹配的标签的数组,并封装成jQuery对象返回

    分类:

    1. 基本选择器:最基本最常用的选择器
    2. 层次选择器:查找子元素,后代元素,兄弟元素的选择器
    3. 过滤选择器:在原有选择器匹配中的元素中进一步进行过滤的选择器
    4. 表单选择器

    基本选择器:

    • 有特定语法规则(css选择器)的字符串
    • 用来查找某个/些DOM元素:$(selector)
    1. #id:id选择器
    2. element:元素选择器
    3. .class:属性选择器
    4. *:任意标签
    5. selector1,selector2,selectorN:取多个选择器的并集(组合选择器)
    6. selector1selector2selectorN:取多个选择器交集(相交选择器)
    //选择id为div1的元素
    $('div1').css('baxkground','red')
    
    //选择所有的div元素
    $('div').css('baxkground','red')
    
    //选择所有clss属性为box的元素
    $('.box').css('baxkground','red')
    
    //选择所有的div和span元素
    $('div,span').css('baxkground','red')
    
    //选择所有class属性为box的div元素
    $('div.box').css('baxkground','red')

     

    层次选择器:

    • 找子孙后代,兄弟元素
    <ul>
    <li class="box">ccc</li>
    <li ><span>bbb</span></li>
    </ul>
    
    
    //选中ul(父元素)下所有的span(后代元素)
    $('ul span').css('background','yellow')
    
    //选中ul(父元素)下所有的子元素span(子元素)
    $('ul>span').css('background','yellow')
    
    //选中class为box(prev元素)的下一个li(next元素)
    $('.box+li').css('background','yellow')
    
    //选中ul下的class为box的元素后面的所有兄弟元素
    $('ul .box~*').css('background','yellow')

    过滤选择器

    • 多个过滤选择器不是同时执行,而是依次
    • 在原有匹配元素中筛选出其中一些符合条件的
    //选择内容为bbb的li
    $('li:contains("bbb")').css('backgroud','red'))

    表单选择器

    //选择不可用的文本框输入框
    $(':text:disabled').css('background','red')

     

     

    工具方法:

    //$.isArray(obj) 判断是否是数组
    console.log($.isArray($('body')),$.isAray([]))
    //$.each()
    var obj={
        name:'Tom'
        setName:function(name){
            this.name=name
        }
    }
    $.each(function(key,value)){
        console.log(key,value)
    })  
    
    输出:
        name 'Tom'
        setName function(name){
            this.name=name
        }
    1. $.each()  遍历数组或对象中的数据
    2. $.trim()去除字符串两边的空格
    3. $.type(obj)得到数据类型
    4. $.isFunction(obj)判断是否是函数
    5. $.parrseJson(json):解析json字符串转换为js对象/数组

     

    单个代码原生代码执行速度要比jQuery速度快

     

    jQuery属性:

    • 操作标签的属性,标签体文本
    1. attr(name)/attr(name,value):读写非布尔值的标签属性
    2. prop(name)/pop(name,value):读写布尔值的标签属性
    3. removeAttr(name)/rremovePrrop(name):删除属性
    4. addClass(classValue):添加class
    5. emoveClass(classvalue):移除指定class
    //读取第一个div的title属性
    console.log($('div:first').attr('title'))
    
    //给所有的div设置name属性(value为atguigu)
    $('div'.attr('name','atguigu'))
    
    //移除所有div的title属性
    $('div').removeAttr('title')
    
    //给所有的div设置class='guiguClass',以前的class被覆盖
    $('div').attr('class','guiguClass')

     

    CSS模块

    style样式

    1.     css(styleName):根据样式名得到对应的值
    2.    css(styleName,value):设置一个样式
    3.    css({多个样式对}):设置多个样式

    位置坐标:

    1.   offset():读/写当前元素坐标(原点是页面左上角)
    2.   position():读当前元素坐标(原点是父元素左上角)
    3.   scollTop()/scollLeft():读/写元素/页面的滚动条坐标

    尺寸:

    1.  width()/height():内容的width/height
    2.  innerrwidth/innerHeight:width+padding
    3.  outerWidth()/outterHeight():width+padding+boerder    (分ture(多加一个)和false)

    筛选模块

      过滤:

    • 在jQuery对象内部的元素中找出部分匹配的元素,并封装成新的jQuery对象返回
    • first(),last(),eq(index)
    • filterr(selector):对当前元素提要求
    • not(selector):对当前元素提要求,并取反
    • has(selector):对子孙元素提要求

    查找:

    • 查找jQuery对象内部的元素的子孙/兄弟/父母元素,并封装成新的jQuery对象返回
    • children(selector):子元素
    • find(selector):后代元素
    • preAll(selector):前的所有兄弟
    • siblings(selector):所有兄弟
    • parent():父元素

    文档处理(CUD)模块

     插入:

    • (后部是元素内部的后面,后面是元素外部的后面)
    •   append()/appendTo:插入后部
    •   preppend()/preppendTo():插入前部
    •   before():插到前面
    •   after():插到后面

     删除:

    •    remove():将自己及内部的孩子都删除
    •    empty():掏空(自己还在)

     更新:

    •  replaceWith()

     

    事件模块

     绑定事件

    •    eventName(function(){})---绑定对应事件名的监听,例如:$('#div'').clivk(function(){});
    •    on('eventName',function(){})---通用的绑定事件监听,例如:$('#div').on('click',function(){})

     优缺点:

    • eventName:编码方便,但只能加一个监听,且有的事件监听不支持,但有的事件没有对应的方法
    • on:编码不方便,可以添加多个监听,且更通用

       常用事件:

    • click,mouseenter/mouseleava,mouseover/mouseout,focus/blur
    • houer(function(){},function(){})

     区别:

    • mouseover:在移入子元素时也会触发,对应mouseout
    • mouseenter:只在移入当前元素时才触发,对应mouseleave()
    • hover()使用的就是mouseenter()和mouseleave()

     

    解绑事件

     off('eventName')

    事件委托:

     理解:

    • 将子元素的事件委托给父辈元素处理
    • 事件监听绑定在父元素上,但事件发生在子元素上
    • 当操作任何一个子元素时,事件会冒泡到父元素
    • 父元素不会直接处理事件,最终调用的事件回调函数的是子元素:event.target

     好处:

    •  新增的元素没有事件监听(如新添加一个标签,想要重复利用一些代码/样式)
    •  减少监听的数量(n==>1)(监听一个父类,就可以监听多个子类)

     编码:

    • delegate(selector,'eventName',function(event){})   //回调函数中的this是子元素

    例子:

    <script>
    //将li元素的事件监听(click)委托给父辈元素ul处理
    $('ul'.delegate('li','click',function(){
        this.style.background='red'
    })
    $.(#btn1).click(function(){
        $('ul').append('<li>新增的li...</li>')
    })
    
    
    </script>

     

    事件坐标

    • event.offsetX:原点是当前元素左上角
    • event.clientX:原点是窗口左上角
    • event.pageX:原点是页面左上角

     

    事件相关:

    • 停止事件冒泡:event.stopPropagation()
    • 阻止事件的默认行为:event.preventDefault()

    定时调用

    setInterval(参数)   对象也是参数,函数也是对象
    可以将一个函数,每隔一段时间执行依次
    参数:

    回调函数,该函数会每隔一段时间被调用依次

    每次调用间隔的时间,单位时毫秒

    返回值:
    返回一个number类型的数据,来表示这个哪个计时器,这个数字用来作为定时器的唯一表示

    停止定时器:

    可以用这个返回值,停止该定时器

    方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器

    clearInterval(参数)

    延时调用

    setTimeout(参数)
    演示调用一个函数不马上执行,而是隔一段时间以后在执行,而且只会执行一次
    例子:网页上的广告10秒之后关闭了

    关闭延时调用
    clearTimeout(参数)

    延时调用和定时调用实际上可以相互替换的,在开发中自己选择

     

    类的操作:(class)

    修改样式,通过style
    jQuery属性来修改元素的样式,每修改一个样式,浏览器就需要重新渲染一次页面,这样的执行的性能是比较差的,而且这种形式当我们要
    修改多个样式时,不太方便
    希望能有一行代码,可以修改多个样式
    我们可以通过修改元素的class属性来间接的修改样式,这样一来,我们只需要修改一次,即可同时修改多个样式,浏览器只需要重新渲染
    页面一次,性能比较好,并且这种方式,可以使表现和行为进一步分离

     

     

     


     

     

     

     


     

     

     

     

     

     

     

     

     

     

    展开全文
  • 在这里,着重介绍怎么用程序实现RC522模块的一些功能,而RC522的结构,功能等便不再介绍。 这个程序的讲解是基于MSP430F149/169单片机的。 模块使用的是SPI接口,与单片机接口如下: #define RF_LPCTL BIT3 // P2.3 ...
  • JQuery面试题2

    2016-07-27 19:42:00
    1. 在公司是怎么用jquery的? 基本选择器:1 基本选择器。 #id:id选择器。 .class:类选择器. ...2 层次选择器 空格:选取指定元素的后代元素。 >:选取指定下的所有子元素。 +:选取紧接着的兄...

    1. 在公司是怎么用jquery的?
    基本选择器:1 基本选择器。
    #id:id选择器。
    .class:类选择器.
    标签选择器:根据指定的元素名匹配元素。
    群主选择器:将每一个匹配的元素合并并返回,以分号隔开。
    *:通配符选择器,匹配所有的元素。
    2 层次选择器
    空格:选取指定元素的后代元素。
    >:选取指定下的所有子元素。
    +:选取紧接着的兄弟元素。
    ~:选取元素后的所有兄弟元素。
    3 滤选择器:基本过滤选择器,内容过滤选择器,可见性选择器,属性选择器,子元素选择器等。
    动画效果:在登陆页面时使用过fadeIn()和fadeOut()方法修改元素的不透明度。
    hide和show:同时修改多个样式属性即高度,宽度和不透明度。
    fadeIn()与fadeOut():只改变不透明度。
    slideUp()和slideDown():只改变高度。
    fadeTo():用来代替fadeIn()与fadeOut()方法,只改变不透明度。
    toggle():用来代替hide()和show()方法,所以会同时修改多个样式属性即高度,宽度和不透明度。
    slideToggle():用来代替slideUp()和slideDown()方法,所以只改变高度。
    animate():属于自定义动画的方法,可以代替其他任何动画。
    stop():停止动画。
    合成事件:使用过鼠标悬停事件,到鼠标移至某个地方时就触发指定功能。
    bind():为匹配的元素绑定一个事件处理器。
    hover:模拟光标悬停事件,当光标移动到元素上是就触发第一个函数,相反就触发第二个函数。
    toggle:模拟鼠标连续点击事件,第一次点击调用第一个方法,第二次单击调用第二个方法,依次类推,
    直到调到最后一个,随后轮番调用。
    unbind():移除事件。
    one():在执行完一次以后,处理函数立即被删除。

    2. 为什么要使用jquery?
    因为jQuery是轻量级的框架,大小不到30kb,它有强大的选择器,出色的DOM操作的封装,有可靠的事件处理机制,
    完善的ajax,出色的浏览器的兼容性,而且支持链式操作,隐式迭代,行为层和结构层的分离,还支持丰富的插件,
    jquery的文档也非常的丰富。

    3. 你觉得jquery有哪些好处?
    轻量级的框架,强大的选择器,出色的DOM封装,可靠的事件处理机制,完善的Ajax,出色的浏览器兼容,支持链式操作,隐式迭代,
    行为层与结构层分离,丰富的插件机制,文档完善且开源的。

    4. 使用jquery遇到过哪些问题,你是怎么解决的?
    1. 前台拿不到值,是JSON可能会出现的错误(一般是多了一个空格等),这编译是不会报错的。
    2. 类库冲突:使用jQuery.noConflict()方法将$控制权渡让给第一个实现它的那个库。
    1. 使用jQuery替代$进行渡让。
    2. 使用$以传递参数的形式进行渡让。
    3. 使用返回值进行渡让。
    4. 使用匿名函数进行渡让。
    3. 以前在处理一个数据问题时,发现jQuery.ajax()方法返回的值一直有问题,清除缓存后数据无误,多次测试后发现返回的值都是之前的值,
    并且一直未执行url(后台为JAVA,设置断点一直未进入)。
    后来在网上查找原因发现是未设置type,如果没设置jQuery.ajax的type="Post",那么ajax就会默认type="Get",这就会导致之前数据被缓存起来。加上type="Post",问题解决!

    5. 你知道jquery中的选择器吗,请讲一下有哪些选择器?
    jQuery中的选择器大致分为:基本选择器,层次选择器,过滤选择器,表单选择器。
    1. 基本选择器。
    #id:id选择器。
    .class:类选择器.
    标签选择器:根据指定的元素名匹配元素。
    群主选择器:将每一个匹配的元素合并并返回,以分号隔开。
    *:通配符选择器,匹配所有的元素。
    2. 层次选择器
    空格:选取指定元素的后代元素。
    >:选取指定下的所有子元素。
    +:选取紧接着的兄弟元素。
    ~:选取元素后的所有兄弟元素。
    3. 过滤选择器
    1 基本过滤选择器
    :first():选取第一个元素
    :last():选取最后一个元素
    :not(selector):除去所有给定选择器所匹配的元素
    :even():选取索引为偶数的的所有元素(索引从0 开始)
    :odd:选取索引为奇数的的所有元素(索引从0 开始)
    :eq(index):选取索引=index的元素(索引从0 开始)
    :gt(index):选取索引>index的元素(索引从0 开始)
    :lt(index):选取索引<index的元素(索引从0 开始)
    :header():选取所有标题
    :animated():选取当前正在执行动画的所有元素
    2 内容过滤选择器
    :contains()(text):选取含有文本内容为"text"的元素。
    :empty():选取不包含子元素或文本的空元素
    :has()(selectcr):选取含有选择器所匹配的元素的元素。
    :parent():选取含有子元素或包含文本的元素。
    3 可见性选择器
    :hidden():选取所有不可见元素。
    :visible():选取所有可见元素
    4 属性选择器
    [attribut]:选取拥有此属性的元素。
    [attribut =value]:选取属性值为value的元素。
    [attribut!=value]:选取属性值不等于value的元素。
    [attribut ^=value]:选取属性值以value开始的元素。
    [attribut $=value]:选取属性值以value结束的元素。
    [attribut *=value]:选取属性值含有value的元素。
    [selector1][selector2][selector3]:用属性选择器合并成一个复合属性选择器,满足多个条件,每选择一次,缩小一次范围。
    5 子元素选择器
    :nth(安丝)-child(index/even/odd/epuation):选取每个父元素下的第index个子元素或奇偶元素(index从一算起)。
    :first-child:选取每个父元素的第一个子元素
    :last-child:选取每个父元素的最后一个子元素
    :only-child:如果某个元素是它父元素中唯一的子元素,那么将会被匹配。如果父元素中含有其它元素,则不会被匹配。
    4. 表单对象属性选择器
    :enabled():选取所有可用元素。
    :disabled():选取所有不可用的元素
    :checked():选取所有被选中的元素(单选框,复选框)。
    :selected():选取所有被选中的选项元素(下拉框)。

    6. jquery中的选择器 和 css中的选择器有区别吗?
    jQuery选择器支持CSS里的选择器。
    jQuery选择器可用来添加样式和添加相应的行为。
    CSS 中的选择器是只能添加相应的样式。

    7. 你觉得jquery中的选择器有什么优势?
    简单的写法 $('ID') 来代替 document.getElementById()函数。
    支持CSS1 到CSS3 选择器。
    完善的处理机制(就算写错了id也不会报错)。

    8. 你在使用选择器的时候有有没有什么觉得要注意的地方?
    1 选择器中含有".","#","[" 等特殊字符的时候需要进行转译。
    2 属性选择器的引号问题。
    3 选择器中含有空格的注意事项。

    9. jquery对象和dom对象是怎样转换的?
    jquery转DOM:jQuery 对象是一个数组对象,可以通过[index]得到相应的DOM对象,
    还可以通过get[index]去得到相应的DOM对象。
    DOM转jQuery:$(DOM对象)。

    10. 你是如何使用jquery中的ajax的?
    如果是一些常规的ajax程序的话,使用load(),$.get(),$.post(),一般使用的是$.post() 方法。
    如果需要设定beforeSend(提交前回调函数),error(失败后处理),success(成功后处理)及complete(请求完成后处理)回调函数等,
    一般使用的是$.ajax()。

    11. 你觉得jquery中的ajax好用吗,为什么?
    好用的。
    因为jQuery提供了一些日常开发中ajax的快捷操作,例 load,ajax,get,post等等,所以使用jQuery开发ajax将变得极其简单,
    我们就可以集中精力在业务和用户的体验上,不需要去理会那些繁琐的XMLHttpRequest对象。

    12. jquery中$.get()提交和$.post()提交有区别吗?
    1 $.get() 方法使用GET方法来进行异步请求的。
    $.post() 方法使用POST方法来进行异步请求的。
    2 get请求会将参数跟在URL后进行传递,
    而POST请求则是作为HTTP消息的实体内容发送给Web服务器的,这种传递是对用户不可见的。
    3 get方式传输的数据大小不能超过2KB,
    而POST要大的多。
    4 GET 方式请求的数据会被浏览器缓存起来,因此有安全问题。

    13. jquery中的load方法一般怎么用的?
    load方法一般在载入远程HTML代码并插入到DOM中的时候用,通常用来从Web服务器上获取静态的数据文件。
    如果要传递参数的话,可以使用$.get() 或 $.post()。

    14. 在jquery中你是如何去操作样式的?
    attr()获取或设置样式。
    addClass() 来追加样式。
    removeClass() 来删除样式。
    toggle() 来切换样式。
    hasClass(汉丝) 判断样式。

    15. 简单的讲叙一下jquery是怎么处理事件的,你用过哪些事件?
    通过jquery的事件处理过匹配的元素绑定事件,如hover(耗为儿)鼠标连续点击事件,toggle(托狗儿)光标悬停事件。
    首先去装载文档,在页面家在完毕后,浏览器会通过javascript 为DOM元素添加事件。

    16. 你使用过jquery中的动画吗,是怎样用的?
    hide() 和 show() 同时修改多个样式属性。像高度,宽度,不透明度。
    fadeIn() 和fadeOut() fadeTo() 只改变不透明度。
    slideUp() 和 slideDown() slideToggle() 只改变高度。
    animate() 属于自定义动画的方法。

    17. 你使用过jquery中的插件吗?

    答:看个人的实力和经验来回答了。一般是用校验这块比较多

    18. 你一般用什么去提交数据,为什么?
    答:一般我会使用的是$.post() 方法。
    如果需要设定beforeSend(提交前回调函数),error(失败后处理),success(成功后处理)
    及complete(请求完成后处理)回调函数等,这个时候我会使用$.ajax()

    19. 在jquery中引入css有几种方式?
    四种 行内式,内嵌式,导入式,链接式。

    20. 你在jquery中使用过哪些插入节点的方法,它们的区别是什么?
    答:append(),appendTo(),prepend(),prependTo(),after(),insertAfter()
    before(),insertBefore() 
    大致可以分为 内部追加和外部追加
    append() 表式向每个元素内部追加内容。
    appendTo() 表示 讲所有的元素追加到指定的元素中。
    例$(A)appendTo(B) 是将A追加到B中
    下面的方法解释类似

    21. 你使用过包裹节点的方法吗,包裹节点有方法有什么好处?
    答: wrapAll(),wrap(), wrapInner()
    需要在文档中插入额外的结构化标记的时候可以使用这些包裹的方法
    应为它不会帛画原始文档的语义

    22. jquery中如何来获取或和设置属性?
    jQuery中可以用attr()方法来获取和设置元素属性
    removeAttr() 方法来删除元素属性

    23. 如何来设置和获取HTML 和文本的值?
    答:html()方法 类似于innerHTML属性 可以用来读取或者设置某个元素中的HTML内容
    注意:html() 可以用于xhtml文档 不能用于xml文档
    text() 类似于innerText属性 可以用来读取或设置某个元素中文本内容。
    val() 可以用来设置和获取元素的值

    24. 你jquery中有哪些方法可以遍历节点?
    答 :children() 取得匹配元素的子元素集合,只考虑子元素不考虑后代元素
    next() 取得匹配元素后面紧邻的同辈元素
    prev() 取得匹配元素前面紧邻的同辈元素
    siblings() 取得匹配元素前后的所有同辈元素
    closest() 取得最近的匹配元素
    find() 取得匹配元素中的元素集合 包括子代和后代

    25. 子元素选择器 和后代选择器元素有什么区别?
    答:子代元素是找子节点下的所有元素,后代元素是找子节点或子节点的子节点中的元素

    26. 在jquery中可以替换节点吗?
    答:可以 在jQuery中有两者替换节点的方式
    replaceWith() 和 replaceAll()
    例如在<p title="hao are you">hao are you</p>替换成
    <strong>I am fine<strong>
    $('p').replaceWith('<strong>I am fine</strong>');
    replaceAll 与replaceWith的用法前后调换一下即可。

    27. 你觉得beforeSend方法有什么用?
    答:发送请求前可以修改XMLHttpRequest对象的函数,在beforeSend中
    如果返回false 可以取消本次的Ajax请求。XMLHttpRequest对象是唯一的参数
    所以在这个方法里可以做验证

    28. siblings() 方法 和 $('prev~div')选择器是一样的嘛?
    答: $('prev~div') 只能选择'#prev'元素后面的同辈<div>元素
    而siblings()方法与前后的文职无关,只要是同辈节点就都能匹配。

    29. 你在ajax中使用过JSON吗,你是如何用的?
    答:使用过,在$.getJSON() 方法的时候就是。
    因为 $.getJSON() 就是用于加载JSON文件的

    30. 有哪些查询节点的选择器?
    答:我在公司使用过 :first 查询第一个,:last 查询最后一个,:odd查询奇数但是索引从0开始
    :even 查询偶数,:eq(index)查询相等的 ,:gt(index)查询大于index的 ,:lt查询小于index
    :header 选取所有的标题等

    31. nextAll() 能 替代$('prev~siblindgs')选择器吗?
    答:能。 使用nextAll() 和使用$('prev~siblindgs') 是一样的

    32. jQuery中有几种方法可以来设置和获取 样式
    答 :addClass() 方法,attr() 方法

    33. $(document).ready()方法和window.onload有什么区别?
    答: 两个方法有相似的功能,但是在实行时机方面是有区别的。
    1 window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全
    加载到浏览器后才执行的。
    2 $(document).ready() 方法可以在DOM载入就绪时就对其进行操纵,并调用
    执行绑定的函数。

    34. jQuery是如何处理缓存的?
    答 :要处理缓存就是禁用缓存.
    1 通过$.post() 方法来获取数据,那么默认就是禁用缓存的。
    2 通过$.get()方法 来获取数据,可以通过设置时间戳来避免缓存。
    可以在URL后面加上+(+new Date)
    例 $.get('ajax.xml?'+(+new Date),function () {
    //内容
    });
    3 通过$.ajax 方法来获取数据,只要设置cache:false即可。

    35. $.getScript()方法 和 $.getJson() 方法有什么区别?
    答: 1 $.getScript() 方法可以直接加载.js文件,并且不需要对javascript文件进行处理
    ,javascript文件会自动执行。
    2 $.getJson() 是用于加载JSON 文件的 ,用法和$.getScript()

    36. 你读过有关于jQuery的书吗?
    《jquery基础教程》 《jquery实战》 《锋利的jquery》 《巧用jquery》 《jQuery用户界面库学习指南》等

    37. $("#msg").text(); 和 $("#msg").text("<b>new content</b>");有什么区别?
    答:1 $("#msg").text() 是 返回id为msg的元素节点的文本内容
    2 $("#msg").text("<b>new content</b>"); 是 将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,
    页面显示粗体的<b>new content</b>

    38. radio单选组的第二个元素为当前选中值,该怎么去取?
    答 : $('input[name=items]').get(1).checked = true;

    39. 选择器中 id,class有什么区别?
    答:在网页中 每个id名称只能用一次,class可以允许重复使用

    40. 你使用过哪些数据格式,它们各有什么特点?
    答: HTML格式 ,JSON格式,javascript格式,XML格式
    1 HTML片段提供外部数据一般来说是最简单的。
    2 如果数据需要重用,而且其他应用程序也可能一次受到影响,那么在性能和文件大小方面具有优势的JSON通常是不错的选择。
    3 而当远程应用程序未知时,XML则能够为良好的互操作性提供最可靠的保证。

    41. jQuery 能做什么?
    答:1 获取页面的元素 
    2 修改页面的外观
    3 改变页面大的内容
    4 响应用户的页面操作
    5 为页面添加动态效果
    6 无需刷新页面,即可以从服务器获取信息
    7 简化常见的javascript任务

    42. 在ajax中data主要有几种方式?
    答 : 三种,html拼接的,json数组,form表单经serialize()序列化的。

    43. jQuery中的hover()和toggle()有什么区别?
    答 hover()和toggle()都是jQuery中两个合成事件。
    hover()方法用于模拟光标悬停事件。
    toggle()方法是连续点击事件。

    44. 你知道jQuery中的事件冒泡吗,它是怎么执行的,何如来停止冒泡事件?
    答 : 知道,
    事件冒泡是从里面的往外面开始触发。
    在jQuery中提供了stopPropagation()方法可以停止冒泡。

    45. 例如 单击超链接后会自动跳转,单击"提交"按钮后表单会提交等,有时候我想阻止这些默认的行为,该怎么办?
    答: 可以用 event.preventDefault()
    或 在事件处理函数中返回false,即 return false;

    46. jquery表单提交前有几种校验方法?分别为??
    formData:返回一个数组,可以通过循环调用来校验
    jaForm:返回一个jQuery对象,所有需要先转换成dom对象
    fieldValue:返回一个数组
    beforeSend()

    47. 在jquery中你有没有编写过插件,插件有什么好处?你编写过那些插件?它应该注意那些?
    答: 插件的好处:对已有的一系列方法或函数的封装,以便在其他地方重新利用,方便后期维护和提高开发效率
    插件的分类:封装对象方法插件 、封装全局函数插件、选择器插件
    注意的地方:
    1.插件的文件名推荐命名为jquery.[插件名].js,以免和其他的javaScript库插件混淆
    2.所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上
    3.插件应该返回一个jQuery对象,以保证插件的可链式操作
    4.避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示,这样可以避免冲突或使用闭包来避免
    5.所有的方法或函数插件,都应当一分好结尾,否则压缩的时候可能出现问题。在插件头部加上分号,这样可以避免他人的不规范代码给插件带来影响
    6.在插件中通过$.extent({})封装全局函数,选择器插件,扩展已有的object对象
    通过$.fn.extend({})封装对象方法插件

    48. 怎样给jquery动态附加新的元素?那么怎样给新生成的元素绑定事件呢?
    jQuery的html()可以给现在元素附加新的元素
    直接在元素还未生成前就绑定肯定是无效的,因为所绑定的元素目前根本不存在。
    所以我们可以通过live和livequery来动态绑定事件

    转载于:https://www.cnblogs.com/t0404/p/10291005.html

    展开全文
  • JD一文带你入门CSS!

    2020-03-26 20:29:35
    )2.2 层次选择器2.3 结构伪类选择器2.4 属性选择器(!!!)写在最后 1. CSS概述 如何学习: CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) 美化网页(文字、阴影、超链接、列表、渐变) 盒子模型 ...

    CSS

    1. CSS概述

    如何学习:

    1. CSS是什么
    2. CSS怎么用(快速入门)
    3. CSS选择器(重点+难点)
    4. 美化网页(文字、阴影、超链接、列表、渐变)
    5. 盒子模型
    6. 浮动
    7. 定位

    1.1 什么是CSS

    Cascading Style Sheet 层叠级联样式表

    CSS:表现(美化网页)

    字体、颜色、编剧、高度、宽度、背景图片、网页定位、浮动

    1.2 发展史

    CSS1.0

    CSS2.0 DIV(块)+CSS, HTML与CSS结构分离的思想,网页变得简单。

    CSS2.1 浮动,定位

    CSS3.0 圆角,阴影,动画… 浏览器兼容性~

    1.3 快速入门

    style.css 文件:

    /*语法:
      选择器 {
          声明1;
          声明2;
          声明3;
    }
     */
    h1{
        color: red;
    }
    

    Index.html 文件:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <link rel="stylesheet" href="css/style.css">
    
    </head>
    <body>
    
    <h1>标题</h1>
    
    </body>
    </html>
    

    图解:

    在这里插入图片描述
    CSS优势:

    1. 内容和表现分离
    2. 网页结构表现统一,可以实现复用
    3. 样式十分丰富
    4. 建议使用独立于html的css文件
    5. 利用SEO,容易被搜索引擎收录!

    1.4 CSS三种导入方式

    style.css 文件:

    /*外部样式*/
    h1{
        color: blue;
    }
    

    index.html 文件:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--内部样式-->
        <style>
            h1{
                color: green;
            }
        </style>
    
        <!--外部样式-->
        <link rel="stylesheet" href="css/style.css">
    
    </head>
    <body>
    
    <!--优先级:就近原则-->
    
    <!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->
    <h1 style="color:red;">我是标题</h1>
    
    </body>
    </html>
    

    注意三种导入方式的优先级: 就近原则!

    2 选择器

    作用:选择页面上的某一个或某一类元素

    2.1 基本选择器(!!!)

    1. 标签选择器 : 选择一类标签

      代码

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      
          <style>
              /*便签选择器:会选择页面上所有的这个标签*/
              h1{
                  color: red;
                  background: antiquewhite;
                  border-radius: 24px;
              }
              p{
                  font-size: 50px;
              }
          </style>
      
      </head>
      <body>
      
      <h1>Demut</h1>
      <h1>Demut</h1>
      
      <p>Jever</p>
      
      </body>
      </html>
      

      结果:

      在这里插入图片描述

    2. 类 选择器 class:选择所有class属性一致的标签,跨标签

      使用方式:.类名称{}

      代码:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <style>
              /*类选择器的格式: .class的名称{}
              好处: 可以多个标签归类,是同一个class,可以复用
      
              */
              .demut{
                  color: forestgreen;
              }
              .jever{
                  color: blueviolet;
              }
          </style>
      
      </head>
      <body>
      
      <h1 class="demut">Demut</h1>
      <h1 class="jever">Demut</h1>
      <h1 class="demut">Demut</h1>
      
      
      <p class="demut">Jever</p>
      
      </body>
      </html>
      

      结果:

      在这里插入图片描述

    3. id 选择器:全局唯一,不可重复使用!

      使用方式:#id名称{}

      代码:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      
          <!--优先级: id > 类 > 标签-->
          <style>
              /*id选择器: id必须保证全局唯一
                  #id名称{}
               */
              #demut{
                  color:darkviolet;
              }
      
              .style1{
                  color: forestgreen;
              }
      
              h1{
                  color: red;
              }
          </style>
      
      </head>
      <body>
      
      <h1>标题1</h1>
      <h1 class="style1">标题2</h1>
      <h1>标题3</h1>
      <h1 class="style1" id="demut">标题4</h1>
      
      </body>
      </html>
      

      结果:

      在这里插入图片描述

    优先级: id > class > 标签

    2.2 层次选择器

    本案例中测试代码如下: (选择器均已注释!)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*后代选择器*/
            /*body p{ !*body后面的p标签均会变色!*!*/
            /*    background: yellow;*/
            /*}*/
    
            /*子选择器*/
            /*body>p{*/
            /*    background: forestgreen;*/
            /*}*/
    
            /*相邻兄弟选择器*/ /*选择相邻同辈且是下一个同辈*/
            /*.active+p{*/
            /*    background: blue;*/
            /*}*/
    
            /*通用选择器*/ /*当前选中元素的向下所有兄弟*/
            /*.active~p{*/
            /*    background: blueviolet;*/
            /*}*/
        </style>
    </head>
    
    <body>
        <p>p1</p>
        <p class="active">p2</p>
        <p>p3</p>
        <ul>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p>p5</p>
            </li>
            <li>
                <p>p6</p>
            </li>
        </ul>
        <p>p4</p>
    
    </body>
    </html>
    

    原网页展示:

    在这里插入图片描述

    1. 后代选择器:在某个元素的后面 grandparent parent son

      body p{ /*body后面的所有p标签均会变色!*/
        	background: yellow;
      }
      

      结果:

      在这里插入图片描述

    2. 子选择器: parent son

      body>p{ /*body后面的下一代p标签变色*/
          background: forestgreen;
      }
      

      在这里插入图片描述

    3. 相邻兄弟选择器

      .active+p{/*选择相邻同辈且是下一个同辈*/
          background: blue;
      }
      

      在这里插入图片描述

    4. 通用选择器

      .active~p{ /*当前选中元素的向下所有兄弟*/
      		background: blueviolet;
      }
      

      在这里插入图片描述

    2.3 结构伪类选择器

    伪类: 添加了条件(带冒号)

    结构伪类选择: 条件与结构相关!

    案例展示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*ul的第一个子元素*/
            ul li:first-child{
                background: cadetblue;
            }
    
            /*ul的最后一个元素*/
            ul li:last-child{
                background: red;
            }
    
            /*选中p1 : 定位到父元素,选择当前的第一个元素
            选择当前p元素的父级元素,选中父级元素的第一个子元素,并且是当前元素猜生效!
            */
            p:nth-child(1){
                background: yellow;
            }
    
            /*选中父元素,下的p元素的第二个,类型*/
            p:nth-of-type(2){
                background: forestgreen;
            }
        </style>
    </head>
    
    <body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
    
    </body>
    </html>
    

    在这里插入图片描述

    2.4 属性选择器(!!!)

    重点掌握:

    • a[]{} 属性选择器语句格式,a可替换为其他元素名称
    • =绝对相等
    • *=包含匹配
    • ^=开头匹配
    • $=结尾匹配

    测试代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
            .demo a{
                float:left;
                display: block;
                height: 50px;
                width: 50px;
                border-radius: 10px;
                background: blue;
                text-align: center;
                color: yellow;
                text-decoration: none;
                margin-right: 5px;
                font: bold 20px/50px Arial;
            }
            
            /*!*选中存在id的元素 a[]{} *!*/
            /*a[id=first]{*/
            /*    background: red;*/
            /*}*/
            
            /*!*选中class中有links的元素*!*/
            /*a[class*="links"]{*/
            /*    background: aqua;*/
            /*}*/
            
            /*!*选中href中以http开头的元素*!*/
            /*a[href^=http]{*/
            /*    background: blueviolet;*/
            /*}*/
            
            /*!*选中以png结尾的元素*!*/
            /*a[href$=png]{*/
            /*    background: black;*/
            /*}*/
    
        </style>
    
    </head>
    
    <body>
    
    <p class="demo">
        <a href="http://www.bing.com" class="links item first" id="first">1</a>
        <a href="http://www.bing.com" class="links item active" target="_blank" title="test">2</a>
        <a href="images/123.html" class="links item first">3</a>
        <a href="images/123.png" class="links item first">4</a>
        <a href="abc" class="links item first">5</a>
        <a href="http://www.bing.com" class="links item first">6</a>
        <a href="http://www.bing.com" class="links item first">7</a>
        <a href="http://www.bing.com" class="links item first">8</a>
        <a href="http://www.bing.com" class="links item first">9</a>
        <a href="http://www.bing.com" class="links item last">10</a>
    </p>
    
    </body>
    </html>
    

    原网页效果:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ke7xTlWf-1584945060143)(/Users/demut/Library/Application Support/typora-user-images/image-20200323110351243.png)]

    属性选择器说明如下:

    选中存在id的元素

    a[id=first]{
    		background: red;
    }
    

    运行结果:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GI7vNlLR-1584945060144)(/Users/demut/Library/Application Support/typora-user-images/image-20200323110542952.png)]

    选中class中包含links的元素

    a[class*="links"]{
    		background: aqua;
    }
    

    在这里插入图片描述

    选中href中以http开头的元素

    a[href^=http]{
    		background: blueviolet;
    }
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yaknGbMa-1584945060146)(/Users/demut/Library/Application Support/typora-user-images/image-20200323110803311.png)]

    选中href中以png结尾的元素

    a[href$=png]{
    		background: black;
    }
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-opr2sLgo-1584945060146)(/Users/demut/Library/Application Support/typora-user-images/image-20200323110905967.png)]

    3 美化网页元素

    3.1 为什么要美化网页

    1. 有效的传递页面信息
    2. 美化网页,吸引用户
    3. 凸显页面主题
    4. 提高用户体验

    span标签: 重点要突出的字,使用span标签套起来。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #title1{
                font-size: 50px;
            }
        </style>
    </head>
    
    <body>
    欢迎学习 <span id="title1">Java</span>
    </body>
    </html>
    

    3.2 字体样式

    代码展示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>字体样式</title>
        <style>
            body{
                font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
                color: #a13d30;
            }
            h1{
                font-size: 50px;
            }
            .p1{
                font-weight: bolder;
            }
        </style>
    
    
    </head>
    
    <body>
    <h1>数学分析</h1>
    <p>
        数学分析的主要内容是微积分学,微积分学的理论基础是极限理论,极限理论的理论基础是实数理论。微积分学是微分学(Differential Calculus)和积分学(Integral Calculus)的统称,英语简称Calculus,意为计算,这是因为早期微积分主要用于天文、力学、几何中的计算问题。后来人们也将微积分学称为分析学(Analysis),或称无穷小分析,专指运用无穷小或无穷大等极限过程分析处理计算问题的学问。
    </p>
    
    <p class="p1">
        I have searched a thousand years,
          And I have cried a thousand tears.
          I found everything I need,
          You are everything to me.
    </p>
    </body>
    </html>
    

    结果展示:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LmQ8FXne-1584945060147)(/Users/demut/Library/Application Support/typora-user-images/image-20200323112750268.png)]

    3.3 文本样式

    1. 颜色 color rgb rgba
    2. 文本对齐方式 text-align:center
    3. 首行缩进 text-indent:2em
    4. 行高 line-height: 单行文字上下居中! line-height=height
    5. 装饰 text-decoration
    6. 文本图片水平对齐方式:vertical-align:middle

    代码展示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>字体样式</title>
    <!--
        颜色:
            RGB 红绿蓝 0~F
            RGBA A为透明度 0~1
        text-align: 左右排版
        text-indent: 段落首行缩进
        line-height: 行高
    -->
        <style>
            h1{
                color: rgb(0,255,255,0.5);
                text-align: center;
            }
            .p1{
                text-indent: 2em; /*1em表示一个字*/
            }
            .p3{
                background: yellow;
            }
            .l1{
                text-decoration: underline; /*下划线*/
            }
            .l2{
                text-decoration: line-through; /*中划线*/
            }
            .l3{
                text-decoration: overline; /*上划线*/
            }
        </style>
    </head>
    
    <body>
    <h1>数学分析</h1>
    <p class="p1">
        数学分析的主要内容是微积分学,微积分学的理论基础是极限理论,极限理论的理论基础是实数理论。微积分学是微分学(Differential Calculus)和积分学(Integral Calculus)的统称,英语简称Calculus,意为计算,这是因为早期微积分主要用于天文、力学、几何中的计算问题。后来人们也将微积分学称为分析学(Analysis),或称无穷小分析,专指运用无穷小或无穷大等极限过程分析处理计算问题的学问。
    </p>
    
    <p class="p3">
        I have searched a thousand years,
          And I have cried a thousand tears.
          I found everything I need,
          You are everything to me.
    </p>
    
    <p class="l1">123123123</p>
    <p class="l2">123123123</p>
    <p class="l3">123123123</p>
    
    </body>
    </html>
    

    结果:

    在这里插入图片描述

    3.4 超链接伪类与阴影

    正常情况:a{}

    鼠标悬停:a:hover{}

    鼠标按住未释放:a:active{}

    鼠标点击后:a:visited{}

    text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径

    代码展示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>超链接伪类</title>
        <style>
            /*默认颜色*/
            a{
                text-decoration: none;
                color: black;
            }
            /*鼠标悬停颜色*/
            a:hover{
                color: orange;
            }
            /*鼠标按住未释放的状态*/
            a:active{
                color: green;
            }
            /*点击后的颜色*/
            
            /*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径 */
            #price{
                text-shadow: lightblue 0px 0px 10px;
            }
        </style>
    
    </head>
    
    <body>
    <a href="#">
        <img src="images/s25648004.jpg" alt="">
    </a>
    <p>
        <a href="#">算法导论(原书第3版)</a>
    </p>
    <p>
        <a href="">作者: Thomas H.Cormen / Charles E.Leiserson / Ronald L.Rivest / Clifford Stein </a>
    </p>
    <p id="price">
        ¥128.00
    </p>
    </body>
    </html>
    

    结果:

    在这里插入图片描述

    3.5 列表

    重点在于去掉原点,并进行一些简单修饰。

    代码展示:

    css文件:

    .title{
        font-size: 18px;
        font-weight: bold;
        text-indent: 1em;
        line-height: 35px;
        background: red;
    }
    #nav{
        width: 40%;
    }
    
    /*ul li*/
    /*
    list-style:
    none去掉圆点
    circle空心圆
    decimal数字
    square正方形
    */
    ul{
        background: #a0a0a0;
    }
    ul li{
        height: 30px;
        list-style: none; /*去掉圆点*/
        text-indent: 1em;
    }
    a{
        text-decoration: none;
        font-size: 14px;
        color: #000000;
    }
    a:hover{
        color: orange;
        text-decoration: underline;
    }
    

    html文件:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表样式</title>
        <link rel="stylesheet" href="style.css">
    </head>
    
    
    <body>
    <div id="nav">
        <h2 class="title">全部商品分类</h2>
        <ul>
            <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
            <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
            <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
            <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
            <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
            <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        </ul>
    </div>
    
    </body>
    </html>
    

    运行结果:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lxcmLvBU-1584945060149)(/Users/demut/Library/Application Support/typora-user-images/image-20200323134533097.png)]

    3.6 背景

    此处重点介绍背景图片的平铺以及渐变颜色的处理。

    渐变颜色推荐网址https://www.grabient.com/(可直接copy css代码,打开较慢,请耐心等待)

    背景图片平铺:

    代码展示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
            div{
                width: 1000px;
                height: 700px;
                border: 1px solid red;
                background-image: url("images/a.png");
                /*默认全部平铺*/
            }
            .div1{
                background-repeat: repeat-x; /*横向平铺*/
            }
            .div2{
                background-repeat: repeat-y; /*纵向平铺*/
            }
            .div3{
                background-repeat: no-repeat; /*不平铺*/
            }
            
        </style>
    
    </head>
    <body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    
    </body>
    </html>
    

    横向平铺:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G3jK6Yzz-1584945060149)(/Users/demut/Library/Application Support/typora-user-images/image-20200323142524730.png)]

    纵向平铺:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9tUvgPQH-1584945060150)(/Users/demut/Library/Application Support/typora-user-images/image-20200323142625795.png)]

    无平铺:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8VMgnXxI-1584945060151)(/Users/demut/Library/Application Support/typora-user-images/image-20200323142659022.png)]

    4 盒子模型

    4.1 什么是盒子模型

    在这里插入图片描述

    • margin: 外边距

    • padding: 内边距

    • border: 边框

    4.2 边框

    border: 粗细,样式,颜色

    1. 边框的粗细
    2. 边框的样式
    3. 边框的颜色

    案例集中在4.3中展示。

    4.3 内外边距

    代码展示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                /*body总有一个默认的外边距*/
                /*margin: 0;*/
            }
            #box{
                /*border: 粗细,样式,颜色*/
                width: 300px;
                border: 1px solid red;
    
                /*外边距可以令其居中*/
                margin: 0 auto;
                /*
                margin: 0; 全部
                margin: 0 1px; 上下 左右
                margin: 0 1px 2px 1px; 上右下左
                */
            }
            h2{
                font-size: 16px;
                background-color: rebeccapurple;
                color: gold;
                text-align: center;
                margin-top: 0;
            }
            form{
                background: cadetblue;
                padding: 5px;
            }
            div input{
                border: 1px dashed yellowgreen;
            }
        </style>
    
    </head>
    
    <body>
    
    <div id="box">
        <h2>用户登录</h2>
        <form action="#">
            <div>
                <span>用户名:</span>
                <input type="text">
            </div>
            <div>
                <span>密码:</span>
                <input type="text">
            </div>
            <div>
                <span>邮箱:</span>
                <input type="text">
            </div>
        </form>
    </div>
    
    </body>
    </html>
    

    结果:

    在这里插入图片描述

    盒子计算模型:

    margin+border+padding+内容宽度

    4.4 圆角边框与阴影

    圆角边框:

    • border-top-left-radius: 40px 20px; x方向和y方向
    • border-top-right-radius: 右上角
    • border-bottom-left-radius: 左下角
    • border-bottom-right-radius: 右下角

    也可统一使用border-radius来设置。

    阴影:

    • box-shadow:水平偏移量x 垂直偏移量y 模糊范围 颜色

    代码展示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>圆角边框和阴影</title>
        <style>
            .box{
                background-color: brown;
                font-size: 20px;
                text-align: center;
                float: left;
    
                /*box-shadow:水平偏移量x 垂直偏移量y 模糊范围 颜色*/
                box-shadow: 10px 10px 30px #888;
            }
            .box1{
                height: 100px;
                width: 150px;
                border-top-left-radius: 35px 40px;
                border-bottom-right-radius: 20px;
                border: 1px solid royalblue;
            }
            .box2{
                height: 50px;
                width:150px;
                border-radius: 25px;
            }
            .box3{
                height: 100px;
                width: 100px;
                border-radius: 50px;
            }
        </style>
    </head>
    
    <body>
    <div class="box1 box">box1</div>
    <div class="box2 box">box2</div>
    <div class="box3 box">box3</div>
    </body>
    </html>
    

    结果展示:

    在这里插入图片描述

    5 浮动

    5.1 标准文档流

    块级元素: 独占一行

    h1-h6 p div 列表…

    行内元素:不独占一行

    span a img strong…

    行内元素可以放在块级元素中,反之不可

    5.2 display

    代码展示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /* display:
            block 块元素
            inline 行内元素
            inline-block 是块元素,但是可以内联 --> 在一行
            */
            div{
                width: 100px;
                height: 100px;
                border: 1px solid red;
                display: inline-block;
            }
            span{
                width: 100px;
                height: 100px;
                border: 1px solid red;
                display: inline-block;
            }
        </style>
    </head>
    
    <body>
    <div>div块元素</div>
    <span>span行内元素</span>
    </body>
    </html>
    

    结果:

    在这里插入图片描述

    5.3 float

    代码展示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动</title>
        <style>
            .float_right{
                float: right;
            }
            .float_left{
                float: left;
            }
        </style>
    
    </head>
    
    <body>
    <div style="color: grey;">
        <img src="images/Werstrass.jpeg" class="float_right" width="80" height="110">
        <p style="text-indent: 2em">
            早期的微积分,已经被数学家和天文学家用来解决了大量的实际问题,但是由于无法对无穷小概念作出令人信服的解释,在很长的一段时间内得不到发展,有很多数学家对这个理论持怀疑态度,柯西(Cauchy)和后来的魏尔斯特拉斯(weierstrass)完善了作为理论基础的极限理论,摆脱了“要多小有多小”、“无限趋向”等对模糊性的极限描述,使用精密的数学语言来描述极限的定义,使微积分逐渐演变为逻辑严密的数学基础学科,被称为“Mathematical Analysis”,中文译作“数学分析”。
        </p>
    </div>
    
    </body>
    </html>
    

    结果:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xLtLBGa7-1585065166258)(/Users/demut/Library/Application Support/typora-user-images/image-20200324233244151.png)]

    5.4 父级边框塌陷问题

    问题描述:元素未全在父级边框内,如图,布局很丑!

    在这里插入图片描述

    测试源码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Overflow</title>
        <style>
            .border{
                border: 3px solid #4CAF50;
                padding: 5px;
            }
            .float_right{
                float: right;
            }
        </style>
    </head>
    
    <body>
    <div class="border">
        <img src="images/Werstrass.jpeg" class="float_right" width="120" height="170">
        <p>
            勤学如春起之苗,不见其增,日有所长;<br/>
            辍学如磨刀之石,不见其损,日有所亏.
        </p>
    </div>
      
    </body>
    </html>
    

    解决方案:

    1. 增加父级元素的高度 (Too low,不推荐)

    2. 在元素后增加一个空的div,清除浮动。

      <style>
      	.clear{
      			clear: both;
      			margin: 0;
      			padding: 0;
      	}
      </style>
      
      ...
      <div class="clear"></div>
      

      运行结果:

      在这里插入图片描述

    3. overflow方法。

      在父元素上通过添加clearfix类,并设置overflow:auto;来解决问题。

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Overflow</title>
          <style>
              .border{
                  border: 3px solid #4CAF50;
                  padding: 5px;
              }
              .float_right{
                  float: right;
              }
              .clearfix{
                  overflow: auto;
              }
          </style>
      </head>
      
      <body>
      <div class="border">
          <img src="images/Werstrass.jpeg" class="float_right" width="120" height="170">
          <p>
              勤学如春起之苗,不见其增,日有所长;<br/>
              辍学如磨刀之石,不见其损,日有所亏.
          </p>
      </div>
      
      <p style="clear: right; color: red">
          在父元素上通过添加clearfix类,并设置overflow:auto;来解决问题。
      </p>
      
      <div class="border and clearfix">
          <img src="images/Werstrass.jpeg" class="float_right" width="120" height="170">
          <p>
              勤学如春起之苗,不见其增,日有所长;<br/>
              辍学如磨刀之石,不见其损,日有所亏.
          </p>
      </div>
      
      </body>
      </html>
      

      运行结果:

      在这里插入图片描述

    4. 父类添加一个伪类:after

      .border:after{
      		content: '';
      		display: block;
      		clear: both;
      }
      

      运行结果:

      在这里插入图片描述

    小结:

    • 浮动元素后面增加空div

      简单,代码中尽量避免空div

    • 设置父元素的高度

      简单,元素假设有一个固定的高度,就会被限制

    • overflow

      下拉的场景中,避免使用

    • 父类添加一个伪类:after(推荐)

      写法稍微复杂一定,但是没有副作用!

    5.5 对比

    • display

      方向不可以控制

    • float

      浮动起来的话会脱离标准文档流,所以要处理父级边框塌陷问题

    6 定位

    本章测试源码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                padding: 20px;
            }
            div{
                margin: 10px;
                padding: 5px;
                font-size: 12px;
                line-height: 25px;
            }
            #father{
                border: 1px solid #666666;
            }
            #first{
                background-color: gold;
                border: 1px dashed #a13d30;
            }
            #second{
                background-color: aqua;
                border: 1px dashed rebeccapurple;
            }
            #third{
                background-color: crimson;
                border: 1px dashed chartreuse;
            }
        </style>
    </head>
      
    <body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>
    </body>
    </html>
    

    运行结果:

    在这里插入图片描述

    6.1 相对定位

    局部更改测试源码。

    #first{
        background-color: gold;
        border: 1px dashed #a13d30;
        position: relative;
        top: -20px; /*距离上部偏离-20*/
        left: 20px; /*距离左侧偏离20*/
    }
    #third{
        background-color: crimson;
        border: 1px dashed chartreuse;
        position: relative;
        bottom: 10px; /*距离下部偏离10px*/
        right: 20px; /*相对右侧偏离20px*/
    }
    

    测试结果:

    在这里插入图片描述

    相对定位: position:relative;

    相对于原来的位置,进行指定的偏移,相对定位之后,仍然在标准文档流中。

    相对定位的一个练习:

    练习源码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #box{
                width: 300px;
                height: 300px;
                padding: 10px;
                border: 2px solid red;
            }
            a{
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                background-color: magenta;
                text-decoration: none;
                display: block;
            }
            a:hover{
                background-color: lightblue;
            }
            .a2,.a4{
                position: relative;
                left: 200px;
                top: -100px;
            }
            .a5{
                position: relative;
                left: 100px;
                top: -300px;
            }
        </style>
    </head>
    <body>
    <div id="box">
        <a class="a1" href="#">链接1</a>
        <a class="a2" href="#">链接2</a>
        <a class="a3" href="#">链接3</a>
        <a class="a4" href="#">链接4</a>
        <a class="a5" href="#">链接5</a>
    </div>
    
    </body>
    </html>
    

    练习结果:

    在这里插入图片描述

    6.2 绝对定位

    1. 没有父级元素定位的情况下,相对于浏览器定位。

    2. 假设父级元素存在定位,通常相对于父级元素进行偏移。

    3. 在父级元素范围内移动。

      相对于浏览器或父级的位置,进行指定的偏移,绝对定位之后,仍然在标准文档流中。

    局部更改测试代码:

    #second{
        background-color: aqua;
        border: 1px dashed rebeccapurple;
        position: absolute;
        right: 30px;
    }
    

    测试结果:

    在这里插入图片描述

    6.3 固定定位

    positon:fixed;

    测试代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                height: 1000px;
            }
            div:nth-of-type(1){
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute; /*绝对定位*/
                right: 0;
                bottom: 0;
            }
            div:nth-of-type(2){
                width: 50px;
                height: 50px;
                background-color: yellowgreen;
                position: fixed; /*固定定位*/
                right: 0;
                bottom: 0;
            }
        </style>
    </head>
    
    <body>
    
    <div>div1</div>
    <div>div2</div>
    
    </body>
    </html>
    

    测试结果:(上下滚动,红块上下移动,绿块始终在固定位置)

    在这里插入图片描述

    6.4 z-index

    图层: z-index: 默认为0, 最高~999

    测试代码:

    style.css文件:

    #content{
        width: 145px;
        padding: 0px;
        margin: 0px;
        overflow: hidden;
        font-size: 12px;
        line-height: 25px;
        border: 1px #000 solid;
        text-align: center;
    }
    ul,li{
        padding: 0px;
        margin: 0px;
        list-style: none;
    }
    /*父级元素相对定位*/
    #content ul{
        position: relative;
    }
    .tipText,.tipBg{
        position: absolute;
        width: 145px;
        height: 25px;
        top: 200px;
    }
    .tipText{
        color: white;
        z-index: 999;
    }
    .tipBg{
        background: #000;
        opacity: 0.3;
    }
    

    index.html文件:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    
    <div id="content">
        <ul>
            <li><img src="images/Cauchy.png" alt=""></li>
            <li class="tipText">柯西!</li>
            <li class="tipBg"></li>
            <li>时间:2099-01-01</li>
        </ul>
    </div>
    
    </body>
    </html>
    

    测试结果:

    在这里插入图片描述

    7 CSS总结

    在这里插入图片描述

    写在最后

    地球上有77亿人,204个国家,809个岛屿。两个人遇见概率是2920万之ー,幸运如我,在最好的时光,刚好遇见了你!
    To Demut and Dottie!

    展开全文
  • 文章目录1、什么是CSS1.1、什么是CSS1.2、发展史1.3、快速入门2、选择器2.1、基本选择器2.2、层次选择器2.3、结构伪类选择器2.4、属性选择器(常用) 1、什么是CSS 如何学习: CSS是什么 CSS怎么用(快速入门) ...
  • CSS学习笔记

    2020-01-04 00:02:22
    文章目录1、CSS入门1.1、什么是CSS1.2、CSS的发展史1.3、CSS快速入门1.4、CSS的3种导入方式:2、选择器2.1、基本选择器:2.2、层次选择器: 1、CSS入门 如何学习: CSS是什么 CSS怎么用(快速入门) CSS ...
  • CSS3

    2020-09-04 23:03:52
    文章目录01 CSS的简单介绍1.1 什么是css1.2 发展史1.3 快速入门1.4 css的三种导入方式02 选择器2.1 基本选择器2.2 层次选择器 01 CSS的简单介绍 1.css是什么? 2.css怎么用? 3.css选择器(重点+难点) 4.美化网页...
  • HTML基础加强、css(包含Div+CSS布局)、JavaScript、Dom(事件、window对象...层次选择器、表单选择器、过滤选择器、复合选择器、节点导航、节点操作、样式操作、事件、动画、JQuery Cookie、JQuery Live、JQueryUI)...
  • HTML基础加强、css(包含Div+CSS布局)、JavaScript、Dom(事件、window对象...层次选择器、表单选择器、过滤选择器、复合选择器、节点导航、节点操作、样式操作、事件、动画、JQuery Cookie、JQuery Live、JQueryUI)...
  • 疯狂JAVA讲义

    2014-10-17 13:35:01
    学生提问:为什么要this来调用另一个重载的构造?我把另一个构造里的代码复制、粘贴到这个构造里不就可以了吗? 143 5.6 类的继承 144 5.6.1 继承的特点 144 5.6.2 重写父类的方法 145 5.6.3 父类实例的...
  • 学习Java EE,在开发环境上不建议再文本编辑,我感觉NetBeans 5.5(目前最高正式版本)很适合初学者,我个人也很喜欢NetBeans,如果你喜欢别的IDE如Eclipse,都没问题,看自己喜欢吧。 4.1 学习JSP/Servlet ...
  • c语言编写单片机技巧

    2009-04-19 12:15:17
    除了layout、选择低辐射MCU的方法可以减少一些以外,还有什么别的方法? 答:在设计高频电路电路板有许多注意事项,尤其是GHz等级的高频电路,更需要注意各电子组件pad与印刷pattern的长度对电路特性所造成的...
  • 《Windows程序设计(第5版 珍藏版)》适合任何层次的Windows程序员阅读和参考,是帮助他们梳理和建立Windows知识体系的理想读物。 目录 第一部分 基础知识 第一章 开始 l.1 windows环境 1.1.1 windows 简史 ...
  • 软件工程教程

    热门讨论 2012-07-06 23:10:29
    用例只描述参与者和系统在交互过程中做些什么,并不描述怎么做。 例图 关联关系 例图 泛化关系 例图 泛化关系 例图 例图 例图 用例用于什么情况? 不知道什么情况不用用例 如果没有用到用例,...
  • asp.net知识库

    2015-06-18 08:45:45
    泛型技巧系列:简单类型选择器 C# 泛型简介 我眼中的C#2.0新功能特性 泛型技巧系列:避免基类及接口约束 New Article 不该Generics实现Abstract Factory的理由 C#2.0-泛型 C#2.0-extern C#2.0-可空类型 C#2.0-分部...

空空如也

空空如也

1 2 3 4 5
收藏数 96
精华内容 38
关键字:

层次选择器怎么用