css布局基础:行内元素、块级元素练习

主要知识点:

1、理解什么是行内元素?什么是块级元素

2、知道块级元素能够设置宽高,行内元素不可设置宽高(替换元素可以)。

3、掌握display属性的使用。

4、掌握css伪类选择器的使用。

扩展:

1、nth-child()选择器

选择其父元素的第n个子元素。

效果图:

效果图

参考:

<nav>
     <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Course</a></li>
         <li><a href="#">Aticle</a></li>
         <li><a href="#">Plan</a></li>
         <li><a href="#">contacts</a></li>
         <li><a href="#">Notes</a></li>
     </ul>
</nav>

CSS代码:

nav ul li{float: left; list-style: none;margin-right: 5px; }
nav ul li a{width: 100px; height: 80px; text-align: center; line-height: 80px; display: block; text-decoration: none; color: white; font-size: 22px; }
nav ul li:nth-child(1) a{background-color: blueviolet;}
nav ul li:nth-child(2) a{background-color: cornflowerblue;}
nav ul li:nth-child(3) a{background-color: forestgreen;}
nav ul li:nth-child(4) a{background-color: gold;}
nav ul li:nth-child(5) a{background-color: darkorange;}
nav ul li:nth-child(6) a{background-color: #FF0000;}
nav ul li a:hover{height: 90px; color: #000000;}

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

(1)
孙萍的头像孙萍管理团队
上一篇 2020年4月3日 下午10:45
下一篇 2020年4月4日 上午7:48

99%的人还看了以下文章

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

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <!DOCTYPE html> &…

    2020年4月4日
    2.4K0
  • js实现进度拖拽的效果-调节音量

    用js实现的一个进度拖拽效果,常用于调节音量。 该程序代码简单易懂,单页面可多次调用,效果如下图: js实现进度拖拽的|www.125jz.com效果 音量:0

    2019年2月15日
    3.2K0
  • 第3课:HTML的元素与标签

    本节课我们学习HTML的重要成分——元素(element)。元素用于结构化HTML文档,并告知浏览器如何呈现网页。一般来说,元素由首标签(start tag)、内容(content)和尾标签(end tag)构成。 “标签”是什么? 标签(tag)指示元素的起始与结束,所有标签都由“<”及“>”所围住,如<html>。一般标签成对出现,首标…

    2018年1月20日
    5.2K0
  • 第10课:外边距和内边距

    上一课,你学习了盒状模型。在这一课,我们将了解如何通过设置margin(外边距)和padding(内边距)这两个CSS属性来改变元素的显示。 为元素设置外边距 为元素设置内边距 为元素设置外边距 一个元素有上(top)、下(bottom)、左(left)、右(right)四个边。外边距(margin)表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可…

    2020年2月25日
    2.2K0
  • CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果

    box-shadow属性的基本用法 使用Box-shadow制作逼真的图片阴影效果 使用伪元素::before和::after,我们能实现非常逼真的只有图片才能实现的阴影效果。 HTML: <div class=”box11 shadow”></div> CSS: .box11 { width: 300px; height: 100p…

    2019年1月5日 网页制作
    3.8K0
  • 纯CSS制作红色网站二级下拉导航菜单

    纯CSS制作红色网站二级下拉导航菜单,代码非常简洁,适合修改后使用,入门就能掌握。 二级下拉导航菜单HTML代码: <nav> <ul> <li><a href=”#”>首页</a></li> <li><a href=”#”>电影</a> <ul…

    2019年4月17日
    3.8K0

发表回复

登录后才能评论