目前，我的网站看起来并不那么棒。所以这是我的问题：
我已经创建了一些基本和简单的代码，（注意：此代码使用了边距。我不确定这是否是一个问题）但是它与屏幕尺寸相对应，这看起来并不那么好。尝试通过浏览器运行此代码，看看我的意思：
HTML
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<meta charset="UTF-8">
<title>Portal</title>
</head>
<body>
<nav>
<ul>
<h3 style="margin:15px;" class="logo">ONECLICKLEARN</h3>
<li><a class="navlink" href="#">Home</a></li>
<li><a class="navlink" href="#">About</a></li>
<li><a class="navlink" href="#">Templates</a></li>
<li><a class="navlink" href="/css-library">CSS Library</a></li>
<li><a class="navlink" href="#">Updates</a></li>
<li><a class="navlink" href="#">Downloads</a></li>
</ul>
</nav>
<div class="content-left">
<h1>Ocelot <strong class="tag-greentheme">1.0</strong></h1>
<h3 class="margin-para">Okay, let's get things straight: you're going
to get tired of clicking every single download button if you want
<em>all</em>
our libraries. So we came up with a little something that just might
brighten
your day a little. We call it <em>Ocelot</em>. Ocelot is our main library
that
rolls ever single library we have rolled into one. So clear your storage
space,
and get ready for <em>ocelot!</em> - Current version: 1.0.</h3>
<hr>
</div>
<div class="details">
<h1>GET OCELOT</h1>
<button class="button-greentheme">MORE INFO</button> <button
class="button-graytheme">SAFE LINK IT!</button>
</div>
<div class="content-left">
<h1>Bibrary <strong class="tag-greentheme">1.0</strong></h1>
<h3 class="margin-para">A new CSS library has <em>just</em> come out!
It's the first CSS library to be done by this website. The name is Bibrary.
This handy library covers all the buttons you could want, but remember - not
all buttons are covered, but be sure to watch this one. It could be updated
as much as 5 times a year!</h3>
</div>
<div class="details">
<h1>GET BIBRARY</h1>
<button class="button-greentheme">MORE INFO</button> <button
href="/bibrary" class="button-graytheme">SAFE LINK IT!</button>
</div>
</body>
</html>
我有一个保证金：30px;以及正确的30px; 如果你竖起大拇指，请说明理由
答案 0 :(得分：0)
您可以使用Bootstrap Framework。它们是最受欢迎和使用的响应式框架，您可以查看getbootstrap.com。在youtube上为Bootstrap提供了很多很好的教程。
如果您想要无框架方式，可以将@media与纯CSS一起使用。您可以使用谷歌阅读大量文档。
答案 1 :(得分：0)
您可以在css文件中使用媒体查询。 示例语法：
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
答案 2 :(得分：0)
试用此代码
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<meta charset="UTF-8">
<title>Portal</title>
<style>
.content{
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href="#">ONECLICKLEARN</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a class="navlink" href="#">Home</a></li>
<li><a class="navlink" href="#">About</a></li>
<li><a class="navlink" href="#">Templates</a></li>
<li><a class="navlink" href="/css-library">CSS Library</a></li>
<li><a class="navlink" href="#">Updates</a></li>
<li><a class="navlink" href="#">Downloads</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="col-xs-12 content">
<div class="col-xs-12 col-sm-6 content-left">
<h1>Ocelot <strong class="tag-greentheme">1.0</strong></h1>
<h3 class="margin-para">Okay, let's get things straight: you're going
to get tired of clicking every single download button if you want
<em>all</em>
our libraries. So we came up with a little something that just might
brighten
your day a little. We call it <em>Ocelot</em>. Ocelot is our main library
that
rolls ever single library we have rolled into one. So clear your storage
space,
and get ready for <em>ocelot!</em> - Current version: 1.0.
</h3>
</div>
<div class="col-xs-12 col-sm-6 details">
<h1>GET OCELOT</h1>
<button class="button-greentheme">MORE INFO</button> <button
class="button-graytheme">SAFE LINK IT!</button>
</div>
</div>
<div class="col-xs-12">
<div class="col-xs-12 col-sm-6 content-left">
<h1>Bibrary <strong class="tag-greentheme">1.0</strong></h1>
<h3 class="margin-para">A new CSS library has <em>just</em> come out!
It's the first CSS library to be done by this website. The name is Bibrary.
This handy library covers all the buttons you could want, but remember - not
all buttons are covered, but be sure to watch this one. It could be updated
as much as 5 times a year!
</h3>
</div>
<div class="col-xs-12 col-sm-6 details">
<h1>GET BIBRARY</h1>
<button class="button-greentheme">MORE INFO</button> <button
href="/bibrary" class="button-graytheme">SAFE LINK IT!</button>
</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>