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%的人还看了以下文章

  • 第5课:文本

    文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍CSS在文本布局方面令人激动的特性。本课将对下列CSS属性进行讲解: text-indent text-align text-decoration letter-spacing text-transform 文本缩进[text-indent] CSS属性text-indent用于为段落设置…

    2020年2月22日
    4.4K0
  • 第4课:制作自己的第一个网站

    学完前几节课,现在只需再花几分钟时间,你就能学会如何制作自己的第一个网站了。 如何做呢? 通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。请打开记事本程序(Notepad):依次选择“开始菜单→程序→附件→记事本”即可。 然后呢? 我们先从简单的做起吧。先试着做一个显示如下内容的网页:“哇!这是我的第一个网站。 ”继续学习,…

    2018年1月20日
    3.6K0
  • 跟永哥学HTML5(1):认识html5

    HTML5(简称H5),是超文本标记语言(HTML)的第五次重大修改,是最新一代的超文本标记语言,它不单单是一种标记语言,更为下一代 Web 提供了全新功能 。

    2018年1月21日
    2.3K0
  • 美观简洁的bootstrap 表单验证代码

    美观简洁的bootstrap 表单验证代码,如上图所示,点击登录按钮,在输入框下方显示错误提示信息 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>ipput</title> <!– 新 Bootstra…

    2020年2月9日
    5.0K0
  • 最简单的wmv视频网页播放代码

    如何在网页上播放wmv格式视频? 1、将以下代码复制到html网页的<body>中:如 <embed src=”wangyesheji1.wmv” width=”460″ height=”414″ autostart=”1″ filename=”mms:/wangyesheji1.wmv” showcontrols=”1″ showstat…

    2021年4月5日
    5.8K0
  • Flex布局“弹性盒子”

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

    2020年4月12日
    3.6K0

发表回复

登录后才能评论