*{
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. 转： APK签名校验绕过

    转: http://drops.wooyun.org/mobile/4296 APK签名校验绕过 3xpl0it · 2014/12/11 10:41 0x01 Android签名机制 将APK重命名 ...

  2. 2014ACM/ICPC亚洲区域赛牡丹江现场赛总结

    不知道怎样说起-- 感觉还没那个比赛的感觉呢?如今就结束了. 9号.10号的时候学校还评比国奖.励志奖啥的,由于要来比赛,所以那些事情队友的国奖不能答辩.自己的励志奖班里乱搞要投票,自己又不在,真是无 ...

  3. 云计算之路-阿里云上：踩着RDS的2个坑

    最近发现阿里云RDS管理控制台升级了,界面更好看了,操作也更方便了,但在美丽的外表下却藏着坑,不小心被我们睬着了. 8月31日下午,我们在RDS管理控制台中创建了一个新的数据库帐号,创建时选择了绑定多 ...

  4. web页面内容优化管理与性能技巧

    来源:GBin1.com 回 想一下,以前我们不得不花费大量时间去优化页面内容(图片.CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪 存文件,里面包含的有视频或者图片 ...

  5. HKC显示器开机亮一下就不显示了

    一台HKC显示器开机显一下就黑了 最近加了一个显示器做扩展屏幕,可以不亮有问题啊     芯片坏了引起的~ 不是自己的,不能拆机啊啊   文章来源:刘俊涛的博客 欢迎关注,有问题一起学习欢迎留言.评论 ...

  6. 【FinancialKnowledge】拨备

    一句话: 银行拨备就是银行贷款损失减值准备的俗称,其相当于为承担风险和损失的金融资产计提的准备金 通俗易懂的解释见:https://wallstreetcn.com/articles/3307725

  7. Webbrowser控件判断网页加载完毕的简单方法

    一般情况下,当ReadyState属性变成READYSTATE_COMPLETE时,Webbrowser控件会通过触发DocumentCompleted事件来指示网页加载完毕.但当加载的网页包含fra ...

  8. (C#)Windows Shell 外壳编程系列1 - 基础，浏览一个文件夹

    1 - 基础,浏览一个文件夹 我们知道,在win32中是以外壳名字空间的形式来组织文件系统的,在外壳名字空间里的每一个对象(注)都实现了一个IShellFolder的接口,通过这个接口我们可以直接查询 ...

  9. jquery中ajax的相关事件汇总

    Jquery ajax事件分类 (一) 局部事件 local events 局部事件:在单个Ajax请求对象中绑定的事件,每个 Ajax 请求对象能够依据须要绑定自己的局部事件 .局部事件仅仅会被那个 ...

  10. 状压dp Mondriaan&#39;s Dream poj2411

    超经典的一道题目,实现这题的方法也有非常多种 1.利用DFS建立矩阵,然后通过高速矩阵幂得到答案(运用于min(m,n)比較小.可是max(m,n)很大的情况) 2.利用dp状压解决 第一种在我的还有 ...