HTML+css 小组件

1.三角

　　代码

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			#sj{

				width: 0px;

				border:100px solid transparent;

				border-top: 100px solid #0000FF;

			}

			#sj1{

				width: 0px;

				border: 100px solid transparent;

				border-right: 100px solid #2E8B57;

				top: 455px;

				left:100px ;

				position: absolute;

			}

			#nei{

				width: 0px;

				border: 99px solid transparent;

				border-right: 99px solid white;

				top: 457px;

				left:111px ;

				position: absolute;

			}

			#sj2{

				width: 32px;

				height: 32px;

				border: 1px solid transparent;

				border-left: 10px solid #2E8B57;

				border-top: 10px solid #2E8B57;

				transform: rotate(-45deg);

			}

			#nei2{

				width: 29px;

				height: 29px;

				background-color: white;

			}

		</style>

	</head>

	<body>

		<br><br><br><br>

		<!-- 实心三角 -->

		<div id="sj"></div>

		<!-- 斜三角1 -->

		<div id="sj2"><div id="nei2"></div></div>

		<!-- 斜三角2 -->

		<div id="sj1"></div>

		<div id="nei"></div>

	</body>

</html>

　　效果

2.导航栏（上端有其他颜色）

　　代码1（利用margin）：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			#bg{

			width: 1000px;

			height: 80px;

			border: 1px solid transparent;

			background-color: #2E8B57;

			color: #255E95;

			margin: 0 auto;

			text-align: center;

			}

			.lb{

				margin-top: 10PX;

				width: 20%;

				height: 70px;

				background-color: #2E8B57;

				color: red;

				float: left;

				line-height:60px ;

			}

			.lb:hover{

				margin-top: 0px;

				background-color:  #327CD1;

				color: #333333;

				border-top: 10px solid red;

				cursor: pointer;

			}

			.lb{

				margin-top: 10PX;

				width: 20%;

				height: 70px;

				background-color: #2E8B57;

				color: red;

				float: left;

				line-height:60px ;

			}

			.lb:hover{

				margin-top: 0px;

				background-color:  #327CD1;

				color: #333333;

				border-top: 10px solid red;

				cursor: pointer;

			}

			</style>>

	</head>

	<body>

		<div id="bg">

			<div class="lb">春节</div>

			<div class="lb">中秋节</div>

			<div class="lb">清明节</div>

			<div class="lb">端午节</div>

			<div class="lb">重阳节</div>

		</div>

	</body>

</html>

　　代码2（利用边框属性）：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			#nav{

				margin: 0 auto;

				width: 1000px;

				height: 60px;

				border: 1px solid black;

			}

			#nav div{

				width: 250px;

				height: 60px;

				border-top: 2px solid transparent;/* 上边框设置透明 */

				text-align: center;

				float: left;

				line-height:56px ;/* 行高计算  行间距 = line-height – font-size */

			}

			#nav div:hover{

				border-top: 2px solid red;/* 上边框设置颜色 */

				cursor: pointer;

				background-color: #0000FF;

				color: white;

			}

		</style>

	</head>

	<body>

		<div id="nav">

			<div>chunjie</div>

			<div>chunjie</div>

			<div>春节</div>

			<div>春节</div>

		</div>

	</body>

</html>

3.搜索框

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			#aa{

				width: 100px;

				height: 60px;

				border: 1px solid grey;

				border-radius: 8px;/* 圆角 */

				text-align: center;

				line-height: 60px;

			}

			#aa:hover{

				background-color: #2E8B57;

				cursor: pointer;

				/* box-shadow: 5px 5px darkgray; *//* 设置阴影 */

				/* box-shadow: 5px 5px  10px darkgray; */

				box-shadow: 5px 5px  10px darkgray inset;

				/* box-shadow: 5px 5px darkgray; */

			}

		</style>

	</head>

	<body>

		<div id="aa">

			搜素

		</div>

	</body>

</html>

4.标签框

　　代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			.b11{width:148px;

				background-color:#FF5950;

				transform:skew(-30deg,0deg);

				margin:15px 0px 0px -6px;

			}

			.b11 div{

				transform:skew(30deg,0deg);

			}

		</style>

	</head>

	<body>

		<div class="b11">

			<div>免费体验名额20个</div>

		</div>

	</body>

</html>

　　效果

5.圆形标签

　　代码

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			.aa{

				height:24px ;

				width: 24px;

				background-color: skyblue;

				color:white;

				font-size: 12px;

				border-radius:50%;

				border: 1px solid red;

				text-align: -moz-center;

				line-height: 24px;

			}

		</style>

	</head>

	<body>

		<div class="aa">

			1

		</div>

	</body>

</html>

HTML+css 小组件的更多相关文章

css3,环绕圆环 loading,小组件
一个loading的小组件, 给其他模块调用.先上图 type:cat type:ball 第一幅loading,老鼠是一个圆形的背景图片,已经转成base64. 小猫也是图片也已经转成base64 ...
jQuery实现淘宝购物车小组件
我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章将实现淘宝购物车小组件, 用原生js可以实现吗,当然可以,可是就是任性一回,就是想用jQuery 来实现下.HTML代码不多才4行,CSS ...
jq 自定义标注小组件 $.widget
html 部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
[Asp.net core 3.1] 通过一个小组件熟悉Blazor服务端组件开发
通过一个小组件,熟悉 Blazor 服务端组件开发.github 一.环境搭建 vs2019 16.4, asp.net core 3.1 新建 Blazor 应用,选择 asp.net core 3 ...
css小技巧（1）
1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...
iOS阶段学习第34天笔记(UI小组件 UISegment-UISlider-UIStepper-UIProgressView-UITextView介绍)
iOS学习(UI)知识点整理一.UI小组件 1.UISegmentedControl 分段选择器实例代码 - (void)viewDidLoad { [super viewDidLoad]; / ...
HTML+CSS小实战案例
HTML+CSS小实战案例登录界面的美化,综合最近所学进行练习网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta htt ...
CSS小tip整理
CSS小tip整理 1.利用css在列表靠头和末尾添加箭头: /* 左箭头*/ ol a[rel="prev"]:before { content: "\00AB&quo ...
Widget小组件
一.使用步骤: 1.建立Widget的样式布局文件widght,布局只支持几种,比如,相对布局,线性布局,帧布局,布局里支持的控件也是有限的. 2.在res下建立一个新的文件夹我的命名为xml 3.在 ...

随机推荐

go beego
一. 引入 go get github.com/astaxie/beego go get gitgub.com/beego/bee go get -u gitxxx.... 更新框架编写 packa ...
Delphi中的Sender：TObject对象解析转载
https://blog.csdn.net/jl_tiny/article/details/24376661 Delphi中的Sender:TObject对象解析 procedure TForm1.B ...
如果一个文件块有130M，请问有多少个mapper
如果一个文件块有130M,请问有多少个mapper 130M的文件将被分成2个mapper. 原因:根据FileInputFormat类有一个成员变量 private static final do ...
vue中excal表格的导入和导出
注意:vue中要实现表格的导入与导出,首先要install两个依赖, npm install -S file-saver xlsx 和 npm install -D script-loader.其 ...
使用Pyppeteer进行gmail模拟登录
import asyncio import time from pyppeteer import launch async def gmailLogin(username, password, url ...
UVA Ananagrams /// map set
https://vjudge.net/problem/UVA-156 题目大意: 输入文本,找出所有满足条件的单词——该单词不能通过字母重排而得到输入的文本中的另外一个单词. 在判断是否满足条件时,字 ...
Palindrome Partition CodeForces - 932G 回文树+DP+(回文后缀的等差性质)
题意: 给出一个长度为偶数的字符串S,要求把S分成k部分,其中k为任意偶数,设为a[1..k],且满足对于任意的i,有a[i]=a[k-i+1].问划分的方案数. n<=1000000 题解: ...
2019-3-20-win10-uwp-如何自定义-RichTextBlock-右键菜单
title author date CreateTime categories win10 uwp 如何自定义 RichTextBlock 右键菜单 lindexi 2019-3-20 9:54:9 ...
BCZM : 1.4
书店促销活动,某套书一共有五卷.假设每一卷单独销售均需8欧元,多买则有折扣,具体折扣如下: 2 5% 3 10% 4 20% 5 25% 设计算法,计算出读者购买一批书的 ...
Trip
Trip 给出一个长度为n序列$\{a_i\}$,长度为m的序列$\{b_i\}$,求它们的不同lcs序列按字典序输出,$n,m\leq 80$,lcs不超过1000个,字符为26个小写字 ...

HTML+css 小组件

HTML+css 小组件的更多相关文章

随机推荐

热门专题