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.在 ...
随机推荐
- UVA 240 Variable Radix Huffman Encoding
题目链接:https://vjudge.net/problem/UVA-240 题目大意 哈夫曼编码是一种最优编码方法.根据已知源字母表中字符出现的频率,将源字母表中字符编码为目标字母表中字符,最优的 ...
- MyBatis中使用RowBounds对查询结果集进行分页
MyBatis可以使用RowBounds逐页加载表数据.RowBounds对象可以使用offset和limit参数来构建.参数offset表示开始位置,而limit表示要取的记录的数目 映射文件: & ...
- Xpath-Assertion断言
- 网页设计师神器，快速生成网站配色、字型等风格的工具——Stylify Me
在设计网页时,最重要的一项便是网页的配色,颜色的使用在网页制作中起着非常关键的作用,不同的网站有着自己不同的风格,也有着自己不同的颜色.今天给大家介绍一个在线生成网站配色的工具——Stylify Me ...
- websokect的原理
WebSocket 机制 以下简要介绍一下WebSocket的原理及运行机制. WebSocket是HTML5下一种新的协议.它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通 ...
- python 通过zabbix api获得所有主机的ip
#!/usr/bin/env python3 #coding=utf-8 import jsonimport requests#from urllib import requests, parse,e ...
- NIO教程笔记
NIO操作文件部分详解 NIO——New IO,也可以理解为非阻塞IO(Non Blocking IO).可以替代旧IO,更高效的支持读写(文件读写,网络读写).但文件操作都是阻塞的.学习NIO首先要 ...
- vue项目 上传到git
1. git add . 效果: 2. git commit -m '' 3. git push 效果: 4.在码云上就可以看到修改啦 2018-05-19 08:52:52
- delphi 流程单打印
1.添加声明 f_count1: double; 2.得到拆分页数量 // Modified by 884 2018-04-20 14:50:18 AM0057 with aqTpCount do b ...
- JQuery ajax提交表单及表单验证
JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目 注:经过验证,formValidator只适合一个 ...