Rumah > Artikel > hujung hadapan web > Cara melukis garisan mendatar dan menegak menggunakan css
Cara melukis garisan mendatar dan menegak menggunakan css
- WBOYasal
- 2021-12-06 18:29:416305semak imbas
Kaedah melukis: 1. Tambahkan gaya "lebar: nilai panjang garisan mendatar; tinggi: nilai ketebalan garisan mendatar; latar belakang: warna garisan mendatar" pada elemen untuk melukis garisan mendatar; garis menegak" kepada elemen Nilai ketebalan garisan; ketinggian: nilai panjang garisan menegak; latar belakang: warna garisan menegak" gaya untuk melukis garisan menegak.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Cara melukis garisan mendatar dan menegak menggunakan css
Dalam css, kita boleh menetapkan saiz dan warna isian elemen div kosong Kepada mencapai kesan melukis garisan mendatar dan menegak.
Sebagai contoh, kita boleh menetapkan panjang div kepada panjang garis mendatar, lebar div kepada ketebalan garisan mendatar, dan kemudian mengisinya dengan warna latar belakang.
Contoh adalah seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1{
width:100px;
height:1px;
background-color:#000;
}
.div2{
width:1px;
height:100px;
background-color:#000;
}
</style>
</head>
<body>
<div class="div1"></div><br>
<div class="div2"></div>
</body>
</html>Hasil keluaran:
(Ketahui perkongsian Video: tutorial video css)
Atas ialah kandungan terperinci Cara melukis garisan mendatar dan menegak menggunakan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!