网站在不同计算机或操作系统上的外观不同

时间：2019-03-08 02:10:01

标签： html css css3

这是我的网站：http://www.cs.oswego.edu/~mluu/index.html

下面是源代码，只是html和css。

问题是，当我的网站在Ubuntu（这是我编写网站的操作系统）上打开时，看起来像这样： on Ubuntu

但是当它在Windows中打开时（我也在我的笔记本电脑和朋友的笔记本电脑上尝试过），所有内容似乎都放大了，看起来有点荒谬，而不是我想要的：on Windows

无论屏幕大小或打开的操作系统是什么，是否都可以通过它来使它保持一致？预先感谢！

@font-face {
  font-family: 'SpaceMono-Regular';
  font-style: normal;
  font-weight: normal;
  src: url('fonts/SpaceMono-Regular.eot');
  src: url('fonts/SpaceMono-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/SpaceMono-Regular.otf') format('opentype'), url('fonts/SpaceMono-Regular.svg') format('svg'), url('fonts/SpaceMono-Regular.ttf') format('truetype'), url('fonts/SpaceMono-Regular.woff') format('woff'), url('fonts/SpaceMono-Regular.woff2') format('woff2');
}

html {
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background: url(background.jpg) no-repeat center center fixed;
  background-size: cover;
  font-family: 'SpaceMono-Regular', monospace;
}

h1 {
  font-family: 'SpaceMono', monospace;
  font-size: 2.25em;
  margin: 90px 0 70px 125px;
  padding: 0;
  color: #fff;
  border-right: 3px solid #ffffff;
  width: 0;
  width: 27ch;
  white-space: nowrap;
  overflow: hidden;
  animation: typing 2.5s steps(27, end), blink-cursor 0.4s step-end infinite alternate;
}

@keyframes typing {
  from {
    width: 0;
  }
}

@keyframes blink-cursor {
  50% {
    border-color: transparent;
  }
}

p {
  font-size: 1.2em;
  margin: 0 0 0 125px;
  padding: 15px 0 20px 50px;
  color: #ffffff;
  text-indent: 50px;
  width: 990px;
  word-wrap: break-word;
  border-left: 4px solid #ffffff;
}

.first-level {
  font-size: 1.2em;
  list-style: none;
  text-align: center;
  padding: 0;
  position: sticky;
  top: 10px;
  display: flex;
  justify-content: center;
}

.first-level a {
  text-decoration: none;
  line-height: 60px;
  color: rgb(248, 248, 248);
}

.first-level li {
  position: relative;
  text-align: center;
  height: 60px;
  width: 220px;
  background: rgba(0, 0, 0, 0.8);
  transition: 0.25s ease;
}

.first-level li:hover {
  background-color: rgba(0, 139, 139, 0.9);
}

.first-level li:hover>ul {
  display: inline;
}

.second-level {
  position: absolute;
  display: none;
  top: 60px;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.second-level li {
  position: relative;
  height: 60px;
  background: rgba(0, 0, 0, 0.8);
}

.second-level li:hover {
  background: rgba(0, 139, 139, 0.9);
}

.third-level {
  position: absolute;
  display: none;
  top: 0;
  right: 0;
  width: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.third-level li {
  position: relative;
  height: 60px;
  background: rgba(0, 0, 0, 0.8);
}

.third-level li:hover {
  background: rgba(0, 139, 139, 0.9);
}
<!DOCTYPE html>
<html lang="en">
<title>Minh's Work Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css" type="text/css">

<body>

    <ul class="first-level">
        <li><a href="index.html">HOME</a></li>
        <li><a>Assignments</a>
            <ul class="second-level">
                <li><a>Assignment 1</a>
                    <ul class="third-level">
                        <li><a href="javaprograms/assignments/RedCross.java.html">Red Cross</a></li>
                        <li><a href="javaprograms/assignments/PumpItUp.java.html">Pump It Up</a></li>
                        <li><a href="javaprograms/assignments/Dots.java.html">Dots</a></li>
                        <li><a href="javaprograms/assignments/TwoFigureMinuetThing.java.html">Figure Minuet</a></li>
                        <li><a href="javaprograms/assignments/MinuetFigureListener.java.html">Minuet Listener</a></li>
                        <li><a href="javaprograms/assignments/AfterJSB.java.html">After Bach</a></li>
                    </ul>
                </li>
                <li><a>Assignment 3</a>
                    <ul class="third-level">
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a>LAB 1-5</a>
            <ul class="second-level">
                <li><a>LAB 1</a>
                    <ul class="third-level">
                        <li><a href="javaprograms/greetings/HelloWorld.java.html">Hello World</a></li>
                        <li><a href="javaprograms/greetings/HelloYou.java.html">Hello You</a></li>
                    </ul>
                </li>
                <li><a>LAB 2</a>
                    <ul class="third-level">
                        <li><a href="javaprograms/npw/BlueDot.java.html">Blue Dot</a></li>
                        <li><a href="javaprograms/mmw/Dorothy.java.html">Dorothy</a></li>
                        <li><a href="javaprograms/mmw/BasicListener.java.html">Basic Listener</a></li>
                        <li><a href="javaprograms/mmw/Melody.java.html">Melody</a></li>
                        <li><a href="javaprograms/npw/Target.java.html">Target</a></li>
                    </ul>
                </li>
                <li><a>LAB 4</a>
                    <ul class="third-level">
                        <li><a href="javaprograms/expressions/ExpressionThings.java.html">Expression Things</a></li>
                        <li><a href="javaprograms/shapes/ShapesThing.java.html">Shapes Thing</a></li>
                    </ul>
                </li>
                <li><a>LAB 5</a>
                    <ul class="third-level">
                        <li><a href="javaprograms/interpreters/Interpreter1.java.html">Interpreter 1</a></li>
                        <li><a href="javaprograms/interpreters/Interpreter2.java.html">Interpreter 2</a></li>
                        <li><a href="javaprograms/interpreters/Interpreter3.java.html">Interpreter 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a>LAB 6-8</a>
            <ul class="second-level">
                <li><a>LAB 6</a>
                    <ul class="third-level">
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                    </ul>
                </li>
                <li><a>LAB 7</a>
                    <ul class="third-level">
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                    </ul>
                </li>
                <li><a>LAB 8</a>
                    <ul class="third-level">
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a>LAB 9-11</a>
            <ul class="second-level">
                <li><a>LAB 9</a>
                    <ul class="third-level">
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                    </ul>
                </li>
                <li><a>LAB 10</a>
                    <ul class="third-level">
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                    </ul>
                </li>
                <li><a>LAB 11</a>
                    <ul class="third-level">
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a>LAB 12-14</a>
            <ul class="second-level">
                <li><a>LAB 12</a>
                    <ul class="third-level">
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                    </ul>
                </li>
                <li><a>LAB 13</a>
                    <ul class="third-level">
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                    </ul>
                </li>
                <li><a>LAB 14</a>
                    <ul class="third-level">
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                        <li><a href="#">Content</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

    <h1>Minh's Personal Work Site.</h1>
    <p>This site represents work that I have done in support of my efforts to learn to program in the CS1 course at SUNY Oswego during the Spring 2019 semester. The materials will be temporally organized for the most part. Links to external sites that pertain to computer programming, problem solving, Java, Web development, and related matters will be placed after the personally created artifacts.
    </p>
    <p>Demo is included in the source code links.</p>
    <p>[Website designed by Minh Luu].</p>

</body>

</html>

0 个答案:

没有答案
相关问题
最新问题