11. HTML浮动和简单布局

HTML教程入门

HTML浮动:只要是像div等块标签就要使用到浮动布局,在网页显示时,无论其宽的大小,都是独占一行。而在网页布局中,我们常常需要将两个或者是多个div并排放置。由于div独占一行,并排是不可能实现的。今天浮动和简单布局,用具体的例子学习:

HTML浮动

1、div添加wrap类;

2、div左边是内容;

3、div右边是边栏:
1、div用类sidebar
2、aside元素;

4、网页布局:
1、把aside放到右边;
2、内容放到左边;

5、wrap居中,div就是容器;

6、content和aside两个大盒子:
1、content类添加样式float:left;
2、conteng添加样式width:500px;

7、组合样式:conteng,aside添加height:600px;

8、移除ul的小圆点;

9、aside:
1、添加float:right或left;

10、aside ul:
1、添加padding-left:0px;
2、添加list-style:none;

HTML浮动扩展知识点

1、做个灵活的网站
1、min-widht:600px;width:80%;
2、width:20%;

2、wrap添加background颜色:green;
1、我们添加float 效果是在h1;
2、删除float 离开这个盒子;

3、clear修复;

4、添加footer,添加clear;

接近10年的互联网从业经验,精通Scrum敏捷软件开发的方法,从事互联网产品设计,开发,测试,运营,案例不少于20个,发现自己最喜欢的工作是做外贸营销,外贸SEO,特别喜欢谷歌优化。从2017年3月开始坚持在群161510483直播谷歌SEO和WEB前端开发技术,只要加进来坚持学习零基础也能够学会。

Last modified: 2019年8月6日

Previous Story

HTML教程入门

10. html用的id和class

id和class:CSS的id和class在HTML元素中设置CSS样式,你需要在元素中设置’id’ 和’class’选择器。 HTML name、id、class 的区别。

...

Next Story

HTML教程入门

12. html导航栏

html导航栏:拥有易用的导航条对于任何网站都很重要,通过CSS,可以把乏味的HTML 菜单转换为漂亮的导航栏。在我们的例子中我们将建立一个标准的HTML列表导航栏。

...