• css3-3 css3背景样式


    css3-3 css3背景样式

    一、总结

    一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里。

    1、background:#ccc url('xs.png') no-repeat fixed 50% 50%;中的最后两个参数是什么意思?

    背景图片的偏移位置,表示距上和距左各百分之五十

    2、为什么各种网站设置的时候把所有的小图标集成在一张图上面?

    降低服务器请求次数,降低负载,当然这样也会导致必须下载了这张图页面才能正常显示。

    3、各种网站设置的时候把所有的小图标集成在一张图上面,怎么访问单一的图?

    百度:背景,然后偏移

    4、百度页面将css和js写在页面内部而不是外部的原因?

    降低服务器请求次数,降低负载

    5、background缩写的各个参数是什么意思?

    12             background:#ccc url('xs.png') no-repeat fixed 50% 50%;

    二、css3背景样式

    1、相关资料

    背景:
    1.background-color
    2.background-image
    3.background-repeat
    4.background-attachment
    5.background-position

    2、代码

    background缩写形式

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index</title>
     6     <style>
     7         *{
     8             font-family:微软雅黑;
     9         }
    10 
    11         body{
    12             background:#ccc url('xs.png') no-repeat fixed 50% 50%;
    13         }
    14     </style>
    15 </head>
    16 <body>
    17     <div>
    18         <h1>linux is very much!linux is very much!</h1>    
    19         <h1>linux is very much!linux is very much!</h1>    
    20         <h1>linux is very much!linux is very much!</h1>    
    21         <h1>linux is very much!linux is very much!</h1>    
    22         <h1>linux is very much!linux is very much!</h1>    
    23         <h1>linux is very much!linux is very much!</h1>    
    24         <h1>linux is very much!linux is very much!</h1>    
    25         <h1>linux is very much!linux is very much!</h1>    
    26         <h1>linux is very much!linux is very much!</h1>    
    27         <h1>linux is very much!linux is very much!</h1>    
    28         <h1>linux is very much!linux is very much!</h1>    
    29         <h1>linux is very much!linux is very much!</h1>    
    30         <h1>linux is very much!linux is very much!</h1>    
    31         <h1>linux is very much!linux is very much!</h1>    
    32         <h1>linux is very much!linux is very much!</h1>    
    33     </div>
    34 </body>
    35 </html>
     
     
  • 相关阅读:
    关于数据源跟事件封装实例
    IOS开发基础知识--碎片27
    IOS开发基础知识--碎片26
    IOS开发基础知识--碎片25
    iOS菜单滚动联动内容区域功能实现
    IOS开发基础知识--碎片24
    iOS仿京东分类菜单之UICollectionView内容
    iOS仿京东分类菜单实例实现
    IOS开发基础知识--碎片23
    通用性好的win2003序列号: (推荐先用这个里面的)
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9211631.html
Copyright © 2020-2023  润新知