一、顶部标题自适应

<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. 关于ftp的学习:ftp很多人都会用。但会用，不代表我们真正了解它。

    ftp.sftp.ftps,您是否是也跟我一样搞不清楚他们的真正意义.它们之间有关联吗(究竟是何种关联),有区别吗(区别倒地在哪里). 亦或是以为自己知道它们,可我们真的了解并认识它们了吗? 如果您被 ...

  2. sqlserver 全库查询 带架构

    网上现有的全库查询,无法识别自定义架构的数据库结构: ) ) ) declare @counts int )--以上定义变量 declare cur1 cursor for select a.name ...

  3. Js 作用域与作用域链与执行上下文不得不说的故事 ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

    最近在研究Js,发现自己对作用域,作用域链,活动对象这几个概念,理解得不是很清楚,所以拜读了@田小计划大神的博客与其他文章,受益匪浅,写这篇随笔算是自己的读书笔记吧~. 作用域 首先明确一个概念,js ...

  4. css3的动画特效--元素旋转

    开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和transition动画一样,animation动画也是CSS3动画的一种,这类动 ...

  5. Android使用gradle不同配置多项目打包

    //build.gradle该配置文件里路径均是相对路径 apply plugin: 'com.android.application' android { def suffix = "su ...

  6. It appears that the Web Project，“”，has no Web Root directory setup

    1 错误描写叙述 2 错误原因 因为项目是用eclipse新建的,web的根文件夹文件夹是WebContent.而MyEclipse新建的项目的Web根文件夹是WebRoot.直接将eclipse项目 ...

  7. jersey框架实现文件上传

    jersey框架是一个开源的RESTful的框架,实现了实现了JAX-RS规范,进一步地简化 RESTful service 和 client 开发.当然而且是必须的,jersey对文件的上传和下载也 ...

  8. Java并发编程实践读书笔记（1）线程安全性和对象的共享

    2.线程的安全性 2.1什么是线程安全 在多个线程访问的时候,程序还能"正确",那就是线程安全的. 无状态(可以理解为没有字段的类)的对象一定是线程安全的. 2.2 原子性 典型的 ...

  9. 开源免费接口管理平台eoLinker AMS开源版 V3.2.0更新，增加批量导出导入接口功能！

    eoLinker是一个免费开源的针对开发人员需求而设计的接口管理工具,通过简单的操作来帮助开发者进行接口文档管理.接口自动化测试.团队协作.数据获取.安全防御监控等功能,降低企业的接口管理成本,提高项 ...

  10. 应用activeMQ消息中间件同步索引库

    mq是一个消息服务器: 安装包内置了tomcat,直接登录访问,登录:http://ip:8161/admin/    (相当于dubbo的moniter监控中心) admin admin传统串行化, ...