visual studio怎么创建网页问题解决实战教学

发布日期： 2025-12-14 阅读量： 作者： admin

行，今天就跟大伙儿唠唠我这个老菜鸟是怎么在Visual Studio里捣鼓网页，结果踩了一堆坑才爬出来的，真事儿！

起个头：脑子一热就想搞个页面

昨儿个晚上寻思着整个简单的个人小页面玩玩，寻思Visual Studio这么个大玩意儿肯定行。打开VS，咔咔两下点了“新建项目”，看着一堆模板眼花缭乱。

瞅见个“* Core Web应用”的选项，以前好像听说过能做网页，就它了！
给项目瞎起了个名叫“MyDogPage”，管它。
到了选模板那步，看见“空”就选了空，心想着从头开始才显得我厉害。

第一个大跟头：东西？

新建完项目一瞅，这界面干净是真干净，干净得连根毛都没有！文件列表就几个看不懂的配置文件。网页在哪儿弄？有点懵圈。

赶紧右键点项目名字，在“添加”菜单里一顿翻找。
看见个“新建项...”点了进去。
在弹出窗口里找找，终于在一堆文件类型里瞄到了“HTML页”，跟见了亲人似的赶紧选中。
随手输了个“*”当名字，确认添加。

好了，这下在“解决方案资源管理器”里看见“*”了，心里美滋滋。

开整页面：感觉要起飞了

双击打开*，总算有地方写东西了。VS挺智能的，敲个感叹号再按Tab键，居然自己给我补了个基础网页框架！省事儿！

兴冲冲在“title”那儿写上“我家旺财的小窝”。
在“body”里面开始瞎编：加了几个 “h1”写大标题，“p”标签写旺财多可爱。
想着得有照片，放个“img”标签，随手写了“src="*"”。

心想这页面成了！迫不及待点开上面那个调试小箭头（绿色播放键）。默认浏览器“唰”地弹出来了，地址栏看着挺长一串localhost打头。

当头一棒：这啥玩意儿？！

浏览器显示的东西差点把我气笑：

我写的“旺财小窝”标题倒是出来了。
文字乱七八糟堆在一起，说好的分段？跟揉成一团的废纸似的！
照片？只有一个裂开的小图标，像是在笑话我！

气得我差点砸键盘！明明在VS里看着排版挺预览的时候它自己就有样式，感情都是骗人的！

摸爬滚打找原因：样式你死哪去了！

冷静下来想想，我那空项目压根没加任何样式（CSS）！这浏览器可不就瞎显示嘛赶紧补救：

在“解决方案资源管理器”对着项目名再次右键->添加->新建项。
这回目标明确，直接找“样式表”（CSS），新建一个，名字就叫“*”。

回到*文件里，在“head”标签里面加一行：“link rel="stylesheet" href="*"”，意思就是告诉浏览器：快去找这个叫*的样式文件，照着这个打扮！

和CSS干架：死活对不齐！

打开*，我想着简单排个版：让标题居中，文字段落有点间距，照片能正常显示就行。

写了“body { width: 800px; margin: 0 auto; }”想把整个内容放中间。
给“h1”写了个“text-align: center;”。
给“p”加了点“margin-top: 10px;”。
又给“img”写了个“max-width: 100%;”怕图片太大飞出去。

再点调试运行！ 刷新浏览器一看：

标题总算居中了，好兆头！
段落好像……有那么一点点间距了？不确定，再仔细看看。
最气的来了：图片还是个叉！ 路径不对还没解决！

图片为啥显示不了？路径惹的祸！

琢磨着，“src="*"” 这行肯定是出错了。图片我都没放项目里，浏览器上哪找去？这网页跑起来是在一个叫“wwwroot”的文件夹里找东西的（这词儿还是后来现查的）。

在“解决方案资源管理器”里找到项目目录下的“wwwroot”文件夹。
右键添加->新建文件夹，建了个叫“images”的。
然后把我拍的旺财照片拖进去，重命名成“*”。
回头改*里面那个图片标签，把“src”改成“src="/images/*"”。

再刷新浏览器！谢天谢地，狗头总算出现了！虽然还有点傻大傻大的，但起码不再是叉了！那个“max-width: 100%;”好像起作用了，没撑破。

新的幺蛾子：怎么Firefox看着不对？

就在我准备关电脑撸狗庆祝的时候，手贱点开了Firefox浏览器，访问了同样的地址（localhost端口号一样）……

靠！我居中的内容在Firefox里怎么靠左了？！

气得我一口老血！搞半天Edge里看着好好的，换个浏览器又完犊子！赶紧搜“body margin auto firefox 没用”，原来有的浏览器默认给body加了点margin或者padding。

一咬牙，在*的“body”规则里直接加：“padding: 0 !important; margin: 0 !important;”，用“!important”这霸王条款先解决默认样式捣乱。再加“width: 800px; margin: 0 auto !important;” 。保存，刷新Firefox。 呼……总算老老实实居中了。

就这么点屁事儿，从新建项目到最终在俩浏览器里看着差不多像样，花了我两个多钟头！光调试刷新就点了得有一百次，活活熬成了熊猫眼，就为了我家那傻狗的破主页！Visual Studio是厉害，但这初次见面给的“惊喜”也忒多了点！下次再弄，肯定先整点带模板的项目试试。

上一篇: 独立站用哪个建站平台好？这6个工具新手也能快速上手

visual studio怎么创建网页问题解决实战教学

随便看看