今天主要记录一下这几天学习的笔记，在别人的辅导下制作了一个简单的页面，当然还是有很多不完善的地方，主要是因为刚学习想给自己增加一些信心，之前也看过很多视频关于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
网友评论