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
