HTML项目基础搭建—Hbuilder

用户7695850185112
324 阅读1分钟

项目基础搭建

① 新建项目

image.png

② 选择html基础模板

image.png

③ 百度 清除css默认样式

image.png

链接直接地址 www.php.cn/website-des…

④ 第一天项目 里的css 右键 新建 选择css文件

image.png

⑤ 给css起 init.css 【init是初始化的意思】

image.png

⑥ 将清除css默认样式 放入 init.css里面

image.png

image.png

⑦ 在index.html 文件里 导入初始化样式

image.png

⑧ 检查 初始化样式 是否生效

image.png

image.png

image.png

image.png

如果 数字前面 没有 黑点 则为 初始化 成功

image.png

image.png

⑨ 将html设置为 移动端 百度 HTML移动端设置meta

image.png

直接链接 www.bbsmax.com/A/kjdwlB42z…

image.png

image.png

⑩ 检查 移动端设置 meta 是否生效

请自行下载谷歌浏览器 开发中只使用谷歌浏览器 用其他浏览器找不到地方的一律不管

image.png

image.png

如果数字 没有 改变大小 为 设置移动端meta 生效

image.png

⑪安装 css图标

百度 css.gg

image.png

直接链接 css.gg/app

image.png

image.png

image.png

image.png

image.png

在页面中引入

⑫ 检查 css图标是否引入成功

image.png

image.png

image.png

image.png

⑬ 创建 全局css样式文件

image.png

image.png

在index.css中写入样式 并保存

image.png 在index.html中 link 引入样式

image.png

写一个 div class 给个box 保存页面

image.png

页面变色 说明 引入外部全局css成功

⑭ 保存默认页面为模板

调整页面 成

image.png

注释 的快捷键是 复制文字 按住 ctrl 后 按一下 ? 号

开始创建模板 文件》新建》html image.png

image.png

image.png 打开 index.txt 将 项目中index.html里的代码 复制进去

image.png

⑮ 检查 自定义html模板 是否生效

image.png

image.png

image.png

新建的页面 默认模板 出来是就是成功了。

avatar
文章
阅读
粉丝