Rumah > hujung hadapan web > tutorial css > Apakah rupa untuk melaksanakan gaya serbuk roti hanya menggunakan kod css tanpa menggunakan imej latar belakang?

Apakah rupa untuk melaksanakan gaya serbuk roti hanya menggunakan kod css tanpa menggunakan imej latar belakang?

PHPz
Lepaskan: 2021-05-28 14:33:36
ke hadapan
2149 orang telah melayarinya

Tiada imej latar belakang digunakan, hanya kod css digunakan untuk melaksanakan gaya serbuk roti Ia mempunyai nilai rujukan tertentu. Saya harap ia akan membantu semua orang. ! !

Apakah rupa untuk melaksanakan gaya serbuk roti hanya menggunakan kod css tanpa menggunakan imej latar belakang?

Gunakan atribut boder CSS untuk melaksanakan anak panah secara bijak Kod html adalah seperti berikut:

<ul class="breadCrumb">
  <li><a href="">首页<span class="arrow"></span></a></li>   <li><a href="" class="old">关于我们<span class="arrow"></span></a></li>   <li><a href="">联系我们<span class="arrow"></span></a></li>   <li><a href="" class="old">在线留言<span class="arrow"></span></a></li>   <li><a href="">首页</a></li> </ul>
Salin selepas log masuk

Kod css adalah seperti berikut: <🎜. >

<style type="text/css">
 * {
     margin:0;
     padding:0;
 }
 .breadCrumb {
     width:600px;
     height:30px;
     background:#cccccc;
     list-style:none;
     line-height:30px;
 }
 .breadCrumb li {
     float:left;
 }
 .breadCrumb a {
     text-decoration:none;
     padding:0 20px 0 10px;
     position:relative;
     float:left;
 }
 .breadCrumb a span {
     position: absolute;
     display: block;
     line-height: 0px;
     height: 0px;
     width: 0px;
     right: 0px;
     top: 0px;
     border-left: 10px solid #CCCCCC;
     border-top: 15px solid #e9e9e9;
     border-bottom: 15px solid #e9e9e9;
 }
 .breadCrumb a.old {
     background:#e9e9e9;
 }
 .breadCrumb a.old span {
     border-left: 10px solid #e9e9e9;
     border-right: none;
     border-top: 15px solid #cccccc;
     border-bottom: 15px solid #cccccc;
 }
Salin selepas log masuk
Pembelajaran yang disyorkan: "

Tutorial Video PHP"


Label berkaitan:
css
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan