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.在 ...
随机推荐
- NtOpenProcess被HOOK,跳回原函数地址后仍然无法看到进程
点击打开链接http://www.ghoffice.com/bbs/read-htm-tid-103923.html
- HDU 2874 /// tarjan离线求森林里两点的距离
题目大意: 在一个森林里 询问 u v 两点 若不能到达输出 "Not connected" 否则输出两点距离 https://blog.csdn.net/keyboarderqq ...
- Java基础知识之常见关键字以及概念总结
static 特点: 随着类的加载而加载 优先于对象存在 被所有对象所共享 可以直接被类名调用 使用注意: 静态方法只能访问静态成员 但是非静态成员可以直接访问静态成员 静态方法中不可用使用this, ...
- java 一维数组的输出方式
1.使用传统的for()循环输出: //定义一个数组 int []array = {1,2,3,4,5}; for(int i=0;i<array.length;i++) { System.ou ...
- arm-linux-strip 的使用
3.2.1 1. 移除所有的符号信息 [arm@localhost gcc]#cp hello hello1 [arm@localhost gcc]#armlinuxstrip strip ...
- MySQL数据库的基本语法
1.MySQL数据类型数值以及浮点型介绍 2.MySQL数据类型之字符串介绍 常用的有:char.varchar.text. 3.MySQL数据类型之时间类型介绍 常用的是:timestampt,将时 ...
- Python连接数据库流行用到的第三方库
Python连接数据库流行用到的第三方库: mysqldb:只支持Python2.x mysqlclient : mysqldb的衍生版本,完全兼容mysqldb,同时支持Python3.x,安装较复 ...
- vue-router 的重定向-redirect
1. 我们主要在index.js重新设置路由的重新定向redirect参数 index.js import Vue from 'vue' import Router from 'vue-router' ...
- leetcode-212-单词搜索②
题目描述: 第一次提交:(超出时间限制) class Solution: def findWords(self, board: List[List[str]], words: List[str]) - ...
- PSCC2019常用基础操作
一.常用设置 1.界面设置(快捷键Ctrl+K):可以对PS界面的颜色.导出格式.性能等等进行设置(这里暂存盘建议设置D盘或F盘,默认C盘). 2.常用面板整理(菜单栏->窗口) 二.常用快捷键 ...