2019/8/30，day05，web前端

最新推荐文章于 2023-12-28 16:18:33 发布

CJAnn

最新推荐文章于 2023-12-28 16:18:33 发布

阅读量110

点赞数

本文链接：https://blog.csdn.net/weixin_43996898/article/details/100166410

版权

菜鸟小笔记4

2019年8月30日周五 21:25 重庆
以下内容来自老师授课时所摘抄笔记，如有冒犯，接受私信~

今日内容

老师带着的一个小网页，包含近日所讲许多内容，分为顶部、链接栏、底部
目前只对其做个别分析（困）

今日份问题及搜索回答

仅限于今日老师所讲demo中所遇问题进行解答

1、什么时候清除浮动？day05 - homePage.html

利用了day04里的  利用伪类选择器清除  方法
.clear:after{   /*清除浮动*/
            content: "";
            display: block;
            clear: both;
        }
        ···
不加clear会影响后面的内容 即以下内容会占用左浮动,右浮动后中间位置
<div class="linkNav content clear">···
有时不清除浮动，ul是没有高度的

2、:after和:before的伪类选择器
:after — 在元素内容之后插入内容
:before — 在元素之前添加内容
①链接的点击前、点击后样式
②同一个位置的层次先后（一个div，它的before就是在它上面，它的after就是它下面）,如用CSS画太极时
③插入伪类

 /*插入伪类*/
        .text{
            color: orange;
        }
        .text:before{
            content: "Me";/*则me会出现在handsome前面且不可选中me，content必须有，但可不要内容应该是content:""*/
            color: aquamarine;
        }
        .text:after{
            content: "YOU";
            color: black;
        }
        ···
        <p class="text">handsome</p>
        结果为MehandsomeYOU

今日收获

1、span只作为图标那一块，不能包裹文字

.linkNavRight>li:last-child>a>span{
            display: inline-block;
            width: 22px;
            height: 22px;
            vertical-align: middle;
            background: url("image/icon.png") no-repeat 0 -122px; /*电子商场左旁的图标*/
            margin-right: 4px;
        }
        ···
        <li><a href="#"><span></span>电子商城</a></li>

2、脱离文档流，可转换为绝对定位
3、灵活使用选择器，如：
.linkNavRight>li:last-child>a>span{}

class=“linkNav content clear”

注意 linkNav都没有使用到,都是基于它的子代选择器,后代选择器等，这种形式也可。如：

.linkNav a{
            color: #999;
            text-decoration: none;
        }
.linkNav li{
            float: left;
            padding: 20px 0;    /*(两个取值)上下边距 左右边距;*/
        }

4、倒三角形，下拉按钮样式
border不是矩形状的，所以：

/*四个border边设置像素，实线，透明，只上边线设置颜色*/
            border: 8px solid transparent;
            border-top-color: #fff;

5、隐藏，鼠标移入时显示

.footerContent>ul>li>ol{
            width: 100%;
            background: #111111;
            position: absolute;
            /*隐藏*/
            display: none;
        }
 .footerContent>ul>li:hover>ol{
            /*显示*/
            display: block;
        }