Rumah hujung hadapan web html tutorial 水晶按钮_html/css_WEB-ITnose

水晶按钮_html/css_WEB-ITnose

Jun 24, 2016 am 11:46 AM

  上一篇为大家介绍了一下关于菜单效果的制作,本篇为大家再分享一下关于水晶按钮的实现,本篇我们将不会再涉及javascript的知识,所有效果我们都将同css来实现,内容没有什么难度,学完本篇我相信大家对css的强大,一定会感到赞叹的,废话不多说,下面我们先来看一下效果:

  

  上图中的最上面的三个按钮效果是通过css改变input标签来实现的,下面两个则是两个a标签,通过css来改变相应的样式,下面我们一起来学习一下上面的效果。

 一、按钮设置:

  在界面上添加三个input按钮:

<input type="submit" value="提交"/>    <input type="button" value="上交"/>    <input type="reset" value="重置">
Salin selepas log masuk

 css代码:

input{ width: 100px; height: 40px; border: none; background-image: url(button/btn.png);}
Salin selepas log masuk

  这样的效果存在的问题就是,我们的背景是固定的,不能随我们的内容增加而改变。

 二、a标签的效果的显示:

  a标签:

<a href="#"><span>按钮</span></a>
Salin selepas log masuk

  css代码:

     a{ text-decoration: none; padding-left: 15px; display: inline-table; width: 100px; height: 40px; line-height: 40px; background: url(button/btn_bg.png);}        a:HOVER{ background-position: 0 -80px;}        a span{ display: inline-table; height: 40px; padding-right: 15px; color: #fff; background: url(button/btn_bg.png) right -40px;}        a:HOVER span{ background-position: right -120px;}
Salin selepas log masuk

 三、css3新增的圆角设置属性实现上述效果:

  a标签:

<a href="#" class="button" >按钮</a>
Salin selepas log masuk

  css新增圆角属性:

     .button{ display: inline-table; height: 40px; color: #fff; padding: 0 15px; background: url(button/css3_btn_bg.png); text-align: center; border: 1px solid #3c8134; border-radius: 5px}        .button:HOVER { background-position: 0 -40px;}
Salin selepas log masuk

 四、最后我们通过一个菜单效果的案例结束本篇的总结:

  效果图:

  

  界面代码:

<body>    <ul>        <li><a href="#" class="ac"><span>首页</span></a></li>        <li><a href="#"><span>最新产品</span></a></li>        <li><a href="#"><span>内部新闻</span></a></li>        <li><a href="#"><span>联系我们</span></a></li>    </ul></body>
Salin selepas log masuk

  css代码:

<style type="text/css">body ul li {margin: 0px; padding: 0px; font-size: 12px; }ul { list-style-type: none; height: 27px; width:500px;border-bottom:2px solid #21530C}li { float: left; }a{display:inline-block;height:27px;line-height:27px;text-decoration:none;padding-left:9px;color:#000;margin-right:10px;}a span{display:inline-block;height:27px;padding-right:9px;}a:hover{    background:url(button/left.jpg) no-repeat ;}a:hover span{    background:url(button/right.jpg) no-repeat  right #21530C;color:#fff;}    </style>
Salin selepas log masuk

  好了到这里我们关于水晶按钮的实现,就为大家分享完毕了,代码这里面关于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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Adakah HTML mudah belajar untuk pemula? Adakah HTML mudah belajar untuk pemula? Apr 07, 2025 am 12:11 AM

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Mar 20, 2025 pm 05:56 PM

Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Memahami HTML, CSS, dan JavaScript: Panduan Pemula Memahami HTML, CSS, dan JavaScript: Panduan Pemula Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

See all articles