css背景颜色、背景图片,以及列表的多种样式
背景样式
• background-color 设置元素的背景颜色。
• background-image 把图像设置为背景。
• background-position 设置背景图像的起始位置。
• background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
• background-repeat 设置背景图像是否重复及如何重复。
• background 简写属性,作用是将背景属性设置在一个声明中。
列表样式
• list-style-type 设置列表项标志的类型。
• list-style-image 将图像设置为列表项标志。
• list-style-position 设置列表中列表项标志的位置。
• list-style 简写属性,用于把所有列表的属性设置于一个声明中。
背景区包括内容、内边距(padding)和边框、不包含外边距(margin)
border必须加上样式才会显示,否则默认为none不显示
边框颜色默认=元素内的文本颜色
好看的英文字体:
- font-size: 14px;
- font-family: Consolas;
好看的中文字体:
微软雅黑 14px
RGBA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+
background-image
默认从左上角开始,在水平和垂直方向上重复
背景颜色和背景图片同时设置时,背景颜色会被背景图片覆盖
background-attachment:scroll | fixed
background-position: top | left | right | center | 长度值 | 百分比
第一个参数代表水平,第二个参数代表垂直,只有一个数值时,另一个默认为居中
background 简写
不区分属性的先后顺序
当background-attachment设置为fixed,则图片位置相对于整个网页来说
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:300px;
height:1500px;
border:1px solid;
/*背景图片不显示,原因:
设置为fixed,则图片位置相对于整个网页来说
此时top表示图片位于整个网页的水平居中位置*/
background:#abcdef url(cat-little.jpg) no-repeat top fixed;
};
</style>
</head>
<body>
<div></div>> </body>
</html>
列表项标记 list-style-type
无序列表
有序列表
list-style-image
写在li样式上
list-style-position:inside | outside (针对于多行文本)
inside :列表项目标记放置在文本以内,且环绕文本根据标记对齐
outside :默认值,列表项目标记放置在文本以外,且环绕文本不根据标记对齐
list-style 样式缩写
顺序不固定,但list-style-image的属性值会覆盖list-style-style的属性值
css背景颜色、背景图片,以及列表的多种样式的更多相关文章
- VC 对话框设置背景颜色和图片
改变背景颜色,有两种方法: 1.在app的初始化函数中调用:void SetDialogBkColor( COLORREF clrCtlBk = RGB(192, 192, 192), COLORRE ...
- css代码添加背景图片常用代码
css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...
- Qt中设置widget背景颜色/图片的注意事项(使用样式表 setStyleSheet())
在Qt中设置widget背景颜色或者图片方法很多种:重写paintEvent() , 调色板QPalette , 样式表setStyleSheet等等. 但是各种方法都有其注意事项,如果不注意则很容易 ...
- CSS初识- 选择器 &背景& 浮动& 盒子模型
# CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...
- [转]如何在Windows 10中更改文件夹背景颜色
ini文件.我们甚至可以使用相同的技术将图片设置为文件夹背景. 已有工具可以更改Windows 7中Windows资源管理器背景的颜色,并将图像设置为Windows 7中的文件夹背景,但这些工具与Wi ...
- []如何在Windows 10中更改文件夹背景颜色
ini文件.我们甚至可以使用相同的技术将图片设置为文件夹背景. 已有工具可以更改Windows 7中Windows资源管理器背景的颜色,并将图像设置为Windows 7中的文件夹背景,但这些工具与Wi ...
- 设置 tableview 的背景 颜色 和清空
表示图中Cell默认是不透明的,那么在设置表示图的背景颜色和图片时通常是看不到的 1.给tableView设置背景view UIImageView *backImageView=[[UIImageVi ...
- Android中设置控件的背景颜色的方式整理
版权声明:本文为博主原创文章,未经博主允许不得转载. 前言 在Android开发中,经常需要设置控件的背景颜色或者图片的src颜色. 效果图 代码分析 根据使用的方法不同,划分为 setBackgro ...
- Eclipse背景颜色修改
改变背景颜色(黑底背景的设置) windows->Preferences->General->Editor->Text Editors windows->Preferen ...
随机推荐
- centos7.6+python3+apache2.4+django2.1.2网站部署总结
本次网站部署是使用了django2.1.2版本部署,由于centos自带的Python2.7不支持django2.0以上版本,故需要安全python3的环境.python3.apache的安装不做具体 ...
- Jenkins | 搭建你第一个Jenkins应用
搭建你第一个Jenkins应用 1.准备工作 第一次使用 Jenkins,您需要: 机器要求: 256 MB 内存,建议大于 512 MB 10 GB 的硬盘空间(用于 Jenkins 和 Docke ...
- 倒转数组 Leetcode189
倒转数组 Leetcode189 记录调整数组顺序而不需要另加内存的一种方法: 题目 189. 旋转数组 给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: [ ...
- 如何运行使用gradle打包的项目
目标:https://github.com/davenkin/springmvc4-helloworld 使用SpringMVC编写的一个HelloWorld程序. 初学Gradle只能一步步摸索前进 ...
- Exchange2010安装指南
安装流程参考下面的: https://jingyan.baidu.com/article/2c8c281d6893680008252a9c.html 安装环境:windows server 2008( ...
- sublime: javascript/css 的格式化
Sublime Text 3 破解版 + 注册机 + 汉化包 + 教程 http://www.xiumu.org/note/sublime-text-3.shtml 1.sublime 如果控制菜单选 ...
- Centos7更改屏幕显示率
第一种,在虚拟机中安装VMwareTools,之后在虚拟机菜单栏"查看"这一项选择立即适应窗口. 第二种,修改/boot/grub2/grub.cfg配置文件,在终端输入su,输入 ...
- 《C# GDI+ 破境之道》:第一境 GDI+基础 —— 第三节:画圆形
有了上一节画矩形的基础,画圆形就不要太轻松+EZ:)所以,本节在画边线及填充上,就不做过多的讲解了,关注一下画“随机椭圆”.“正圆”.“路径填充”的具体实现就好.与画矩形相比较,画椭圆与之完全一致,没 ...
- javascript 防止多次提交或执行(在规定时间段内只允许执行一次) 默认 3000ms
"use strict" class Func{ constructor(){} isRun(id, time){//防止多次提交或执行(在规定时间段内只允许执行一次) 默认 30 ...
- 达梦数据库-RAC-DMDSC部署的关键点
达梦数据库-RAC-DMDSC部署的关键点 环境准备 网络准备(ip地址分配).共享磁盘准备和挂载 ifconfig enp0s8 10.1.2.101;ifconfig enp0s9 192.168 ...