基础班day09笔记

学习目标

  • 能够完成尚合项目的头部部分
  • 能够完成尚合的导航部分
  • 能够完成尚合的产品详情部分
  • 能够完成尚合的底部部分

。。。。。。

理解上课的知识点……

版心

宽度固定且水平居中的盒子

为什么要有版心?

因为每台电脑的屏幕不一样大,为了让不同屏幕大小的电脑都能看到页面的主体内容,我们需要把网页的内容约束在版心里。

屏幕大能看到主体内容:

big

屏幕小也能看到主体内容:

small

因为主要内容都放在版心中,所以能让更多大小的屏幕完整的看到页面的主体内容。

版心代码:

1
2
3
4
5
6
7
8
/*通常版心命名为w*/
.w {
width: 1200px
margin:0 auto;
}
/----------------------------------------------------/
/*给主体内容的盒子设置版心,直接加上w这个类即可*/
<div class="w"></div>

常见的布局方式(了解)

注意点:实际项目中,写每个盒子的时候都要判断有没有版心,版心很重要!!

常见的三种布局方式:

了解即可,在之后的项目中会写到对应的布局

一列固定宽度且居中

常见的布局结构,一般每个盒子都设置了版心

yl

两列左窄右宽型

常见的就是banner部分左侧导航,右侧轮播图的效果

如: 小米官网

ll

通栏平均分布型

占满浏览器的一行叫做通栏,对于通栏的div,可以不用设置宽度,默认就是独占一行的

锤子官网

tl

一般布局方式会综合运用:

常见的布局情况

上课的记录

上课敲的项目首要任务是听懂

学习的是写页面的步骤,每个知识点都会,不会的是接下来做什么

如果有记笔记习惯的同学,可以把老师的步骤记下来,然后忘记怎么做的时候根据自己写的步骤看看能不能一步一步做出来

比如:

  1. 页面的顶部区域
    1. 大盒子需要一个版心
    2. 里面两张图片,分别左右浮动
    3. 图片离上面有距离,给大盒子设置 padding-top
    4. ……

尚合项目

项目搭建

整个项目应该就是一个文件夹,文件夹中放项目中的所有资源(图片、html、css)

步骤:

  1. 新建一个文件夹,作为项目文件夹 → 一个项目就应该有一个文件夹
  2. 在项目文件夹中新建images文件夹 → 存放项目相关图片
  3. 在项目文件夹中新建 index.html文件 → 页面文件
  4. 在项目文件夹中新建 index.css文件 → 样式文件

样式初始化

开始的时候先把项目中常见的css样式先写好→样式的初始化

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/*-----------------------------项目样式的初始化--------------------------------------------*/
/*清除默认的marign和padding*/
* {
margin: 0;
padding: 0;
}

/*消除页面中li的小点*/
ul {
list-style: none;
}

/*消除a标签默认的下划线*/
a {
text-decoration: none;
}

/*左浮动的类*/
.fl {
float: left;
}

/*右浮动的类*/
.fr {
float: right;
}

/*清除浮动的代码*/
.clearfix::after {
content: '';
display: block;
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}

/*版心的样式*/
/*版心就是宽度固定水平居中的盒子*/
.w {
width: 980px;
margin: 0 auto;
}

/*为了在上面看到下面的标签 最后删掉*/
/*body {
height: 2000px;
}*/

写代码(  ´-ω ・)▄︻┻┳══━一