写页面技巧（三） 1004

1
如何手写实现这样的东西呢 ？

总体思路
1、这个结构是 一个div 下面两个 span
2、 div 做的是直线
3、 上面一个span 做一个三角形 下面的span 做三角形盖住和背景色一样 上面三角形并且和div的颜色一样

代码如下

html
 <div class="spa">
        <span></span>
        <span></span>
    </div>

css
.spa {
    position: relative;
    display: block;
    width: 200px;
    border-bottom: 1px solid red;
}

.spa span:nth-child(1) {
    position: absolute;
    left: 50%;
    margin-left: -5px;
    top: -19px;
    border: 10px solid transparent;
    border-bottom-color: red;
}

.spa span:nth-child(2) {
    position: absolute;
    left: 50%;
    margin-left: -5px;
    top: -18px;
    border: 10px solid transparent;
    border-bottom-color: #fff;
}

接下来的问题是如何把它移位到 密码登录下面 ？ 利用伪元素 :before 和 :after

html
<p class="m_1 fl spa spa1">密码登录</p>

css
.spa:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    top: 22px;
    border: 10px solid transparent;
    border-bottom-color: #fff;
}

.spa1::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    top: 21px;
    border: 10px solid transparent;
    border-bottom-color: #00b38a;
}

实现效果

2
常规情况下 输入手机号或者账号名 type = "text" 输入密码 type = "password"
这样显示出来的密码就是小黑点
代码 这样

 <input type="text" placeholder="请输入常用手机号">
<input type="password" placeholder="请输入密码">

显示效果这样的

3
上下居中 和 左右居中

/* 上下居中 */
    vertical-align: middle;
   // 左右居中
   text-align: center;

4

去掉 input 默认样式 左右的边框

 input {
    border: 1px solid #ededed;
}
 border-left: 0;
    border-right: 0;

5
实现两个页面的跳转方法 不过当前地址写的是本地的地址
只需要 在一个页面的a 标签添加上 另外一个页面的地址 并且 新页面打开也是很容易实现的操作 <li><a href="file:///Users/apple/Desktop/Jump1003/jump.html?#" target="_bank">进入企业版</a>

6
网站前面到小图标怎么显示出来的？

下载一个小图标 可以 使用ico 制作工具 做好
做好之后可以引入到网站

7
/* 子元素 加 margin-top的时候
父元素常常需要加这个 多余的部分不显示 */
.of {

 overflow: hidden;

}

8
一般我们加一个 浮动 有三个作用
1、我们可以将多个元素横行放置
2、我们可以将一个占一行的块级元素 变成由内容撑开的一小块的内容
3、可以将行级元素变成块级元素

9
通常容器中的第一个元素和最后一个元素怎么选择？

.nav {
    height: 77px;
    /* 行高等于容器的高度的时候 里面的东西可以在垂直方向居中 */
    line-height: 77px;
    margin-left: 66px;
}

/* 最后一个 通常不设置右边的间距 */
.nav a:last-child {
    margin-right: 0;
}

/* 第一个间距不一样 重新设置一下 */
.nav a:first-child {
    margin-right: 36px;
}

10
子元素 设置浮动 父级元素没有高度的时候 需要 设置 父级 清除浮动
避免产生高度塌陷

11
导航栏的最上面 固定住怎么操作的？

/* 把最上面的部分固定住 */
    position: fixed;
    top: 0;
    left: 0;

12
将多个页面公共的头部或者底部代码提取出来 放在public.css里面
将多个页面共同的小部分 放在 common.css 或者 widge.css当中

13
新的东西怪异盒

/* 怪异盒子 margin padding 都不会算在内 */
    box-sizing: border-box;

14
1）一个小块 如果 距离四边的边距不一样 转为块级元素 设置宽高
2）如果距离四周边距一样 直接用padding 撑开内容
这样的东西

15
PS 里面 怎么 显示时间轴 并且 将左上的轴线 拉下来？
点击 视图-----标尺 -----mac快捷键 command + r

如果想请

请作者喝一杯卡布奇诺