DIV+CSS学习笔记

第十五章 定位

  • static静态定位（不对它的位置进行改变，在哪里就在那里）

    • 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

  • fixed固定定位（参照物--浏览器窗口）---做 弹窗广告用到

    • 生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

  • relative（相对定位 ）（参照物以他本身）

    • 生成相对定位的元素，相对于其正常位置进行定位。

  • absolute（绝对定位）(除了static都可以，找到参照物-->与它最近的已经有定位的父元素进行定位)

    • 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

    • 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

  • z-index

    • z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

    • 定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

  • 一切皆为框

    • 块级元素: div、h1或p元素 即：显示为一块内容称之为 “块框“ ;

    • 行内元素: span,strong,a等元素 即：内容显示在行中称 "行内框";

    • 使用display属性改变成框的类型 即：display:block; 让行内元素设置为块级元素，display:none; 没有框

  • 相对定位：

    • 如果对一个元素进行相对定位，它将出现在它所在的位置上。

    • 通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动

    • .adv_relative { position: relative; left: 30px; top: 20px; }

  • 绝对定位：

    • 元素的位置相对于最近的已定位祖先元素，如果元素没有已定位 的祖先元素，它的位置相对于最初的包含块。.adv_absolute { position: absolute; left: 30px; top: 20px; }

、

第十六章 框架

  • frameset框架：

    • <frameset> ---- 用来定义一个框架；双标签
      不能和 <body> 一起使用

  • rows、cols属性

    • rows 定义行表示框架有多少行（取值 px / % / * ）

    • cols 定义列表示框架有多少列（取值 px / % / * ）

  • frame子框架

  •  

    • src 显示的网页的路径

    • name 框架名

    • frameborder 边框线（取值 0 / 1）

    • <frame> ---- 表示框架中的某一个部分；单标签，要跟结束标志

    • <noframes>属性

    • <noframes> 提供不支持框架的浏览器显示body的内容；双标签

<frameset>
     <frame  src=“”  />
     <frame  src=“” />
     <frame  src=“” />
     <noframes>
      <body>内容</body>
     </noframes></frameset>

  • <iframe>内联框架

    • iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

    • 允许和 body 一起使用

    • width 宽（取值 px / %）

    • height 高（取值 px / %）

    • name 框架名

    • frameborder 边框线（取值 0 / 1）

    • src 显示的网页的路径

第十七章 css高级属性

  • opacity透明属性

    • 对于IE6/7/，使用filter:alpha(opacity:值;) 值为0-100

    • 对于Webkit，Opera，Firefox，IE9+，使用opacity:值; 值为0-1

    • 对于早期火狐，使用-moz-opacity:值; 值为0-1

    • 所以写透明属性时，一般写法是

    • opacity

 {    
    opacity:0.5;
   filter:alpha(opacity：50);/*0-100*/
   -moz-opacity:0.5;    /*取值0-1*/-->针对早起版本的火狐兼容问题的解决}

  • border-radius圆角边框属性

    • border-radius:10px;

    • 向 div 元素添加圆角边框

  • box-shadow阴影属性

    • box-shadow 属性向框添加阴影效果,后面跟4个参数。

    • box-shadow:0px 0px 10px #000;

  • <embed>属性

    • 是HTML5中新增的标签,媒体嵌入插件标签，可以通过<embed>插入音频或视频

    • <embed src=“media/music.mp3” />

    • 格式.mid .wav .mp3等

  • CSS部分导图总结

第三部分 附录

附录一 DIV命名规范

    • 企业DIV使用频率高的命名方法

    • 网页内容类

      ---

      • 注释的写法: /* Footer */ 内容区/* End Footer */

      • 摘要: summary

      • 箭头： arrow

      • 商标： label

      • 网站标志： logo

      • 转角/圆角： corner

      • 横幅广告： banner

      • 子菜单： subMenu

      • 搜索： search

      • 搜索框： searchBox

      • 登录： login

      • 登录条：loginbar

      • 工具条： toolbar

      • 下拉： drop

      • 标签页： tab

      • 当前的： current

      • 列表： list

      • 滚动： scroll

      • 服务： service

      • 提示信息： msg

      • 热点：hot

      • 新闻： news

      • 小技巧： tips

      • 下载： download

      • 栏目标题： title

      • 热点： hot

      • 加入： joinus

      • 注册： regsiter

      • 指南： guide

      • 友情链接： friendlink

      • 状态： status

      • 版权： copyright

      • 按钮： btn

      • 合作伙伴： partner

      • 投票： vote

      • 左右中：left right center

      • 标题: title

    • id的命名:

      ---

      • 导航：nav

      • 主导航：mainbav

      • 子导航：subnav

      • 顶导航：topnav

      • 边导航：sidebar

      • 左导航：leftsidebar

      • 右导航：rightsidebar

      • 菜单：menu

      • 子菜单：submenu

      • 标题: title

      • 摘要: summary

      • 容器: container

      • 页头：header

      • 内容：content/container

      • 页面主体：main

      • 页尾：footer

      • 导航：nav

      • 侧栏：sidebar

      • 栏目：column

      • 页面外围控制整体布局宽度：wrapper

      • 左右中：left right center

      • 页面结构

        ---

      • 导航

      • 标志：logo

      • 广告：banner

      • 登陆：login

      • 登录条：loginbar

      • 注册：regsiter

      • 搜索：search

      • 功能区：shop

      • 标题：title

      • 加入：joinus

      • 状态：status

      • 按钮：btn

      • 滚动：scroll

      • 标签页：tab

      • 文章列表：list

      • 提示信息：msg

      • 当前的: current

      • 小技巧：tips

      • 图标: icon

      • 注释：note

      • 指南：guild

      • 服务：service

      • 热点：hot

      • 新闻：news

      • 下载：download

      • 投票：vote

      • 合作伙伴：partner

      • 友情链接：link

      • 版权：copyright

      • 功能

      • class的命名:

        • .barnews { }

        • .barproduct { }

        • .left { float:left; }

        • .bottom { float:bottom; }

        • .font12px { font-size: 12px; }

        • .font9px {font-size: 9pt; }

        • .red { color: red; }

        • .f60 { color: #f60; }

        • .ff8600 { color: #ff8600; }

        • 颜色:使用颜色的名称或者16进制代码,如

        • 字体大小,直接使用"font+字体大小"作为名称,如

        • 对齐样式,使用对齐目标的英文名称,如

        • 标题栏样式,使用"类别+功能"的方式命名,如

---

      • 注意事项::

        • 一律小写;

        • 尽量用英文;

        • 不加中杠和下划线;

        • 尽量不缩写，除非一看就明白的单词.

---

  • 推荐的 CSS 书写顺序：

    • color

    • font

    • text-decoration

    • text-align

    • vertical-align

    • white-space

    • other text

    • content

    • width

    • height

    • margin

    • padding

    • border

    • background

    • display

    • list-style

    • position

    • float

    • clear

    • 显示属性

    • 自身属性

    • 文本属性

附录二 CSS精灵

  • CSS精灵原理以及应用

    • 该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。

    • CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。

  • 一个简单的例子：

    • 一张图片作出一个按钮的三个状态

    • 一个链接用CSS做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态，a:link，a:hover，a:active <a class="button" href="#">链接</a>

    • 加入右侧的图片为：200px 65px的三个按钮图拼合而成的图片button.png，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用CSS进行定义。

    a {        display:block; 
        width:200px; 
        height:65px; 
        line-height:65px; /*定义状态*/
        text-indent:-2015px; /*隐藏文字*/
        background-image:url(button.png); /*定义背景图片*/
        background-position:0 0;        /*定义链接的普通状态，此时图像显示的是顶上的部分*/
    }
    
    a:hover {        background-position:0 -66px;        /*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/
    }
    a:active {        background-position:0 -132px;                      
        /*定 义链接的普通状态，此时显示的是底部的部分，向下取负值*/
    }

  • 更多的CSS雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值

    • 如：background:url(nav.png) -180px 24pxno-repeat; 来达到更精确的定位

  • 优点：

    • 减少加载网页图片时对服务器的请求次数

    • 可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。

    • 提高页面的加载速度

    • sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。由所需图片拼成的一张GIF图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。

    • 减少鼠标滑过的一些bug

    • IE6不会主动预加载鼠标滑过即a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，由于一张图片即可，所以不会出现这种现象。

  • 不足：

    • CSS雪碧的最大问题是内存使用

    • 影响浏览器的缩放功能

    • 拼图维护比较麻烦

    • 使CSS的编写变得困难

    • CSS 雪碧调用的图片不能被打印

    • 错误得使用 Sprites 影响可访问性

posted @ 2017-08-30 14:36  It奋斗小青年  阅读(287)  评论(0)  编辑  收藏  举报