欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

改写一个适配网页的代码实例

程序员文章站 2022-11-18 10:10:07
前几天我看了看bootstrap,发觉里面的布局的css里有对各种不同情况下的屏幕分辨率有着规定,所以我就用这些css弄了一下适配的问题,因为以前看网页和自己写一点网页,对于适配总...

前几天我看了看bootstrap,发觉里面的布局的css里有对各种不同情况下的屏幕分辨率有着规定,所以我就用这些css弄了一下适配的问题,因为以前看网页和自己写一点网页,对于适配总是很迷惑,所以我现在做一下,进行尝试一下。一下是我写的代码。我的代码写的不怎么漂亮,所以请见谅。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>bootstrap</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <!-- 新 Bootstrap4 核心 CSS 文件 -->  
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">  
       
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->  
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>  
       
    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->  
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>  
       
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->  
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>  
  
    <!-- <link rel="stylesheet" type="text/css" href="dist/css/bootstrap-grid.css"> -->  
</head>  
    <style type="text/css">  
        #nav_l{padding: 3px;font-size: 20px;}  
        #nav{border-bottom: solid 1px grey;}  
        #ban{padding-top: 10px;}  
        .overlay {  
            height: 0%;  
            width: 100%;  
            position: fixed;  
            z-index: 1;  
            top: 0;  
            left: 0;  
            background-color: rgb(0,0,0);  
            background-color: rgba(0,0,0, 0.9);  
            overflow-y: hidden;  
            transition: 0.5s;  
        }  
  
        .overlay-content {  
            position: relative;  
            top: 25%;  
            width: 100%;  
            text-align: center;  
            margin-top: 30px;  
        }  
  
        .overlay a {  
            padding: 8px;  
            text-decoration: none;  
            font-size: 36px;  
            color: #818181;  
            display: block;  
            transition: 0.3s;  
        }  
  
        .overlay a:hover, .overlay a:focus {  
            color: #f1f1f1;  
        }  
  
        .overlay .closebtn {  
            position: absolute;  
            top: 20px;  
            right: 45px;  
            font-size: 60px;  
        }  
  
          
    </style>  
<body>  
    <p class="container">  
        <p class="row">  
            <p class="col-sm-2 d-none d-sm-block">  
                <img src="https://placehold.it/200x120"/>  
            </p>  
            <p class="col-sm-8 d-none d-sm-block">  
                <h3 align="center">This is a Test</h3>  
                <h5 align="center"> this is for bootstrap</h5>  
            </p>  
            <p class="col-sm-2 d-none d-sm-block">  
                <img src="https://placehold.it/200x120"/>  
            </p>  
  
            <p class="col-sm-12 d-block d-sm-none">  
                <h3 align="center">This is a Test</h3>  
                <h5 align="center"> this is for bootstrap</h5>  
            </p>  
        </p>  
  
        <p class="row" style="height:50px;" id="nav">  
            <!--p class="col-sm-1" id="nav_l"><a href="#">home</a></p>  
            <p class="col-sm-1" id="nav_l"><a href="#">page</a></p>  
            <p class="col-sm-1" id="nav_l"><a href="#">article</a></p>  
            <p class="col-sm-1" id="nav_l"><a href="#">conection</a></p-->  
                <p class="col-sm-12 d-none d-md-block">  
                    <ul class="nav nav-tabs "  style="font-size: 18px;">  
                        <li class="nav-item"><a href="#" class="nav-link active" >home</a></li>  
                        <li class="nav-item"><a href="#" class="nav-link">page</a></li>  
                        <li class="nav-item"><a href="#" class="nav-link">article</a></li>  
                        <li class="nav-item"><a href="#" class="nav-link">conection</a></li>  
                    </ul>  
                </p>  
                  
                <p class="col-sm-12 d-block d-md-none">  
                    <p id="myNav" class="overlay">  
                        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>  
                      <p class="overlay-content">  
                            <a href="#">home</a>  
                            <a href="#">page</a>  
                            <a href="#">article</a>  
                            <a href="#">connection</a>  
                      </p>  
                    </p>  
                    <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>  
                </p>  
                <script type="text/javascript">  
                    function openNav() {  
                    document.getElementById("myNav").style.height = "100%";  
                }  
  
                function closeNav() {  
                    document.getElementById("myNav").style.height = "0%";  
                }  
                </script>  
        </p>  
        <p class="row" id="ban" >  
            <p class="carousel slide" data-ride="carousel" id="demo">  
                <!-- <img  src="https://placehold.it/1100x440"/> -->  
                <ul class="carousel-indicators">  
                    <li data-target="#demo" class="active" data-slide-to="0"></li>  
                    <li data-target="#demo"  data-slide-to="1"></li>  
                    <li data-target="#demo"  data-slide-to="2"></li>  
                </ul>  
                <p class=" carousel-inner d-none d-md-block">  
                    <p class="carousel-item active"><img  src="https://placehold.it/1100x440"/></p>  
                    <p class="carousel-item "><img  src="https://placehold.it/1100x440"/></p>  
                    <p class="carousel-item "><img  src="https://placehold.it/1100x440"/></p>  
                </p>  
                <p class=" carousel-inner ">  
                    <p class="carousel-item active"><img class="mw-100" src="https://placehold.it/1100x440"/></p>  
                    <p class="carousel-item "><img class="mw-100" src="https://placehold.it/1100x440"/></p>  
                    <p class="carousel-item "><img class="mw-100" src="https://placehold.it/1100x440"/></p>  
                </p>  
  
                <a href="#demo" class="carousel-control-prev" data-slide="prev">  
                    <span class="carousel-control-prev-icon" ></span>  
                </a>  
                <a href="#demo" class="carousel-control-next" data-slide="next">  
                    <span class="carousel-control-next-icon"></span>  
                </a>  
            </p>  
        </p>  
  
        <p class="row" style="margin-top: 10px;">  
            <p class="col-sm-8">  
                <img src="https://placehold.it/700x440"/ class="d-none d-md-block">  
                <img src="https://placehold.it/700x440" class="mw-100 d-block d-md-none" />  
                <h3><a href="#">Llamas: Great Pets or the Best Pets?</a></h3>  
                <p>Intrepid reporter Jordan Humphreys went to Happy Time Llama Farm to investigate: are llamas merely great pets, or he best pets? Read the full article to find out!</p> <p><a href="#" class="small radius nice blue button">Read More →</a></p>  
            </p>  
            <p class="col-sm-4" >  
                <p class="row">  
                    <p class="col-sm-6">  
                        <img src="https://placehold.it/160x150"/>  
                    </p>  
                    <p class="col-sm-6">  
                        <h5><a href="">Alpaca Farm Closed</a></h5>  
                        <p>Anthony Tadina reports on this tragic closing.<br /><a href="#">Read More →</a></p>  
                    </p>  
                </p>  
  
                <p class="row">  
                    <p class="col-sm-6">  
                        <img src="https://placehold.it/160x150"/>  
                    </p>  
                    <p class="col-sm-6">  
                        <h5><a href="">Alpaca Farm Closed</a></h5>  
                        <p>Anthony Tadina reports on this tragic closing.<br /><a href="#">Read More →</a></p>  
                    </p>  
                </p>  
  
                <p class="row">  
                    <p class="col-sm-6">  
                        <img src="https://placehold.it/160x150"/>  
                    </p>  
                    <p class="col-sm-6">  
                        <h5><a href="">Alpaca Farm Closed</a></h5>  
                        <p>Anthony Tadina reports on this tragic closing.<br /><a href="#">Read More →</a></p>  
                    </p>  
                </p>  
            </p>  
        </p>  
    </p>  
  
    <p class="container" style="border-top: solid 1px grey; padding-top: 10px;">  
        <p class="row">  
            <p class="col-sm-3">  
                <img src="https://placehold.it/260x190" />  
                <h5><a href="#">Feature 1</a></h5>  
                <p>Description<br /><a href="#">Read More →</a></p>  
            </p>  
            <p class="col-sm-3">  
                <img src="https://placehold.it/260x190" />  
                <h5><a href="#">Feature 1</a></h5>  
                <p>Description<br /><a href="#">Read More →</a></p>  
            </p>  
            <p class="col-sm-3">  
                <img src="https://placehold.it/260x190" />  
                <h5><a href="#">Feature 1</a></h5>  
                <p>Description<br /><a href="#">Read More →</a></p>  
            </p>  
            <p class="col-sm-3">  
                <img src="https://placehold.it/260x190" />  
                <h5><a href="#">Feature 1</a></h5>  
                <p>Description<br /><a href="#">Read More →</a></p>  
            </p>  
        </p>  
        <p class="row"><p><strong>The Foundation Times</strong><br />&copy; 2025 no rights reserved.</p></p>  
    </p>  
</body>  
</html>