【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次! 浮动最初设计的目 ...
随机推荐
- R语言两自定义矩阵的基本运算-实例
#sink("matrix_history.txt") cat("请输入矩阵的行和列数,“,”号隔开,建议行 等于列 数:") number<-scan( ...
- Linux socket program Demo1(client & server)
client and server Demo of socket. client send data to server. server send data to client. // this ...
- WIN7快速打开hosts方法
WIN7快速打开hosts方法 1直接运行C:\Windows\System32\drivers\etc\hosts 浏览选择notepad++打开即可 2打开notepad++打开 C:\Windo ...
- 电商项目搜寻功能(分页,高亮,solr,规格过滤,价格的排序)
package cn.wangju.core.service; import cn.wangju.core.pojo.item.Item; import cn.wangju.core.util.Con ...
- 移动端rem布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题
一.用户修改手机字体设置大小,影响App里打开的web页面. 手机字体设置大小,影响App的页面.Android的可以通过webview配置webview.getSettings().setTextZ ...
- 如何在 Knative 中部署 WebSocket 和 gRPC 服务?
作者 | 冬岛 阿里云容器平台工程师 导读:虽然说 Knative 默认就支持 WebSocket 和 gRPC,但在使用中会发现,有时想要把自己的 WebSocket 或 gRPC 部署到 Kna ...
- centos ftp服务器搭建 vsftpd 匿名访问配置方法 ftp 550 Failed to open file 错误处理
vsftpd是linux下常用的ftp服务软件,配置起来其实不复杂,只是网上很多文章,配置后都无法成功.我使用它是用于局域网内部分享文件的,所以使用匿名的方式. ftp本身密码是明文传输的,如果需要安 ...
- wordpress 数据查询-全局注入-模板数据消费输出简图
我一直比较好奇,类似于wordpress这样的CMS,它可以做的很灵活,同样的软件,为什么就能做出几乎完全不具有相似性的不同站点来呢?除了功能可以有大不同以外,即便是相同的简单blog站他们的外观也可 ...
- Flask--闪现、中间件、多app应用
目录 闪现 源码 案例 中间件 自定义局部中间件 自定义全局装饰器 多app应用 闪现 flask提供了一个非常有用的flash()函数,它可以用来"闪现"需要提示给用户的消息,比 ...
- deepin可视化程序打不开问题排查方法
anyconnect是一个VPN软件,在deepin系统下安装完成之后,并不能够直接使用,点击启动图标之后没有反应. 要想分析问题,必须从命令行入手,错误会打印在控制台. 如何根据一个图标来找到一个程 ...