大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!


一、CSS可见性

  1. overflow: hidden; /*溢出隐藏 */
  2. visibility: hidden; /* 隐藏元素 隐藏之后还保留原来的位置。*/
  3. display: none; /* 隐藏元素 隐藏之后不保留原来的位置。*/
  4. display: block; /* 元素可见 */

display:nonedisplay:block 常配合js使用(如:鼠标经过时出现,鼠标离开时消失)。


二、css之内容移除(logo优化)

1、方法一

  1. text-indent: -5000em;

text-indent 属性规定文本块中首行文本的缩进。注意: 负值是允许的。如果值是负数,将向左缩进。

之所以要写着两个字是为了 SEO,因为背景图片 SEO 看不懂.

2、方法二

将元素高度设置为0, 使用内边距将盒子撑开,给盒子使用overflow:hidden; 将文字隐藏。

  1. .box{
  2. width:300px;
  3. height:0;
  4. padding-top:100px;
  5. overflow:hidden;
  6. background:red;
  7. }

三、CSS精灵图

上图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。

然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites)。

简单地说,CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。

通常情况下,这个由很多小的背景图像合成的大图被称为精灵图,如下图所示为淘宝网站中的一个精灵图。

工作原理:

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图)。然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位,其中最关键的是使用background-position属性精确地定位。

举例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style type="text/css">
  7. body,ul,li{
  8. margin: 0;
  9. padding: 0;
  10. }
  11. ul, li{
  12. list-style: none;
  13. }
  14. .box{
  15. height: 48px;
  16. background: #222;
  17. margin-top: 50px;
  18. }
  19. .con{
  20. width: 1182px;
  21. height: 48px;
  22. margin: 0 auto;
  23. position: relative;
  24. }
  25. .con ul li{
  26. float: left;
  27. }
  28. .con ul li a{
  29. text-decoration: none;
  30. color: #fff;
  31. display: inline-block;
  32. height: 48px;
  33. font: 16px/48px microsoft yahei;
  34. padding: 0 18px;
  35. }
  36. .con ul li a:hover{
  37. background: #2774A2;
  38. }
  39. .con .hot{
  40. position: absolute;
  41. width: 31px;
  42. height: 21px;
  43. background: url("spirit.png") -58px 0;
  44. left:221px;
  45. bottom:35px;
  46. }
  47. .con .new{
  48. position: absolute;
  49. width: 31px;
  50. height: 21px;
  51. background: url("spirit.png") -135px 0;
  52. left:90px;
  53. bottom:35px;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <div class="box">
  59. <div class="con">
  60. <ul>
  61. <li><a href="#">首页</a></li>
  62. <li><a href="#">Java</a></li>
  63. <li><a href="#">IOS</a></li>
  64. <li><a href="#">PHP</a></li>
  65. <li><a href="#">C/C++</a></li>
  66. <li><a href="#">UI设计</a></li>
  67. <li><a href="#">前端与移动开发</a></li>
  68. <li><a href="#">问答专区</a></li>
  69. <li><a href="#">Python</a></li>
  70. <li><a href="#">网络营销</a></li>
  71. <li><a href="#">活动专区</a></li>
  72. </ul>
  73. <div class="hot"></div>
  74. <div class="new"></div>
  75. </div>
  76. </div>
  77. </body>
  78. </html>

PS:之所以选择con作为父盒子而不是box作为父盒子,是因为box的宽度不定,不同的显示器宽度不同,那么new和hot的定位就有问题。


四、属性选择器

  1. input[type="text"][class] {
  2. width: 20px;
  3. height: 20px;
  4. }

选择有type属性为text,并且有class属性的标签。

  1. input[type="text"][class="id"] {
  2. width: 20px;
  3. height: 20px;
  4. }

选择有type属性为text,并且有class属性,并且class属性为 id 的标签。


五、CSS滑动门

特点:边上是这种圆弧型的或者其他形状的,可以变换长度的样式。

PS:浮动之后宽度不是父盒子的宽度,而是内容撑开的宽度。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style type="text/css">
  7. body,ul,li{
  8. margin: 0;
  9. padding: 0;
  10. }
  11. ul,li{
  12. list-style: none;
  13. }
  14. ul li{
  15. float: left;
  16. }
  17. ul li a{
  18. display: inline-block;
  19. height: 35px;
  20. background: url("bg_r1_c1.png") no-repeat;
  21. padding-left: 7px;
  22. }
  23. ul li a span{
  24. display: inline-block;
  25. height: 35px;
  26. background: url("bg_r1_c2.png") right;
  27. padding-right: 25px;
  28. color: #fff;
  29. line-height: 35px;
  30. }
  31. ul li a:hover{
  32. background: url("bbg_r1_c1.png");
  33. }
  34. ul li a:hover span{
  35. background: url("bbg_r1_c2.png") right;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <ul>
  41. <li><a href="#"><span>网易云音乐</span></a></li>
  42. <li><a href="#"><span>微信</span></a></li>
  43. <li><a href="#"><span>蚂蚁花呗</span></a></li>
  44. </ul>
  45. </body>
  46. </html>

微信案例:

现象:鼠标经过时,背景凸起。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style type="text/css">
  7. body,ul,li,a,span{
  8. margin: 0;
  9. padding: 0;
  10. }
  11. ul,li{
  12. list-style: none;
  13. }
  14. .nav{
  15. height: 74px;
  16. background: url("weixin_bg.jpg");
  17. }
  18. .nav-con{
  19. width: 600px;
  20. margin: 0 auto;
  21. }
  22. li{
  23. float: left;
  24. height: 74px;
  25. line-height: 74px;
  26. margin-right: 60px;
  27. }
  28. li a{
  29. display: inline-block;
  30. text-decoration: none;
  31. color: #fff;
  32. height: 33px;
  33. line-height: 33px;
  34. background: url("bg.png") no-repeat 0 -144px;
  35. padding-left: 13px;
  36. }
  37. a span{
  38. display: inline-block;
  39. height: 33px;
  40. background: url("bg.png") no-repeat right -144px;
  41. padding-right: 13px;
  42. }
  43. a:hover{
  44. background: url("bg.png") no-repeat 0 -192px;
  45. }
  46. a:hover span{
  47. background: url("bg.png") no-repeat right -192px;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <div class="nav">
  53. <div class="nav-con">
  54. <ul>
  55. <li><a href="#"><span>首页</span></a></li>
  56. <li><a href="#"><span>下载文章</span></a></li>
  57. <li><a href="#"><span>微信公众公众公众助手</span></a></li>
  58. </ul>
  59. </div>
  60. </div>
  61. </body>
  62. </html>

从零开始学 Web 之 CSS(五)可见性、内容移除、精灵图、属性选择器、滑动门的更多相关文章

  1. 从零开始学 Web 之 CSS(四)CSS初始化、定位、overflow、标签规范

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  2. 从零开始学 Web 之 CSS(三)链接伪类、背景、行高、盒子模型、浮动

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  3. 从零开始学 Web 之 CSS(一)选择器

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  4. 从零开始学 Web 之 CSS(二)文本、标签、特性

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  5. 从零开始学 Web 系列教程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...

  6. 从零开始学 Web 之 DOM(五)元素的创建

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...

  7. 从零开始学 Web 之 jQuery(五)操作元素其他属性,为元素绑定事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. 从零开始学 Web 之 移动Web(五)touch事件的缺陷,移动端常用插件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. 从零开始学 Web 之 Vue.js(五)Vue的动画

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. JavaSE基础知识(2)—变量和运算符

    一.变量 1.理解 概念:内存中的一块数据存储空间 2.变量的三要素 数据类型变量名变量值 3.变量的语法和使用步骤★ 步骤1:声明变量(计算机开辟一块空间) 数据类型 变量名;步骤2:为变量赋值(初 ...

  2. android studio 关闭SVN关联

    <?xml version="1.0" encoding="UTF-8"?> <project version="4"&g ...

  3. Laravel-nestedset that base left and right values tree package

    This is a Laravel 4-5 package for working with trees in relational databases. Laravel 5.5, 5.6, 5.7, ...

  4. java 多线程 同步 观察者 并发集合的一个例子

    //第一版 package com.hra.riskprice; import com.hra.riskprice.SysEnum.Factor_Type; import org.springfram ...

  5. [C#.net]ListBox对Item进行重绘,设置背景色和前景色

    别的不多说了,上代码,直接看 首先设置这行,或者属性窗口设置,这样才可以启动手动绘制,参数有三个 Normal: 自动绘制 OwnerDrawFixed:手动绘制,但间距相同 OwnerDrawVar ...

  6. ABP框架系列之二十七:(Feature-Management-特征管理)

    Introduction Most SaaS (multi-tenant) applications have editions (packages) those have different fea ...

  7. 根据Excel模板存储数据,并下载

    @RequestMapping("/exportList") @ResponseBody public Map<String, Object> exportList(H ...

  8. 【repost】H5总结

    1.新增的语义化标签: <nav>: 导航 <header>: 页眉 <footer>: 页脚 <section>:区块 <article> ...

  9. django扩展User认证系统

    第一种方法proxy 如果你对Django提供的字段,以及验证的方法都比较满意,没有什么需要改的.但是只是需要在他原有的基础之上增加一些操作的方法.那么建议使用这种方式.示例代码如下: #在model ...

  10. MFC 多窗口通信时,使用RadioButton和Button时冲突问题

    最近项目需要我们实现在两个窗口间进行通信,其中有个小功能如图所示: 当我点击GDIProgram中的Button1时,会更新Dialog的Radio1和Radio2的状态. Dialog中的Radio ...