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

为啥html直接打开文件,和从vs打开显示的不一样。

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

落寞少年 发表于 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模块儿,最左边为晨钟文学社和图标,最右边为登录和注册链接-->
    <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%放大了三倍,修改到正常就行了。原来我一直是预览的是放大后的页面,{:10_266:}
页: [1]
查看完整版本: 为啥html直接打开文件,和从vs打开显示的不一样。