首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

使用CSS3属性（@media）制作网站响应式布局

作者：小小蜘蛛侠 | 来源：互联网 | 2023-05-30 05:14
使用CSS3属性（@media）制作网站响应式布局。随着前端技术发展越来越成熟，移动H5也突出了重要的地位。作为在攻城界摸爬滚打小生写了个demo,提供个给大家学习，对于要求不高的网

使用CSS3属性（@media）制作网站响应式布局。
随着前端技术发展越来越成熟，移动H5也突出了重要的地位。作为在攻城界摸爬滚打小生写了个demo,提供个给大家学习，对于要求不高的网站开发可以考虑使用使用@meida 属性开发自己的一个移动PC 响应式网站。
pc一可分为：头部，左侧，中部，右侧以及底部，移动一般纵向模式居多，以下符上代码。


<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>使用title>
    <script type="text/Javascript" src="js/jquery-2.1.3.js">script>
head>
<style type="text/css">
 html {height: 100%;width: 100%;}
 body{margin: 0;height: 100%;width: 100%;}
 /*全局样式*/
 #total {
 overflow: hidden;
 height: 100%;
 width: 100%;
 }
 .groudBox {
 float: left;
 }
 /*头部样式*/
 .groudHead {
 height: 2em;
 line-height: 2em;
 background-color: #CCCCCC;
 text-align: center;
 color: white;
 font-size: 1.4em;
 width:100%;
 }
 /*左侧样式*/
 .groudLeft {
 background: #a9ccef;
 width: 20%;
 height: 75%;
 text-align: center;
 }
 /*中部样式*/
 .groudMiddle {
 background: #ff9f9f;
 width: 50%;
 height: 70%;
 margin-left: 5%;
 margin-top: 2.5%;
 text-align: center;
 }
 /*右侧样式*/
 .groudRight {
 width: 20%;
 background: #93ffc9;
 height: 75%;
 float: right;
 text-align: center;
 }
 /*底部样式*/
 .groudBotton {
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 10%;
 background: #CCC;
 }
 .groudBotton .botton {
 text-align: center;
 margin-top: 2.5%;
 }
 @media only screen and (max-width: 500px) {
 /*左侧内容调整*/
 .groudLeft{
 width: 100%;
 height: 20%;
 }
 /*中部内容调整*/
 .groudMiddle {
 margin: 0;
 width: 100%;
 height: 30%;
 margin-top: 5%;
 }

 /*右侧内容调整*/
 .groudRight {
 width: 100%;
 height: 20%;
 margin-top: 5%;
 }

 }
style>
<body>
    <div id="total">
        
        <div class="groudBox groudHead">
            <div class="header">网页响应式设计（头部）div>
        div>

        <div class="groudBox groudLeft">
            <div class="left">
                左侧(20%,75%)
            div>
        div>

        <div class="groudBox groudMiddle">
            <div class="middle">
                中部(40%,70%)
            div>
        div>

        <div class="groudBox groudRight">
            <div class="right">
                右侧(20%,75%)
            div>
        div>

        <div class="groudBox groudBotton">
            <div class="botton">
                http://blog.csdn.net/china_guanq
            div>
        div>
    div>
body>
html>

——— 分割的作用———
但愿还在攻城界还努力的童鞋们，帮助学习到的你。(^_^)
推荐阅读
  • io

    Nginx使用（server参数配置）

    Nginx使用（server参数配置）
    本文介绍了Nginx的使用，重点讲解了server参数配置，包括端口号、主机名、根目录等内容。同时，还介绍了Nginx的反向代理功能。 ... [详细]
  • text

    Voicewo在线语音识别转换jQuery插件的特点和示例

    Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • io

    拥抱Android Design Support Library新变化（导航视图、悬浮ActionBar）

    拥抱Android Design Support Library新变化（导航视图、悬浮ActionBar）
    转载请注明明桑AndroidAndroid5.0Loollipop作为Android最重要的版本之一，为我们带来了全新的界面风格和设计语言。看起来很受欢迎࿰ ... [详细]
  • io

    VB.NET在线急等问题解决方法，如何统计数据库字段下的数据并显示在文本框里？

    本文介绍了一个在线急等问题解决方法，即如何统计数据库中某个字段下的所有数据，并将结果显示在文本框里。作者提到了自己是一个菜鸟，希望能够得到帮助。作者使用的是ACCESS数据库，并且给出了一个例子，希望得到的结果是560。作者还提到自己已经尝试了使用"select sum(字段2) from 表名"的语句，得到的结果是650，但不知道如何得到560。希望能够得到解决方案。 ... [详细]
  • web

    django视图函数的使用方法

    本文介绍了django中视图函数的使用方法，包括如何接收Web请求并返回Web响应，以及如何处理GET请求和POST请求。同时还介绍了urls.py和views.py文件的配置方式。 ... [详细]
  • io

    JS进修笔记——闭包的运转机制和作用域

    本文介绍了闭包的定义和运转机制，重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则，闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]
  • io

    Java日期格式化总结及示例代码

    本文总结了Java中日期格式化的常用方法，并给出了示例代码。通过使用SimpleDateFormat类和jstl fmt标签库，可以实现日期的格式化和显示。在页面中添加相应的标签库引用后，可以使用不同的日期格式化样式来显示当前年份和月份。该文提供了详细的代码示例和说明。 ... [详细]
  • io

    android listview OnItemClickListener失效原因

    android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]
  • web

    如何使用Java获取服务器硬件信息和磁盘负载率

    如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务，并获取服务器的磁盘信息，并将结果输出。然后在本地使用JS编写一个AJAX脚本，远程请求服务端的程序，得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • io

    OC学习笔记之@property和@synthesize

    本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • io

    Spring 3.1：数据源未自动连接到@Configuration类的错误原因及解决方法

    本文讨论了在Spring 3.1中，数据源未能自动连接到@Configuration类的错误原因，并提供了解决方法。作者发现了错误的原因，并在代码中手动定义了PersistenceAnnotationBeanPostProcessor。作者删除了该定义后，问题得到解决。此外，作者还指出了默认的PersistenceAnnotationBeanPostProcessor的注册方式，并提供了自定义该bean定义的方法。 ... [详细]
  • io

    Spring特性实现接口多类的动态调用详解

    Spring特性实现接口多类的动态调用详解
    本文详细介绍了如何使用Spring特性实现接口多类的动态调用。通过对Spring IoC容器的基础类BeanFactory和ApplicationContext的介绍，以及getBeansOfType方法的应用，解决了在实际工作中遇到的接口及多个实现类的问题。同时，文章还提到了SPI使用的不便之处，并介绍了借助ApplicationContext实现需求的方法。阅读本文，你将了解到Spring特性的实现原理和实际应用方式。 ... [详细]
  • io

    关于cuowu类的错误提示和使用AdjustmentListener的问题

    本文讨论了一个关于cuowu类的问题，作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案，并给出了两个可能导致错误的原因。 ... [详细]
  • text

    java 线程死锁模拟

    1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]
  • io

    后台获取视图对应的字符串

    后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]
author-avatar
小小蜘蛛侠
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有