HTML学习案例-仿慕课网网页制作(一)
概述:仿制慕课网头部导航栏和分支导航栏的外观
考察知识点:
1.消除浮动的原因:如果最上面的块级元素不清楚浮动的话就会影响下面的块级元素的布局

对subnav块使用了float,结果subnav块飞到了很右边的地方而不是与左边对齐,给上部的header块了加了overflow:hidden后问题才得以解决
2.一开始设置header块发现header块对左地上老是有缝隙,加了示例代码中的一个类解决
3.版心的设置:使界面居中的一个小技巧:
* {
margin: 0; //使得所有元素往左和上对比,便于之后的修改
padding: 0;
}
.w {
width: 1350px; //版心居中
margin: auto;
}
效果:
HTML学习案例-仿慕课网网页制作(一)的更多相关文章
- HTML学习案例-仿慕课网网页制作(二)
制作部分:网页footer部分 制作效果: 涉及知识:link部分要复习: dl- definition list dt- definition title dd - definition descr ...
- 手机端web学习基础--from慕课网
web知识零零散散的知道一些,但总感觉不够系统,遇到问题不知道如何解决,因此特此来系统的学习一下web前端的知识.从慕课网的web基础看起.下面学习http://www.imooc.com/learn ...
- bootstrap学习记录(慕课网教程)
1.当主标题下需要副标题时可在h中嵌套small<h1>nihao<small>a</samll></h1> 2.当某一段落需要突出显示时可添加lead ...
- django实战仿慕课网在线视频网站(完成了85%以上的功能已上传github:https://github.com/huwei86/mxonline):
1. 前台功能模块 基本模块:登录 注册 找回密码 / 全局搜索 / 个人中心, 课程功能:课程管理 / 讲师管理 / 授课机构管理 热门推荐 相关课程推荐 用户操作管理:用户收藏 / 课程评论 ...
- HTML学习案例--仿淘宝商品信息
步骤:1.布局分析 2.敲代码 考察知识点: 1.类选择器(素材第四天) 2.CSS关于display,padding,margin的应用 3.如何用div布局 总结: 如果想让一行有两组以上的字块, ...
- 【小尝试】Java获取慕课网原有路径课程列表
作为一个老慕课网(https://www.imooc.com/)粉丝,还记得最开始的慕课网有很多免费的路径课程,练习什么的也特别详细,是入门一门语言的好方法. 现在慕课网发展起来了收费模式,添加了很多 ...
- 安卓开发_慕课网_Fragment实现Tab(App主界面)
学习内容来自“慕课网” 这里用Fragment来实现APP主界面 思路: 底部横向排列4个LinearLayout,每个LinearLayout包含一个图片按钮和一个文字 1.默认显示第一个功能(微信 ...
- 安卓开发_慕课网_ViewPager与FragmentPagerAdapter实现Tab实现Tab(App主界面)
学习内容来自“慕课网” ViewPager与FragmentPagerAdapter实现Tab 将这两种实现Tab的方法结合起来.效果就是可以拖动内容区域来改变相应的功能图标亮暗 思路: Fragme ...
- 安卓开发_慕课网_ViewPager实现Tab(App主界面)
学习内容来自“慕课网” 网站上一共有4种方法来实现APP主界面的TAB方法 这里学习第一种 ViewPager实现Tab 布局文件有7个, 主界面acitivity.layout <Linear ...
随机推荐
- 第14.13节 BeautifulSoup的其他功能导览
前面<第14.9节 Python中使用urllib.request+BeautifulSoup获取url访问的基本信息 >.<第14.10节 Python中使用BeautifulSo ...
- web安全漏洞
1.什么是Web漏洞 WEB漏洞通常是指网站程序上的漏洞,可能是由于代码编写者在编写代码时考虑不周全等原因而造成的漏洞.如果网站存在WEB漏洞并被黑客攻击者利用,攻击者可以轻易控制整个网站,并可进一步 ...
- 解析php sprintf函数漏洞
php sprintf函数漏洞 0x01 了解sprintf()函数 1,sprintf(),函数是php中的函数 2,作用是将格式化字符串写入变量中 3,函数形式为sprintf(format,ar ...
- Typora入门教程
Typora学习教程 1目录 [TOC]加空格 ,自动生成 目录 1目录 2图片 3下划线 4删除线 5解决语法和内容冲突 6加粗 6.1测试页面跳转 7倾斜 8超链接 9模块 10引用 11表格 1 ...
- 项目实战:Qt多通道数据采集系统(通道配置、电压转换、采样频率、通道补偿值、定时采集、导出exel和图表、自动XY轴、隐藏XY轴、实时隐藏显示通道)
需求 1.通道使能.选择.更改通道名称.设置显示颜色 2.采样率可设置(Sa/s/chj) 3.单位换算,按照给定的进行换算 4.对通道可进行设置补偿值 5.通道取消可动态显示和隐藏,并可 ...
- 笔记-CF643E Bear and Destroying Subtrees
CF643E Bear and Destroying Subtrees 设 \(f_{i,j}\) 表示节点 \(i\) 的子树深度为 \(\le j\) 的概率,\(ch_i\) 表示 \(i\) ...
- 【GIT】随笔
GIT下载地址:https://git-scm.com/download/win安装方法:下一步默认路径:C:\Program Files\Git 使用方法:右键桌面->git bash her ...
- Java静态方法和非静态方法之间的关系
非静态方法 public class Demo2 { public static void main(String[] args) { //实例化这个类 new //对 ...
- gitlab+jenkins 持续部署自动化测试
背景:为了减少测试部署时间和减少不必要的重复工作,采用持续集成的方式进行部署,当gitlab的release (测试)分支有代码变动时,自动拉取代码部署测试环境,并进行接口回归测试 优点:部署自动化, ...
- 一文搞懂Java引用拷贝、浅拷贝、深拷贝
微信搜一搜 「bigsai」 专注于Java和数据结构与算法的铁铁 文章收录在github/bigsai-algorithm 在开发.刷题.面试中,我们可能会遇到将一个对象的属性赋值到另一个对象的情况 ...