行，今儿个就跟大伙儿唠唠我这个官网项目是咋从零开始鼓捣出来的。你们要的“项目官网入门必备”？我直接上干货，带你们走一遍我踩过的坑。
第一步：新建文件夹
打开电脑，桌面右键新建个文件夹，名字瞎起的，就叫“狗蛋官网V1.0”，感觉够土就完事儿了。先进去建俩空文本，一个改名叫“*”，一个叫“样式.css”。就这俩，别的啥也不要。
第二...
行，今儿个就跟大伙儿唠唠我这个官网项目是咋从零开始鼓捣出来的。你们要的“项目官网入门必备”？我直接上干货，带你们走一遍我踩过的坑。
第一步：新建文件夹
打开电脑，桌面右键新建个文件夹，名字瞎起的，就叫“狗蛋官网V1.0”，感觉够土就完事儿了。先进去建俩空文本，一个改名叫“*”，一个叫“样式.css”。就这俩，别的啥也不要。
第二步：HTML开整
双击打开*，开局就敲个英文感叹号，靠编辑器自动补全的那堆代码，我瞅都没仔细瞅，先把标题改成“狗蛋工作室官网”。接着在里面开始堆：
第一块：导航栏
- 直接
- 里面塞四个链接，名字分别是“首页”“关于”“产品”“联系我们”，链接地址先瞎写个#占位
- 完事儿一看，丑得一批，就一行字挤在左上角
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
第二块：主图大横幅
- 整了个，class随手敲了个“banner”
- 里面写句“欢迎来到狗蛋工作室”
- 顺手加了个
- 结果按钮小得像粒芝麻，字还挤成一团
第三步：CSS救场
受不了这丑样了，赶紧打开“样式.css”文件。第一件事就是把导航栏横过来：
- 给
- 一看，四个链接还是挤在一起，又补了句 justify-content: space-around;
- 这下终于均匀分布了！顺手给标签去了默认的下划线（text-decoration: none），颜色换成蓝色
接着折腾那个banner：
- 直接设置宽度100%，高度300px
- 背景色？找了个在线色板，抄了个天蓝色代码
- 字太小？font-size猛调到36px，字居中（text-align: center），上下距离不会调，就用padding-top乱拉数值，拉到80px看着顺眼点
- 那个按钮，加了白色背景，蓝色边框，圆角调了10px，内边距上下左右胡乱填了10px 20px
重点来了：响应式！
美滋滋用手机打开一看，排版全乱套了！导航栏的字都叠到一块儿。气得我翻箱倒柜搜教程，在CSS末尾补了段：
@media (max-width: 768px) {
- nav { flex-direction: column; } // 改成竖着排
- .banner { height: 200px; font-size: 24px; } // 高度和字都调小点
保存刷新，手机上看总算不那么惨了，长舒一口气。
第四步：内容填充与优化
后面就简单了，依葫芦画瓢：
- “关于我们”部分：塞了两段假文案，加了张本地测试用的风景图（img标签src直接拖进去，宽度设100%）
- “产品”部分：建了三个代表产品卡片，每个里面放标题、描述、图片，用flex横着排，间隙设置20px
- “联系我们”：搞了个表单，就名字、邮箱、留言框加提交按钮，样式抄的导航栏按钮稍微改改
掉进SEO的坑
朋友提醒我官网得上搜索引擎！又回头去
里补meta：description里瞎编了句介绍，keywords塞了一堆“官网”“工作室”“设计”“狗蛋”。顺带把页面的h1标签都检查一遍，主标题用了，各部分标题用了
成果
折腾大半天，一个能看（至少我自己觉得）、能在手机电脑上大致正常显示、有导航有内容有联系方式的破官网终于搭好了！浏览器一关再打开，localhost瞅几眼，成就感还是有的。说“入门必备”真不为过，该踩的坑一个没少踩，缝缝补补也算拼出来了。这教程写出来，感觉比我做官网还累！
相关推荐