六、响应式网站布局实例

1、简单的响应式网站布局

<!--
    实现方式：div浮动+（断点）媒体查询。
-->
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
    <style>
        *{
            box-sizing: border-box;
        }
        body{ margin: 0;padding: 0;}

        .header{
            background-color: #F1F1F1;padding: 20px;text-align: center;
        }
        ul{
            list-style-type: none;background-color: #333333;margin: 0;padding: 0;
            overflow: hidden;
        }
        li a{
            text-decoration: none;color: white;padding: 10px;
            display: block;
        }
        li{
            float: left;
        }
        li a:hover{
            background-color: #CBC8C8;color: black;
        }
        .column{
            float: left;
            padding: 10px;
        }
       
        .column.side,.column.main{
            width: 100%
        }
        .row::after{
            content: "";
            clear: both;
            display: table;
        }
        .footer{
            background-color: #F1F1F1;text-align: center;padding: 30px;
        }
        @media  only screen and (min-width:769px) {
            .column.side{
                width: 25%;
            }
            .column.main{
                width: 50%;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Header</h1>
        <p>请调整浏览器窗口的大小以查看响应效果。</p>
    </div>
    <ul class="topnav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
    <div class="row">
        <div class="column side">
            <h2>Side</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
        </div>
        <div class="column main">
            <h2>Main Content</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
        </div>
        <div class="column side">
            <h2>Side</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
        </div>
    </div>
    <div class="footer">
        <h3>Footer</h3>
    </div>
</body>
View Code

2、一个网站的实例

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* 设置 body 元素的样式 */
body {
  font-family: Arial;
  margin: 0;
}

/* 标题 / LOGO */
.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* 设置顶部导航栏样式 */
.navbar {
  display: flex;
  background-color: #333;
}

/* 设置导航条链接演示 */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* 更改鼠标悬停时的颜色 */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* 列容器 */
.row {  
  display: flex;
  flex-wrap: wrap;
}

/* 创建并排的非等列 */
/* 侧栏 / 左侧列 */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* 主列 */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* 伪图像，仅供示例 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* 页脚 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* 响应式布局 - 当屏幕小于 700 像素宽时，让两列堆叠而不是并排 */
@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}
</style>
</head>
<body>

<!-- 注释 -->
<div style="background:yellow;padding:5px">
  <h4 style="text-align:center">请调整浏览器窗口来查看响应效果。</h4>
</div>

<!-- Header -->
<div class="header">
  <h1>我的网站</h1>
  <p>拥有 <b>弹性</b> 布局。</p>
</div>

<!-- 导航栏 -->
<div class="navbar">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<!-- 弹性网格（内容） -->
<div class="row">
  <div class="side">
    <h2>关于我</h2>
    <h5>我的照片：</h5>
    <div class="fakeimg" style="height:200px;">图像</div>
    <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    <h3>More Text</h3>
    <p>Lorem ipsum dolor sit ame.</p>
    <div class="fakeimg" style="height:60px;">图像</div><br>
    <div class="fakeimg" style="height:60px;">图像</div><br>
    <div class="fakeimg" style="height:60px;">图像</div>
  </div>
  <div class="main">
    <h2>标题</h2>
    <h5>标题描述，2021 年 1 月 1 日</h5>
    <div class="fakeimg" style="height:200px;">图像</div>
    <p>一些文本..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    <br>
    <h2>标题</h2>
    <h5>标题描述，2021 年 1 月 2 日</h5>
    <div class="fakeimg" style="height:200px;">图像</div>
    <p>一些文本..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
</div>

<!-- Footer -->
<div class="footer">
  <h2>页脚</h2>
</div>

</body>
</html>
View Code

3、用弹性盒创建响应式网站

<!--
    根据断点做媒体查询，来设置不同flex容器的flex-direction属性值和flex项目的flex属性值，以此来调整布局。
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
    <style>
        *{ box-sizing: border-box;}
        body{ margin: 0;padding: 0;font-family: Arial, Helvetica, sans-serif;}

        .header{
            background-color: #1ABC9C;color: white;text-align: center;padding: 60px;
        }

        .topnav{
            list-style-type: none;margin: 0;padding: 0;background-color: #333333;
            overflow: hidden;
        }
        .topnav li a{
            text-decoration: none; color: white;padding: 20pX;display: block;text-align: center;
        }
        .topnav li a:hover{
            background-color: whitesmoke;color: black;
        }
        /*.topnav li{ float: left;}*/

        .row{ 
            display: flex;
            flex-direction: column;
        }
        .column.side{ padding: 20px; background-color: #F1F1F1; flex: 100%;}
        .column.main{ padding: 20px; flex: 100%;}
        .column.side .cart{
            padding: 20px 0;
        }
        .column.side .cart .image{
            background-color: #AAAAAA;padding: 15px;margin:20px 0; height: 200px;
        }
        .column.main .cart{
            padding: 20px 0;
        }
        .column.main .cart .image{
            background-color: #AAAAAA;padding: 15px;margin:20px 0; height: 200px;
        }

        .footer{
            background-color: #DDDDDD;padding: 20px;text-align: center;
        }
        @media only screen and (min-width:769px){
            .topnav li{ float: left;}
            .row{ 
                display: flex;
                flex-direction: row;
            }
            .column.side{ flex: 30%;}
            .column.main{ flex: 70%;}
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>我的网站</h1>
        <p>拥有<b>弹性</b>布局。</p>
    </div>
    <ul class="topnav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
    <div class="row">
        <div class="column side">
            <div class="cart">
                <h2>关于我</h2>
                <h5>我的照片：</h5>
                <div class="image">图像</div>
                <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
            </div>
            <div class="cart">
                <h2>More Text</h2>
                <p>Lorem ipsum dolor sit ame.</p>
                <div class="image" style="height: 50px;">图像</div>
                <div class="image" style="height: 50px;">图像</div>
                <div class="image" style="height: 50px;">图像</div>
            </div>
        </div>
        <div class="column main">
            <div class="cart">
                <h2>标题</h2>
                <h5>标题描述，2021 年 1 月 1 日</h5>
                <div class="image">图像</div>
                <p>一些文本..</p>
                <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            </div>
            <div class="cart">
                <h2>标题</h2>
                <h5>标题描述，2021 年 1 月 2 日</h5>
                <div class="image">图像</div>
                <p>一些文本..</p>
                <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            </div>
        </div>
    </div>
    <div class="footer">
        <h1>页脚</h1>
    </div>
</body>
</html>
View Code

4、用弹性盒创建响应式的图片库

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initical-scale=1.0">
    <title></title>
    <style>
        *{ box-sizing: border-box;}
        body{margin: 0; padding: 0;}

        .header{ padding: 60px;text-align: center;}

        .row{
            display: flex;
            flex-direction: column;
        }
        .column{
            flex: 100%;
            max-width: 100%;/*1、加上这个，来限制每列最大的宽度*/
        }
        .column img{
            padding: 5px;
            width: 100%;/*2、加上这个，来限制图片的宽度，和父元素同宽*/
        }
        @media only screen and (min-width:600px){
            .row{
                display: flex;
                flex-flow: row wrap;
            }
            .column{
                flex: 50%;
                max-width: 50%;/*1、加上这个，来限制每列最大的宽度*/
            }
        }
        @media only screen and (min-width:769px){
            .row{
                display: flex;
                flex-direction: row;
            }
            .column{
                flex: 25%;
                max-width: 25%;/*1、加上这个，来限制每列最大的宽度*/
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>响应式图像网格</h1>
        <p>请调整浏览器窗口，来查看响应效果。</p>
    </div>
    <div class="row">
        <div class="column">
            <img src="https://www.w3school.com.cn/i/photo/tulip-red.jpg">
            <img src="https://www.w3school.com.cn/i/photo/tulip-yellow-2.jpg">
            <img src="https://www.w3school.com.cn/i/photo/flower-2.jpg">
            <img src="https://www.w3school.com.cn//i/photo/tulip-yellow.jpg">
            <img src="https://www.w3school.com.cn/i/photo/flower-3.jpg">
            <img src="https://www.w3school.com.cn/i/photo/tulip.jpg">
            <img src="https://www.w3school.com.cn/i/photo/flower-1.jpg">
            <img src="https://www.w3school.com.cn/i/photo/flower-4.jpg">
        </div>
        <div class="column">
            <img src="https://www.w3school.com.cn/i/photo/tulip-yellow-2.jpg">
            <img src="https://www.w3school.com.cn/i/photo/tulip.jpg">
            <img src="https://www.w3school.com.cn/i/photo/flower-3.jpg">
            <img src="https://www.w3school.com.cn/i/photo/flower-1.jpg">
            <img src="https://www.w3school.com.cn/i/photo/flower-4.jpg">
            <img src="https://www.w3school.com.cn/i/photo/tulip-red.jpg">
            <img src="https://www.w3school.com.cn/i/photo/tulip-yellow.jpg">
            <img src="https://www.w3school.com.cn/i/photo/flower-2.jpg">
        </div>
        <div class="column">
            <img src="https://www.w3school.com.cn/i/photo/tulip-red.jpg">
            <img src="https://www.w3school.com.cn/i/photo/tulip-yellow-2.jpg">
            <img src="https://www.w3school.com.cn/i/photo/flower-2.jpg">
            <img src="https://www.w3school.com.cn/i/photo/tulip-yellow.jpg">
            <img src="https://www.w3school.com.cn/i/photo/flower-3.jpg">
            <img src="https://www.w3school.com.cn/i/photo/tulip.jpg">
            <img src="https://www.w3school.com.cn/i/photo/flower-1.jpg">
            <img src="https://www.w3school.com.cn/i/photo/flower-4.jpg">
        </div>
        <div class="column">
            <img src="https://www.w3school.com.cn/i/photo/tulip-yellow-2.jpg">
            <img src="https://www.w3school.com.cn/i/photo/tulip.jpg">
            <img src="https://www.w3school.com.cn/i/photo/flower-3.jpg">
            <img src="https://www.w3school.com.cn/i/photo/flower-1.jpg">
            <img src="https://www.w3school.com.cn/i/photo/flower-4.jpg">
            <img src="https://www.w3school.com.cn/i/photo/tulip-red.jpg">
            <img src="https://www.w3school.com.cn/i/photo/tulip-yellow.jpg">
            <img src="https://www.w3school.com.cn/i/photo/flower-2.jpg">
        </div>
    </div>
</body>
</html>
View Code

5、响应式网格视图

<!--
    注意网格视图的column的margin为0.
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initical-scale=1.0">
    <title></title>
    <style>
        *{ box-sizing: border-box;}

        body{ font-family: Arial, Helvetica, sans-serif;color: white;}

        .header{
            background-color: #9933CC;padding: 20px;
        }

        .row{
            padding: 14px 16px;
        }
        .row::after{
            content: "";
            clear: both;
            display: table;
        }
        [class*="col-"] {
            float: left;
            padding: 15px;
        }
        /*针对手机设备*/
        [class*="col-"]{
           width: 100%;
        }
        /*针对平板设备*/
        @media screen and (min-width:600px){
            .col-s-1 {width: 8.33%;}
            .col-s-2 {width: 16.66%;}
            .col-s-3 {width: 25%;}
            .col-s-4 {width: 33.33%;}
            .col-s-5 {width: 41.66%;}
            .col-s-6 {width: 50%;}
            .col-s-7 {width: 58.33%;}
            .col-s-8 {width: 66.66%;}
            .col-s-9 {width: 75%;}
            .col-s-10 {width: 83.33%;}
            .col-s-11 {width: 91.66%;}
            .col-s-12 {width: 100%;}
        }
        /*针对桌面设备*/
        @media only screen and (min-width:769px){
            .col-1 {width: 8.33%;}
            .col-2 {width: 16.66%;}
            .col-3 {width: 25%;}
            .col-4 {width: 33.33%;}
            .col-5 {width: 41.66%;}
            .col-6 {width: 50%;}
            .col-7 {width: 58.33%;}
            .col-8 {width: 66.66%;}
            .col-9 {width: 75%;}
            .col-10 {width: 83.33%;}
            .col-11 {width: 91.66%;}
            .col-12 {width: 100%;}
        }

        .topnav{
            list-style-type: none;margin: 0;padding: 0;
            overflow: hidden;
        }
        .topnav li a{
            text-decoration: none;background-color: #33B5E5;color: white;
            display: block;padding: 5px;
        }
        .topnav li a:hover{
            background-color: #0091FF;
        }
        .topnav li{ 
            margin: 5px;
        }

        .main{
            color: black;
        }

        .aside{
            background-color: #33B5E5;text-align: center;
        }

        .footer{
            background-color: #33B5E5;padding: 20px;text-align: center;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Shanghai</h1>
    </div>
    <div class="row">
        <ul class="col-3 col-s-2 topnav">
            <li><a href="#">交通</a></li>
            <li><a href="#">文化</a></li>
            <li><a href="#">旅游</a></li>
            <li><a href="#">美食</a></li>
        </ul>
        <div class="col-6 col-s-10 main">
            <h2>欢迎来到上海</h2>
            <p>上海市，简称沪，别称申，是中华人民共和国直辖市，中国的经济、金融、贸易和航运中心，世界著名的港口城市，是中国人口第二多的城市。</p>
        </div>
        <div class="col-3 col-s-12 aside">
            <h3>历史</h3>
            <p>最晚在新石器时代，上海地区已经有先民聚居。春秋时代，上海由吴国管辖，战国时代则是楚国领土 ...</p>
            <h3>位置</h3>
            <p>上海位于中国东部弧形海岸线的正中间，长江三角洲最东部，东临东海，南濒杭州湾，西与江苏、浙江两省相接 ...</p>
            <h3>环境</h3>
            <p>上海地处江南水乡，并位于长江入海口，亦不处于主要地震带上，因此如地震、洪水以及地质类灾害鲜有发生 ...</p>
        </div>
    </div>
    <div class="footer">
        <p>请调整浏览器窗口的大小，以查看内容如何响应调整大小。</p>
    </div>
</body>
</html>
View Code

 

posted @ 2022-01-12 15:10  Strugglinggirl  阅读(271)  评论(0)  编辑  收藏  举报