menu DNXRZL的故事
search self_improvement
目录

SimpleBlue实践心得

DNXRZL
DNXRZL 2021年10月14日  ·  阅读 274

页眉部分实践

利用flex实现左右布局,当然左右任一个box还可以再使用flex布局(套娃)

搜索框:目前已知只有input元素可以使用:focus伪类,div没用

表单提交:一般使用input,但有些时候必须用div或其他没有提交属性的元素,此时就可以使用submit()函数了

<form id="search-bt" action="#" method="GET">
    <input type="text" placeholder="搜索些什么~">
    <i onclick="formSubmit()"></i>
</form>

function formSubmit(){
    document.getElementById("search-bt").submit();
};

导航栏x轴滚动:一个元素溢出,让其滚动,就在其父级元素上添加overflow-x: auto样式,有时内容会出现折行,可以用white-space: nowrap样式

溢出加阴影-判断是否溢出:只需要知道父级元素的宽度(offsetWidth)和滚动宽度(scrollWidth)就好了,滚动宽度在子元素没有溢出时是等于父级元素宽度的,那么就可以来个比较运算来判断是否溢出

阴影-从左到右渐变

background: linear-gradient(to right,hsla(0,0%,97%,0) 10%,#ffffff 100%);

具体可参考:菜鸟教程

溢出左边加遮罩且不影响下级元素的点击

加遮罩:一般用子绝父相定位渐变遮罩

下级元素仍可点击:遮罩上写样式:pointer-events: none;

响应式布局

  1. 当最大宽度是1080px时生效

    @media  (max-width: 1080px){ /*响应式布局*/
        .main-head { 
            width: 80%;
        }
        .sec-head ul { 
            width: 80%; 
        }
    }
    
  2. 不是最小宽度不生效,是最小宽度生效

    @media  (min-width: 830px){ /*响应式布局*/
        .sec-head {
            display: none;
        }
        .hrPlus {
            margin-bottom: 20px;
        }
    }
    

主体部分

小提示:一般内容区都给个内边距

内边距相关重要知识:多层盒子嵌套时,padding如何使用

  1. 外部盒子高为auto时,内部盒子高一定要是一个确定的值,不能写100%或auto,只有内部盒子的高固定才能撑起外部盒子
  2. 内部盒子如何完美定义内边距:外部盒子高一定为自适应auto或100%,宽可为一个定值,内部盒子高一定为一个定值,宽为自适应auto但不能是100%
分类: 学习笔记
标签: web前端