[已解决]为啥html直接打开文件，和从vs打开显示的不一样。

落寞少年 · 发表于 2020-8-9 22:13:39

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

这个是vs的

这个是从文件夹打开的

哪位前辈帮帮忙，怎么才能弄成一致了，哪个是正确的显示的样式。。

最佳答案

月排行榜 / 总排行榜

不二如是

2020-8-11 08:39:24

VSCode 是否安装了格式化插件？

建议都用 Chrome 浏览器打开

跳转到最佳答案楼层

落寞少年 · 发表于 2020-8-9 22:14:22

第一个图是用vs打开的，第二个是从文件夹打开的，，

永恒的蓝色梦想 · 发表于 2020-8-9 22:14:56

落寞少年发表于 2020-8-9 22:14
第一个图是用vs打开的，第二个是从文件夹打开的，，

VS 还能打开网页？

落寞少年 · 发表于 2020-8-9 22:16:21

把里面内容复制到一个新的文档打开也是和第二个图一样，，是我写的样式实际上就是第二个内样吗？

落寞少年 · 发表于 2020-8-9 22:18:22

永恒的蓝色梦想发表于 2020-8-9 22:14
VS 还能打开网页？

就是右键open with live server打开的。。

zltzlt · 发表于 2020-8-10 06:52:25

永恒的蓝色梦想发表于 2020-8-9 22:14
VS 还能打开网页？

楼主说的应该是 VSC ……

永恒的蓝色梦想 · 发表于 2020-8-10 08:58:10

zltzlt 发表于 2020-8-10 06:52
楼主说的应该是 VSC ……

我佛了

ZSniubi000 · 发表于 2020-8-10 10:23:03

应该是宽高的问题,写大盒子的时候宽高尽量用100%,不要写具体的px

落寞少年 · 发表于 2020-8-10 14:12:51

ZSniubi000 发表于 2020-8-10 10:23
应该是宽高的问题,写大盒子的时候宽高尽量用100%,不要写具体的px

能用的我基本都用百分比了，，还是没有大变化，都是同样的代码，感觉就是两个大小的基准不一样似的，直接打开就好像是整体缩小了，跟从vs open with live server 打开的就不一样。

落寞少年 · 发表于 2020-8-10 14:15:24

刚才从检查看了一下，发现两个html 的区域不一样，直接从文件夹打开的html的区域比较小不知道为啥。

落寞少年 · 发表于 2020-8-10 14:17:27

落寞少年 · 发表于 2020-8-10 14:34:31

<!DOCTYPE html>
<html>
<head>
<title>晨钟文学社</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="keywords" content="晨钟文学社,文学社，河北工程大学">
<meta name="description" content="河北工程大学晨钟文学社，推崇在娱乐至死、快餐娱乐的时代，尝试安静的感受生活。静心、读书、学习、成长。">
<meta name="author" content="敖无虚">
<link rel="icon" href="晨钟文学社.jpg" type="image/x-icon">
</head>
<style>
body {
margin: 0em;
}
header {
display: flex;
width: 100%;
height: 15% ;
min-width: 15em;
}
nav {
background-color: rgb(197, 218, 240);
min-width: 15em;
height: 10%;
}
header div {
width: 50%;
}
h1 {
font-size: 0.68em;
margin: auto;
color: rgb(142, 236, 142);
padding: 2%;
padding-left: 40%;
min-width: 8em;
}
header ul {
display: inline-flex;
margin-top: 0;
list-style-type: none;
width: 100%;
height: 100%;
margin-bottom: 0em;
margin: 0em;
}
header div ul {
margin: auto;
}
ul:first-of-type {
padding: 0em;
height: 100%;
width: 100%;
}
ul:first-of-type p a {
font-size: 3.25em;
margin-top: 0em;
margin-left: 3em;
color: black;
min-width: 4em;
}
ul:first-of-type p input {
width: 60%;
height: 6%;
font-size: 2.5em;
margin: 0em;
min-width: 4em;
}
p#2,
p#3 {
padding-left: 2em;
}
header ul li {
width: 33.333%;
padding: 0em;
font-size: 0.5em;
margin: 0em;
margin-top: 1em;
min-width: 4em;
}
ul:first-of-type p {
padding: 0em;
margin: 0em;
font-size: 0.25em;
width: 100%;
display: flex;
}
span {
font-size: 3.25em;
padding: 0em;
margin-top: 0em;
color: black;
min-width: 2em;
}
ul li a {
font-size: 0.4em;
color: black;
}
nav ul li {
line-height: 0.5em;
text-align: center;
}
nav ul {
padding-bottom: 1em;
justify-content: center;
display: flex;
list-style-type: none;
margin: auto;
}
.small {
width: 6%;
min-width: 1em;
}
.lang {
width: 9%;
min-width: 2em;
}
.mid {
width: 8%;
min-width: 1.5em;
}
main {
width: 60%;
height: 20em;
background-color: tomato;
margin: auto;
}
main img {
width: 100%;
height: 25%;
}
</style>
<body>
<header>
<div>
<h1>晨钟文学社</h1>
</div>
<div>
<ul>
<li>
<p><input type="search">
<span>搜索</span>
</p>
</li>
<li>
<p id="2"><a href="">登录</a></p>
</li>
<li>
<p id="3"><a href="">注册</a></p>
</li>
</ul>
</div>
</header>
<nav>
<ul>
<li class="small"><a href="">首页</a></li>
<li class="mid"><a href="">论道场</a></li>
<li class="lang"><a href=""> 长篇小说</a></li>
<li class="lang"><a href=""> 短篇小说</a></li>
<li class="mid"><a href="">鬼故事</a></li>
<li class="small"><a href="">散文</a></li>
<li class="small"><a href="">诗歌</a></li>
<li class="small"><a href="">其他</a></li>
</ul>
</nav>
<main>
<img src="背景16.jpg" alt="不见啦">
</main>
</body>
</html>

复制代码

落寞少年 · 发表于 2020-8-10 14:35:13

这个是代码

Darth_EF · 发表于 2020-8-10 23:20:36

头一回见装着xampp还用vs的临时预览服务器开网站的。。。
在style标签最前面加上html,body{width:100%;height:100%;margin:0;padding:0;position:absolute;left:0;top:0;}

不二如是 · 发表于 2020-8-11 08:39:24

VSCode 是否安装了格式化插件？

建议都用 Chrome 浏览器打开

落寞少年 · 发表于 2020-8-11 10:15:29

不二如是发表于 2020-8-11 08:39
VSCode 是否安装了格式化插件？

建议都用 Chrome 浏览器打开

就装了，live server 和中文的内个插件，用vs打开的内个是错误的样式吗？以后要是挂到服务器上显示的直接打开的内种是吗

落寞少年 · 发表于 2020-8-11 10:19:28

Darth_EF 发表于 2020-8-10 23:20
头一回见装着xampp还用vs的临时预览服务器开网站的。。。
在style标签最前面加上html,body{width:100%;hei ...

一开始没用vscode用记事本学的，后来用vscode内个可以实时刷新页面嘛，就用vscode预览页面。我可以把内个xammp卸了是吗？vscode也可以预览出来表单提交给服务器的效果吗

ZSniubi000 · 发表于 2020-8-11 10:25:44

你那个width用百分比好,height最好用具体的值,header的高15%建议改成具体值试试

落寞少年 · 发表于 2020-8-11 10:25:45

Darth_EF 发表于 2020-8-10 23:20
头一回见装着xampp还用vs的临时预览服务器开网站的。。。
在style标签最前面加上html,body{width:100%;hei ...

还是不行

落寞少年 · 发表于 2020-8-11 10:51:58

刚才找到原因了，可能是不小心设置的，我vscode打开的chrome缩放是300%放大了三倍，修改到正常就行了。原来我一直是预览的是放大后的页面，

账号		自动登录	找回密码
密码			立即注册