*{
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. (六)SSO之CAS框架扩展 改动CAS源代码实现与ESS动态password验证对接

    题记: 偶尔的偶尔我们会听到这个站点的数据泄露了,那个站点的用户数据泄露了.让用户又一次改动登录password,所以,对于用户数据安全性越发的引起我们的重视了,尤其是一些保密性要求高的站点.更须要添 ...

  2. Android中为你的应用程序添加桌面快捷方式

    public void ShortCut(View view){ createDeskShortCut(this,getString(R.string.short_cut),R.drawable.up ...

  3. 基于Thrift的跨语言、高可用、高性能、轻量级的RPC框架

    功能介绍 跨语言通信 方便的使Java.Python.C++三种程序可以相互通信 负载均衡和容灾处理 方便的实现任务的分布式处理 支持服务的水平扩展,自动发现新的服务节点 能够兼容各种异常情况,如节点 ...

  4. 让Vs2013 完美支持EF6.1 Code First with Oracle 2015年12月24日更新

    本文是对下文的补充,切勿以为我是全盘复制哦 连接: http://www.cnblogs.com/wlflovenet/p/4187455.html Normal 0 7.8 磅 0 2 false ...

  5. 【Linux】压缩与解压

    一: 下面这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个: tar-c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件 下面的参数是根据需要在 ...

  6. 关于nodejs中npm命令没有反应的解决方法

    最近在学习angularJS,正在做一个单页面应用,在安装nodejs之后,发现命令行传了输入npm -v能输出结果外,其余npm的任何操作都没有反应,一开始我以为是下载的比较慢,等了半小时还是没动静 ...

  7. AFN访问https设置

    AFN访问https的时候需要设定如下两个属性: manager.securityPolicy.allowInvalidCertificates = YES; manager.securityPoli ...

  8. 部署NopCommerce商城系统问题整理

    NopCommerce是一个很棒的开源商城系统,下面整理一下我在部署使用NopCommerce系统中的一些问题. 我使用的是NopCommerce3.9版本. 1.安装 安装教程网上很多,这里不细说, ...

  9. 转：数据库的快照隔离级别（Snapshot Isolation）

    数据库的快照隔离级别(Snapshot Isolation)   隔离级别定义事务处理数据读取操作的隔离程度,在SQL Server中,隔离级别只会影响读操作申请的共享锁(Shared Lock),而 ...

  10. word2vector 理解入门

    1.什么是word2vector? 我们先来看一个问题,假如有一个句子 " the dog bark at the mailman". 假如用向量来表示每个单词,我们最先想到的是用 ...