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.在 ...
随机推荐
- Java-Idea-笔记：lombok、微信支付依赖
ylbtech-Java-Idea-笔记:lombok.微信支付依赖 1. idea-install-lombok返回顶部 1.0. P:问题描述Idea每打开一个类文件,类名就标红,不影响运行,但g ...
- Area--->AreaRegistrationContext.MapRoute
文章引导 MVC路由解析---IgnoreRoute MVC路由解析---MapRoute MVC路由解析---UrlRoutingModule Area的使用 Area--->AreaRegi ...
- Mybatis 使用的 9 种设计模式，真是太有用了～
Java技术栈 ) { name = fullname.substring(0, delim); children = fullname.substring(delim + 1); ...
- Spring Boot 整合 Shiro+Thymeleaf
1.导包 <!-- springboot 与 shiro 的集成--> <dependency> <groupId>org.apache.shiro</gro ...
- (转)protobuf-----Mac 机器安装
转自: https://blog.csdn.net/u014534808/article/details/80203018 安装之旅 1. 下载protobufprotobuf下载页面 在此页面选择合 ...
- 01.SpringMVC快速入门
1.导入jar包 2.在web.xml中配置前端控制器 <!-- spring前端控制器 --> <servlet> <servlet-name>springmvc ...
- scala中ArrayBuffer简单使用
import scala.collection.mutable.ArrayBuffer /** * 与Array区别: * 1.Array是不可变的,不能直接地对其元素进行删除操作,只能通过重赋值或过 ...
- CSS案例3（在线教育网站）
案例练习目的是总结以前的css和html 还有ps的使用. 制作步骤: 准备相关文件.(内部样式表) html文件(index.html) 图片文件 准备CSS 初始化. 书写结构和样式 确定版心(是 ...
- MyEclipse搭建Structs2开发环境
MyEclipse10搭建Strust2开发环境 - 孤傲苍狼 - 博客园https://www.cnblogs.com/xdp-gacl/p/3496242.html
- jquery学习笔记(二)：DOM元素操作
内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性 语法:attr(name) 参数name表示属性的名称 2.设置元素的属性 单个属性设置语法:attr(key,val ...