实例：美化自适应按钮

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>等分按钮</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<style>
.btn{

text-overflow:ellipsis;
/*超出部分显示省略号*/
overflow:hidden;
/*超出部分隐藏*/
white-space:pre;
/*元素内空白符保留*/

}
</style>
</head>
<body>
<div class="btn-wrap">
<div class="btn-group btn-group-justified">
<!--自适应按键组-->
<a class="btn btn-default" href="#">首页</a>
<a class="btn btn-default" href="#">产品展示</a>
<a class="btn btn-default" href="#">案例分析</a>
<a class="btn btn-default" href="#">联系我们</a>
</div>
</div>

</body>
</html>

时间： 2024-10-07 16:31:37

实例：美化自适应按钮的相关文章

美化自适应按钮

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>等分按钮</title> <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css"

关于Google圆角高光高宽自适应按钮及其拓展

关于Google圆角高光高宽自适应按钮及其拓展————源自张鑫旭css讲解 这篇文章发布于 2009年10月24日,星期六,18:08,归类于 css相关. 阅读 48770 次, 今日 1 次 by zhangxinxu from http://www.zhangxinxu.com本文地址: http://www.zhangxinxu.com/wordpress/?p=292 一.前言对于一门技术而言,要想达到真正的高度,需要形成自己关于这门技术的世界观.我在研究css上花费的功夫相对多些,但

Bootstrap历练实例：基本按钮群组

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:基本按钮群</title> <meta charset="utf-8" /> <meta name="viewpor

Bootstrap历练实例：基本按钮组

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:基本按钮组</title> <meta charset="utf-8" /> <meta name="viewpor

JavaScript特效实例003-通过按钮创建窗口

实例003                     通过按钮创建窗口 实例说明 点击按钮创建窗口 技术要点 主要是使用window是对象的open()方法来创建和调用其他窗口. 实现过程 1.制作用于点击按钮打开的窗口广告页面 <pre name="code" class="html"><html> <head> <title>打开新窗口显示广告信息</title> <style type="

input file上传表单美化file按钮美化篇

一.表单input file样式说明   -   TOP 本上传表单特效是使用纯DIV+CSS代码实现,兼容各大浏览器,使用方便在此美化基础上稍加CSS美化将获得更好的美化效果,也就是通过DIV CSS样式美化上传表单控件. 二.CSS file美化后效果图   -   TOP file表单美化效果图 支持多浏览器与老旧版本浏览器,测试IE6-IE8 火狐.谷歌浏览器均兼容. 三.所有HTML+CSS代码:   -   TOP <!DOCTYPE html PUBLIC "-//W3C//

前端实例练习 - 提示按钮

提示按钮 代码储存在Github效果预览 初衷:很多人在初学前端的时候都会问,"如何入门前端?"同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 "入门级" 的教材并不太满意.学习一门新知识,实例是尤其重要的.在这里本人整理了目前页面上常见功能实现的具体实例.愿能为大家提供一些帮助.希望能够与大家互相分享,共同进步. 效果预览 HTML部分 <button class="btn success">成功</but

图形化编程娱乐于教，Kittenblock arduino实例解读，按钮控灯

跟很多学生聊过,很多学生不是不努力,只是找不到感觉.有一点不可否认,同样在一个教室上课,同样是一个老师讲授,学习效果迥然不同.关键的问题在于,带入感,我能给出的建议,就是咬咬牙,坚持住,没有学不会的知识.会陆续分享图形化编程的经验,希望能够做成一个专题.如果您觉得有用,就给点个赞吧.涉及的软件包括Kittenblock.arduino. 程序解读:按钮控灯 知识点:按钮控灯,连接arduino板,传感器,选择语句 重点:按钮控灯 涉及的软件:Kittenblock.arduino. #inclu

js实例6滑动按钮

<style type="text/css">*{ margin:0px auto; padding:0px}#wai{ width:100%; height:500px;}#left{height:500px; background-color:#63C; float:left}#right{ height:500px; background-color:#FC3; float:left}#anniu{ width:50px; height:50px; backgroun