改写一个适配网页的代码实例
程序员文章站
2022-05-09 20:17:32
前几天我看了看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 />© 2025 no rights reserved.</p></p>
</p>
</body>
</html> 下一篇： meteor的入门安装讲解