css笔记

最新推荐文章于 2025-05-10 16:22:55 发布

lceBear

最新推荐文章于 2025-05-10 16:22:55 发布

阅读量52

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yanzp/p/5396272.html

本文介绍了几种实用的网页布局与样式调整技巧，包括背景图片的自适应展示、元素的居中显示、使用CSS3使图片变为灰色效果以及设置placeholder样式的具体实现方法。

背景图片自适应

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 div {
 8     position: absolute;
 9     width: 100%;
10     height: 100%;
11     z-index: -1;
12 }
13 img {
14     position: fixed;
15 }
16 </style>
17 </head>
18 
19 <body>
20 <div><img src="http://i.imgur.com/CrbvIYj.jpg" width="100%" height="100%"></div>
21 </body>
22 </html>

元素自适应居中于网页

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    border: 1px solid yellow;
    background-color: #F6C;
}
</style>
</head>

<body>
<div></div>
</body>
</html>

CSS3使图片变灰

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 <meta name="viewport" content="width=device-width, initial-scale=1">
 7 <title>test</title>
 8 <style type="text/css">
 9 .gray {
10   -webkit-filter: grayscale(100%);
11   -moz-filter: grayscale(100%);
12   -ms-filter: grayscale(100%);
13   -o-filter: grayscale(100%);
14   filter: grayscale(100%);
15   filter: gray;
16 }
17 img {
18   width: 200px;
19   height: 200px;
20 }
21 </style>
22 </head>
23 <body>
24 <img src="http://i.imgur.com/CrbvIYj.jpg">
25 <img src="http://i.imgur.com/CrbvIYj.jpg" class="gray">
26 </body>
27 </html>

placeholder样式设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置文字</title>
    <style type="text/css">
    input::-webkit-input-placeholder {
        color: blue;
    }
    input::-moz-placeholder {
        color: blue;
    }
    input:-ms-input-placeholder {
        color: blue;
    }
    </style>
</head>
<body>
    <input type="text" id="txt1" placeholder="哈哈哈哈">
</body>
</html>

转载于:https://www.cnblogs.com/yanzp/p/5396272.html