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

考察知识点:

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. Python函数的关键字参数

    除了位置参数的函数参数使用方式,还有一种在函数调用时指定形参等于指定实参的参数使用模式,该模式称为关键字参数.关键字参数使用可以不按形参的顺序传递实参,系统按形参的名字确认实参传递给哪个参数. 具体内 ...

  2. 第9.11节 Python中IO模块文件打开读写操作实例

    为了对前面学习的内容进行一个系统化的应用,老猿写了一个程序来进行文件相关操作功能的测试. 一. 测试程序说明 该程序允许测试人员选择一个文件,自己输入文件打开模式.写入文件的位置以及写入内容,程序按照 ...

  3. PyQt(Python+Qt)学习随笔:QTableWidget表格部件中行高和列宽的计算方式

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QTableWidget表格部件中行高和列宽的计算在Qt提供的资料中内容介绍比较泛,细节说得不清楚, ...

  4. 第15.14节 PyQt(Python+Qt)入门学习:Designer的Buttons按钮详解

    一.引言 Qt Designer中的Buttons部件包括Push Button(常规按钮.一般称按钮).Tool Button(工具按钮).Radio Button(单选按钮).Check Box( ...

  5. LoadRunner 多用户并发 登录,上传数据,登出的脚本教程

    这里记录 Web/Http  模式,模拟多用户并发进行  : 登录,上传数据,退出登录一整套流程.并发的用户量多少,可自定义.这里不介绍录屏的方式,是自己写脚本去执行的. 1.安装loadRunner ...

  6. PostMan参数传递

    一.先取出返回中需要用的值,并设置变量 二.传入下一接口中

  7. 记阿里云 RDS MySQL 的一个大坑

    花了一个下午的时间,终于把一个阿里云 RDS MySQL 的一个大坑填上了,解决方法令人匪夷所思!绝对会让各位看官感到大吃一惊,阿里云 RDS MySQL 居然有这样 xx 的大坑! 问题 最近应业务 ...

  8. CSS基础-背景

    CSS背景 background 纯色背景 {background-colcor:gray; padding:20px} 为元素设置背景色,并设置了内边距,使得元素中的文本向外少有延伸. 用rgba设 ...

  9. 【Azure Developer】VS Code运行Java 版Azure Storage SDK操作Blob (新建Container, 上传Blob文件,下载及清理)

    问题描述 是否可以用Java代码来管理Azure blob? 可以.在代码中加入azure-storage-blob依赖.即可使用以下类操作Azure Storage Blob. BlobServic ...

  10. filebeat输出结果到elasticsearch的多个索引

    基本环境: filebeat版本:6.5.4 (Linux,x86-64) elasticsearch版本:6.54   (一)需求说明 在一台服务器上有多个日志需要使用filebeat日志收集到el ...