【day06】css
一.背景(Background)
1. background-color 背景颜色
2. background-image:url(图像URL);背景图片
3. background-repeat: 背景重复
repeat默认值|repeat-x水平重复|
repeat-y垂直重复|no-repeat不重复
4. background-position: 背景位置
value 水平位置 value垂直位置
说明:
a.background-position方向
水平方向: left center right
垂直方向: top center bottom
b.只有一个方向值
此值代表水平方向,而垂直方向默认为垂直居中
c.background-position:value值 value值
正值背景图往右,负值背景图往左。
如果大盒子小图一般正值
如果小盒子大图一般负值
5. background-attachment 背景固定
scroll默认值:有滚动条背景图像跟滚动条卷上去|
fixed 固定:有滚动条背景图像不跟滚动条卷上去
缩写形式:
background:color image repeat
attachment position
二.CSS精灵(CSS sprites)
原理:将多个小的背景图像整合到一张大图上,
减轻服务器负担
说明:CSS精灵(小盒子大图),所以background-position
都是负值,最大值 (0,0)
三.列表(Lists)
(1) list-style-type:disc 默认值。实心圆
circle 空心圆
square 实心方块
decimal 阿拉伯数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
none 不使用项目符号
(2) list-style-image:url(图像URL);
(3) list-style-position:outside|inside
缩写形式
list-style:type image position;
说明: 常用:list-style:none;
新闻列表常用:
.list li{
background:url(images/dot.png) no-repeat left center;
padding-left:12px;
}
【day06】css的更多相关文章
- 【08】css sprite是什么,有什么优缺点
[08]css sprite是什么?有什么优缺点? 概念:将多个小图片拼接到一个图片中.通过background-position和元素尺寸调节需要显示的背景图案. 优点: 减少HTTP请求数,极大地 ...
- 【10】css hack原理及常用hack
[10]css hack原理及常用hack 原理:利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式.常见的hack有1)属性hack.2)选择器hack.3)IE条件注释 IE条件注 ...
- 【01】CSS规范
[01]CSS规范 []https://drafts.csswg.org/indexes/(下图) https://www.w3.org/TR/2011/REC-CSS2-20110607/ ...
- 【04】 CSS开发注意事项
[04] CSS注意事项 1. 页面编码规范 1.1. 统一使用 UTF-8 编码,用@charset "utf-8"指定页面编码. 1.2. 全局字体设置: windows 7系 ...
- 【01】CSS制作的图形
[01]CSS制作的图形 绘制五角星: 通过border绘制三角形.然后通过transfrom来旋转35度. 绘制对称的图形,最后绘制顶部的三角形即可. 元素本身,加上:before和:a ...
- 【荐】CSS实现漂亮实用带箭头的流程图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【转载】CSS 伪类-:before和:after
:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: #example:before { conte ...
- 【经验】css
1.父元素overflow:hidden,当父元素大小减小到不容纳子元素时,会出现滚动条.2.input的盒模型尺寸基准是content-box,它的宽度将是以width-border计算,也就是说一 ...
- 【转】CSS中的浮动和清除浮动
以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...
随机推荐
- Ubuntu安装有道词典
dpkg -i youdao-dict.deb正常安装 会报一堆依赖关系的错误, 1.更新系统 #更新系统 apt-get update apt-get dist-upgrade 2.对每一个未安装的 ...
- Kafka 入门1
Kafka 简介 作为一个消息中间件,Kafka 以高扩展性.高吞吐量等特点,在互联网项目中被广泛采用. 不清楚 Kafka 的同学,可以先看看这篇文章: http://blog.csdn.net/s ...
- Java连载1-概述&常用的dos命令
本想写完那两个再开始新的,然而客观条件不允许,之前从未接触过Java,从零开始吧!!! 一.概述 C盘下:programme file 一般为64位程序安装的目录,programme file(X ...
- mysql启动报错:Failed to start LSB: start and stop MySQL
报错信息: [root@youxx- bin]# service mysql status Redirecting to /bin/systemctl status mysql.service ¡ñ ...
- Kubernetes Secret(机密存储)
Kubernetes Secret(机密存储) 官方文档:https://kubernetes.io/docs/concepts/configuration/secret/ 加密数据并存放Etcd中, ...
- Linux chattr 文件保护
Linux chattr 文件保护 chattr命令的用法:chattr [ -RV ] [ -v version ] [ mode ] files…注:最关键的是在[mode]部分,[mode]部分 ...
- MySQL for OPS 08:MHA 高可用
写在前面的话 主从架构在一般情况下只能满足我们小公司业务并非一刻都不能中断服务.但是对于大型公司而言,对然数据丢失,数据库挂了,我们可以通过技术找回,修复.但是其中修复过程所消耗的时间是不被允许的.此 ...
- UWP使用TreeView
这个帖子本来是不想写的,但是感觉网上类似的也没有,对于小白可能有点用,于是想着还是写一下吧. 写之前想说下,UWP其实并没有死掉,对于win10来说,以后的新设备肯定是支持UWP的,而且微软一直在完善 ...
- NRF24L01双向无线通信
最近闲来无事,利用手头资源研究了一下基于nrf24L01的双向通信实验,整个系统如下图所示. 原理: nrf24L01本身是一种单向通信的无线模块,但是,当nrf24L01工作在增强型的 ShockB ...
- EF CodeFirst 使用T4模板
实用等级:★★★★★ 首先,定义一个接口,代表一个领域实体.在定义一个实体集成这个接口,面向接口编程的各种好处就不提了. /// <summary> /// 代表一个领域实体 /// &l ...