固定页眉页脚+搜索框

最新推荐文章于 2019-10-10 15:02:40 发布
最新推荐文章于 2019-10-10 15:02:40 发布
阅读量728 收藏 1
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyuan_07/article/details/47946481
版权

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="com.svv.dms.web.util.HIUtil" %>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta charset="utf-8" />
<title></title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" type="text/css" href="style.css" />

<style type="text/css">


</style>
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden}
body{height:100%;overflow:auto}
#MyDiv{position:absolute}
</style>
<![endif]-->

</head>
<body>
<div id="container">

<!-- header start -->
<div class="header" id="header" style=" background-color:#8CBF4E;">
<div  style="width:90px;height:10px; disable:true;"></div>
<table  width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:5px;" >
    <tr>
        <td align="center"> <a href="#" οnclick="refresh();">刷新</a></td>
        <td align="center"><span id = "main" style="color:#fff;">我的仓库</span></td>
        <td align="center"><a href="#" >添加</a></td>
    </tr>
</table>
<!-- search start -->
<div class="search" style="margin-top:12px;">
         <div style="width:15px;height:36px;float:left;" id="search-left"></div><input type="text" class="box" name="s" id="search" class="inputText" placeholder="搜索" x-webkit-speech>
         <img src="./doc/images/search_show_icon_new.png" style="width:20px;height:20px;"  οnclick="search();"/>
        <!--    <button class="btn" title="SEARCH" οnclick="search();"> </button>-->
</div>
<!-- search end -->
</div>
<!-- header end -->


<!-- footer start -->
<div class="position" id="ff" >
<center>
<table  width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:7px;margin-bottom:5px;">
    <tr>
        <td align="center"> <img src="./doc/images/b_tab_store_normal.png" style="width:35px;height:25px;"/></td>
        <td align="center"><img src="./doc/images/b_tab_orders_normal.png" style="width:35px;height:25px;"/></td>
        <td align="center"><img src="./doc/images/b_tab_home_normal.png" style="width:35px;height:25px;"/></td>
    </tr>
    <tr>
        <td align="center"><a href="#" >仓库</a></td>
        <td align="center"><a href="#" >订单</a></td>
        <td align="center"><a href="#" >我的</a> </td>
    </tr>
</table></center>
<div style="width:100%;height:40px;"></div>
</div>
 <!-- footer end -->
</div>
</body>
</html>


-----------------------style.css-------------------------------

    body {
        margin:0;
        padding:0;
    }
    table td{
        font-size:18px;
    }
    #mid {
           
        margin-top:60dp;
        width:260px;
       
    }
    .loginForm {  
        
        z-index:0;
        border:none;  
        background-color:#FFF;
        margin-left:0dp;
        height:250px;
        width:190dp;
       
    }
    .loginForm:before {
        content:'';
         border:none;  
        position:absolute;
        z-index:-1;
        top:5px;
        bottom:5px;
        left:5px;
        right:5px;
        box-shadow: 0 0 0 1px #FFF;
        filter:alpha(opacity=0);
    }
    .loginForm h1 {
        text-transform:uppercase;
        text-align:center;
        color:#666;
        line-height:3em;
        margin:16px 0 20px 0;
        letter-spacing: 4px;
        font:normal 26px/1 Microsoft YaHei, sans-serif;
    }
    fieldset {
        border:none;
        padding:10px 10px 0;
    }
    fieldset input[type=text] {
        background:url(../../doc/images/login_id_icon.png) 4px 5px no-repeat;
        background-size:20px 20px;
    }
    fieldset input[type=password] {
        background:url(../../doc/images/login_pwd_icon.png) 4px 5px no-repeat;
         background-size:20px 20px;
    }
    fieldset input[type=text], fieldset input[type=password] {
        width:100%;
        line-height:2em;
        font-size:12px;
        height:24px;
        border:none;
        padding:3px 4px 3px 2.2em;
        width:200px;
    }
    fieldset input[type=button] {
        text-align:center;
        padding:2px 20px;
        line-height:2em;
        border:1px solid #8CBF4E;
        border-radius:3px;
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9800', endColorstr='#FF6900');
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9800', endColorstr='#FF6900')";
        height:30px;
        cursor:pointer;
        letter-spacing: 4px;
        color:#FFF;
        font-weight:bold;
    }
    fieldset input[type=button]:hover {
        background: -webkit-gradient(linear, left top, left 24, from(#FF9800), color-stop(0%, #FF6900), to(#FF9800));
        background: -moz-linear-gradient(top, #FF9800, #FF6900 0, #FF9800 24px);
        background:-o-linear-gradient(top, #FF6900, #FF6900 0, #FF9800 24px);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF6900', endColorstr='#FF9800');
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF6900', endColorstr='#FF9800')";
    }
    .inputWrap {
        background: -webkit-gradient(linear, left top, left 24, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
        background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 24px);
        background: -o-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 24px);
        border-radius:3px;
        border:1px solid #CCC;
        margin:10px 10px 0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#FFFFFF');
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#FFFFFF')";
    }
    fieldset input[type=checkbox] {
        margin-left:10px;
        vertical-align:middle;
    }
    fieldset a {
        color:blue;
        font-size:12px;
        margin:6px 0 0 10px;
        text-decoration:none;
    }
    fieldset a:hover {
        text-decoration:underline;
    }
    fieldset span {
        font-size:12px;
    }
    .mele-parallax7 {
        background: #8CBF4E;
        background-repeat: no-repeat;
        background-size:cover;
           width: 230px;;
        min-height: 40px;
    }
    .mele-button-midlle {
        background: #8CBF4E;
        background-repeat: no-repeat;
        background-size:cover;
           width: 60px;
        min-height: 30px;
        color:#fff;
        border:0;
    }
    .mele-button-midlle-wight {
        background: #fff;
        background-repeat: no-repeat;
        background-size:cover;
           width: 10px;
        min-height: 30px;
        color:#fff;
        border:0;
    }
    A {text-decoration: none; color:#8CBF4E}
    
@charset "utf-8";

/**
FileName:        style.css
Version:         1.0.0(2010.09.01)
Website:         PS
Author:          Infinity arts vison,184586775@qq.com
Page Width:      1000px;
**/

/* CSS Document */


*{margin:0; padding:0;}
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; width:100%; margin:0 auto; background:url(../bg/img2.jpg) no-repeat center 113px;}
html{ overflow-x:hidden;}
li,ol{list-style:none;}
a{text-decoration:none; cursor:pointer;}
a img{border:0;}
.clear{clear:both;}
h1, h2, h3, h4, h5, h6, p, span{font-weight:normal;}
i{font-style:normal;}

.header{
    width:100%;
     position:fixed;
     left:0px; top:0px;
     z-index:1001;
     background-color: #8CBF4E;

     margin-left:auto;
     margin-right:auto;
     background: url(../images/3x.png) repeat ;
     }
.header a,header a{ color:#FFF}
.position{width:100%; height:56px;  position:fixed; left:0px; bottom:0px; z-index:1001; background-color: #F0F0F0;}

.innerWrapper{ display:block; margin:0 auto; width:1000px; height:60px;position:relative;}

* html .position {position:absolute;bottom:0px;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}

* html .position {position:absolute;top:0px;bottom:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
    
    
/* 弹出框*/
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 40%;
left: 10%;
width: 80%;

border: 1px solid ;
background-color: white;
z-index:1002;
overflow: auto;
}
.white_content_small {
display: none;
position: absolute;
top: 30%;
left: 30%;
width: 40%;

border: 16px solid ;
background-color: white;
z-index:1002;
overflow: auto;
}

/*搜索框*/
.search {
    padding: 0px;
    border: none;
    background: #F0F0F0;
}



.search input, .search button {
    border: none;

}
.search input.box {
    height: 35px;
    width: 85%;
    margin-right: 0px;
    padding-right: 0px;
    background: #fff;
    margin: 1px;
}

.search button.btn {
    border: none;
    width:35px;
    height: 28px;
    margin: 0px ;
 
    background: url(../images/search_show_icon_new.png) no-repeat top right;
}
/*设置下架半透明*/
#gry{
filter:alpha(opacity=50);  /*支持 IE 浏览器*/
-moz-opacity:0.30; /*支持 FireFox 浏览器*/
opacity:0.30;  /*支持 Chrome, Opera, Safari 等浏览器*/

}

 .ibox{
    height: 35px;
   
    margin-right: 0px;
    padding-right: 0px;
    background: #fff;
    margin: 1px;
}





xyuan_07
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Div层弹出
学习笔记
12-08 506
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 弹出居中层 html,body {height:100%; margin:0px; font-size:12px;} .mydiv { background-color: #FFCC66; bo
框架frame布局的简单例子
04-30
例如，`header.html`、`leftnav.html`、`content.html`和`footer.html`分别代表页眉、左侧导航、主要内容和页脚。`scrolling`属性用于控制内容区域是否显示滚动条，`"no"`表示不显示，`"auto"`表示根据内容自动决定...
div弹出层
iteye_4808的博客
10-29 102
无标题页 * {margin:0;} body {font-size:12px;} #container div{margin-top:5px;} #select_city h3{float:left;} #main_city,#all_province {clear:both;} #main_city div...
js弹出层
phantomes的专栏
10-15 340
&lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;jQuery弹出层效果&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; c
实用的div弹出层
xueliang59211的专栏
10-02 156
使用div实现的弹出层效果，带遮罩层和透明度效果 代码： (function(){ if(window.popwindow)return; var rootEl = null; var maskel = null; var winel = null; window.popwindow = { _init:function(){ rootEl = docu...
DIV弹出和关闭新DIV
weixin_33924312的博客
08-05 419
代码用HTML+JS实现： 1 代码（用HTML+JS实现）： 2 <!doctype html> 3 <html lang="UTF-8"> 4 5 <head> 6 <meta charset="UTF-8"> 7 <title>div 弹出层触发click事件...
164个div+css精美网页模板1-10
12-11
4. **头部和底部设计**：清晰的页眉和页脚，包含logo、搜索框、社交媒体链接等常见元素，为用户提供信息和互动入口。 5. **内容展示**：各种内容区块，如图片轮播、特色区块、文章列表、产品展示等，满足不同类型的...
40套div+css网页.rar
01-05
在网页设计中，Div常被用来创建导航栏、页眉、主体内容、侧边栏和页脚等部分。 CSS（Cascading Style Sheets）则是一种样式表语言，用于描述HTML或XML（包括SVG、XHTML等）文档的外观和格式。它允许我们分离内容和...
《计算机应用基础》模拟试卷一(含答案).pdf
09-30
13. 不同页眉页脚：在Word中，要设置不同页的页眉页脚内容，需要在页眉/页脚的“链接到前一条页眉”选项中取消勾选。 14. CPU含义：CPU是中央处理器的英文缩写，是计算机的核心组件，负责执行指令和控制计算机的...
Word2021中使用剪贴画作为水印的方法.docx
09-27
一旦位置调整完毕，双击页眉或页脚之外的页面区域，水印效果就会固定下来，整个Word2021文档就拥有了自定义的剪贴画水印。 总结来说，Word2021通过联机剪贴画、自动换行、颜色调整等功能，提供了制作个性化水印的...
html5_div弹出层
01-03
html5_div弹出层
DIV弹出层+定位
12-24
这个例子是，div弹出层并且固定位置，弹出层的弹出方式为滑动方式。
JS+HTML非常漂亮的 弹出小窗口 div弹出层
07-29
JS+HTML非常漂亮的 弹出小窗口 div弹出层 JS+HTML非常漂亮的 弹出小窗口 div弹出层 JS+HTML非常漂亮的 弹出小窗口 div弹出层 JS+HTML非常漂亮的 弹出小窗口 div弹出层
div弹出框js弹出框
06-25
div弹出框,js弹出框,轻松轻松定制
实用div实现的弹出层
09-12
实用div实现的弹出层菜单，带遮盖层，简单实用
Element 中的表格表头添加搜索图标和功能
小火车况且况且况且的博客
10-10 8268
Element 中的表格表头添加搜索图标和功能 1. 表头需要指定的图标, 并且可以点击 可能存在输入框, 下拉选择器, 时间选择器 弹出框使用的是 Element 的 Popover 弹出框组件, 相比于 Dialog 弹出框组件更加轻便 2. 功能的实现 2.1 表头的搜索按钮可以使用 Element 中table组件的插槽 Element 中table组件的插槽 使用 slot...
div+css+js实现弹出框
热门推荐
半夏半暖半倾城的博客
09-02 6万+
面试被问到如何让弹出框居中，然而自己没有做过弹出框，搜资料，自己就试着做了一个。 效果：点击弹出框按钮后，页面上显示一个弹出框，并且背景要变成灰色，原始页面不能被操作的，直到关闭弹出框。  原理：在原页面的基础上添加两个格，一个是弹出层，一个是遮罩层，即背景层。这两个div和原始页面是在一个文件中，首先通过设置display：none;让这两个div不显示，然后通过给弹出框按钮和关闭按钮绑定事件...
弹出居中的div层
yflxc的专栏
11-11 2239
点击文字弹出一个DIV层窗口代码                    .black_overlay{              display: none;              position: absolute;              top: 0%;              left: 0%;              width: 100%;         
简单的div弹出例子
wangyu062295的博客
04-09 386
示例 弹出层 <p id="spbt" onclick="spbf()" style="cursor:pointer;"">点击</p> <div id="MyDiv" class="white_content"> <div style="text-align: right; cursor: default; height: 15px;"&...
c++添加word页眉页脚
最新发布
08-26
要在Word中添加页眉页脚，可以按照以下步骤进行操作： 1. 打开Word文档，点击顶部的“插入”选项卡。 2. 在“页眉”和“页脚”菜单中，可以选择不同的样式和布局。 3. 点击所选样式后，Word自动进入“页眉”或“页脚”编辑模式。 4. 在页眉或页脚中，可以使用文本框添加文字，插入页码、日期、填入作者等信息。 5. 点击页面其他部分即可退出页眉或页脚编辑模式。 除了上述基本操作外，Word还提供了更多自定义选项，例如可以插入图片、水平线等来装饰页眉页脚。同样，也可以根据具体需要设置不同的页眉页脚样式，如奇偶页、首页等。 在添加页眉页脚时，需要注意以下几点： 1. 页眉位于页面顶部，页脚位于页面底部，它们会出现在每个页面上。 2. 在Word中，每个节都可以有独立的页面布局和页眉页脚，可以通过分节符进行分隔。 3. 可以使用不同的页眉页脚样式来区分章节，如首页不需要页眉，正文使用一个样式，参考文献使用另一个样式等。 4. Word提供了预定义的页眉页脚样式，也可以自定义样式。 总而言之，Word的页眉页脚功能可以方便地在文档中添加页面信息，如标题、作者、页码等。希望以上回答对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值