按钮的样式

最新推荐文章于 2023-07-06 21:36:11 发布
最新推荐文章于 2023-07-06 21:36:11 发布
阅读量697 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/samete/article/details/50162989
版权 
<!DOCTYPE html>
<html>
<head>
	<title>市场</title>
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<div class="main-content">
		<div class="address-date">
			<span class="address">全国</span>
			<div class="date">
				<p class="quote-date">当前报价日期  <span class="today">2015-12-01 周二</span></p>		
			</div>
		</div>
		<div class="logo">
			
		</div>
		<div class="ticket-category">

		
			<ul class="ticket-header clearfix">
				<li><a href="javascript:;">纸票</a></li>
				<li class="active"><a href="javascript:;">电票</a></li>
				<li><a href="javascript:;">小纸票</a></li>
				<li><a href="javascript:;">小电票</a></li>
				<li><a href="javascript:;">商票</a></li>
			</ul>


			<div class="quotes clearfix">
				<ul class="quotes-header clearfix">
					<li class="org">机构</li>
					<li class="org-category">国股</li>
					<li class="org-category">商行</li>
					<li class="org-category">三农</li>
				</ul>
				<ul class="business-quotes-header clearfix hide">
					<li class="business-org">机构</li>
					<li class="business-org-category">国股</li>
					<li class="business-org-category">商行</li>
				</ul>
			</div>
			<div class="quotes-list paper-tickets hide">
				<ul class="quotes-floor clearfix">
					<li class="quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="quote-detail exponential exponential-up">3.45</li>
					<li class="quote-detail exponential ">--</li>
					<li class="quote-detail exponential ">3.78</li>
				</ul>
				<ul class="quotes-floor clearfix">
					<li class="quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="quote-detail exponential ">3.45</li>
					<li class="quote-detail exponential exponential-down">3.67</li>
					<li class="quote-detail exponential exponential-up">3.78</li>
				</ul>
				<ul class="quotes-floor clearfix">
					<li class="quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="quote-detail exponential ">3.53</li>
					<li class="quote-detail exponential exponential-down">3.66</li>
					<li class="quote-detail exponential exponential-up">1.00</li>
				</ul>
				<ul class="quotes-floor clearfix">
					<li class="quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="quote-detail exponential ">3.45</li>
					<li class="quote-detail exponential exponential-down">3.67</li>
					<li class="quote-detail exponential exponential-up">3.78</li>
				</ul>
				<ul class="quotes-floor clearfix">
					<li class="quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="quote-detail exponential ">3.45</li>
					<li class="quote-detail exponential exponential-down">3.67</li>
					<li class="quote-detail exponential exponential-up">3.78</li>
				</ul>
				<ul class="quotes-floor clearfix">
					<li class="quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="quote-detail exponential ">3.53</li>
					<li class="quote-detail exponential exponential-down">3.66</li>
					<li class="quote-detail exponential exponential-up">1.00</li>
				</ul>
			</div>

			<div class="quotes-list ele-tickets">
				<ul class="quotes-floor clearfix">
					<li class="quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="quote-detail exponential exponential-up">3.45</li>
					<li class="quote-detail exponential ">--</li>
					<li class="quote-detail exponential ">3.78</li>
				</ul>
				<ul class="quotes-floor clearfix">
					<li class="quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="quote-detail exponential ">3.45</li>
					<li class="quote-detail exponential exponential-down">3.67</li>
					<li class="quote-detail exponential exponential-up">3.78</li>
				</ul>
				<ul class="quotes-floor clearfix">
					<li class="quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="quote-detail exponential ">3.53</li>
					<li class="quote-detail exponential exponential-down">3.66</li>
					<li class="quote-detail exponential exponential-up">1.00</li>
				</ul>
				<ul class="quotes-floor clearfix">
					<li class="quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="quote-detail exponential ">3.45</li>
					<li class="quote-detail exponential exponential-down">3.67</li>
					<li class="quote-detail exponential exponential-up">3.78</li>
				</ul>

				<ul class="quotes-floor clearfix">
					<li class="quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="quote-detail exponential ">3.45</li>
					<li class="quote-detail exponential exponential-down">3.67</li>
					<li class="quote-detail exponential exponential-up">3.78</li>
				</ul>
			</div>

			<div class="quotes-list little-paper-tickets hide">
				<ul class="quotes-floor clearfix">
					<li class="quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="quote-detail exponential exponential-up">3.45</li>
					<li class="quote-detail exponential ">--</li>
					<li class="quote-detail exponential ">3.78</li>
				</ul>
				<ul class="quotes-floor clearfix">
					<li class="quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="quote-detail exponential ">3.53</li>
					<li class="quote-detail exponential exponential-down">3.66</li>
					<li class="quote-detail exponential exponential-up">1.00</li>
				</ul>
				<ul class="quotes-floor clearfix">
					<li class="quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="quote-detail exponential ">3.45</li>
					<li class="quote-detail exponential exponential-down">3.67</li>
					<li class="quote-detail exponential exponential-up">3.78</li>
				</ul>
			</div>

			<div class="quotes-list little-ele-tickets hide">
				<ul class="quotes-floor clearfix">
					<li class="quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="quote-detail exponential exponential-up">3.45</li>
					<li class="quote-detail exponential ">--</li>
					<li class="quote-detail exponential ">3.78</li>
				</ul>
				<ul class="quotes-floor clearfix">
					<li class="quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="quote-detail exponential ">3.45</li>
					<li class="quote-detail exponential exponential-down">3.67</li>
					<li class="quote-detail exponential exponential-up">3.78</li>
				</ul>
				<ul class="quotes-floor clearfix">
					<li class="quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="quote-detail exponential ">3.45</li>
					<li class="quote-detail exponential exponential-down">3.67</li>
					<li class="quote-detail exponential exponential-up">3.78</li>
				</ul>
				<ul class="quotes-floor clearfix">
					<li class="quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="quote-detail exponential ">3.45</li>
					<li class="quote-detail exponential exponential-down">3.67</li>
					<li class="quote-detail exponential exponential-up">3.78</li>
				</ul>
				<ul class="quotes-floor clearfix">
					<li class="quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="quote-detail exponential ">3.53</li>
					<li class="quote-detail exponential exponential-down">3.66</li>
					<li class="quote-detail exponential exponential-up">1.00</li>
				</ul>
			</div>

			<div class="quotes-list business-tickets hide">
				<ul class="quotes-floor clearfix">
					<li class="business-quote-detail">
						<p class="bank-name">江苏银行</p>
						<p class="branch-bank">上海普陀支行</p>
						<p class="stars"></p>
					</li>
					<li class="business-quote-detail exponential exponential-up">3.45</li>
					<li class="business-quote-detail exponential ">3.78</li>
				</ul>
			</div>
		</div>
		<!--ticket-category end-->
		<!--
		<div class="footer">
			<ul class="clearfix">
				<li><a href="javascript:;">关注</a></li>
				<li class="active"><a href="javascript:;">市场</a></li>
				<li><a href="javascript:;">资讯</a></li>
				<li><a href="javascript:;">我的</a></li>
			</ul>
		</div>
		-->
	</div>

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.raty.min.js"></script>
	<script type="text/javascript">
		var PAPER_TICKET = "纸票";
		var ELE_TICKET = "电票";
		var LITTLE_PAPER_TICKET = "小纸票";
		var LITTLE_ELE_TICKET = "小电票";
		var BUSINESS_TICKET = "商票";

		$(".stars").raty({
			readOnly:  true,
			start:     2
		});

		//切换票类型
		$(".ticket-header li").click(function() {
			$(".ticket-header li").removeClass("active");
			$(this).addClass("active");
			var category = $(this).find("a").text();
			var currentTicket = "";
			switch(category) {
				case PAPER_TICKET:
					currentTicket = ".paper-tickets";
					break;
				case ELE_TICKET:
					currentTicket = ".ele-tickets";
					break;
				case LITTLE_PAPER_TICKET:
					currentTicket = ".little-paper-tickets";
					break;
				case LITTLE_ELE_TICKET:
					currentTicket = ".little-ele-tickets";
					break;
				case BUSINESS_TICKET:
					currentTicket = ".business-tickets";
					break;
			}
			$(".quotes-list").addClass("hide");
			$(currentTicket).removeClass("hide");
			if(currentTicket === ".business-tickets") {
				$(".quotes-header").addClass("hide");
				$(".business-quotes-header").removeClass("hide");
			} else {
				$(".quotes-header").removeClass("hide");
				$(".business-quotes-header").addClass("hide");
			}
		})

	</script>
</body>
</html>




.clearfix:after {
	content: "";
	height: 0;
	display: block;
	clear: both;
	zoom: 1;
}

.hide {
	display:none;
}

.exponential-up {
	color: green;
}

.exponential-down {
	color:red;
}

html, body {
	margin: 0;
	padding: 0;
	font-family: 'Microsoft YaHei', Helvetica, SimHei, Arial, Tahoma;
	font-size: 14px;
}

h1, h2, h3, h4, h5, h6, p, ul, li {
	margin: 0;
	padding: 0;
}

.main-content {
	width: 100%;
	margin: auto;
	position: relative;
}

.address-date {
	position: relative;
	background-color: #eeeeee;
	padding: 5px 0;
}

.quote-date {
	color: #999999;
}

.date {
	text-align: center;
}

.today {
	color: #ff9640;
}

.address {
	position: absolute;
	height: 19px;
	line-height: 19px;
	margin-left: 12px;
	color: #999999;
	cursor: pointer;
}

.logo {
	height: 60px;
}

.ticket-header {
	background: -webkit-gradient(linear,center top, center bottom,from(#ffc773), to(#ff9640));
	box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15);
}

.ticket-header li {
	list-style: none;
	float: left;
	width: 20%;
	text-align: center;
	height: 40px;
	line-height: 40px;
	color: #ffffff;
	border-left: 1px solid #ff9640;
	margin-left: -1px;
	border-top: 1px solid #ff9640;
	border-bottom: 1px solid #ff9640;
}

.ticket-header li:last-child {
	margin-right: -1px;
	border-right: 1px solid #ff9640;
}

.ticket-header li:hover a {
	
}

.ticket-header li a {
	text-decoration: none;
	display:block;
	color: #ffffff;
}

.ticket-header li.active a{
	background-color: #ffc773;
}

ul.quotes-header {
	width: 100%;
	background-color: #eeeeee;
}

ul.quotes-header li {
	list-style: none;
	float:left;
	text-align: center;
	height: 50px;
	line-height: 50px;
	color: #999999;
	font-weight: bold;
}

.quotes-header li.org {
	width:32%;
	padding-left: 4%;
	padding-right: 4%;
	text-align: left;
}

.org-category {
	width: 20%;
	cursor: pointer;
}

.quotes-floor {
	border-bottom: 1px solid #eeeeee;
	padding: 5px 0;
	cursor: pointer;
}

.quotes-floor li {
	list-style: none;
	float:left;
	text-align: center;
}

.quote-detail:first-child {
	width: 32%;
	text-align: left;
	padding-left: 4%;
	padding-right: 4%;
}

.quote-detail{
	width: 20%;
}

.exponential {
	height: 57px;
	line-height: 57px;
	font-size: 16px;
	font-weight: bold;
}

.bank-name {
	font-weight: bold;
	font-size: 16px;
}

.branch-bank {
	color: #999999;
}

.stars img {
	width: 10px;
}

/*商票*/
ul.business-quotes-header {
	width: 100%;
	background-color: #eeeeee;
}

ul.business-quotes-header li {
	list-style: none;
	float:left;
	text-align: center;
	height: 50px;
	line-height: 50px;
	color: #999999;
	font-weight: bold;
}

.business-quotes-header li.business-org {
	width:32%;
	padding-left: 4%;
	padding-right: 4%;
	text-align: left;
}

.business-org-category {
	width: 30%;
	cursor: pointer;
}

.business-quote-detail {
	width: 30%;
}

.business-quote-detail:first-child {
	width: 32%;
	padding-left: 4%;
	padding-right: 4%;
	text-align: left;
}

/*
.footer {
	position: fixed;
	bottom: 0;
	width: 398px;
	background-color: #ffffff;
	border: 1px solid #eeeeee;
}
}

.footer ul {
	list-style: none;
}

.footer ul li {
	float:left;
	width: 25%;
	text-align: center;
	height: 40px;
	line-height: 40px;
	list-style: none;
}

.footer ul li:hover {
	background-color: #eeeeee;
}

.footer ul li:hover a {
	color: #ff9640;
}

.footer ul li.active a{
	color: #ff9640;
}

.footer ul li a {
	text-decoration: none;
	display:block;
	color: #999999;
}
*/

自己仿制的按钮效果

samete
关注
专栏目录
50多个超漂亮水晶Button按钮样式大集合
07-22
50多个超级漂亮的Button按钮样式，大部分都是大家喜欢的水晶样式，水凌凌的，讨人喜欢，而且都配合了CSS实现了鼠标悬停变色，这些按钮在我们日常从事WEB前端设计时候都能用得上，或许你现在用不上，但下载收藏起来，日后用起来方便多了。
基于mvc具备可访问性的按钮设计
{ focus : web }
02-21 140
借鉴自强大的 google button .   mvc 分解： 总体架构：           Model and control :   不涉及 ui 渲染，用来表示按钮的实质，按钮具备以下数据属性：   content : 按钮显示值   value : 按钮的内在存储值   tooltip : 按钮的鼠标掠过（得到焦点）提示   d...
【Bootstrap 学习笔记】文本操作_列表_按钮_图片_表格_辅助样式_代码风格
最新发布
实力派，无需多言！
07-06 454
样式名称描述默认样式首选项成功样式btn-info一般信息警告样式btn-danger危险样式btn-link链接样式。
CSS使用classList实现两个按钮样式的切换
09-27
在一些页面我们需要使用两个按钮来回切换，怎么实现这样的功能呢？下面小编给大家带来了CSS使用classList实现两个按钮样式的切换效果，需要的朋友跟随脚本之家小编一起学习吧
Java数组和列表的区别
打孔员的博客
05-24 768
Java数组和列表的区别
漂亮的C#WPF自定义按钮样式
12-30
在C# WPF（Windows Presentation Foundation）开发中，创建自定义按钮样式是提升用户界面美观性和交互性的重要手段。WPF提供了一套强大的样式和模板系统，允许开发者完全定制控件的外观和行为。本教程将深入探讨如何...
html5分页导航按钮样式动画特效
06-24
"html5分页导航按钮样式动画特效"的主题聚焦于利用HTML5特性来实现分页导航的创新设计，旨在提升用户体验并增加网页的互动性。 分页导航是网页设计中的常见元素，尤其在处理大量数据或内容时，如博客、论坛和电子...
风格清新漂亮的CSS3开关按钮样式
06-11
本文将深入探讨如何利用CSS3创建风格清新、漂亮的开关按钮样式，包括3D效果和扁平化设计。我们将通过分析提供的`index2.html`和`index.html`文件以及相关的CSS样式来学习这一主题。 首先，让我们了解CSS3中的伪类和...
CssButton按钮样式
09-21
本文将深入探讨如何使用CSS来创建美观且功能丰富的“CssButton”按钮样式，以及相关的实践示例。 一、基础按钮样式 一个基本的HTML按钮元素看起来像这样： ```html 点击我 ``` 默认情况下，浏览器会为按钮提供一种...
常用CSS样式效果汇总
02-04 249
虽然CSS样式的学习需要我们动手多实践，需要多做案例，思致思考，但有时候注意资料的收集与整理也是非常重要的，在实际开发中往往会起到事半功倍的效果。在www.phpq.net的文档中，也提供了丰富的内容。下面一些关于按钮、文本框、表单的常用CSS样式。大家可以参考。一、按钮样式.buttoncss { font-family: "tahoma", "宋体"; /*www.phpq.net*/
html移动端按钮单击样式,移动端按钮问题以及下拉列表样式问题
weixin_28894087的博客
06-23 711
网编近期在写手机端网页页面，在应用button和option的情况下碰到了一些难题，而且找到解决方案，这里跟大伙儿共享一下。01大家可以很明显的看到，上面的立刻获取的样式跟提交取消的样式明显不一样，立刻获取的border-radius看起来明显要比提交取消的大很多。这是因为立刻获取我使用的是button，而提交取消我则是用的a标签，此时不管喔如何修改立刻获取的border-radius，都不会有任...
WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
weixin_33858249的博客
11-23 469
一．前言 　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。 本文主要内容： ScrollViewer的样式拆解及基本样式定义； ListBox集合控件的样式定义； 二．ScrollViewer自定义样式 ScrollViewer在各种列表、集合...
一定能用到的简单但实用的五种按钮样式（HTML+CSS步骤详解，含详细注释）
澎湖Java架构师的博客
05-18 3841
前言一 按钮在前端开发中往往是一个必不可少的元素，也有许多精美好看的样式资源供开发者直接使用。但博主认为，对于初学者而言，总是去cv别人做好的，而不理解其中的原理，是很不好的。 本人作为一名计科的学生，在大二也选修了校内的前端基础教程的课，但由于课时较短，老师往往不会深入讲解，许多问题无法深究。 本篇文章将会详细讲解xia五种简单的按钮样式，虽然简单，但作为基础，也很实用，且有着大学问。 文章目录 前言一 开始之前 一、鼠标悬浮，按钮背景滑动（1） 1.最终效果 2.创建元素 3. 重置浏览器样式，
几款好看的按钮样式收藏
weixin_34127717的博客
05-17 899
Button ButtonButton Button Button-2 2k3 Button .btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px...
几款好看的HTML按钮样式
热门推荐
崔小花的专栏
11-05 11万+
给大家介绍几款好看的HTML按钮样式 按钮样式一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19...
10011---Bootstrap CSS
xxxcyzyy的博客
03-13 444
表格 Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：  按钮 默认按钮 原始按钮 成功按钮 信息按钮 警告按钮 危险按钮 链接按钮 效果
高德自定义定位 按钮
SuLYi的博客
02-12 6190
高德地图进行浏览器定位并自定义定位按钮要在页面里引入高德地图API&lt;script src="https://webapi.amap.com/maps?v=1.3&amp;key=你申请的key值&amp;plugin=AMap.Walking"&gt;&lt;/script&gt;进行定位，先要去高德地图官网申请开发的key，这里官网文档写的很清楚。然后按照API文档里接入js代码，引入后高...
MVC按钮单击事件写法
崔钰玺的博客
08-02 2万+
Views Controllers public ActionResult Login(string queren) { if (queren == "确认") { } return View(); }
按钮样式
05-25
按钮样式可以通过CSS来设置，以下是一个基本的按钮样式： ```css button { background-color: #4CAF50; /* 设置背景颜色 */ border: none; /* 去掉边框 */ color: white; /* 设置字体颜色 */ padding: 10px 20px; /* 设置内边距 */ text-align: center; /* 文字居中对齐 */ text-decoration: none; /* 去掉下划线 */ display: inline-block; /* 将元素变为块级元素 */ font-size: 16px; /* 设置字体大小 */ margin: 4px 2px; /* 设置外边距 */ cursor: pointer; /* 鼠标指针变为手型 */ } ``` 你可以根据自己的需要来修改以上样式，例如可以更改背景颜色、字体颜色、字体大小等等。同时，还可以使用伪类来为按钮添加一些特效，例如:hover、:active等等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值