简单制作网页 学习笔记

今天主要记录一下这几天学习的笔记,在别人的辅导下制作了一个简单的页面,当然还是有很多不完善的地方,主要是因为刚学习想给自己增加一些信心,之前也看过很多视频关于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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,679评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,677评论 32 459
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 10,071评论 5 15
  • 阅读
    外小三2班阅读 3,003评论 0 0
  • 假期自己的心情可谓经历了三起三落。 第一阶段惴惴不安。没事拿着手机一刻不停地刷屏,看到许多保姆虐童事件,顿感心惊肉...
    臭小妈妈阅读 2,523评论 0 0