建站前端常用代码——CSS篇

Css模块居中代码：

margin:0 auto;

Css文字居中代码：

text-align:center;

Css文字垂直居中：

line-height:300px;

Css文字加阴影效果：

text-shadow:2px 2px #FF0000;

背景图片代码：

style="background-image:url(images/a.jpg)"

背景色代码：

style="background:#000;"

在新页面打开链接：

target="_blank"

加上边距：

padding-top

加下边距：

padding-bottom

加左边距：

padding-left

加右边距：

padding-right

li标签去除小黑点：

list-style:none;

Li标签竖向排列改横向：

float:left;

Css增加文字间距代码：

letter-spacing

a元素隐藏下划线：

text-decoration:none

文字加粗：

font-weight

文字放大：

<big></big>

文字大小:

font-size:14px;

设置在最上层显示：

position: absolute;z-index: 1;

首行缩进2字符：

text-indent: 2em;

块元素转换为行内元素：

display:inline-block

加圆角：

border-radius:2px 2px 2px 2px;

css圆角边框代码加阴影：

box-shadow: darkgrey 10px 10px 30px 5px ;

水平线：

<hr />

css隐藏页面元素：

display: none;

Css显示页面元素：

display:block

手机版文本自动换行：

word-break: break-all;

模块换行代码：

flex-wrap: wrap;

加边框：

border: solid 1px #f21c64;

修改input默认样式：

input::-webkit-input-placeholder

关闭搜索框（input）输入状态下的背景色：

form中添加autocomplete="off"

鼠标放上变成手：

cursor: pointer;

模块出现动画效果（css）

<style>
transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
-o-transition: all 0.5s;
</style>

媒体查询

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

网站整体变黑白效果

<style>
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter:none;
}
</style>

1、first-child

first-child表示选择列表中的第一个标签。代码如下：

li:first-child{background:#090}

上面的意思是，li 列表中的 第一个li模块的背景颜色。

2、last-child

last-child表示选择列表中的最后一个标签，代码如下：

li:last-child{background:#090}

3、nth-child(3)

表示选择列表中的第3个标签，代码如下：

li:nth-child(3){background:#090}

上面代码中的3也可以改成其它数字，如4、5等。想选择第几个标签，就填写几。

4、nth-child(2n)

这个表示选择列表中的偶数标签，即选择 第2、第4、第6…… 标签。

5、nth-child(2n-1)

这个表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……标签。

6、nth-child(n+3)

这个表示选择列表中的标签从第3个开始到最后。

7、nth-child(-n+3)

这个表示选择列表中的标签从0到3，即小于3的标签。

8、nth-last-child(3)

这个表示选择列表中的倒数第3个标签。

图片自动裁剪css：object-fit: cover;

部分窗口展示滑动背景图：

.元素名 {
height: 334px;
opacity: 0.5;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-image: url(img/indexlxfsbjt.jpg);
}

over~~~