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

考察知识点:

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

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

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

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

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

效果:

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. MoviePy v2.0.0.dev1尚不成熟,不建议大家使用

    ☞ ░ 前往老猿Python博文目录 ░ 在<重要消息:MoviePy v2.0.0.dev1预发布版本已经可以下载安装使用>之后老猿就安装了MoviePy v2.0.0.dev1这个版本 ...

  2. HTML引入外部字体

    HTML5如何引入外部字体 背景 现在我需要 "Montserrat-ExtraLight ExtraLight"类型的字体,但是html的font-family中找不到这个类型的 ...

  3. 百度前端技术学院-基础-day7.8

    任务:参考如下设计稿实现HTML页面及CSS样式 代码 点击预览 HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 & ...

  4. ajax的五种状态

    ajax的五种状态(readyState ) 0 - (未初始化)还没有调用send()方法 1 - (载入)已调用send()方法,正在发送请求 2 - (载入完成)send()方法执行完成,已经接 ...

  5. win 7 MongoDB 下载安装

    准备: 1.mongodb-win32-x86_64-2008plus-ssl-3.4.3-signed.msi 官方下载 2.1.建立数据存放目录 F:\MongoDB\ 2.建立日志文件      ...

  6. git 远端版本回退

    情景:本地更改推送远端后,想要回退到自己推送之前的某个版本. 比如想回退的分支为 test 分支. 风险:远端回退到某一版本后,之后的所有推送都没了(对应的日志记录也没了).如果是团队开发,不仅自己推 ...

  7. Mongdb优化

    1.索引1)基础索引--为集合colt1的x列创建升序基础索引# cd /usr/local/mongodb4.2.2/bin# ./mongo -uroot -p> use db_test&g ...

  8. gnuplot取消曲线标题

    plot 'File.dat' using 1:2 notitle或者 plot 'File.dat' using 1:2 title ""

  9. 带宽、延时、吞吐率、PPS 这些都是啥?

    Linux 网络协议栈是根据 TCP/IP 模型来实现的,TCP/IP 模型由应用层.传输层.网络层和网络接口层,共四层组成,每一层都有各自的职责. 应用程序要发送数据包时,通常是通过 socket ...

  10. 虚拟局域网Vlan配置实战

    VLAN 的基本概念 Access 类型的接口 Trunk 类型的接口 接口类型小结 以太网交换机的二层接口类型 Access口接收帧 Access口发送帧 Trunk口接收帧 Trunk口发送帧 H ...