麦子学院demo（html+css）

前端学习真是要多动手，虽然不难，却没有编程语言一样有逻辑，靠理解的地方不多，反倒是需要多动手，才会慢慢熟练。

1.效果

2.遇到的问题及解决办法

不同的div间，其中存在浮动元素，但仍然会相互影响，下图两个div各包含3个浮动元素，由于第一个过高，导致影响下一行，如下：

具体代码如下：

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.left{float: left;}.clear{clear: both;}.d1{background-color:darkred;width: 100%;height: 200px;/*overflow:hidden; 解决办法1                  *//*margin-bottom: 100px;解决办法2 （数值随便调）*/}.d2{background-color: tomato;width: 100%;height: 300px;}.d1 .b1{width: 50px;height: 300px;background-color: yellow;}.d1 .b2{width: 50px;height: 150px;background-color: cyan;}.d1 .b3{background-color:darkred;width: 50px;height: 50px;background-color: pink;}.d2 .a1{width: 50px;height: 100px;background-color: orange;}.d2 .a2{width: 50px;height: 150px;background-color: green;}.d2 .a3{background-color:darkred;width: 50px;height: 50px;background-color: pink;}</style>
</head>
<body>
<div class="d1"><div class="b1 left"></div><div class="b2 left"></div><div class="b3 left"></div>
</div>
<!--<div class="clear"></div>  解决办法3-->
<div class="d2"><div class="a1 left"></div><div class="a2 left"></div><div class="a3 left"></div>
</div>
</body>
</html>

3.源码

在这里

麦子学院demo（html+css）相关推荐

麦子学院彭亮python基础_麦子学院python
教程名称:麦子学院python 麦子学院PYTHON ├─第一阶段:python基础准备 │xa0 ├─1.Web前端开发之HTML+CSS基础入门 │xa0 ├─2.Javascript初步 │xa ...
麦子学院-Web前端开发工程师系列培训教程
麦子学院Web前端开发工程师培训-价值1万8 比传智播客讲得好 Web前端开发工程师,主要职责是利用HTML.XHTML.CSS.JAVAScript.FLASH等各种Web前端技术进行客户端产品的开 ...
最新麦子学院Web前端项目实战 Web前端开发从入门到精通33G完整版
课程介绍下载地址:百度网盘一共超过33G的整套麦子学院Web前段视频教程,共分为4大阶段循序渐进的进行逐步深入的解读,从基础知识入门到后期的项目实战开发对于想从事Web前端学习和开发工作的朋友来 ...
麦子学院PHP工程师课程大纲
前面几天,发现麦子学院网站中有详细的介绍了PHP工程师的课程大纲.今天终于把独一无二的PHP工程师课程大纲整理出来了.作为一名PHP开发(http://www.maiziedu.com/course/ ...
一个demo学会css
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解学习了css权威指南这本书,自己喜欢边学边总结边写demo,所以写了这篇文章,包含了大部分的css编程 ...
麦子学院深度学习视频SVM人脸识别课程代码修改及实现
1.麦子学院深度学习SVM人脸识别原代码对应修改 2.代码实现 1.麦子学院深度学习SVM人脸识别原代码对应修改 1.1 from sklearn.cross_validation import tr ...
麦子学院学习视频之机器学习(1):1.1 机器学习介绍
今天开始学习机器学习,在网上找了很多视频还有书籍.由于本人不是计算机专业的学生,基础知识还是比较薄弱,但我非常想学习机器学习以及深度学习.最后还是选择了麦子学院的彭亮老师的<机器学习基础介绍&g ...
麦子学院美国商务中心成立，探索在线教育新高点www.maiziedu.com
自今年6月获得北京五岳青云创投的A轮千万级融资之后,升级改版后的麦子学院加速了对更高领域的探索,于2014年5月在美国成立了商务中心,成为全国第一家进驻美国的在线职业教育网站,由沃顿商学院毕业的的留美 ...
麦子学院学习视频之机器学习(1):1.2深度学习介绍
今天学习了第二课,从什么是深度学习,深度学习什么时间段发展起来的,以及深度学习能用来干什么,如今和未来将对我们生活造成怎样的影响?这几个问题了解和学习深度学习的基础知识. 一,从网上还了 ...
美和易思 · 「云农职互联网技术学院」HTML+CSS 做西普尼金表官网
假期作业,好久没碰了,代码写得很烂......写博客纯属记录! 源代码下载地址:https://download.csdn.net/download/weixin_44893902/12805555 ...

麦子学院demo（html+css）

1.效果

2.遇到的问题及解决办法

3.源码

麦子学院demo（html+css）相关推荐

最新文章

热门文章