每日一小步夯实基础-前端随笔

css实战项目#

1.观察整个页面布局，首先设置版心（就是指整体版面的布局，居中还是靠左还是靠右等）
2.从上到下以此实现布局 inner_c marign: 0 auto 版♥
3.logo实现

tip

2.1 logo->h1
2.2 line-height 撑满h1/text
2.3 text-indent 隐藏文字

<style>
.inner_c{
    width:1140px;
    margin:0 auto;
}

.header{
    width:100%;
    height:68px;
    background:blue;
}
.header .header_c{ 
    background:pink;
}
.header .header_c h1{
    height:68px;
    width:140px;
    background:orange;  
    line-height:68px;
    padding:0 15px;
}
.header .header_c h1 a{
    display:block;
    text-indent:-100em;
    overflow:hidden;
}

</style>
<body>
    <!--header begin-->
    <div class="header">
        <div class="header_c inner_c">
            <h1>
                <a href="#">测试</a>
            </h1>
        </div>
    </div>
    <!--header end--> 
</body>

预览：

4 选择分类栏目

tip

4.1 float:left; 设置浮动
4.2 span 用于小图标
4.3 border-top 锲形,利用这个特点画三角
4.4 opacity 透明

5 子分类和商品列表遮拦，登陆注册购物车

tip

5.1 子绝父相
5.2 inline-block

一定要转为自己的知识点，说服自己

子绝父相

就是指子元素设置绝对定位，而父元素设置相对定位，然后设置子元素的top、left、right、bottom的值我们就可以让子元素到达相应的位置

6 实现header头部分

tip

5.1 子绝父相

Js 基础#

1 创建函数对象的两种方法
在ECMAScript中，有两个最常用的创建函数对象的方法，即:使用函数表达式( Function Expression ) ,使用函数声明（Function Declaration）。
2 IIFE (immeditelly invoking function expression) 立即调用函数使用函数表达式创建对象的时候即调用
IIFE 中的匿名函数拥有独立的词法作用域
3 bat 考察点：变量声明提前
4 屌丝程序员逆袭-正则表达式，split,match,
// 定界符
\s 匹配空格
+ 量词

Js 实战#

Js高阶#

nodeJs基础#

微信小程序端#

文章作者：xcent
原文地址：https://xcent-blog.vercel.app/
版权声明：文章采用 CC BY-NC-SA 4.0 协议，转载请注明出处。