前端碎片华知识点积累（持续更新....）

最新推荐文章于 2019-08-20 14:23:53 发布

兄弟连勇闯天涯

最新推荐文章于 2019-08-20 14:23:53 发布

阅读量179

点赞数 1

分类专栏： web前端 uni-app

本文链接：https://blog.csdn.net/endianzhijia/article/details/92062295

版权

uni-app 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

web前端

7 篇文章 0 订阅

订阅专栏

1.上传图片的盒子可以用css画出来。如下图

**
在这里插入图片描述

.weui-uploader__input-box {
  float: left;
  position: relative;
  margin-right: 9px;
  margin-bottom: 9px;
  width: 77px;
  height: 77px;
  border: 1px solid #d9d9d9;
   
  
}

.weui-uploader__input-box:after, .weui-uploader__input-box:before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #d9d9d9;
  
}

.weui-uploader__input-box:before {
  width: 2px;
  height: 39.5px;
}

.weui-uploader__input-box:after {
  width: 39.5px;
  height: 2px;
}

2.设置一个固定的背景图片

在这里插入图片描述

<html>
<head>
<style type="text/css">
body 
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>
</head>

<body>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
</body>

</html>

3.盒子的子元素居中

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:550px;
height:200px;
border:1px solid black;
  
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}
</style>
</head>
<body>

<div>
<p>我是居中对齐的。</p>
</div>

<p><b>注释：</b>IE 不支持 box-pack 和 box-align 属性。</p>

</body>
</html>

3.盒子的子元素居中

兄弟连勇闯天涯

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端碎片华知识点积累（持续更新....）

1.上传图片的盒子可以用css画出来。如下图.weui-uploader__input-box { float: left; position: relative; margin-right: 9px; margin-bottom: 9px; width: 77px; height: 77px; border: 1px solid #d9d9d9; }...
复制链接

扫一扫