一、顶部标题自适应

<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. MySql基础入门-mysql的结构层次

    了解MySql必须牢牢记住其体系结构图,Mysql是由SQL接口,解析器,优化器,缓存,存储引擎组成的. 1.Connectors指的是不同语言中与SQL的交互 2.Management Servei ...

  2. Thinkphp拖拽上传文件-使用webuploader插件（自己改动了一些地方）——分片上传

    html页面: <!DOCTYPE html> <html class="js cssanimations"> <head> <meta  ...

  3. Java学习之计算机基础（二）

    今天主要介绍原码.反码与补码的知识.了解原码.反码与补码的知识,可以帮助我们更好地理解在计算机内部是如何进行运算的,同时对于后面更好地学习和理解Java基本数据类型及其范围打下基础. 背景知识: 在计 ...

  4. vue.js介绍，常用指令，事件，以及制作简易留言版

    一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 ...

  5. SQL-删除重复记录

    前几日工作的时候,有个小需求,是要求删除一个表table_A里的重复记录(保留一条),假设以字段COL_PK重复来判断记录重复,那么有几种写法: 在Oracle里,可以利用rowid来删除,这是非常高 ...

  6. 微信小程序去除button按钮的边框

    小程序开发记录 小程序开发中, 有时候我们希望button不要有边框, 需要使用button::after来实现, 具体如下: .operations button::after{border:0 n ...

  7. java.util.ConcurrentModificationException 异常问题详解

    环境:JDK 1.8.0_111 在Java开发过程中,使用iterator遍历集合的同时对集合进行修改就会出现java.util.ConcurrentModificationException异常, ...

  8. C#线程等待句柄

    相互排斥对象 Mutex private Mutex m = new Mutex(); public void Method(){ m.WaitOne(); //运行操作 m.ReleaseMutex ...

  9. ResourceBundle读取文件学习

    开发中,我们经常需要读取本地文件(properties文件),这样的好处是文件是动态的,可配置的.这时候我们就需要用到ResourceBundle这个类. 这个类属于java.util.*. 这个类的 ...

  10. Office Add-in 设计规范与最佳实践

    作者:陈希章 发表于 2017年8月6日 引子 离上一篇Office Add-in的文章已经过去了一段时间,期间有去年Office 365 Asia Devday & Hackathon的二等 ...