一、顶部标题自适应

<html>

    <head>

        <title>顶部标题</title>

        <style>

            body{padding:0;margin:0;}

        </style>

    </head>

    <div style="width:100%;height:50px;line-height:50px;background-color:rgba(35,33,31,.2);">

        <div style="width:50px;height:50px;line-height:50px;background-color:#f00;position:absolute;top:0;left:0;text-align:center;color:#fff;">返回</div>

        <div style="padding:0 60px;"><input type="text" style="width:100%;height:50px;border:1px solid black;padding:0 10px;" placeholder="请输入检索条件"/></div>

        <div style="width:50px;height:50px;line-height:50px;background-color:#00f;position:absolute;top:0;right:0;text-align:center;color:#fff;">检索</div>

    </div>

</html>

css自适应的更多相关文章

  1. css 自适应布局阮一峰

    转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...

  2. css 自适应布局

    转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...

  3. css自适应浏览器大小

    css自适应浏览器大小 1.屏幕 > 900px :显示3列 2.450px < 屏幕 < 900px :显示2列 3.屏幕 < 450px :显示1列 <!DOCTYP ...

  4. DIV+CSS自适应窗口高度

    <html> <head> <title>DIV+CSS自适应窗口高度</title> <style type="text/css&qu ...

  5. css 纯css自适应页面 示例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 这可能是史上最全的CSS自适应布局总结教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

  7. DIV+CSS自适应布局

    自适应布局分两类:高度和宽度,方法有很多,我用三列布局举例,我就列几个通俗易懂的例子呗,懂了三列的,两列的原理一样,呵呵哒. 效果图如下:高度自适应——宽度自适应            1,高度自适应 ...

  8. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  9. CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)

    1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime ...

  10. [css] 自适应布局 移动端自适应

    一.宽度自适应 三列布局左右固定.中间不固定或者两列布局,左边固定右边不固定 原文链接:http://www.cnblogs.com/2050/archive/2012/07/30/2614852.h ...

随机推荐

  1. Git版本控制器的使用

    首先介绍一下什么是Git:git是目前最流行的版本控制系统,属于分布式版本控制器. 使用Git前先要在GitHub创建代码仓库,或者获取你要应用的GitHub的链接地址. 创建GitHub仓库这里就不 ...

  2. Java反射机制(创建Class对象的三种方式)

    1:SUN提供的反射机制的类: java.lang.Class<T> java.lang.reflect.Constructor<T> java.lang.reflect.Fi ...

  3. centos 下安装pptp (vpn) 的方法

    废话少说     01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3 ...

  4. mysql 各数据类型的 大小及长度

    数字型 类型 大小 范围(有符号) 范围(无符号) 用途 TINYINT 1 字节 (-128,127) (0,255) 小整数值 SMALLINT 2 字节 (-32 768,32 767) (0, ...

  5. js 判断是否为数组的方式 及 类数组转换成数组格式

    1. 判断是否为数组的通用方式 Object.prototype.toString.call(o)=='[object Array]' 其他方式: typeof ,  instanceof,  ary ...

  6. 【luogu P1613】跑路

    https://www.luogu.org/problem/show?pid=1613 看到2k就能想到倍增.用一个数组avai[i][j][k]表示点i与点j是否存在长2k的路径,则可以递推出ava ...

  7. Python的字符编码

    Python的字符编码 1. Python字符编码简介 1. 1  ASCII Python解释器在加载.py文件的代码时,会对内容进行编码,一般默认为ASCII码.ASCII(American St ...

  8. 走近Java

    学习Java需要了解必要的Java历史,不要觉得Java历史对学习Java编程没有任何帮助.在任何时候,了解一门语言的历史都能帮助更好地理解这门语言的精髓.以前在学习语文时,在分析一篇文章,通常会通过 ...

  9. 微服务架构之RPC-client序列化细节

    通过上篇文章的介绍,知道了要实施微服务,首先要搞定RPC框架,RPC框架的职责要向[调用方]和[服务提供方]屏蔽各种复杂性: (1)让调用方感觉就像调用本地函数一样 (2)让服务提供方感觉就像实现一个 ...

  10. java发送post请求 ，请求数据放到body里

    java利用httpclient发送post请求 ,请求数据放到body里. /** * post请求 ,请求数据放到body里 * * @author lifq * * 2017年3月15日 下午3 ...