本章内容:

1.移动端div左右滑动展示&&隐藏滚动条
2.跨域问题
3.css头像制作
4.点击关闭悬浮框功能
5.z-index元素堆叠

1.移动端div左右滑动展示&隐藏滚动条

html页面布局

      由于手机屏幕的宽度有限,内容太多移动设备一行装不下的,所以很多移动端网站的导航栏都有左右滑动效果,下面我就用CSS+HTML实现移动端div左右滑动展示。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="app">
<div class="tabBar">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>

三层嵌套模型:

  • box层: 各个div模块
  • tabBar: 滚动条隐藏层
  • app层: .box::-webkit-scrollbar的兼用性较差,有些浏览器无效(如:IE等),容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样,就变相隐藏了

在内容容器A外面再嵌套一层容器B并设置 overflow:hidden ,容器A和容器B需要限制尺寸,就变相隐藏了,兼容所有浏览器。

想要x轴或y轴隐藏滚动条时,子容器比父容器的宽度或高度多 17 px, 经测试正好是滚动条的默认宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.app{
overflow: hidden;
height: 118px;
}
.tabBar{
background-color: #eee;
padding: 10px 0;
white-space: nowrap;/*文本不会换行,文本会在在同一行上继续*/
overflow-y: auto;/*可滑动*/
}
.box{
width: 8em;
margin-left: 3%;
height: 100px;
background:#fff;
display: inline-block; /*行内块级元素*/
}

参考文章:https://blog.csdn.net/a785589446/article/details/102247936

举例说明:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="outer-bar" >
<div class="tabBar">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.outer-bar{
overflow: hidden;
width: 100%;
}
.tabBar{
background-color: #eee;
width:117%;
height:30em;
overflow-y: scroll;
}
.box{
width: 10px;
height: 60px;
background-color:orchid;
margin:3px;
}

2.跨域问题

  1. ajax只能下载同源的数据,跨源的数据是禁止下载的。同源策略:同协议,同域名(ip),同端口号

  2. html的src属性是可以跨域的,没有同源策略约束,比如可以任意访问其它数据源的图片url,script标签的src属性

  3. 对于计算机来说,文件的后缀是没有任何用处的,后缀名的作用是快速识别应该用什么软件打开

  4. jsonp跨域的使用流程

跨域参考文章:

举例说明:目录结构

nmsl
    |___nmsl.txt
    |___nmsl.json
    |___跨域问题.html

先导入Ajax的cdn文件
<script src=”https://unpkg.com/axios/dist/axios.min.js">\</script>

接下来axios的简单举例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<body>
<div class="app">
<p id="xon"></p>
<button>Click me</button>
</div>
<script>
function getInfo() {
return axios({
url:"./nmsl.json",
method:"get",
headers:{
'x-requested-with':"XMLHttpRequest",
"x-csrf-token": "SJoNf6r3hhcqe0TYsMArfcH6lth6L2htr14ZiruL",
"Access-Control-Allow-Origin":"*"
},
timeout:5000
})
}
axios.all([getInfo()])
.then(axios.spread(function (response) {
console.log(response);
document.getElementById("xon").innerHTML = (response.data)["page40"][6];

}))
</script>
</body>

3.css头像制作

3.1 div里面设置背景图片

avatar层来包裹头像

1
2
3
4
5
6
7
8
9
10
<head>
<link rel="stylesheet" href="./demo.css">
</head>
<body>
<div class="app">
<div class="avatar">
<img src="./2.jpg" alt="touxiang">
</div>
</div>
</body>

css样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.app{
width: 200px;
height: 200px;
margin: 0 auto;
position: fixed;
right: 1em;
bottom: 1em;
}

.avatar{
width: 200px;
height: 200px;
background-image: url(./2.jpg);
background-size: cover;
/*设置边角*/
border-radius: 20%;
}

3.2 object-fit属性

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

object-fit 一般用于 img 和 video 标签,一般可以对这些原素进行保留原始比例的剪切、缩放或者直接进行拉伸等
object-position 属性一般与 object-fit一起使用,用来设置元素的位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.app{
width: 200px;
height: 200px;
margin: 0 auto;
position: fixed;
right: 1em;
bottom: 1em;
}

.inner img{
width: 200px;
height: 200px;
object-fit: cover;
object-position: left;/*可能有时候图片不是从头部开始截图的 所以需要定位一下*/
border-radius: 20%;
}

最终成果:

4.点击关闭悬浮框功能

设计思路:准备两张图片,一张是带×提示关闭按钮,另一张是广告内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
height: 3800px;
background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
}
.app{
position: fixed;
right: 1em;
bottom: 1em;
}
.app i{
margin-left: 80%;
}
</style>
</head>
<body>
<div class="app">
<i id="outer"><a href="javascript:;"><img src="./bullet.png" alt="点击取消"></a></i>
<div class="inner">
<img src="./bee.png" alt="广告弹窗">
</div>
</div>
<script>
window.onload = function(){
let btn = document.getElementById("outer");
btn.onclick = function() {
let img = document.getElementsByClassName("app");
img[0].style.display = "none";
}
}
</script>
</body>

5.z-index元素堆叠

z-index 属性设置元素的堆叠顺序,z-index的值也可以为负数。通俗来说就是类似于PPT的功能置于图层上,置于图层下
z元素只对定位属性生效,position不能是默认值,即必须是绝对/相对/固定定位

  • z-index只针对于同级的定位元素生效, 不针对父子元素
  • 若父元素与子元素z-index值都为正数,就算父元素z-index值大也是在下边
  • 但是把子元素z-index值设成负值确实能达到父元素在子元素之上的效果

实例:z-index教程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
img
{
position:fixed;
left:2px;
top:5px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" alt="tupioan"/>
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>

 评论

联系我 | Contact with me

Copyright © 2019-2020 谁知你知我,我知你知深。此恨经年深,比情度日久

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议