【项目记录/PC端】暮云游旅游首页

项目步骤

1）创建项目目录

2）搭建开发环境

本项目使用的是webpack
1.初始化项目
2.安装相应的node模块
3.配置webpack

3）开发公共组件和页面组件

公共组件

页面组件

4）页面中引入组件

包括
模板.art
样式.css
功能.js

模板中引入组件

JS中引入组件

静态部分

标签

为区分div功能，使用区块标签

<section>	文档的区域，语义比div大
<article>	文档的核心文章内容，会被搜索引擎主要抓取
<aside>	文档的非必要相关内容，比如广告等
<nav>	导航条
<header>	页头
<main>	网页核心部分
<footer>	页脚

居中

谁要居中	水平	竖直
文本	text-align:center;	line-height=盒子高height
盒子	margin:0 auto;	（如下代码）

父亲{
position:relative;
}
元素{
position: absolute;
top: 50%;
margin-top: -自己高度一半;
}

盒子布局

1）定位-实现压盖
2）浮动

传统盒模型 ：通过 display、float等参数来配置具体的布局，这种方式代码简单，但是在处理实现诸如垂直居中、弹性宽度和高度等特性时会极为麻烦
请了解Flexbox 布局方式

制作三角形

1.空心
两个不同色的正方形旋转45°错位压盖
描绘两条边框，旋转一定角度
2.实心
设置盒子宽高为0，描绘四条实心透明边框，一条边框重新着色

宽高为0

高为0

多盒子嵌套

1.只需设最内盒子宽度，父级盒子逐层撑开

2.便于定位为目的

过渡

transition: transform 0.2s ease 0s;

变形

transform: rotate(180deg);下拉菜单的旋转箭头
transform:scale();鼠标触碰图片放大
图片深浅