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.在 ...
随机推荐
- JVM内核-原理、诊断与优化学习笔记（六）：类装载器
文章目录 class装载验证流程 class装载验证流程 class装载验证流程 -加载 class装载验证流程 -链接 验证 链接 -> 验证 文件格式的验证 元数据验证(class文件简单语 ...
- 使用QSlider
1.当绘制的线性图等需要水平拖动的时候(不用qwt里面的函数),可以用QSlider,代码如下 ui.horizontalSlider->setMaximum(); //需要拖动的越缓慢,平滑它 ...
- solr +zookeeper＋tomcat 集群搭建
最近需要搭建一个cloudSolr集群,写下记录.基础环境是在centos6.5 64bit 3个下载地址: 1. 下载Solr-4.x http://lucene.apache.org/solr/d ...
- 5-MySQL高级-事务-回滚(3)
回滚 为了演示效果,需要打开两个终端窗口,使用同一个数据库,操作同一张表 step1:连接 终端1 select * from goods_cates; step2:增加数据 终端2:开启事务,插入数 ...
- SPRING+JPA+Hibernate配置方法
1.applicationContext.xml <?xml version="1.0" encoding="UTF-8"?> <beans ...
- [JZOJ3690] 【CF418D】Big Problems for Organizers
题目 题目大意 给你一棵树,然后有一堆询问,每次给出两个点. 问所有点到两个点中最近点的距离的最大值. 正解 本来打了倍增,然后爆了,也懒得调-- 显然可以在两个点之间的路径的中点处割开,一边归一个点 ...
- 【JZOJ4905】【BZOJ4720】【luoguP1850】换教室
description 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程.在可以选择的课程中,有2n节课程安排在n个时间段上.在第i(1≤i≤n)个时间段上,两节内容相同的课 ...
- 校园商铺-2项目设计和框架搭建-9验证Service
1. 新建接口 main: com.csj2018.o2o.service/AreaService.java package com.csj2018.o2o.service; import java. ...
- SpringCloudConfig
方便服务配置文件统一管理,实时更新 组成 在spring cloud config组件中,分两个角色,一是config server,二是config client Config Server是一个可 ...
- 基于VUE利用pdf.js实现文件流形式的pdf显示
首先推荐大家看一下这个demo vue-pdf.js-demo,这里面包含固定本地地址,远程pdf地址,通过打开文件的方式打开pdf 这儿我们着重介绍一下通过文件流的形式打开pdf.(所谓文件流,就是 ...