今天主要学习了盒模型里面的margin,并且开始了网页制作的实战,一下是今天的笔记以及部分练习的代码(不足之处还请小伙伴们多多留言哦)
一.笔记
1.盒模型:
margin:
1: margin长在元素之外的。
2: margin控制的是 同级元素 之间的位置关系。
3: margin不会对盒子本身的宽高造成影响。
4: 给单一方向添加margin值
margin-left/right/bottom/top:;
5: margin的设置方法(和padding,border一样):
margin:1个值 四周
margin:2个值 上下 左右
margin:3个值 上 左右 下
margin:4个值 上右下左
6: margin可以设置负值,但是padding不可以。
7: margin常出现的BUG:
a:当父元素和第一个子元素都没有设置浮动的情况下,如果给第一个子元素添加margin-top 会错误的把margin-top加在父元素上面。
b: 上下相邻两个元素之间的margin值,不会叠加,按照最大值去设置。
8: margin:0 auto; 让当前元素在父元素里面左右居中。

2.text文本上下误差
问题来源:文本自身存在一定的上下距离,所有设置padding值时总体会有偏差,
解决的办法是:给文本添加line-height (行高),使行高等于文本大小

3.网页规划
1)元素命名:
id划分外围结构 -> id选用驼峰式命名法 || 语义化news/case。
版心的命名 -> 连字符命名法 news-wrap
内部内容块的命名 -> 下划线 news_left / news_right
2)css外部样式表:
1:每个页面都需要属于自己的样式表。
2:一个网站,都拥有公共样式表。
3:重置样式的样式表。(清除所有默认样式)
注:如果版心两侧没有颜色平铺,可以直接写版心区域。

二.实战练习部分代码和效果图
部分效果图如下:
逆战停课不停学,今天是学习HTML的第七天(网页制作的实战)
代码:
logo部分HTML代码
逆战停课不停学,今天是学习HTML的第七天(网页制作的实战)
logo的CSS代码
逆战停课不停学,今天是学习HTML的第七天(网页制作的实战)
以上是今天学习的内容以及练习。由于今天是HTML实战练习第一天学习东西不是很多,部分效果还无法完美的实现,今后会更加努力,制作出更好的页面效果

相关文章: