概述:仿制慕课网头部导航栏和分支导航栏的外观

考察知识点:

1.消除浮动的原因:如果最上面的块级元素不清楚浮动的话就会影响下面的块级元素的布局

对subnav块使用了float,结果subnav块飞到了很右边的地方而不是与左边对齐,给上部的header块了加了overflow:hidden后问题才得以解决

2.一开始设置header块发现header块对左地上老是有缝隙,加了示例代码中的一个类解决

3.版心的设置:使界面居中的一个小技巧:

* {
margin: 0; //使得所有元素往左和上对比,便于之后的修改
padding: 0;
} .w {
width: 1350px; //版心居中
margin: auto;
}

效果:

HTML学习案例-仿慕课网网页制作(一)的更多相关文章

  1. HTML学习案例-仿慕课网网页制作(二)

    制作部分:网页footer部分 制作效果: 涉及知识:link部分要复习: dl- definition list dt- definition title dd - definition descr ...

  2. 手机端web学习基础--from慕课网

    web知识零零散散的知道一些,但总感觉不够系统,遇到问题不知道如何解决,因此特此来系统的学习一下web前端的知识.从慕课网的web基础看起.下面学习http://www.imooc.com/learn ...

  3. bootstrap学习记录(慕课网教程)

    1.当主标题下需要副标题时可在h中嵌套small<h1>nihao<small>a</samll></h1> 2.当某一段落需要突出显示时可添加lead ...

  4. django实战仿慕课网在线视频网站(完成了85%以上的功能已上传github:https://github.com/huwei86/mxonline):

    1. 前台功能模块 基本模块:登录 注册 找回密码 / 全局搜索 / 个人中心, 课程功能:课程管理 / 讲师管理 / 授课机构管理  热门推荐 相关课程推荐 用户操作管理:用户收藏 / 课程评论   ...

  5. HTML学习案例--仿淘宝商品信息

    步骤:1.布局分析 2.敲代码 考察知识点: 1.类选择器(素材第四天) 2.CSS关于display,padding,margin的应用 3.如何用div布局 总结: 如果想让一行有两组以上的字块, ...

  6. 【小尝试】Java获取慕课网原有路径课程列表

    作为一个老慕课网(https://www.imooc.com/)粉丝,还记得最开始的慕课网有很多免费的路径课程,练习什么的也特别详细,是入门一门语言的好方法. 现在慕课网发展起来了收费模式,添加了很多 ...

  7. 安卓开发_慕课网_Fragment实现Tab(App主界面)

    学习内容来自“慕课网” 这里用Fragment来实现APP主界面 思路: 底部横向排列4个LinearLayout,每个LinearLayout包含一个图片按钮和一个文字 1.默认显示第一个功能(微信 ...

  8. 安卓开发_慕课网_ViewPager与FragmentPagerAdapter实现Tab实现Tab(App主界面)

    学习内容来自“慕课网” ViewPager与FragmentPagerAdapter实现Tab 将这两种实现Tab的方法结合起来.效果就是可以拖动内容区域来改变相应的功能图标亮暗 思路: Fragme ...

  9. 安卓开发_慕课网_ViewPager实现Tab(App主界面)

    学习内容来自“慕课网” 网站上一共有4种方法来实现APP主界面的TAB方法 这里学习第一种 ViewPager实现Tab 布局文件有7个, 主界面acitivity.layout <Linear ...

随机推荐

  1. linux搭建harbor与使用

    条件:安装docker&docker-compose 如未安装,请看:linux离线安装docker + docker-compose harbor 1.下载 下载地址:https://git ...

  2. NFS服务配置总结

    目录 介绍 原理 适用场景 安装 NFS服务端 NFS客户端 配置 服务端配置 客户端配置 介绍 NFS就是Network File System的缩写,它最大的功能就是可以通过网络,让不同的机器.不 ...

  3. 第8.18节 Python类中内置析构方法__del__

    一. 引言 基本上所有支持OOP设计的语言都支持析构方法(也称析构函数),析构方法都是在对象生命周期结束时调用,一般用来实施实例相关生命周期内访问数据的扫尾工作,包括关闭文件.释放内存.输出日志.清理 ...

  4. urllib.request.urlopen(req).read().decode解析http报文报“utf-8 codec can not decode”错处理

    老猿前期执行如下代码时报"'utf-8' codec can't decode byte"错,代码及错误信息如下: >>> import urllib.reque ...

  5. PyQt(Python+Qt)学习随笔:Qt Designer中怎么给toolBar添加按钮

    在Designer中创建了一个MainWindow窗体,当想在其中的toolBar中添加toolButton时发现怎么也放不上去,最终才发现toolBar中的按钮只能通过直接拖拽Action编辑器中的 ...

  6. 从零开始的sql注入学习(挖坑不填)

    首先,本人是小白,这篇文章也只是总结了一下大佬们的sql注入方法,要是有错,请各位大佬指出,以便学习. 虽然我是菜鸡,但是太过基础的sql注入问题也就不再重复的解释了.直接从常用的说起. 实战中常用的 ...

  7. apache、nginx、Tomcat、IIS引擎解析漏洞

                                            引擎解析漏洞 常见的web容器有IIS.Apache.Nginx.Tomcat等,以下是详细讲解 IIS IIS简介 是 ...

  8. 《深入理解计算机系统》(CSAPP)读书笔记 —— 第一章 计算机系统漫游

    本章通过跟踪hello程序的生命周期来开始对计算机系统进行学习.一个源程序从它被程序员创建开始,到在系统上运行,输出简单的消息,然后终止.我们将沿着这个程序的生命周期,简要地介绍一些逐步出现的关键概念 ...

  9. filereader 和 window.URL.createObjectURL

    <template> <div class="file-preview"> <h4>前端图片预览之 filereader 和 window.UR ...

  10. 【复习笔记】重习 AC 自动机

    发现已经忘了许多....于是复习一下 基础要点概况 AC 自动机基于 Trie 树 的结构,即构建 AC 自动机前需要先建 Trie. 一个状态中除了转移 \(\delta\) 之外还有失配指针 \( ...