1 网页项目结构

一个最基本的网页结构包括四部分主要的内容，它们分别是css / img / js / index.html 文件

现在我们先来创建一个项目文件

mkdir webTutorials

然后创建三个文件夹分别存放不同的文件，以及和一个html文件

css / img / js / index.html

创建好基本的文件目录后，我们就可以使用css和html来构建网页用户界面了,关于交互的js我们会在后面讲到

1.1 网页代码基本框架

1.1.1 html 结构

字符集和样式都在head中，网站结构一般分为三部分，头、体和尾

1.1.2 css 结构

一般会定义两个css文件，一个是应用于全局，另一个应用于局部样式

common.css home.css

全局样式能够一次书写，适用所有页面

2 标签

a 标签

<body>
    <h1>Hello v</h1>
    <a href="http://google.com">Google</a>
  </body>

div 标签

每个div都是一个容器，并且可以一层层嵌套

class 标签

class 是一个选择器，名称可以任意定义，如panel等

使用a标签添加链接

外链要添加http，href属性，要链接的目标

target属性：使用_blank,保留当前窗口，打开新的窗口，如果默认不写的话，则新窗口会覆盖当前窗口

 <a href="home.html" target="_blank">Home</a>

标签位置的调整，可以先确定绝对位置还是相对位置，然后再依据top 和 left进行调整，如：

.header .walletLogin {
  font-size: larger;
  background-color: #88b4af;
  color: #ffffff;
  padding: 5px;
  position: absolute;
  left: 96%;
}

2.1 快速开发

快速开发

Id 对应 #, 如 div#

class 对应 ., 如div.panel + tab键
使用 > 表示下一层 + 表示同一层，如：
div.panel1>div.title+div.content 会生成：

<div class="panel1">
     <div class="title"></div>
     <div class="content"></div>
</div>

所有的div都是一个容器，使用快捷键可以迅速创建一个网页的主要元素，当然样式还是得自己慢慢调整

1 & 2 如何结合CSS、HTML创建简单的Web用户界面