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.12节 Python中使用BeautifulSoup解析http报文:使用select方法快速定位内容
一. 引言 在<第14.10节 Python中使用BeautifulSoup解析http报文:html标签相关属性的访问>和<第14.11节 Python中使用BeautifulSo ...
- PyQt(Python+Qt)学习随笔:Model/View架构中的Model模型概念
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 Model/View架构中的Model模型Model与数据源通信,为体系结构中的其他组件提供数据接口 ...
- Error: Cannot find module '../lib/utils/unsupported.js'
报错: nodejs : Error: Cannot find module '../lib/utils/unsupported.js' 解决办法(linux): 去node目录下:/node***/ ...
- Djang项目部署之sqlite版本升级
项目环境: centos7 django 2.2.10 问题描述: 使用了django 2.2.12版本开发项目,此版本对应的sqlite需要升级为3.8.0以上. 百度了不少解决方案,缺点:过程繁琐 ...
- AcWing 324. 贿赂FIPA
题目链接 大型补档计划 \(f[i][j]\) 表示第 \(i\) 个国家,获得 \(j\) 个国家支持,用的最少花费 \(f[i][0] = 0\) \(f[i][sz[i]] = w[i]\) 对 ...
- ps查看完整程序执行路径
在linux下查看进程大家都会想到用 ps -ef|grep ***可是看到的不是全路径,怎么看全路径呢?每个进程启动之后在 /proc下面有一个于pid对应的路径例如:ps -ef|grep jav ...
- ELK-Kibana汉化
https://github.com/anbai-inc/Kibana_Hanization 补丁包 教程:1:首先,我们先杀死了Kibana进程,其实,教程说不用重启或关闭Kibana,但是,我们 ...
- Centos安装JDK、Tomcat
准备工作,先下载JDK.Tomcat包:使用FileZilla将软件包发送到/home/software目录下. 1 安装JDK8 首先卸载已有的JDK. # 查看版本 java -version # ...
- 2020高考倒计时!全屏向下滑动设计HTML源码
全屏竖向滑动效果,自适应,多终端 全国高考倒计时,音乐自动播放. 背景图片:img目录下替换bg.jpg 背景音乐:audio目录下替换song.mp3 原本按照正常情况下每年的6月7.8日就是全国 ...
- 【Tomcat 源码系列】Tomcat 整体结构
一,前言 在开始看源码细节之前,首先要想好要看的问题.想好问题之后,我们该如何寻找要看的代码呢? 其实,这就好像去爬山的时候,突然想去上厕所,如果有一副地图,那么我们可以很快就找到厕所的位置.带着问题 ...