一、开发环境
Atom
Chrome
二、项目说明
基于Web的图片浏览应用,通过构建ottergam,学会使用HTML,CSS以及JaveScript进行浏览器编程的基础知识,手动构建UI(User Interface),学习浏览器加载和渲染内容的方式。
三、建立项目路径
ottergarm
....script
....stylesheets
四、搭建Ottergram
- 在stylesheets下创建文件style.css
- 在项目根目录下创建文件index.html
- 编写index骨架
<!DOCTYPE html> /* 定义文档类型*/
<html>
<head>
<meta charset="utf-8">
<title>ottergarm</title>
<link rel="stysheets" href="styles/style.css">
/*通过link标签给HTML文档附加外部样式表,他有两个属性
rel(relationship)属性值为stylesheet表明链接的文档是样式表
href属性值表明样式表所在的路径*/
</head>
<body>
<header>
<h1>ottergarm</h1>
</header>
</body>
</html>
- 添加内容
在body中添加
-
一个 无序列表 标签为
<ul>
-
五个 列表项 标签为
<li>
-
每个列表项中包含一个
<span>
标签,此标签没有任何特殊含义,只是一个容器。
内容添加完毕后index.html为:
<body>
<header>
<h1>ottergarm</h1>
<ul>
<li>
<span>Barry</span>
</li>
<li>
<span>Robin</span>
</li>
<li>
<span>Maurice</span>
</li>
<li>
<span>Lesley</span>
</li>
<li>
<span>Barbara</span>
</li>
</ul>
</header>
</body>