CSS背景属性5个应用实例
作者:66 来源:cssrain 发布时间:2009-09-13 20:54:00
背景(background)在项目中经常会使用。这篇文章主要讲解的是实际项目中的5个实例。通过具体的分析来达到学习的目的。
1,Li列表
通过ul 和 li 的方式,我们可以构造出一些无序列表。通过ul+li,我们不仅可以做出一些漂亮的菜单,也可以做出一些完美的树形结构。 ul+li默认样式在前面有个小黑点,实际项目中我们可以通过背景来代替这个小黑点。
下面我们看2个实例:
https://www.aspxhome.com/examples/design/css/cssbackground/a1/demo1.html
https://www.aspxhome.com/examples/design/css/cssbackground/a1/demo2.html
2,文本替换
文本替换也是项目中比较常见的技术。实际开发中经常需要使用图片来替换文本。通过背景来代替文本。
下面我们看3个实例:
https://www.aspxhome.com/examples/design/css/cssbackground/a2/demo1.html
https://www.aspxhome.com/examples/design/css/cssbackground/a2/demo2.html
https://www.aspxhome.com/examples/design/css/cssbackground/a2/demo3.html
当然我需要对前面的2个实例进行一下补充说明:
在例2中,通过text-indent:-9999px;属性把 文字隐藏到看不到的地方。当然有一缺点:禁止图片下载时,什么都没有了。
在例3中,通过添加额外标签,然后使用定位方式把背景定位在上层,来遮住文字。也有一缺点:图片需要能完全遮住文字,要实底的图片。
3,自适应按钮
自适应在实际中也经常使用,通过自适应,我们不需要做额外的图片。我以前看过一些老的项目,给不同文字的按钮做了好多不同的图片,然后每个按钮的样式有btn2word,btn4word,btn6word.... 可见非常不灵活。自适应按钮能从根本上解决这个问题。
我们来看1个实例:
https://www.aspxhome.com/examples/design/css/cssbackground/a3/demo1.html
你已经看到了,自适应需要至少2个闭合元素。通过一个背景左对齐和另一个背景图片的右对齐 来做成自适应按钮。
4,圆角
以前很多项目都是方角,不知什么时候起,流行起圆角了。就像汽车一样,以前的桑塔纳的边角都是方角的,现在的车都是圆角的了。
圆角的实现方式跟自适应有点类似,只不过背景的对齐方式有点区别罢了。
https://www.aspxhome.com/examples/design/css/cssbackground/a4/demo1.html
5,等高栏
这个是最近在看 无懈可击的Web设计 中的一个例子,的确作者也讲解的非常不错。而且以前在做项目中,的确遇到过这个问题。不过解决方式貌似没作者这么简单。
话不多说,先看3个实例:
https://www.aspxhome.com/examples/design/css/cssbackground/a5/demo1.html
https://www.aspxhome.com/examples/design/css/cssbackground/a5/demo2.html
https://www.aspxhome.com/examples/design/css/cssbackground/a5/demo3.html
或许你已经看明白了 我将要讲解什么。对了,就是侧边栏跟主体栏的高度问题。实际应用中,我们经常要使他们2个呈现一样的高度。通过对最外层元素使用背景图片来达到了这种效果。
猜你喜欢
- 本文实例总结了CI框架中数据库操作函数$this->db->where()相关用法。分享给大家供大家参考,具体如下:CI 框架数
- 什么是存储过程简单的说,就是一组SQL语句集,功能强大,可以实现一些比较复杂的逻辑功能,类似于JAVA语言中的方法;ps:存储过程跟触发器有
- 以前我一直用os.system()处理一些系统管理任务,因为我认为那是运行linux命令最简单的方式.我们能从Python官方文档里读到应该
- 简介Closure所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。闭
- 本文实例讲述了C#访问SQL Server数据库的实现方法。分享给大家供大家参考。具体如下:这里介绍一下用C#访问SQL Server数据库
- 背景介绍Pandas的DataFrame和Series在Matplotlib基础上封装了一个简易的绘图函数,使得数据处理过程中方便可视化查看
- 项目场景:Python项目需要画两组数据的双柱状图,以下以一周七天两位小朋友吃糖颗数为例进行演示,用matplotlib库实现代码:impo
- 之前用来整理图片的小程序,拿来备忘,算是使用Python复制文件的一个例子。# -*- coding: utf-8 -*-#程序用来拷贝文件
- 作业备份,不是备份数据库,是备份作业。 我的方法是把作业导出成文件备份起来,因为当你服务器维护的多了的时候很多你的作业 就很成问题,很麻烦。
- event-----------------------------------------------------------------
- 本文实例为大家分享了vue实现验证码倒计时按钮的具体代码,供大家参考,具体内容如下1、点击“发送验证码”按钮后进行逻辑判断:▶️ 如果邮箱已
- Python实现Mysql数据统计的实例代码如下所示:import pymysqlimport xlwtexcel=xlwt.Workboo
- 记录:256写SQL最高境界:SELECT * FROM 表名。当然这是一句自嘲。探究一下SQL语句中JOIN的用法,直到经历这个场景,变得
- 用mysqlbinlog.exe查看二进制日志是否启用了日志mysql>show variables like 'log%
- 一、介绍正则表达式是一个特殊的字符序列,计算机科学的一个概念。通常被用来检索、替换那些符合某个模式(规则)的文本。许多程序设计语言都支持利用
- 本文给出了MySQL数据库中定义外键的必要性、具体的定义步骤和相关的一些基本操作,供大家参考!定义数据表假如某个电脑生产商,它的数据库中保存
- 本文实例讲述了Python中列表元素转为数字的方法。分享给大家供大家参考,具体如下:有一个数字字符的列表:numbers = ['2
- 前几天,我们用虚拟机安装了Ubuntu 20.04。今天,我们来安装一些常用的工具,比如Pycharm。 Pycharm是一种用来开发Pyt
- 今年我们的祖国多灾多难 雪灾的阴影还没散去又发生了地震。让我们用手中的画笔为5.12地震受灾同胞们祈福并号召大家为灾区人民捐款!中国插画网祈
- 上一篇说了vue单页面解决解决SEO的问题只是用php预处理了meta标签但是依然没有内容填充,所以对于内容抓取依然有些乏力,只是解决了从无