Contoh praktikal CSS (disyorkan)_CSS/HTML

Latar Belakang Latar Belakang Tetapkan warna latar belakang

<style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style> <h1>Ini ialah pengepala 1</h1> <h2>Ini ialah pengepala 2</h2> <p>Ini ialah perenggan</p>
[Ctrl+A Pilih semua Nota: Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan ]

Tetapkan satu Gambar sebagai latar belakang

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg') } </style>
[Ctrl+A Pilih semua Nota: Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan ]

Ulang secara menegak Imej latar belakang

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: repeat } </style>
[Ctrl+A Pilih semua Nota: Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan ]

Imej latar belakang ulangan mendatar

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: repeat-x } </style>
[Ctrl+A Pilih semua Nota: Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan ]

Cara meletakkan imej latar belakang ( Peletakan kedudukan)

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: no-repeat; background-position: center; } </style>
[Ctrl+A untuk memilih semua Nota: Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semulanya untuk melaksanakan ]

背景不滚动

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/smiley.gif'); background-repeat: no-repeat; background-attachment: fixed } </style> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p> <p>Imej tidak akan menatal dengan seluruh halaman</p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

<style type="text/css"> body { background: #00ff00 url('http://www.blueidea.com/articleimg/2006/07/3744/smiley.gif') no-repeat fixed center; } </style>Ini ialah beberapa teks Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p>Ini ialah beberapa teks<p> </p> <p> </p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行>>