*{
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. 转：关于Android机型适配这件小事儿

    http://www.umindex.com/devices/android_resolutions 大家都知道Android机型分裂严重,在开发Android App的时候永远都面临适配N多机型的问 ...

  2. RESTful最佳实践

    哲学 不要为了RESTful而RESTful 在能表达清楚的情况下,简单就是美 接口路径设计 接口设计原则 URI指向的是唯一的资源对象 示例: 指向ID为yanbo.ai的Account对象 GET ...

  3. .NET 之 有效预防.NET应用程序OOM

    大部分的内存溢出(及内存泄漏)都和不好的开发习惯有直接关系,以下几个方式可以有效预防OOM. 一.批量和分页 每个合格的coder对数据的处理,必须要有分页或批量多次的意识.大数据量的读取或查询结果集 ...

  4. OpenCV中的矩阵和图像类型

    任务刚刚做完,就迫不及待的来写写在OpenCV中常见的几类数据类型: 在使用OpenCV时我们时常会碰到IplImage这个数据类型,IplImage就是我们通常说的“图像”进行编码的基本结构,这些图 ...

  5. ES6 编程风格

    1.块级作用域 (1)使用let代替var 好处:变量应该只在其声明的代码块内有效:var命令存在变量提升效用,let命令没有这个问题. (2)全局常量 在let和const之间,建议优先使用cons ...

  6. C++11 std::async 包装实体店：：packaged_task

    更好的方式 C++11中提供了操作多线程的高层次特性. std::packaged_task 包装的是一个异步操作,相当与外包任务,好比我大阿里把电话客服外包给某某公司. std::future 提供 ...

  7. struts2 ValueStack的作用

    Value Stack的作用: 1.       可以作为一个数据中转站 2.       用于在前台-后台之间传递数据,最典型的做法就是struts2标签也ognl表达式的结合.我用得最多的就是数据 ...

  8. Procedure for installing and setting Sun JDK Java on Default Amazon Linux AMI

    # First verify the version of Java being used is not SunJSK. java -version   # Get the latest Sun Ja ...

  9. jenkins部署前端node项目实例

    Jenkins 分发文件用到rsync命令   在 /etc/passwd中 修改 jenkins 为 /bin/bash jenkins:x:494:494:Jenkins Automation S ...

  10. HTML5&amp;CSS3初学者指南

    介绍 网络时代已经到来.现在对人们来说,每天上网冲浪已经成为一种最为常见的行为. 一个典型的网页是由文本.图像和链接组成的.除去内容上的差异,不同网站的网页也具有不同的外观和感受,以实现在网络上建立自 ...