M Wiki

User Tools

Site Tools

Trace: • css-related
css-related

Table of Contents

通过css属性来定位图片

<html>
<body>
<style type="text/css">
#img{
  background-image:url("https://morgan0329.github.io/background/bg-17.jpg"); /*插入背景图*/
  background-repeat:no-repeat;       /*设置图片不重复*/
  background-color:#00ffff;          /*设置背景颜色*/
  background-position:left center;   /*用居中对齐设置水平距离，用下面对齐设置垂直距离*/
  width:400px;  height:150px;        /*设置宽度和高度*/
}


/*
首先设置固定图片的css属性是background-attachment
background-attachment它有两个属性值fixed/scroll
background-attachment：fixed;表示固定图片，图片不随着页面滚动而滚动。
background-attachment：scroll；表示不固定图片，图片随着页面滚动而滚动
background-position这个属性用来定位图片的位置。

background-position;的语法结构，用水平和垂直位置进行定位。
background-position:x y;

其中，x有三个值：left(左)，center(中),right(右)。用来设置水平位置；
y也有三个值：top（上）,center(中)，bottom(下)。用来设置垂直位置；
两个属性值得中间一定要用英文的空格 ，隔开。
*/
</style>
<div id="img"></div>
</body>
</html>

CSS Knowledge

http://www.w3school.com.cn/tiy/t.asp?f=dhtm_position_relative

Want to create a bottom element <div class=“bot”

>nihao</div>

如果想把什么东西固定在下面就用： 

.bot
{
position:fixed;
bottom:0
}

如果固定 并不覆盖别人的就用 

.bot
{
position:static;
bottom:0
}

CSS3 Attribute

IE6/7 doesn't support CSS 3

  • border-radius (IE8 doesn't support)
  • :last-child (IE8 doesn't support)

What's CSS2

后代元素表达方式：例：#main p{ color:red; }

子元素：表达方式：例：#main>p{ color:red; }

后代元素包括子元素，孙子元素，重孙子元素………

What's New for CSS3

body > .mainTabContainer div > span[5] {
    Border: 1px solod red;
    Background-color: white;
    Cursor: pointer;
}

此处的 CSS 选择器即：“body > .mainTabContainer div span[5]” 代表这这样一条路径：

  1. “body”标签直接子元素里 class 属性值为“mainTabContainer”的所有元素 A
  2. A 的后代元素（descendant）里标签为 div 的所有元素 B
  3. B 的直接子元素中的第 5 个标签为 span 的元素 C

这个 C 元素（可能为多个）即为选择器定位到的元素，如上的 CSS 属性也会全部应用到 C 元素上。

以上为 CSS2 及之前版本所提供的主要定位方式。现在，CSS3 提供了更多更加方便快捷的选择器：

css-related.txt · Last modified: 2021/08/22 12:59 by morgan0329