SimpleBlue实践心得

DNXRZL
2021年10月14日 · 阅读 490
页眉部分实践
利用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;
响应式布局
-
当最大宽度是1080px时生效
@media (max-width: 1080px){ /*响应式布局*/ .main-head { width: 80%; } .sec-head ul { width: 80%; } }
-
不是最小宽度不生效,是最小宽度生效
@media (min-width: 830px){ /*响应式布局*/ .sec-head { display: none; } .hrPlus { margin-bottom: 20px; } }
主体部分
小提示:一般内容区都给个内边距
内边距相关重要知识:多层盒子嵌套时,padding如何使用
- 外部盒子高为auto时,内部盒子高一定要是一个确定的值,不能写100%或auto,只有内部盒子的高固定才能撑起外部盒子
- 内部盒子如何完美定义内边距:外部盒子高一定为自适应auto或100%,宽可为一个定值,内部盒子高一定为一个定值,宽为自适应auto但不能是100%