*{
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. iOS sort array 数组排序里面的对象

    一:如下代码 //对数据按次数排序 NSArray *sortArrays = [pinCiDataArray sortedArrayUsingComparator:^NSComparisonResu ...

  2. android studio教学视频资源（点开即看）

    android studio教学视频资源(点开即看) 自从Google推出android studio之后.包含github在内的非常多第三方代码库项目很多其它的採用的android studio编译 ...

  3. docker build 的 cache 机制

    cache 机制注意事项 可以说,cache 机制很大程度上做到了镜像的复用,降低存储空间的同时,还大大缩短了构建时间.然而,不得不说的是,想要用好 cache 机制,那就必须了解利用 cache 机 ...

  4. esriControlsMousePointer常量

    控制鼠标指针选项. 不变 值 描述 esriPointerParentWindow -1 指针指定的父窗口或窗体. esriPointerDefault 0 默认指针,箭头一样. esriPointe ...

  5. js调用打印机 打印整体或部分

    有时前端的项目中需要添加打印的功能,首先要知道打印分为整体打印和局部打印两种,而局部打印又可细分为局部打印指定的部分,和局部打印指定部分之外的部分.实例比文字看起来更清晰,下面我将用代码来描述 1.整 ...

  6. 最实用、最常用的jQuery代码片段

    // chinacoder.cn JavaScript Document $(document).ready(function() { //.filter(":not(:has(.selec ...

  7. Android studio 使用心得(一)—android studio快速掌握快捷键

    大家都是从eclipse转过来了,所以早就熟悉了eclipse那一套快捷键. File—>settings—>keymap–>选择eclipse就搞定 话是这么说,但是自动化提示的变 ...

  8. Ubuntu13.04使用Jlink和ST-Link V2烧写STM32F1x和STM32F4x

    近期做研究openpilot和crazyflie2.0,都须要在Linux进行代码的编写和烧录,所以研究了下Linux下如何使用Jlink,还有开源的支持多个仿真器的openocd,可是困难重重.总是 ...

  9. 简单的刚開始学习的人配置Android SDK+ADT+Eclipse

    1.下载JDK.Android SDK和Eclipse(Eclipse 版本号最好新一些) 注意:下载的SDK最好和后面的ADT配套,否则Eclipse可能会报错. 如:SDK 21.0.1 相应 A ...

  10. Wpf 抽屉效果

    在android开发中有抽屉效果,就是在页面的边上有一个按钮,可以通过点击或者拖拽这个按钮,让页面显示.Wpf也可以实现相同的效果. 主要是通过一个DoubleAnimation和RectAnimat ...