Html 在另一台计算机上打开网站时，网页布局会扭曲吗？
基本上，当我在另一台电脑上打开我的网页时，我的布局变得扭曲，一些东西从屏幕上消失了，你看不见 我设计网站的电脑屏幕比我的笔记本电脑大 然而，当我使用笔记本电脑上的网络浏览器缩放功能缩小时，一切又回到了原来的位置……这是为什么？我怎样才能解决这个问题 如果这是解决方案，我将如何使用媒体查询 下面是代码：谢谢Html 在另一台计算机上打开网站时，网页布局会扭曲吗？,html,css,web,webpage,Html,Css,Web,Webpage,基本上，当我在另一台电脑上打开我的网页时，我的布局变得扭曲，一些东西从屏幕上消失了，你看不见 我设计网站的电脑屏幕比我的笔记本电脑大 然而，当我使用笔记本电脑上的网络浏览器缩放功能缩小时，一切又回到了原来的位置……这是为什么？我怎样才能解决这个问题 如果这是解决方案，我将如何使用媒体查询 下面是代码：谢谢 <!DOCTYPE html> <html> <head> <meta charset="utf-8">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Sun</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #91928C;
font-family: 'Titillium Web', Calibri, sans-serif;
background-image:url(starfield.jpg);
background-size:cover;
}
.nav-section {
width: 100%;
padding: 20% 0;
}
nav ul {
position: relative;
left: 550px;
bottom: 350px;
width: 700px;
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
border-radius: 63px;
}
nav ul li {
list-style: none;
display: inline-block;
}
nav ul li a {
display: block;
text-decoration: none;
padding: 40px 60px;
font-size: 20px;
text-transform: uppercase;
font-weight: 300;
color: #323642;
transition: background-color 0.5s ease;
}
nav ul li a:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.container {
margin-left:auto;
margin-right:auto;
}
.info {
position:relative;
top: -1800px;
left:550px;
opacity:1;
width:700px;
color: #ffffff;
}
.content {
position: relative;
bottom: 690px;
left: 500px;
background-color:#000000;
height:1200px;
width: 800px;
border: 3px solid white;
opacity:0.8;
}
h1 {
color:#FFFFFF
}
</style>
</head>
<body>
<div class="nav-section">
<nav>
<ul>
<li><a href="EarthProfile.html">Earth Profile</a></li>
<li><a href="EarthInfo.html">Info</a></li>
<li><a href="EarthVideo.html">video</a></li>
</ul>
</nav>
</div>
<div class="container">
<div class="content">
</div>
</div>
<div class="info">
<center><img src = "earth.gif" height="800" width="700"></center>
<br>
<br>
<hr> </hr>
<br>
<br>
<p></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript"></script>
</body>
</html>
太阳
* {
保证金：0；
填充：0；
}
身体{
背景色：#91928C；
字体系列：“提香网”，Calibri，无衬线；
背景图片：url（starfield.jpg）；
背景尺寸：封面；
}
.导航部分{
宽度：100%；
填充：20%0；
}
导航ul{
位置：相对位置；
左：550px；
底部：350px；
宽度：700px；
背景色：rgba（255、255、255、0.5）；
文本对齐：居中；
边界半径：63px；
}
李国荣{
列表样式：无；
显示：内联块；
}
海军ulli a{
显示：块；
文字装饰：无；
填充：40px 60px；
字体大小：20px；
文本转换：大写；
字体大小：300；
颜色：#323642；
过渡：背景色0.5s；
}
导航ulli a：悬停{
背景色：rgba（255、255、255、0.3）；
}
.集装箱{
左边距：自动；
右边距：自动；
}
.info{
位置：相对位置；
顶部：-1800px；
左：550px；
不透明度：1；
宽度：700px；
颜色：#ffffff；
}
.内容{
位置：相对位置；
底部：690px；
左：500px；
背景色：#000000；
高度：1200px；
宽度：800px；
边框：3倍纯白；
不透明度：0.8；
}
h1{
颜色：#FFFFFF
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Sun</title>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #91928C;
font-family: 'Titillium Web', Calibri, sans-serif;
background-image: url(starfield.jpg);
background-size: cover;
background-position: center center;
width: 100vw;
height: 100vh;
}
.nav-section {
width: 100%;
}
nav ul {
width: 70%;
max-width: 700px;
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
border-radius: 63px;
margin: auto;
}
nav ul li {
list-style: none;
display: inline-block;
}
nav ul li a {
display: block;
text-decoration: none;
padding: 40px 60px;
font-size: 20px;
text-transform: uppercase;
font-weight: 300;
color: #323642;
transition: background-color 0.5s ease;
}
nav ul li a:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.container {
margin-left:auto;
margin-right:auto;
}
.info {
opacity: 1;
width: 90%;
margin: auto;
color: #ffffff;
}
.content {
background-color: #000000;
height: 1200px;
width: 80%;
margin: auto;
max-width: 1000px;
border: 3px solid white;
opacity: 0.8;
}
h1 {
color:#FFFFFF
}
</style>
</head>
<body>
<div class="nav-section">
<nav>
<ul>
<li><a href="EarthProfile.html">Earth Profile</a></li>
<li><a href="EarthInfo.html">Info</a></li>
<li><a href="EarthVideo.html">video</a></li>
</ul>
</nav>
</div>
<div class="container">
<div class="content">
<div class="info">
<img src = "earth.gif" />
<hr> </hr>
<p></p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript"></script>
</body>
</html>
太阳
html、正文、div、span、小程序、对象、iframe、，
h1、h2、h3、h4、h5、h6、p、块报价、预，
a、 缩写，首字母缩写，地址，大，引用，代码，
del、dfn、em、img、ins、kbd、q、s、samp、，
小、走向、强、次、辅助、tt、var、，
b、 u，i，中心，
dl，dt，dd，ol，ul，li，
字段集、表单、标签、图例、，
表格、标题、正文、tfoot、THAD、tr、th、td、，
文章、旁白、画布、细节、嵌入、，
图，figcaption，页脚，页眉，H组，
菜单、导航、输出、ruby、节、摘要、，
时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
}
/*旧浏览器的HTML5显示角色重置*/
文章，旁白，细节，图表，
页脚、页眉、H组、菜单、导航、节{
显示：块；
}
身体{
线高：1；
}
ol，ul{
列表样式：无；
}
区块报价，q{
报价：无；
}
blockquote:before，blockquote:after，
问：之前，问：之后{
内容：''；
内容：无；
}
桌子{
边界塌陷：塌陷；
边界间距：0；
}
* {
保证金：0；
填充：0；
}
身体{
背景色：#91928C；
字体系列：“提香网”，Calibri，无衬线；
背景图片：url（starfield.jpg）；
背景尺寸：封面；
背景位置：中心；
宽度：100vw；
高度：100vh；
}
.导航部分{
宽度：100%；
}
导航ul{
宽度：70%；
最大宽度：700px；
背景色：rgba（255、255、255、0.5）；
文本对齐：居中；
边界半径：63px；
保证金：自动；
}
李国荣{
列表样式：无；
显示：内联块；
}
海军ulli a{
显示：块；
文字装饰：无；
填充：40px 60px；
字体大小：20px；
文本转换：大写；
定义文字粗细