• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

响应式网页设计实战

互联网 diligentman 6天前 6次浏览

1.设计思路

在本程序设计中,<header><footer> 元素不论在哪一种情况下,宽度总为浏览窗口宽度的100%,
当浏览窗口宽度小于480px为手机端,大于480px小于768px为opad端,大于768px为桌面端。

2.网页截图

桌面端:

响应式网页设计实战

ipad端:

响应式网页设计实战

手机端:

响应式网页设计实战
响应式网页设计实战

3.代码实现

test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="test.css">

    <!-- 通过JS,动态地为footer添加类fixed-bottom -->
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(function(){
          function footerPosition(){
              $("footer").removeClass("fixed-bottom");
              var contentHeight = document.body.scrollHeight,//网页正文全文高度
                  winHeight = window.innerHeight;//可视窗口高度,不包括浏览器顶部工具
              if(!(contentHeight > winHeight)){
                  //当网页正文高度小于可视窗口高度时,为footer添加类fixed-bottom
                  $("footer").addClass("fixed-bottom");
              } else {
                  $("footer").removeClass("fixed-bottom");
              }
          }
          footerPosition();
          $(window).resize(footerPosition);
      });
    </script>

</head>
<body>
    <header>
        <h1>我的网页</h1>
        <p>——这是一个同时适应桌面端/ipad/手机的响应式网页</p>
    </header>

    <div class="row">
        <nav class="col-25 col-s-25 menu">
            <ul>
                <li>个人简介</li>
                <li>我的收藏</li>
                <li>联系方式</li>
                <li>历史记录</li>
                <li>关于我们</li>
                <li>更多功能</li>
            </ul>
        </nav>
        <article class="col-50 col-s-75 article">
            <h1>为什么我们需要开源的系统芯片</h1>
            <p>
                不再使用的芯片区域是一件大事,因为构建芯片可不像搭乐高积木那般简单,它更像是雕刻家刻在大理石快上的雕塑,因此添加电路的难度远远高于关闭电路。增加一条电路仅制作新的掩膜就大约需要花费100万美元,同时还会导致项目延迟70天(大约10万人时的额外工作)。而在正确计划的情况下,关闭一条电路非常简单,只需要修改代码,或者针对某个掩模层进行轻微改动,只需要花费大约1万美元以及几天的延迟(假设晶圆尚处于中期阶段,很容易进行这样的改动)。
            </p>
            <img src="https://img-blog.csdnimg.cn/2020111709205454.png">
        </article>
        <div class="col-25 col-s-100">
            <aside>
                <h2>数据结构与算法</h2>
                <h2>计算机网络</h2>
                <h2>操作系统</h2>
                <h2>计算机组成原理</h2>
                <h2>计算机系统结构</h2>
                <h2>数据库原理</h2>
            </aside>
        </div>
    </div>
    
    <footer>
        <p>footer@2020</p>
    </footer>
</body>
</html>

test.css

* {
    /* 初始化 取消页面的内外边距 */
	padding: 0;
	margin: 0;
	/* 盒子模型 */
	box-sizing: border-box;
}

/*在整个row下面增加空行内容*/
.row::after {
    content: "";
    clear: left;
    display: table;
}

[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
}

/*默认是手机端 0-480px*/

/*ipad端 481px-768px*/
@media only screen and (min-width: 481px) {
    .col-s-25 {width: 25%;}
    .col-s-75 {width: 75%;}
    .col-s-100 {width: 100%;}
}

/*桌面端 769px+*/
@media only screen and (min-width: 769px) {
    .col-25 {width: 25%;}
    .col-50 {width: 50%;}
}

html {
    font-family: Arial, Helvetica, sans-serif;
}

header {
    background-color: darkblue;
    color: white;
    padding: 15px;
    text-align: center;
}

header p {
    margin-top: 15px;
}

.menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.menu li {
    background-color: deepskyblue;
    color: white;
    padding: 10px;
    margin-bottom: 15px;
    box-shadow: gray 1px 2px 2px;
    transition-property: all;
	transition-duration: .5s;
}

.menu li:hover {
    background-color: darkblue;
}

.article {
    background-color: wheat;
    padding: 15px;
    margin: 15px 0;
}

.article p {
    padding: 15px;
}

aside {
    background-color: deepskyblue;
    color: white;
    padding: 15px;
    text-align: center;
    font-size: 15px;
    box-shadow: gray 3px 3px 3px;
}

aside h2 {
    padding: 10px;
}

footer {
    background-color: lightgray;
    color: darkblue;
    text-align: center;
    font-size: 18px;
    padding: 15px;
    width: 100%;
}

img {
    padding: 15px;
    width: 100%;
    height: auto;
}

/*动态地为footer添加类fixed-bottom*/
.fixed-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
}


喜欢 (0)