学习目标
- 能够完成尚合项目的头部部分
- 能够完成尚合的导航部分
- 能够完成尚合的产品详情部分
- 能够完成尚合的底部部分
。。。。。。
理解上课的知识点……
版心
宽度固定且水平居中的盒子
为什么要有版心?
因为每台电脑的屏幕不一样大,为了让不同屏幕大小的电脑都能看到页面的主体内容,我们需要把网页的内容约束在版心里。
屏幕大能看到主体内容:
屏幕小也能看到主体内容:
因为主要内容都放在版心中,所以能让更多大小的屏幕完整的看到页面的主体内容。
版心代码:
1 | /*通常版心命名为w*/ |
常见的布局方式(了解)
注意点:实际项目中,写每个盒子的时候都要判断有没有版心,版心很重要!!
常见的三种布局方式:
了解即可,在之后的项目中会写到对应的布局
一列固定宽度且居中
常见的布局结构,一般每个盒子都设置了版心
两列左窄右宽型
常见的就是banner部分左侧导航,右侧轮播图的效果
如: 小米官网
通栏平均分布型
占满浏览器的一行叫做通栏,对于通栏的div,可以不用设置宽度,默认就是独占一行的
一般布局方式会综合运用:
上课的记录
上课敲的项目首要任务是听懂
学习的是写页面的步骤,每个知识点都会,不会的是接下来做什么
如果有记笔记习惯的同学,可以把老师的步骤记下来,然后忘记怎么做的时候根据自己写的步骤看看能不能一步一步做出来
比如:
- 页面的顶部区域
- 大盒子需要一个版心
- 里面两张图片,分别左右浮动
- 图片离上面有距离,给大盒子设置
padding-top
- ……
尚合项目
项目搭建
整个项目应该就是一个文件夹,文件夹中放项目中的所有资源(图片、html、css)
步骤:
- 新建一个文件夹,作为项目文件夹 → 一个项目就应该有一个文件夹
- 在项目文件夹中新建images文件夹 → 存放项目相关图片
- 在项目文件夹中新建
index.html
文件 → 页面文件 - 在项目文件夹中新建
index.css
文件 → 样式文件
样式初始化
开始的时候先把项目中常见的css样式先写好→样式的初始化
代码:
1 | /*-----------------------------项目样式的初始化--------------------------------------------*/ |