Heim >Web-Frontend >HTML-Tutorial >页面中固定区域怎么做?_html/css_WEB-ITnose

页面中固定区域怎么做?_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:07:461595Durchsuche

比如打开 淘宝,向下滚动,顶部的搜索栏会固定不动。。
光标就算放在顶部的搜索栏,滚动鼠标的滚轮,页面仍然会滚动
怎么实现,要完全兼容,哪怕是IE6


回复讨论(解决方案)

you can do it like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>body{margin:0;height:2000px;}input{float:left;padding:0;margin:0;}.box{height:40px;padding:10px 0;background:#ccc; text-align:center; position:fixed;_position:absolute;width:100%;_top:expression(eval(document.documentElement.scrollTop));}.search{height:100%;width:410px;margin:0 auto;}.search .text{width:300px;height:28px;padding:4px 0 4px 6px;border:solid 2px blue;font-size:14px;line-height:30px;}.search .btn{background:blue;border:none;height:40px;width:100px;padding:0 10px;}</style></head><body><div class="box" id="box">	<div class="search">    	<input type="text"  class="text"/>        <input type="button" value="搜索"  class="btn"/>    </div></div></body></html>

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn