简单制作网页 学习笔记

今天主要记录一下这几天学习的笔记，在别人的辅导下制作了一个简单的页面，当然还是有很多不完善的地方，主要是因为刚学习想给自己增加一些信心，之前也看过很多视频关于html+css的教学，但是每次想自己写的时候，总是不知道从哪里入手。

练习制作的百度首页

下面简单记录一下学习笔记，主要是用到div+css

div主要是用于网页布局，可以把网页分成几个区域，而css主要是用于修饰整个页面，比如字体大小，颜色，格式等等。

1、首先可以把页面分成上、中、下区域，可以写成 如下

把整个页面分成顶部、中部、底部

效果如下

顶部、中部、底部

2、需要给每个区域布局一下大小

把每个区域的高度设置一下，这边用红色框起来方便大家观看，因为div是块级元素可以设置width和height（宽度和高度），块级元素默认是独占一行的，对应的是行内元素，是不能设置宽度和高度，默认是在同行显示的，用display是可以将块级元素转换为行内元素的，同理也是可以将行内元素转换为块级元素。还有一些元素是既可以设置width和height，有可以在同行显示，input、button

设置顶、中、底部的区域大小样式

效果如下

顶、中、底三部分区域大小分布

3、完善每个区域的内容

• 顶部内容

这是顶部的内容

效果如下

顶部内容

---

顶部样式设置

设置顶部样式

效果如下

顶部

• 中部内容

  
  中部内容

说明:中部又用了两个 div 分了上下两个区域。

效果如下

中部显示效果

---

中部样式设置

image.png

效果如下

image.png

• 底部内容

  
  image.png

效果如下

image.png

---

底部样式设置

image.png

效果如下

image.png