Question

大家好我是这个格式的新手，如何自动设置html的设计。

在我的电脑中它可以正常工作，即使设计很好，也没有破坏格式或布局，但是当我使用另一台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 谢谢！

Answer 1

由于多屏幕分辨率的屏幕分辨率，你必须使用媒体查询，你可以编写你的网站布局，以适应移动，标签，桌面，大屏幕...

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.Bootstrap 这里bootstrap框架有助于预定义的类，也可以为你提供

<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

如何自动设置html布局的大小？

1 个答案: