一、浮动

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box1{width: 200px;height: 200px;background-color: #BBFFAA;/* 通过浮动可以使一个元素 向其父元素的左侧或右侧移动使用float 属性来设置于元素的浮动可选值:none默认值， 元素不浮动left 元素向左浮动right元素向右浮动注意，元素设置浮动以后，水平布局的等式便不需要强制成立元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动浮动的特点:1、浮动元素会完全脱离文档流，不再占据文档流中的位置2、设置浮动以后元素会向父元素的左侧或右侧移动，3、浮动元素默认不会从父元素中移出4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高*/float: left;}.box2{width: 200px;height: 200px;background-color: orange;float: left;}.box3{width: 200px;height: 200px;background-color: yellow;float: left;}</style></head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body>
</html>

二、浮动的特点

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box1{width: 50px;height: 50px;background-color: #bfa;float: left;/* 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果*/}.box2{background-color: #00FFFF;float: left;}span{width: 100px;height: 100px;background-color: #FFFF00;/* 元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生改变脱离文档流的特点:块元素:1、块元素不在独占页面的一行2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开行内元素:行内元素脱高文档流以后会变成块元素，特点和块元素一样脱离文档流以后，不需要再区分块和行内了*/float: left;}</style></head><body><div class="box1"></div><p>java全栈工程师是指同时具备前端和后台能力，并能利用多种技能独立完成产品的人。Java全栈工程师需要具备的技能: 1、熟练使用多种框架; 2、 能够独立搭建运营环境; 3、 能够独立进行数据库建模设计; 4、能完成有相应的系统架构和性能调优; 5、熟悉Hadoop、redis、 及相关NOSQL开发。</p><div class="box2">Hello Massimo!</div><br /><br /><span>我是一个span</span></body>
</html>

三、导航条

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}.nav{width: 1205px;height: 48px;background-color: #BBFFAA;list-style: none;margin: 100px auto;}.nav li{line-height: 48px;float: left;}a{display: block;text-decoration: none;color: black;font-size: 18px;padding: 0 39px;}a:hover{background-color: #FF0000;}</style></head><body><ul class="nav"><li><a href="#">HTML/CSS</a></li><li><a href="#">Browser Side</a></li><li><a href="#">Server Side</a></li><li><a href="#">Programming</a></li><li><a href="#">XML</a></li><li><a href="#">Web Building</a></li><li><a href="#">Reference</a></li></ul></body>
</html>

四、简单布局

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>header,main,footer{width: 1000px;margin: 0 auto;}header{height: 150px;background-color: silver;}main{height: 500px;background-color: #bfa;margin: 10px auto;}nav,article,aside{height: 100%;float: left;}nav{width: 200px;background-color: yellow;}article{width: 580px;background-color: orange;margin: 0 10px;}aside{width: 200px;background-color: pink;}footer{height: 150px;background-color: tomato;}</style></head><body><!-- 网页头部 --><header></header><!-- 网页主题 --><main><!-- 左侧导航栏 --><nav></nav><!-- 中间内容 --><article></article><!-- 右边内容 --><aside></aside></main><!-- 网页底部 --><footer></footer></body>
</html>

浮动、导航条和简单布局相关推荐

CSS导航条以及简单下拉菜单实现
以京东导航条来练习,导航条的制作可以采用浮动或者弹性布局,这里采用浮动,要注意高度塌陷的问题.这里简单仿写一下下面实现鼠标移动到江苏实现下拉菜单的实现,首先要有一个下拉菜单,设置好宽高,把他隐藏起来 ...
web前端导航条的简单实现
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>tes ...
HTML下拉菜单怎么做成横向,css导航条横向带下拉菜单
css+div导航下拉二级菜单竖排效果如何改为横排? ,在"下一站"有三个二级竖排菜单,如何能变为横排?困扰了我一天了,让二级菜单变成一行,只需要在竖排的效果上,让二级菜单都浮动起 ...
amazeui学习笔记--css（常用组件10）--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
html中导航条置顶的代码,一个DIV+CSS代码布局的简单导航条
一个蓝色主题的导航条结构案例,本CSS小实例,采取DIV CSS实现.同时不必图片做靠山,直接运用布景致完成,鼠标经由过程悬停对应栏目称说是对应背景蓝色变深. 导航条一小块成就截图通常导航条接纳ul ...
一个完美的导航条html,一个DIV CSS代码布局的简单导航条
简单的DIV CSS代码布局实现导航条一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现.同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深. 导航 ...
简单浮动导航栏（HTML+CSS实现）
简单浮动导航栏,鼠标移上去自动展开下拉菜单,使用HTML+CSS实现. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
瀑布流/媒体查询/栅格化布局/导航条
这里写目录标题瀑布流视口栅格化系统(插件bootstrap) 瀑布流 css写瀑布流掘金链接视口 <!DOCTYPE html> <html lang="en&qu ...
用html和css制作一个简单的导航条
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>导 ...

浮动、导航条和简单布局

一、浮动

二、浮动的特点

三、导航条

四、简单布局

浮动、导航条和简单布局相关推荐

最新文章

热门文章