水晶按钮_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

水晶按钮_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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="重置">

　css代码：

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

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

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

　　a标签：

<a href="#"><span>按钮</span></a>

　　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;}

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

　　a标签：

<a href="#" class="button" >按钮</a>

　　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;}

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

　　效果图：

　　界面代码：

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

　　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>

　　好了到这里我们关于水晶按钮的实现，就为大家分享完毕了，代码这里面关于css代码都是最基本的，相信大家应该没有什么困难。如果你有什么好的想法，请留言交流。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。