为啥html直接打开文件,和从vs打开显示的不一样。
哪位前辈帮帮忙,怎么才能弄成一致了,哪个是正确的显示的样式。。 第一个图是用vs打开的,第二个是从文件夹打开的,, 落寞少年 发表于 2020-8-9 22:14第一个图是用vs打开的,第二个是从文件夹打开的,,
VS 还能打开网页? 把里面内容复制到一个新的文档打开也是和第二个图一样,,是我写的样式实际上就是第二个内样吗? 永恒的蓝色梦想 发表于 2020-8-9 22:14
VS 还能打开网页?
就是右键open with live server打开的。。 永恒的蓝色梦想 发表于 2020-8-9 22:14
VS 还能打开网页?
楼主说的应该是 VSC …… zltzlt 发表于 2020-8-10 06:52
楼主说的应该是 VSC ……
我佛了 应该是宽高的问题,写大盒子的时候宽高尽量用100%,不要写具体的px ZSniubi000 发表于 2020-8-10 10:23
应该是宽高的问题,写大盒子的时候宽高尽量用100%,不要写具体的px
能用的我基本都用百分比了,,还是没有大变化,都是同样的代码,感觉就是两个大小的基准不一样似的,直接打开就好像是整体缩小了,跟从vs open with live server 打开的就不一样。 刚才从检查看了一下,发现两个html 的区域不一样,直接从文件夹打开的html的区域比较小不知道为啥。
<!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模块儿,最左边为晨钟文学社和图标,最右边为登录和注册链接-->
<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> 这个是代码 头一回见装着xampp还用vs的临时预览服务器开网站的。。。
在style标签最前面加上html,body{width:100%;height:100%;margin:0;padding:0;position:absolute;left:0;top:0;} VSCode 是否安装了格式化插件?
建议都用 Chrome 浏览器打开 不二如是 发表于 2020-8-11 08:39
VSCode 是否安装了格式化插件?
建议都用 Chrome 浏览器打开
就装了,live server 和中文的内个插件,用vs打开的内个是错误的样式吗?以后要是挂到服务器上显示的直接打开的内种是吗 Darth_EF 发表于 2020-8-10 23:20
头一回见装着xampp还用vs的临时预览服务器开网站的。。。
在style标签最前面加上html,body{width:100%;hei ...
一开始没用vscode用记事本学的,后来用vscode内个可以实时刷新页面嘛,就用vscode预览页面。我可以把内个xammp卸了是吗?vscode也可以预览出来表单提交给服务器的效果吗 你那个width用百分比好,height最好用具体的值,header的高15%建议改成具体值试试
Darth_EF 发表于 2020-8-10 23:20
头一回见装着xampp还用vs的临时预览服务器开网站的。。。
在style标签最前面加上html,body{width:100%;hei ...
还是不行 刚才找到原因了,可能是不小心设置的,我vscode打开的chrome缩放是300%放大了三倍,修改到正常就行了。原来我一直是预览的是放大后的页面,{:10_266:}
页:
[1]