前端学习笔记(十三)

第十三章：iframe 阿里图标和 css进阶应用

    内联框架

    iframe 是个内联框架，是在页面（body）里生成个内部框架 一个页面显示多个网页 但是不能嵌套可能的属性：
    width
    height
    frameborder 规定是否显示边框 0 = 无 1 = 有
    src 网址 html文档
    scrolling 规定是否显示滚动条 yes = 有 no = 无 auto = 根据内容决定
    name 名字，后期跳转的时候用到的多

    网页logo

    <link rel='shortcut icon' type='images/x-icon' href='路径' />
    扩展：
    关于icon图标的搜索（百度直接搜索 icon ）
    在线转换icon（百度搜索 icon在线转换）

    阿里图标

    官网：http://www.iconfont.cn/
    阿里图标官方推荐用<i> 标签包裹iconfont
    下载阿里图标后 方法都在下载的文件里，只需要注意路径问题就可以了
    第一种引用方法 unicode
    第二种方式 fontclass
    第三种方式：symbol

    样式重用

    一个代码多次利用，可以通过定义特定的class来实现！
    一个样式要多次使用，本来要写很多次的样式，我们可以通过规定类名的方式，在需要用
    这个样式的时候，给标签添加类名即可达到同样的效果！
    企业开发里，往往将需要重用的样式整合在一个样式文件里！然后外部样式引入！方便后期维护!
    .fl{float:left;}
    .fr{float:right;}
    .clearfix:after{content:'';display:block;clear:both;}

    模块化开发网页

    不同的页面，相同的布局，可以看成一个模块！就像是拼图一样！需要的时候把这一块拿到页面中即可！
    比如淘宝，所有的购物页面中都有一个相同的头部导航区域，就可以用模块化的思维！单独列出来（可以写一个css文件common.css ，需要的时候直接引入页面，在将html标签复制过来即可）！
    这里要注意：
    为了复用性，应该使用类选择器，而不是id选择器。在写类名的时候，尽量用一个公共的类名，这样就不会导致后期类名的错乱！