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

考察知识点:

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. moviepy音视频剪辑基类VideoClip的write_videofile方法codec、bitrate、preset、audio_bitrate、audio_nbytes等参数的作用

    ☞ ░ 前往老猿Python博文目录 ░ moviepy音视频剪辑模块的视频剪辑基类write_videofile方法用于将视频剪辑输出到文件,调用语法如下: write_videofile(self ...

  2. Python的富比较方法__le__、__ge__之间的关联关系分析

    Python的富比较方法包括__le__.__ge__分别表示:小于等于.大于等于,对应的操作运算符为:"<=".">=".那么是否象普通数字运算一 ...

  3. PyQt(Python+Qt)学习随笔:Designer中的QDialogButtonBox的StandardButtons标准按钮

    在Qt Designer中,可以在界面中使用QDialogButtonBox来配置一组按钮进行操作,Qt中为QDialogButtonBox定义了一组常用的标准按钮,可以在Designer中直接在St ...

  4. sql绕过小技巧

    两个空格代替一个空格,用Tab代替空格,%a0=空格: %20 %09 %0a %0b %0c %0d %a0 %00 /**/ /*!*/ 最基本的绕过方法,用注释替换空格: /* 注释 */ 使用 ...

  5. 乌云wooyun网站硬盘复活

    AWD比赛防止没有网络,在移动硬盘里面准备一个乌云漏洞库. 之前也想过弄一个乌云的镜像网站,无奈学生机性能太低下了,部署到公网上服务器存储空间都不够,只能部署在本地硬盘了. 乌云镜像的开源地址:htt ...

  6. 学习笔记:Prufer 编码

    Prufer 编码可以将无根树与序列之间进行转化. 一个 \(n\) 个点.区分编号的无向图 和 Prufer 序列一定是一一对应的,下面会给出映射方式. 借此可以证明 Cayley 定理: \(n\ ...

  7. P7077 函数调用

    我好蠢啊... 考试的时候不会写,现在看了这么多篇题解还是似懂非懂,所以决定写一下草稿... 草稿 和 题解 就是首先,题目保证了函数不会间接的调用其本身,所以可以直接知道这是一个 \(\text{D ...

  8. Linux文件权限问题

    更改权限命令   chmod 常用参数 -R, --recursive change files and directories recursively (以递归的方式对目前目录下的所有档案与子目录进 ...

  9. 阿里云OSS生成sts令牌

    业务场景: 如果前端直接上传文件到OSS,势必要暴露令牌,无法精准控制上传内容等,使用临时令牌即可解决这个问题. 先去阿里云后台设置好token,角色,地区等 pom.xml <dependen ...

  10. 正交实验法之 Allpairs电商项目用例设计实战

    一.正交实验法概述 正交实验法是研究多因素多水平的一种方法,它是通过正交表挑选部分有代表性的水平组合试验替代全面试验.这些有代表性的组合试验具备了"均匀分散,整齐可比"的特点.正交 ...