大家好，我是这种格式的新手，它介绍如何自动设置html的设计。
即使设计良好，也可以在我的PC上正常工作，没有破坏格式或布局，但是当我在另一台PC上工作时，格式被破坏了。
它甚至在我的图片背景和格式损坏之前就具有白色背景。我的电脑显示器是18英寸，另一台笔记本电脑是23英寸。
我尽力找出问题所在，但我不知道最佳解决方案。
我应该输入什么代码才能正常工作？
<!DOCTYPE html>
<html lang="en">
<head>
<title>IT Course SUPPLIES</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="iicon.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap2.js">
<script src="bootstrap1.js"></script>
<script src="bootstrap.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ><font color="#FF0066">IT COURSE SUPPLIES</font></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">First Year <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="1.html"> Analytic Geometry: with more Applications and Special Topics</a></li>
<li><a href="2.html">Differential Equations: A Simplified Approach</a></li>
<li><a href="3.html">Basic Calculus</a></li>
<li><a href="a.html">Simplified Approach to Integral Calculus</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">2nd Year <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="4.html">Crimping Tool</a></li>
<li><a href="5.html">RJ45 + RJ11 Cable Tester</a></li>
<li><a href="6.html">RJ45 Toolless Jacks</a></li>
<li><a href="8.html">Discrete Mathematics 1</a></li>
<li><a href="9.html">General Statistics for College Students: Text/Workbook</a></li>
<li><a href="10.html">CISCO CERTIFIED CCNA Routing and Switching Laboratory Manual</a></li>
<li><a href="11.html">CAT5E Network Cable</a></li>
<li><a href="12.html">RJ45 heads</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">3rd Year <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="13.html">Rizal Prose</a></li>
<li><a href="14.html">Rizal's Poems</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>
<br />
<br />
<br />
<style>
body {
background-image: url('12.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 200px 50px;
}
</style>
<style>
div.absolute {
position: absolute;
top: 100px;
right: 400px;
width:500px;
height: 100px;
}
</style>
<div class="absolute">
<h1>about IT Online Course store</h1>
<p>
IT Online Course online store delivers digital products to your door.<br>
You can now get the latest high-tech products delivered straight to your door with IT Online Course.<br>
You can also choose from a new range of products and services ideally suited to meet <br>
the needs of the modern traveler.</p>
</div>
</body>
</html>您可以找到代码Here
谢谢！
最佳答案
由于屏幕分辨率具有多种屏幕分辨率，因此必须使用媒体查询，您可以在其中编码网站布局以适合移动设备，标签页，台式机，大屏幕...
1.媒体查询
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}
http://www.w3schools.com/css/css3_mediaqueries_ex.asp
2.引导程序
引导框架在这里有助于预定义类，这也为您提供了
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
http://www.w3schools.com/bootstrap/default.asp