第四周学习周记

这篇博客记录了HTML第四周的学习,主要内容包括创建页面标题、网页导航栏和主体内容的布局。通过使用PageHeader为标题添加间距,利用.navbar和.navbar-default创建导航栏,以及应用网格系统实现分区展示,作者成功构建了一个团队介绍页面。
摘要由CSDN通过智能技术生成

HTML第四周学习周记,创建一个团队介绍页面

一、创建页面标题
二、创建我们网页的导航栏
三、主体内容的布局总结

一、创建页面标题

页面标题会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用。如需使用页面标题(Page Header),我们就要把我们的标题放置在带有 class .page-header 的 div中:
代码如下(示例):
在这里插入图片描述
效果如图所示:
在这里插入图片描述
##二、 创建我们网页的导航栏
创建一个默认的导航栏的步骤如下: 1.向 nav标签添加 class .navbar、.navbar-default。 2.向上面的元素添加 role=“navigation”,有助于增加可访问性。 3.向 div 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 a 元素。这会让文本看起来更大一号。 4.为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
代码如下(示例):
在这里插入图片描述
我做出来的结果如图所示:
在这里插入图片描述

三、主体内容的布局

这一部分我们可以直接引用菜鸟里面的代码迅速做出一个有分区的网页,这里就用到了网格系统嵌套列。
看这里!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值