前端设计学习笔记--黑马程序员pink老师

发表于 更新于 分类于
本文字数： 2.5k 阅读时长 ≈ 2 分钟

教学视频:https://www.bilibili.com/video/BV14J4114768?p=212

笔记从P212开始记录之前笔记内容可参考以下链接：

「学习笔记」HTML基础:https://mp.weixin.qq.com/s/lNkLbVL8qWsay8c3krVL8A

「学习笔记」CSS基础:https://mp.weixin.qq.com/s/zhi3cSU0k4DlHLerta9XXQ

P212 学成在线-精品推荐模块（上）

1.确定排布

image1

观察模块的结构，先观察大小盒的排布，显然是一个大盒子包含小盒子，小盒子在大盒子内部横向排布,大盒子在主页面以居中对齐的形式纵向排布的形式。

1
2
3
4
5
6
7
8
9
10
11
12
1、网页布局准则
　　　　　　多个块级元素纵向排列找标准流；

　　　　　　多个块级元素横向排列找浮动；

　　　　　　为了约束浮动元素的位置，网页布局一般采用：

　　　　　　　　1、先用标准流的父元素上下排列，之后内部子元素采用浮动左右排列；

　　　　　　　　2、一个盒子浮动了，他的兄弟元素也浮动；

　　　　　　　　3、浮动的盒子只会影响浮动盒子后面的标准流，不影响前面的；

根据网页布局准则我们可知大盒子找标准流，小盒子找浮动流大体的排布格式可以以下图为例：

image5

2.命名

建立标签后我们要对其进行命名，尽管有些时候直接调用标签名就行但是在实际工作中尽量对标签进行命名，因为这样有利于别人的理解同时也方便自己后期的更改纠错。命名需要有实际含义并且尽量用英文命名，如“精品推荐” 可取名为“goods”，如果实在记不起英文就用拼音代替。作为一个英语不好的萌新，我的命名参考pink老师。

image2

3.开始书写html码和css码

书写较大页面html css码时尽量让结构与样式相分离image6即html写在一个文件中， css写在另一个文件中 最后在html中调用css。

1
<link rel="stylesheet" href="">

这样写的好处是代码美观清晰易懂,方便别人二次修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
 <!-- html码 -->
<div class="1 w">
        <h3>精品推荐</h3>
        <ul>
            <li class="goods-items"><a href="#">JQuery</a></li>
            <li class="goods-items"><a href="#">Spark</a></li>
            <li class="goods-items"><a href="#">MySQL</a></li>
            <li class="goods-items"><a href="#">JavaWeb</a></li>
            <li class="goods-items"><a href="#">MySQL</a></li>
            <li class="goods-items"><a href="#">JavaWeb</a></li>
        </ul>
        <div class="mod"><a href="#">修改兴趣</a></div>
    </div>
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
//css码
.goods {

  height: 61px;

  margin-top: 9px;

  background-color: #ffffff;

  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);

  line-height: 61px;

}



.goods h3 {

  float: left;

  padding: 0 34px;

  font-weight: 700;

  font-size: 16px;

  color: #13a9ff;

}



.goods ul {

  float: left;

}



.goods ul li {

  float: left;

}



.goods .mod {

  float: right;

  margin-right: 27px;

  font-size: 14px;

  color: #00a4ff;

}



.goods ul li a {

  padding: 0 37px;

  border-left: solid 1px #bfbfbf;

  color: #000;

}



body .mod a:link {

  color:#00a4ff;

}



.mod a {

  color:#00a4ff;

}
最终效果

image7

对于左侧的“精品推荐”我选择h3标签并将其左浮动。“推荐课程名称部分”我将其以无序列表形式呈现即ul 包裹 li 由于是超链接于是在 li 中放置 a 并将ul和li左浮动。“修改兴趣”部分靠右于是将其右浮动。由于line-height是可以继承的于是我在父元素goods中设立line-height等于goods的高，goods中的字体便能在垂直方向居中了。小横杆是实现方法是设置a 赋给其左边框，注意不要赋给li边框 因为li和goods是等高的，就会变成这样

image8