css筆記

時間 2019-12-11

標籤 css 筆記欄目 CSS 简体版

原文原文鏈接

背景圖片自適應css

 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>

元素自適應居中於網頁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使圖片變灰web

 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樣式設置ui

<!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>

1. CSS+JS筆記
2. css筆記
3. html/css筆記
4. CSS筆記
5. HTML5+CSS筆記
6. css 筆記
7. HTML/CSS 筆記
8. HTML、CSS筆記
9. CSS筆記1
10. html5+css筆記
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• Tomcat學習筆記（史上最全tomcat學習筆記）
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。