按钮的样式

最新推荐文章于 2023-07-06 21:36:11 发布
最新推荐文章于 2023-07-06 21:36:11 发布
阅读量676 收藏
点赞数
分类专栏： 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
50多个超漂亮水晶Button按钮样式大集合
07-22
50多个超级漂亮的Button按钮样式，大部分都是大家喜欢的水晶样式，水凌凌的，讨人喜欢，而且都配合了CSS实现了鼠标悬停变色，这些按钮在我们日常从事WEB前端设计时候都能用得上，或许你现在用不上，但下载收藏起来，日后用起来方便多了。
基于mvc具备可访问性的按钮设计
{ focus : web }
02-21 111
借鉴自强大的 google button .   mvc 分解： 总体架构：           Model and control :   不涉及 ui 渲染，用来表示按钮的实质，按钮具备以下数据属性：   content : 按钮显示值   value : 按钮的内在存储值   tooltip : 按钮的鼠标掠过（得到焦点）提示   d...
【Bootstrap 学习笔记】文本操作_列表_按钮_图片_表格_辅助样式_代码风格
最新发布
DeepLearning_的博客
07-06 423
样式名称描述默认样式首选项成功样式btn-info一般信息警告样式btn-danger危险样式btn-link链接样式。
CSS使用classList实现两个按钮样式的切换
09-27
在一些页面我们需要使用两个按钮来回切换，怎么实现这样的功能呢？下面小编给大家带来了CSS使用classList实现两个按钮样式的切换效果，需要的朋友跟随脚本之家小编一起学习吧
Java数组和列表的区别
打孔员的博客
05-24 706
Java数组和列表的区别
RadioButton 改按钮样式.zip
09-04
在"RadioButton 改按钮样式.zip"这个压缩包中，很可能是包含了一个或多个XAML文件，这些文件用于定义自定义的RadioButton样式。XAML（eXtensible Application Markup Language）是WPF用来描述UI元素和它们的布局、...
CssButton按钮样式
09-21
本文将深入探讨如何使用CSS来创建美观且功能丰富的“CssButton”按钮样式，以及相关的实践示例。 一、基础按钮样式 一个基本的HTML按钮元素看起来像这样： ```html 点击我 ``` 默认情况下，浏览器会为按钮提供一种...
WPF炫酷旋转按钮样式
03-24
**WPF炫酷旋转按钮样式**是Windows Presentation Foundation（WPF）中的一种创新设计，用于创建具有视觉吸引力的用户界面元素。WPF是.NET Framework的一部分，提供了丰富的图形和UI功能，使得开发人员能够构建出美观...
网页常用css3按钮样式代码
11-05
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的样式控制功能，尤其是在创建美观且具有交互性的按钮样式方面。本资源“网页常用css3按钮样式代码”包含了一系列实用的CSS3代码片段，帮助设计师和前端...
50超炫的按钮样式
11-03
在网页设计中，按钮样式是用户体验的一个重要组成部分。"50超炫的按钮样式"集合提供了丰富的设计资源，旨在帮助开发者和设计师创造出吸引眼球且功能性强的交互元素。这个压缩包包含三个主要文件：`button.css`、`...
常用CSS样式效果汇总
02-04 232
虽然CSS样式的学习需要我们动手多实践，需要多做案例，思致思考，但有时候注意资料的收集与整理也是非常重要的，在实际开发中往往会起到事半功倍的效果。在www.phpq.net的文档中，也提供了丰富的内容。下面一些关于按钮、文本框、表单的常用CSS样式。大家可以参考。一、按钮样式.buttoncss { font-family: "tahoma", "宋体"; /*www.phpq.net*/
html移动端按钮单击样式,移动端按钮问题以及下拉列表样式问题
weixin_28894087的博客
06-23 664
网编近期在写手机端网页页面，在应用button和option的情况下碰到了一些难题，而且找到解决方案，这里跟大伙儿共享一下。01大家可以很明显的看到，上面的立刻获取的样式跟提交取消的样式明显不一样，立刻获取的border-radius看起来明显要比提交取消的大很多。这是因为立刻获取我使用的是button，而提交取消我则是用的a标签，此时不管喔如何修改立刻获取的border-radius，都不会有任...
WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
weixin_33858249的博客
11-23 433
一．前言 　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。 本文主要内容： ScrollViewer的样式拆解及基本样式定义； ListBox集合控件的样式定义； 二．ScrollViewer自定义样式 ScrollViewer在各种列表、集合...
一定能用到的简单但实用的五种按钮样式（HTML+CSS步骤详解，含详细注释）
澎湖Java架构师的博客
05-18 3472
前言一 按钮在前端开发中往往是一个必不可少的元素，也有许多精美好看的样式资源供开发者直接使用。但博主认为，对于初学者而言，总是去cv别人做好的，而不理解其中的原理，是很不好的。 本人作为一名计科的学生，在大二也选修了校内的前端基础教程的课，但由于课时较短，老师往往不会深入讲解，许多问题无法深究。 本篇文章将会详细讲解xia五种简单的按钮样式，虽然简单，但作为基础，也很实用，且有着大学问。 文章目录 前言一 开始之前 一、鼠标悬浮，按钮背景滑动（1） 1.最终效果 2.创建元素 3. 重置浏览器样式，
几款好看的按钮样式收藏
weixin_34127717的博客
05-17 881
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 401
表格 Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：  按钮 默认按钮 原始按钮 成功按钮 信息按钮 警告按钮 危险按钮 链接按钮 效果
高德自定义定位 按钮
SuLYi的博客
02-12 6107
高德地图进行浏览器定位并自定义定位按钮要在页面里引入高德地图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代码，引入后高...
按钮样式
05-25
按钮样式可以通过CSS来设置，以下是一个基本的按钮样式： ```css button { background-color: #4CAF50; /* 设置背景颜色 */ border: none; /* 去掉边框 */ color: white; /* 设置字体颜色 */ padding: 10px 20...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值