热门关键字:
jquery > jquery教程 > jquery教程 > html 5 css 3实训报告,html5和css3知识总结

html 5 css 3实训报告,html5和css3知识总结

354
作者:管理员
发布时间:2021/8/9 19:13:09
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=5255
  1. 首先要分别建立html,img和css3的文件夹。


  2. html和css3的首页放在文件夹外面。还可以建立一个公共css,比如导航和页脚可以放在公共css里面,在每个页面加上公共css超链接就可以了。减少代码的编写。


  3. 文件夹的名称要写成英文形式。也不要写成汉语拼音,html识别不出来汉字。


  4.class与id的区别:


  (1)、在CSS文件里书写时,ID加前缀"#";CLASS用"."


  (2)、id一个页面只可以使用一次;class可以多次引用。 (3)、ID是一个标签,用于区分不同的结构和内容,就象名字,如果一个屋子有2个人同名,就会出现混淆;class是一个样式,可以套在任何结构和内容上,就象一件衣服;


  (4)、从概念上说就是不一样的:id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。


  (5)目前的浏览器还都允许用多个相同ID,一般情况下也能正常显示,不过当你需要用JavaScript通过id来控制div时就会出现错误。


  5.html中一些常见的特殊符号需要记住:空格 ; >> <<


  6.Html5中position的定位主要分为绝对定位,相对定位,静态定位,固定定位,继承父级定位,语法分别为position:absolute|relative|static|fixed|inhret,定位之后可以设置top,bottom,left,right四个属性值,其中优先级:top>bottom,left>right


  一。绝对定位


  它是相对不是static最近一级父元素来进行定位的,被定位元素会脱离文档流,然后我们可以通过left,right,top,bottom来调整元素的位置 特点: 1.完全脱离文档流, 2.提升层级等级, 3.针对父级定位,如果父级没有定位,那就找父级上一级定位,如果父级上一级没有定位,最终以docment进行定位, 4.绝对定位一般配合相对定位使用,相对定位是父级,绝对定位是子级, 5.支持所有CSS样式, 6.提升定位元素层级的命令 z-index数字越大,越向上显示, 7.如果绝对定位的子集有浮动,可以不做清除浮动操作。


  二。相对定位


  也就是相对于自己在文档流中的位置进行定位。


  特点:


  1.不脱离文档流,原有空间位置被保留,


  2.针对自己本身位置进行定位,


  3.不影响元素本身属性的设置


  注意: 1.如果一个定位元素,同时设置了top和bottom,top的优先级更高,会显示top的值,


  2.如果同时设置Left和right的值,优先级取决于网页语言,在英语网页中left的优先级更高,会显示left的值,在阿拉伯语言网页中right的优先级更高,


  3.如果一个元素设置了相对定位(甚至是做了偏移),其他元素排版时参考的依然是那个原有位置(没有设置偏移前的位置),


  4.如果一个元素设置了相对定位,它的原有位置空间被保留。即使该元素做偏移,其他元素也不会占据它原有的(偏移前)的位置。


  三。固定定位


  是相对浏览器窗口(docment)进行定位的,同样也是脱离文档流,可以通过left,top,right,bottom来调整元素所在的位置。


  特点:


  1.一般用来做页面的导航部分与底部,


  2.可以用来网页中插入广告和商业推广。


  注意:在使用时候,尽量使用在页面的底部,因为即使脱离文档流也不会影响布局 四,几种定位简单比较总结


  1.position:relative;不会脱离文档流 2.position:absolute|fixed;脱离文档流


  3.absolute是相对于父级非static进行定位


  4.fixed始终是相对于浏览器窗口进行定位。定位的用途: 1.图片的叠加 2,元素的垂直居中 3.布局位置的改变 4,广告植入


  7.html中link标记允许当前文档和外部文档之间建立连接,但是只能在head标签里面用。href设置或获取目标=URL ,rel设置或获取对象和链接目的的关系,type设置或获取对象的 MIME 类型,media设置或获取媒体类型。 all 就表示all所有媒体类型的样式。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐