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.在 ...
随机推荐
- Python 数据结构_队列
目录 目录 队列 队列 Queue 队列是一种先进先出(FIFO)的数据类型, 新的元素通过 入队 的方式添加进 Queue 的末尾, 出队 就是从 Queue 的头部删除元素. 用列表来做 Queu ...
- boost库之pool编译错误
1,编译错误截图 2,解决方法 这是由于没有链接对应的库导致的错误,在编译命令中加上 -lboost_system选项即可.
- <读书笔记>如何入门爬虫？
大部分爬虫框架都是 发送请求 获得页面 解析页面 下载内容 存储内容 定个宏伟目标 淘宝1000页 知乎 豆瓣 ... python基础 list.dict:序列化爬取的内容 切片:分割爬取内容,获取 ...
- 23-Ubuntu-文件和目录命令-查看文件内容-more 和 cat
1. more---适合查看内容多的文件 格式: more 文件名 操作键 功能 空格键 显示手册页下一屏 Enter键 一次滚动手册页的一行 b 返回上一屏 f 前滚一屏 q 退出 例: more ...
- iOS开发系列-Shell脚本生成IPA
概述 在公司开发到了测试阶段需要频繁打包交付给测试,看似简单的工作,重复的流程总是感觉不是那么好,我们可以借助苹果提供的编译指令编译项目. 自动化脚本编译打包IPA 常见的iOS项目就是基于xcode ...
- 流计算与Hadoop
- Hadoop的局限与不足
- 【noi.ac-CSP-S全国模拟赛第三场】#705. mmt
给定数组a[],b[] 求$$c_i=\sum_{j=1}^{i} a_{\left \lfloor \frac{n}{j} \right \rfloor}·b_{i \bmod j}$$ 大概就是对 ...
- HttpWebRequest请求返回非200的时候 HttpWebResponse怎么接受返回错误提示
当我们使用HttpWebRequest发送请求的时候如果服务器返回的不是200状态,那么请求代码肯定会异常,其实请求和返回并没有什么异常,只是.net内部就认定了 返回的不要是200 就是异常 那么我 ...
- PHP算法之回文数
判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1: 输入: 121输出: true示例 2: 输入: -121输出: false解释: 从左向右读, ...