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

  • 第11课:边框(border)

    边框(border)可以有多种用途,比如作为装饰元素或者作为划分两物的分界线。在设置边框方面,CSS为你提供了无尽选择。border-widthborder-colorborder-style 边框宽度[border-width] 边框宽度由CSS属性border-width定义,其值可以是“thin”(薄)、“medium”(普通)或“thick”(厚)等…

    2020年2月25日
    1.5K0
  • CSS3 transition transform属性及实例详解-鼠标放到图片上图片等比例放大

    CSS3的transform:scale()可以实现按比例放大或者缩小功能,transform呈现的是一种变形结果。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡,transition呈现的是一种过渡,是一种动画转换过程,如渐显、渐弱、动画快慢等。 transiton:过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间; t…

    2018年8月1日
    2.8K0
  • Flex布局“弹性盒子”

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

    2020年4月12日
    2.2K0
  • div/span水平顶部对齐,同一行div跟内容最多的div高度保持一样高

    一、两个div水平顶部对齐 两个div都设置display:inline-block;  并且右边的div增加样式vertical-align: top; 使得右边的div跟左边的div的顶部对齐。 <div id=’left’ style=”width:20%; display:inline-block”> </div> <d…

    2018年12月10日
    6.7K0
  • Marquee标签制作滚动公告、新闻列表

    效果演示 《Marquee标签实现跑马灯、滚动公告、通知效果》 Marquee标签制作滚动公告、新闻列表 <!doctype html> <html> <head> <meta charset=”utf-8″> <title>marquee实现的滚动公告|www.125jz.com</titl…

    2019年2月28日
    2.6K0
  • 第1课:开始学习HTML

    建议你每天学习2到3课,然后花点时间来实验你所学到的新知识。 学习制作网站是件充满乐趣的事,而且一旦掌握它,你便会感到无比满足。好的,不多说,我们现在就开始吧! 这第一课中,我们简要介绍制作网站所需的工具。 需要哪些工具? “浏览器(browser)”你有了,它是用于浏览网站的程序。你现在就是通过浏览器在观看本页面的。 也许你听说过、甚至用过一些网页制作工具…

    2018年1月20日
    2.5K0

发表回复

登录后才能评论