zoukankan      html  css  js  c++  java
  • CSS基础(滑动门,雪碧图,网页布局)

    3.11.2017

    这一篇主要是关于滑动门技术的学习,还有雪碧图(sprite),也就是精灵图,还有一点昨天的css可见性的回顾,下面先来回顾下吧

    CSS可见性(元素可见性)

    overflow: hidden;   将超出部分隐藏(部分隐藏)

    display:   none;   元素隐藏(全部隐藏)(隐藏元素不占位置)

    display:   block;   显示元素

    visibility: hidden;  隐藏元素(全部隐藏)(隐藏元素占位置)

     

    然后就是关于滑动门的讲解,现在的页面中好多地方都会用到滑动门,一般用作于导航背景。

    滑动门:根据文本自适应大小,根据背景的层叠性制作,并允许他们在彼此之上进行滑动,以创造出一些特殊的效果。

    滑动门有两个部分:

    li -- 左边固定不动的部分,背景左对齐

    a -- 右边随着内容变宽的部分,背景右对齐

     li {
     float: left;
     height: 33px;
     line-height: 33px;
     padding-left: 14px;
     background: url("weixin.png") left -192px;}
    a {
     float: left;
     height: 33px;
     padding-right: 14px;
    background: url("weixin.png") right -192px;}
     li:hover {
    background-position: left -144px;
    }
     li:hover a {
     background-position: right -144px; }

    雪碧图(sprite)也称精灵图

    由来:因为网页上有可能有很多小的图片用来做效果,页面上每一张图片都会需要向服务器请求一次,服务器压力很大。把小图集合在一张大图上,将来用到的时候,一次性把小图全都拿过来,这样就会减轻服务器的压力。

     

    雪碧图的使用:用大图作为背景图片,再使用background-position属性控制要显示的区域。

     .btn {
     width: 86px;
     height: 34px;
     background: url("qq.png") no-repeat -350px -110px;
    }

     

    然后就是CSS初始化,这个的目的是为了控制所有的浏览器显示的结果一致,重置掉所有的默认样式,可以更加灵活地控制每一个标签的样式。

    不推荐使用  *{margin:0;padding:0;}  因为通配符选择器会对页面中的所有标签产生样式设置,大大的增加了服务器的请求次数,也让样式设置不灵活了。

    Css初始化一般是单独写在一个css文件中,然后在HTML页面中的head里使用link标签引用。

    最后就是关于网页布局的思路

    1、 在我们要开始做一个页面的时候,要首先搭建好目录,在一个大的文件夹里面要有css文件夹,image文件夹,如果页面较多建议再建立一个html的pages文件夹,还有js文件夹等等,这样做的主要目的是为了实现三层分离,还有就是便于代码的管理,也便于后期的维护,严格准守w3c标准。

    2、 准备好css初始化文件,可以先写上要常用到的和公用代码,后面如果有需要可以后续添加,初始化文件要独立分开,不能和其他的css文件混合。需要使用时再引用。

    3、 准备好这些之后,拿到设计图,要开始分析页面结构,一般是纵向排列,像是堆积木一样一个一个的块搭建的,不同的是页面的搭建是从上往下。

    4、 分析完成后开始搭建页面,一块一块的来,在给元素使用选择器命名的时候要有意义,这也是为了代码的整洁和写样式的时候不会发生命名重复(除非是公共样式之类的),还要定好版心,一般页面的版心是固定的,不会改变。版心就是页面的中间部分。

    5、 页面搭建好之后就可以开始写css样式了,要新建一个页面样式,实现三层分离。

     

    大概就是这些啦,好好学习,天天向上!

  • 相关阅读:
    MSSQL大量数据时,建立索引或添加字段后保存更改超时该这么办
    POJ 3261 Milk Patterns (后缀数组)
    POJ 1743 Musical Theme (后缀数组)
    HDU 1496 Equations (HASH)
    694. Distinct Substrings (后缀数组)
    POJ 1222 EXTENDED LIGHTS OUT (枚举 或者 高斯消元)
    POJ 1681· Painter's Problem (位压缩 或 高斯消元)
    POJ 1054 The Troublesome Frog (hash散列)
    HDU 1716 排列2
    HDU 4405 Aeroplane chess (概率DP & 期望)
  • 原文地址:https://www.cnblogs.com/chrischan/p/6536832.html
Copyright © 2011-2022 走看看