*{
margin:0;
padding:0;
list-style-type:none;/*手动清楚空隙*/
font-size:12px;
font-family:"微软雅黑"
}
.searchbox {
width:520px;
height:80px;
margin:40px auto 0 auto;
border:1px solid red;
}
.searchbox ul{
width:500px;
/*float:left;*/
height:35px;
/*标签间隙*/
}
.searchbox ul li{
float:left;
}
.searchbox ul li a {
text-decoration:none;/*下划线*/
color:#000000;
font-size:14px;
font-weight:bold;
line-height:35px;
padding:10px 25px;/*上下 左右间隙*/ /*内容*/
}
.searchbox ul li.style1{
background:#000;
color:#fff;
}
.searchbox ul li.style2{
background:#ff0000;
color:#fff;
}
.searchbox ul li.style3{
background:#ff9900;
color:#fff;
}

.bodys{
width:700px;
height:200px;
margin-left:220px;
}
.bodys input{
width:390px;
height:30px;
line-height:30px;
padding:0 10px;
float:left;
}

.bodys.one{
border:3px #000 solid;
}
.bodys.two{
border:3px #ff0000 solid;
}
.bodys.three{
border:3px #ff9900 solid;
}
.bodys.one1{
background:#000000;
}
.bodys.two2{
background:#ff0000;
}
.bodys.three3{
background:#ff9900;
}
.bodys button{
float:left;
border:0;
height:36px;
width:100px;
color:#000000;
line-height:36px;
text-align:center;/*shupingjuzhong */
overflow:hidden;/*鼠标移除*/
}

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>淘宝选项卡</title>
<link href="style/table.css" rel="stylesheet" />
<link href="style/table.css" rel="stylesheet" />
<meta charset="utf-8" />
</head>

<body>
<div class="searchbox">
<ul>
<li><a herf="#"class="style1">宝贝</a></li>
<li><a herf="#" ="style1">天猫</a></li>
<li><a herf="#" ="style1">店铺</a></li>
</ul>
</div>
<div>
<div class="bodys">
<p><input type="text"value=""id=""class="one"placeholder="输入宝贝"/>
<button class="one1">搜索</button>
</p>
<p>
<input type="text" value="" id="" class="two" placeholder="输入宝贝" />
<button class="two">搜索</button>
</p>
<p>
<input type="text" value="" id="" class="three" placeholder="输入店铺" />
<button class="three">搜索</button>
</p>
</div>
</body>
</html>

table与html实例的更多相关文章

  1. HTML中表格table标签的实例

    一.表格有边框,第一行居中对齐 二.表格没有边框 三.表格有水平标题 四.表格有垂直标题 五.合并行单元格 colspan合并单元格 六.表格有单元格边距(内边距) 七.表格没有单元格间距 八.表格有 ...

  2. 浅谈Oracle函数返回Table集合

    在调用Oracle函数时为了让PL/SQL 函数返回数据的多个行,必须通过返回一个 REF CURSOR 或一个数据集合来完成.REF CURSOR 的这种情况局限于可以从查询中选择的数据,而整个集合 ...

  3. Jquery操作-（多种实例）--未完

    一.Jquery简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. jQuery对象 jQuer ...

  4. Oracle之Check约束实例具体解释

    Oracle | PL/SQL Check约束使用方法具体解释 1. 目标 实例解说在Oracle中怎样使用CHECK约束(创建.启用.禁用和删除) 2. 什么是Check约束? CHECK约束指在表 ...

  5. Table的两种处理方法记录

    简单记录一下,方便以后参考:基于JQuery实现 一种是滚轮,一种是翻页 滚轮的代码实现: <div class="col-md-12" style="width: ...

  6. layui table动态表头 改变表格头部 重新加载表格

    改变头部原理: 删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变 明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持con ...

  7. 项目总结17-使用layui table分页表格

    项目总结17-使用layui table分页表格总结 前言 在项目中,需要用到分页的表格来展示数据,发现layui的分页表格,是一个很好的选择:本文介绍layui table分页表格的前后端简单使用 ...

  8. Lua之table

    Lua table(表) 参考:http://www.runoob.com/lua/lua-tables.html table 是 Lua 的一种数据结构用来帮助我们创建不同的数据类型,如:数字.字典 ...

  9. HTML5基础实例（三）

    不知道从哪说起那就一段一段代码的说吧 实例一:iframe框架显示 写一个这样的网页: 分析: 1.需要三个链接,一个是默认的百度链接,默认显示在那个框里,另外:两个是点击跳转的超链接. 2.需要if ...

随机推荐

  1. dubbo-monitor安装监控中心，管理控制台安装

    一.安装监控中心 1.创建安装目录 2.解压 上传文件解压文件 解压 3.修改配置文件 4.启动 如果一直出现点.只需要加大内存即可,内存至少大于1024,然后reboot重启 5.测试 二.安装管理 ...

  2. ffmpeg代码解析

    void avdevice_register_all(void){    static int initialized;    if (initialized)        return;    i ...

  3. 记一次MySQL找回用户数据

    事情经过 有天,我们公司外区的一个销售C说他8月3号以前的工作流记录找不到了.问清缘由,原来是更新了微信号(我们公司的工作流是基于企业微信开发的).经过分析,微信号和流程数据并没什么关系,所以初步得出 ...

  4. NSPredicate模糊搜索和精确搜索

    #pragma mark ------------ searchBar 代理方法 -------------------------- - (void)searchBar:(UISearchBar * ...

  5. 【MVC5】后台修改的Model值反映不到客户端的问题

    画面上的检索结果有翻页功能,就在画面上追加了几个隐藏控件保存上次检索时的检索条件. 检索时更新这些隐藏控件的值,Debug时确实把Model中对应的属性值变掉了,但是到了客户端又变回之前的值了. 百思 ...

  6. draw call 理解和优化

    draw call是openGL的描绘次数(directX没怎么研究,但原理应该差不多)一个简单的openGL的绘图次序是:设置颜色→绘图方式→顶点座标→绘制→结束.每帧都会重复以上的步骤.这就是一次 ...

  7. 算法笔记_167:算法提高 矩阵翻转(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 Ciel有一个N*N的矩阵,每个格子里都有一个整数. N是一个奇数,设X = (N+1)/2.Ciel每次都可以做这样的一次操作:他从矩阵 ...

  8. C# 取时间段年、月、日、季度

    DateTime dt = DateTime.Now;  //当前时间             DateTime startWeek = dt.AddDays(1 - Convert.ToInt32( ...

  9. DiskLrucCache使用Demo(强烈推荐，非常好用)

    DiskLrucCache使用的Demo,这个demo是从网络获取一张图片,保存到本地缓存中(sdcard和内存),当下载成功后.再打开不会又一次向网络请求图片.而是世界使用本地资源. 要使用Disk ...

  10. python访问纯真IP数据库的代码

    通过IP地址判断客户端是网通的还是电信的. 使用一个纯文本的IP纯真数据库,用Python写了一个小程序. 核心代码: #!/usr/bin/env python #site www.jbxue.co ...