用户登录

现在我们可以把这个布局设计用 html 还有 css 的形式表示出来,这样这个布局设计就可以用在网站或者应用里了。打开终端,先创建一个项目,进入想要保存项目的地方,创建一个目录,名字是 ninghao-ux。进入到这个目录里面,然后再用编辑器打开这个目录。

在这个项目里创建一个 html 文档,放在 views 目录的下面,文件的名字是 layout.html,在 vscode 编辑器里,输入 ! 号按一下 tab 键可以得到一个基本的 html 文档的结构。这个是编辑器的 emmet 插件提供的功能。

修改一下页面的标题。

然后再去创建一个样式表,放在 assets/css 这个目录的下面,名字是 page.css, 回到 layout 这个网页,在 head 标签里面,可以链接刚才创建的这个样式表,位置是上一级目录 assets ,css 目录里的 page.css 。

打开命令面板,输入 live,执行一下 open with live server, 这样会创建一个本地服务器,然后打开当前这个网页。这个是 live server 插件提供的功能。

回到终端,在项目下面,执行 git init ,初始化一个仓库, 添加所有的东西,然后再做一次 commit ,日志是 init 。

下面可以再去创建一个开发分支,并且切换到这个分支上,名字是 develop,然后基于这个创建再去创建一个分支,并且切换到这个分支上,名字是 layout 。

页面布局(CSS):创建文档《 从设计到代码:布局设计 》

统计

12774
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点