css布局基础:浮动和清除浮动练习2

主要知识点:

1、浮动:让元素脱离标准流,从而实现灵活的布局效果。

2、浮动只能左右,不能上下。float:left/right/none。

3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法:

  • 方法1:通过overflow属性
  • 方法2:通过clear属性
  • 方法3:通过伪元素选择器(推荐)

效果图:

网页头部效果图

参考:

<header>
      <img src="img/2.jpg"/>
      <nav>
            <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Course</a></li>
                  <li><a href="#">Actual</a></li>
                  <li><a href="#">Plan</a></li>
                  <li><a href="#">FAQ</a></li>
                  <li><a href="#">Notes</a></li>
           </ul>
      </nav>
</header>

CSS:

header::after{content: ""; display: block; clear: both;}  /*清除浮动*/
header img{margin-left: 50px; margin-top: 2px; float: left;}
header nav{float: right; margin-right: 50px; margin-top: 5px;}

本文来自投稿,不代表125jz立场,如若转载,请注明出处:http://www.125jz.com/5533.html

(0)
上一篇 2020年4月4日 上午7:48
下一篇 2020年4月4日 上午7:57

99%的人还看了以下文章

  • Flex布局“弹性盒子”

    一.概念 flex布局: Flex Box 的缩写,意味“灵活的盒子”或“弹性盒子”,所以flex布局又称“弹性布局”。 flex容器 采用flex布局的元素,成为flex容器。display:flex; flex项目 flex容器的所有子元素自动成为容器成员,称为flex项目。 <div style=“ display:flex;”>   &l…

    2020年4月12日
    2.2K0
  • CSS的浮动及清除浮动的5种方法

    css属性float:left/right/none 左浮动/右浮动/不浮动(默认),文章介绍了清除浮动的5种方法,并指出其实现原理、优缺点和使用建议。

    2019年11月5日
    1.9K0
  • Html5一句代码制作语音搜索框

    HTML5+CSS3打造可自动获得焦点和支持语音输入的超酷搜索框

    2022年3月19日 网页制作
    3620
  • 3个超酷的CSS3图片动画特效:图片变圆角,放大,旋转

    本实例制作需要学习《CSS3 transition transform属性及实例详解》,学完后可先练习CSS3 transform:rotate()制作旋转图片 See the Pen 三个CSS3图片动画特效 by 江山如画 (@jgyzhr)on CodePen.

    2020年1月1日
    1.3K0
  • 怎么让一长串英文字符自动换行?

    长串英文字符之间没有空格,整串都显示在一行,撑破了div,甚至跑到屏幕外了,如何解决? <!doctype html> <html> <head> <meta charset=”utf-8″> <title>怎么让一长串英文字符自动换行?|www.125jz.com</title> &l…

    2019年11月20日
    1.5K0
  • 第12课:页面布局(CSS)

    如何为页面实现理想的布局? 你可以使用级联样式表(Cascading Style Sheets,简称CSS)为网站设计页面布局。本课将对CSS作简单介绍。如需从头开始全面学习CSS知识,可以使用我们提供的CSS教程。因此,请将本课当作CSS的预备课。CSS是HTML的搭档。在编码过程中,它们发挥不同的作用:HTML负责网页的具体内容(结构),而CSS则修饰网…

    2018年1月19日
    1.9K0

发表回复

登录后才能评论