整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

CSS3弹性盒子(Flexbox)模型布局

CSS3弹性盒子(Flexbox)模型布局

SS3弹性布局

CSS3弹性布局(Flexible Box 或 Flexbox)是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。

块级布局(block)更侧重于垂直方向、行内布局(inline)更侧重于水平方向，与此相对的，弹性盒子布局算法是方向无关的。特别适用于支持那些必须随用户代理(user agent)不同或设备方向从水平转为垂直等各种变化而变换方向、调整大小、拉伸、收缩的应用程序组件。

Flexbox布局中的概念

1.弹性容器

display 的值为flex或者inline-flex就是一个弹性容器

2.弹性项目

弹性容器的子项就是弹性项目

3.轴

弹性布局中有两条轴,弹性项目沿其依次排列的那根轴称为主轴(main axis)。

垂直于主轴的那根轴称为侧轴(cross axis)

用flex-direction来定义主轴

  • flex-direction:row 表示横向为主轴,从左到右
  • flex-direction:row-reverse 横向为主轴,从右到左
  • flex-direction:column 从上到下为主轴
  • flex-direction:column-reverse 从下到上为主轴

用justify-content来定义沿主轴怎么排列

用align-items定义弹性项目沿侧轴默认如何排布

用align-self定义单个弹性项目沿侧轴应当如何对齐

4.尺寸:

用flex-grow定义拉伸因子,相当于权重,数字越大占空间越大,负数无效

用flex-shrink定义弹性元素的收缩规则,数字越大收缩的越厉害.负数无效

用flex-basis 指定弹性元素在主轴方向上的初始大小

布局示例

<!DOCTYPE html>
<html>
<head>
 <style>
 #container{
 display: flex;
 flex-direction: row;
 }
 .item {
 background:#f0ad4e;
 text-align: center;
 border: 1px solid white;
 }
 #container div:nth-of-type(1) {flex-grow:1}
 #container div:nth-of-type(2) {flex-grow: 4;}
 #container div:nth-of-type(3) {flex-grow: 1;}
</style>
</head>
<body>
<div id="container">
 <div class="item">弹性</div>
 <div class="item">布局</div>
 <div class="item">示例</div>
</div>
</body>
</html>

横向排列,第二个弹性元素拉伸因子最大

<!DOCTYPE html>
<html>
<head>
 <style>
 #container{
 display: flex;
 flex-direction: column-reverse;
 height: 50vh;
 }
 .item {
 background:#f0ad4e;
 text-align: center;
 border: 1px solid white;
 }
 #container div:nth-of-type(1) {flex-grow:1}
 #container div:nth-of-type(2) {flex-shrink: 4;}
 #container div:nth-of-type(3) {flex-grow: 1;}
</style>
</head>
<body>
<div id="container">
 <div class="item">弹性</div>
 <div class="item">布局</div>
 <div class="item">示例</div>
</div>
</body>
</html>

纵向反序排列,第二个弹性元素收缩因子最大

<!DOCTYPE html>
<html>
<head>
 <style>
 #container{
 display: flex;
 flex-direction: row;
 justify-content:space-around;
 }
 .item {
 background:#f0ad4e;
 text-align: center;
 width: 150px;
 border: 1px solid white;
 }
 
</style>
</head>
<body>
<div id="container">
 <div class="item">弹性</div>
 <div class="item">布局</div>
 <div class="item">示例</div>
</div>
</body>
</html>

沿主轴分散排列

<!DOCTYPE html>
<html>
<head>
 <style>
 #container{
 display: flex;
 flex-direction: row;
 justify-content:center;
 height: 50vh;
 background-color: burlywood;
 }
 .item {
 background:#f0ad4e;
 text-align: center;
 height:100px;
 width: 100px;
 border: 1px solid white;
 }
 #container div:nth-of-type(1) {align-self:center}
 
</style>
</head>
<body>
<div id="container">
 <div class="item">弹性</div>
 <div class="item">布局</div>
 <div class="item">示例</div>
</div>
</body>
</html>

所有元素沿主轴居中,第一个弹性元素沿侧轴居中

瞅啥？

有没有想过？一直从事流水线操作的你，或许在编程中的流程控制方面天赋异禀。有没有想过？一直以来左右逢源的你，或许也能靠手中的键盘做点大事？有没有想过？平时好像平淡无奇的你，或许身上埋藏了“程序员”的惊奇骨骼。

或者，也许你并没有！那么跟我一起动手试试就知道了！

不扯淡，上干货！

我们要做的成果展示（轮播图）：

菜单（需要的材料）：


  • html语言（处理页面结构）

  • css语言（美化页面）

  • javaScript语言（让页面动起来）


我们分别用3大模块来单独实现，做这个就别想那个

编写页面骨架html


  • 我们在某个文件夹内点击鼠标右键，新建一个文本文件,像这样

  • 接着我们在里面编写如下代码

  • 标签有单、双之分，双标签以</标签名>为结束，标签内的标签是装在里面的东西

  • 下面的结构是yong_hu_kan包含lun_bo_tu_he_zi

  • <html>


  • <head>


  • <title>这是我的轮播图页面哟</title>


  • </head>


  • <body>


  • <div id="yong_hu_kan">


  • <div id="lun_bo_tu_he_zi">


  • <!-- 这里未来放点东西 -->


  • </div>


  • </div>


  • </body>


  • </html>


  • 接着在里面放入3组

    盒子+图片（http的那个是图片地址，不要去手抄哟）


  • <div>
    <img src="http://m.qpic.cn/psc?/V10aHtC10oCJrV/OgsY8p8GsL2M2s50.OYmelxYkBSa1PKhQg7hvHxY6j1IRViMD7DJodEmEq0C005P2hRwMZljkSalJq5OdxLVEiIB4AS6aup2wvsDQ2ZVQZM!/b&bo=yADIAAAAAAADByI!&rf=viewer_4">
    </div>
    <div>
    <img src="http://m.qpic.cn/psc?/V10aHtC10oCJrV/OgsY8p8GsL2M2s50.OYmesH11iotzh7lM0G292gt2X2cmdsxkgO5bl2O4yRGf9GN2HWz.D661rMtBCu5EbBQAwjheXdpWZllS6w9itABFIM!/b&bo=yADIAAAAAAACFzM!&rf=viewer_4">
    </div>
    <div>
    <img src="http://m.qpic.cn/psc?/V10aHtC10oCJrV/OgsY8p8GsL2M2s50.OYmelxYkBSa1PKhQg7hvHxY6j1IRViMD7DJodEmEq0C005P2hRwMZljkSalJq5OdxLVEiIB4AS6aup2wvsDQ2ZVQZM!/b&bo=yADIAAAAAAADByI!&rf=viewer_4">
    </div>

  • 接着运行程序，最简单的方法就是把刚才的编写的文件用鼠标左键托到浏览器中再放手,如无意外，你将看到


兄嘚,那么你的html页面就完成了

CSS美化一下

敲黑板了！


  • 在head标签中加入如下代码，设置他们的宽高

  • <style>
    #yong_hu_kan {
    width:200px;
    height:200px;
    }
    #lun_bo_tu_he_zi {
    width:600px;
    height:200px;
    }
    </style>

  • 让图片横着排列 ,那就让luo_bo_tu_he_zi 里面的3个div都向左漂浮就好,继续在style标签中加入如下代码

  • #lun_bo_tu_he_zi div {
    float:left;
    }

  • 好了，记得Ctrl + S 键来保存一下，保存以后，把文件丢到浏览器中，你将看到：

  • 接下来还有一个障碍要扫清（别问为什么，我太难了）

  • 接着我们在style标签中加入

  • body { margin:0px; }


至此CSS美化就搞定！！！

JavaScript篇

这一篇呢，想比之前的会难一些，出现的知识盲点也是无法避免的，由于篇幅有限，你只用知道有什么用、怎么用就好了

先来个热场，在body标签的结束标签上方编写

<script>
// 这里未来会放代码，下面的body不要照抄，
// 写出来是让大家知道位置
</script>
</body>

首先我们先分析一下，咱们现在3张图应该都横向排列了，那么接下来分解一下任务，代码写到script标签里面：


  • 获取已经设置600px宽度的lun_bo_tu_he_zi盒子（内有3组div+img）

  • var ele=document.getElementById('lun_bo_tu_he_zi')

  • 让图1向左移动，出现图2，再向左移动，出现图3

  • ele.style.left=ele.offsetLeft - 200 + 'px';

  • 以上代码的意思是 描述位置：设置有多靠左=现在有多靠左 - 200（图片宽） 拼接 'px'

  • 每次的移动需要间隔1秒再移动（代码是固定格式）

  • setInterval(function() {
    // 你要做的是
    },1000)

  • 目前设置了盒子的left属性，盒子还不能移动，原因是默认布局方式类似摆货架，左边是墙壁，没法让其往左边移动，因此我们给他设置绝对定位，就可以随处飞，甚至飞出屏幕外。

  • 那么来吧，理解了就往下写

  • ele.style.position='absolute';
    ele.style.left='0px';

  • 第一，设置绝对定位就可以随便飞absolute（绝对的意思）。第二，设置一个它开始的left位置为墙壁靠边边（道理类似与有始有终）

  • 整理一下，现在咱们的代码是这样的（//是注释，不影响程序运行，仅仅让人能看懂代码

    <style>
    // 获取盒子
    var ele=document.getElementById('lun_bo_tu_he_zi');
    // 让它飞
    ele.style.position='absolute';
    // 设置从哪飞
    ele.style.left='0px';
    // 每隔一秒做什么事
    setInterval(function () {
    // 设置它有多靠左=现在有多左 - 200 拼接'px'
    ele.style.left=ele.offsetLeft - 200 + 'px';
    },1000)
    </style>


好了，接下来可以看效果了,记得保存文件和刷新浏览器


修修补补

哎哟哎哟，刚才发现图怎么移动就都没了？

究其原因就是我们没有控制他什么时候回到初始继续滚动

接下来问题来了，那么第三步应该干嘛？还向左继续移动吗？那不就啥也没有了！！因此我们需要让他回到起点，即：设置left=0px; 还继续后续的移动，我们将代码修改成如下：

setInterval(function () {
// 如果满足（）里面的条件就执行后续，否则执行else
if (ele.offsetLeft <=-400) {
// 设置它有多靠左='0px'
ele.style.left='0px';
} else {
// 设置它有多靠左=现在有多左 - 200 拼接'px'
ele.style.left=ele.offsetLeft - 200 + 'px';
}
},1000)

现在再好了，接下来就是美化的事了：


  • 3个图片同时出现不好看，我们需要出现一个，则需要把随着盒子不断向左 移动而超出

    盒子的内容隐藏掉。我们用css给它设置3个样式


  • #yong_hu_kan {
    overflow: hidden;
    position: relative;
    }

  • 第一个属性是超出部分隐藏，第二个属性是由于我们之前设置绝对定位是起飞，因此让页面不在知道盒子之间的包含关系了，因此我们这里声明一下，也就是#yong_hu_kan和#lun_bo_tu_he_zi的关系

  • 再来加个慢慢过渡的效果

  • 针对那个元素？回答：#lun_bo_tu_he_zi

  • 哪一个属性的改变需要过渡？回答：left

  • 过渡时间放缓，需要几秒完成？回答：1s

  • #lun_bo_tu_he_zi {
    transition:left 1s;
    }


搞定！看效果


写在最后

哎哟，累死了，因为有些知识存在盲区，所以讲解的时候几乎都是左顾右盼来讲解的，最后希望大家都能通过这个案例对于前端有一定的兴趣，我是武汉人，希望大家能借着这次疫情明白，荒年饿不死手艺人的道理，也希望大家可以多学习，少追星。。。另外：有需要源码或者做到一半不会做的同学可以想办法联系我，因为不能发第三方的联系方式，所以一般都是关注+私信之类的来联系了

天我们学习的内容有：过渡，动画，转换，伸缩盒子。

可以说今天学习的内容都是重量级的大佬，学好了，使用css3做出酷炫的效果 So Easy！~~

1.过渡

在css3中，有一个属性可以设置过渡效果。

它就是transition，所谓的过渡效果，指的就是以动画的形式慢慢演化样式属性变化的过程。

A.案例：通过transition设置焦点过渡效果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;margin:200px;background: url(girl.jpg);border-radius:50%;transition:all 1s linear 0.3s;cursor: pointer;}div:hover{box-shadow: 0px 0px 20px blue;}</style></head><body><div></div></body></html>

注意页面中的代码：

第一，我们给div添加了一个hover伪类样式，当我们鼠标悬停在div上方的时候，会给div盒子添加一个蓝色的盒子阴影。

第二，我们给div盒子添加了一个transition样式，设置的值为：all 1s linear 0.3s;

这四个数据分别对应

transition-property(需要过渡的属性)：如果设置为all表示所有样式属性都需要过渡。

transition-duration(过渡的时间):以秒作为单位，设置过渡的时间

transition-timing-function(过渡的方式):常用的有linear(匀速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等

transition-delay(延迟的时间):以秒作为单位进行延迟，延迟之后开始进行过渡效果。

所以，我们通过transition这个复合属性设置的过渡效果为：

all:需要过渡所有的属性

1s:过渡的时间为1秒

linear:匀速过渡

0.3s:在延迟0.3秒之后开始过渡动画。

如果大家理解了上面的描述，那么也就不难理解咱们鼠标放到div上之后，为啥会慢慢出现蓝色的光晕了，就是因为咱们添加了过渡，所以，慢慢的就会给盒子添加阴影效果。

2.动画：

在学习完了过渡之后，发现咱们可以使用transition去以动画的形式展示样式的改变以及变化的过程，这可以帮助我们来实现一些过渡的动画。

但是，有的时候，我们的需求会更加的复杂，要求会更加的多变，那么，transition可能就无法满足我们的需要了，我们需要有更加炫酷，复杂的效果呈现。

那么，动画animation就可以满足我们的需要。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>@keyframes moveAndChange{0%{left:0px;top:0px;}25%{left:200px;top:200px;background:green;border-radius: 0;}50%{left:400px;top:200px;background:blue;border-radius: 50%;}75%{left:400px;top:0px;background:#ccc;border-radius: 0;}100%{left:0px;top:0px;background:red;border-radius: 50%;}}div{margin:200px;width: 200px;height: 200px;position: absolute;background:red;border-radius:50%;animation: moveAndChange 5s linear 0.5s infinite normal;}</style></head><body><div></div></body></html>

代码效果如下：

同样，让我们来关注编写的代码：

1.在样式中，首先我们使用@keyframes 来定义了一个复杂的动画，在css3中，新增了@keyframes可以来帮助我们添加动画。代码如下：

/*动画的名字叫做moveAndChange*/

@keyframes moveAndChange{

/*动画最初的时候，将left设置为0px，top设置为0px*/

0%{

left:0px;

top:0px;

}

/*当动画进行到25%的时候，使用动画将left过渡到200px，top过渡到200px，

背景颜色过渡为绿色，圆角过渡为0(无圆角)*/

25%{

left:200px;

top:200px;

background:green;

border-radius: 0;

}

/*当动画进行到50%的时候，使用动画将left过渡到400px，top过渡到200px，

背景颜色过渡为蓝色，圆角过渡为50%(正圆)*/

50%{

left:400px;

top:200px;

background:blue;

border-radius: 50%;

}

/*当动画进行到75%的时候，使用动画将left过渡到400px，top过渡到0，

背景颜色过渡为灰色，圆角过渡为0(无圆角)*/

75%{

left:400px;

top:0px;

background:#ccc;

border-radius: 0;

}

/*当动画结束的时候，使用动画将left过渡到0x，top过渡到0px，

背景颜色过渡为红色，圆角过渡为50%(正圆)*/

100%{

left:0px;

top:0px;

background:red;

border-radius: 50%;

}

}

这是一个比较复杂的动画效果，可以发现，它通过百分比的形式将一个完整的动画拆分成了5个部分，每个部分都有不同的样式效果，而当我们采用该动画的元素就会按照设置的顺序和样式效果进行动画的过渡和展示。

2.上面我们只是通过@keyframes创建了一个动画，我们还需要通过特定的语法来使用这个动画。

就是下面这句代码了：

animation: moveAndChange 5s linear 0.5s infinite normal;

它是一个复合属性，设置了6个值，分别对应：

animation-name(设置动画的名称)：用来设置动画的名字，我们这里写的是moveAndChange ，也就是说我们就是要使用我们刚刚创建的动画。

animation-duration(设置整个动画的时间):以秒作为单位，我们这里写的是5s，表示整个动画的时间为5秒

animation-timing-function(设置播放动画的方式)：播放动画的方式，常用的有linear(匀速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等，我们使用的是linear匀速播放动画。

animation-delay(设置动画的延迟):以秒作为单位，我们写的是0.5s，表示延迟0.5秒之后开始播放动画。

animation-iteration-count(设置动画播放的次数):播放动画的次数，我们这里写的是infinite ，表示动画将会被播放无限次，如果写数字，那么就会播放数字对应的次数。

animation-direction(设置是否反向播放动画)：我们写的是normal，表示正常播放动画，如果写的是

alternate则表示要反向播放动画，大家也可以自己试一试这个效果。

最终，我们通过@keyframes创建动画，通过animation设置动画，成功完成了这个复杂的动画效果。

3.转换

在css3中，我们通过transform属性可以设置元素的转换效果，具体的效果如下：

A.平移

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body{background:pink;}div{width: 200px;height: 200px;position: absolute;background: green;left:0px;top:0px;transform: translate(300px,300px);}</style></head><body><div></div></body></html>

代码效果如下：

如上图所示，本来div盒子的位置是left:0,top:0;

但是我们通过transform: translate(300px,300px);将盒子进行了偏移，所以，盒子的位置发生了改变。

B.旋转

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: rotate(45deg);}</style></head><body><div></div></body></html>

代码效果如下：

如上图所示，本来div盒子应该是四四方方的。

但是，经过我们的代码transform: rotate(45deg); //deg为单位，表示度数。

进行了45度的旋转之后，呈现出来的就是一个菱形的盒子了，旋转的正方向为顺时针，负方向为逆时针。

C.缩放

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: scale(0.5,0.25);}</style></head><body><div></div></body></html>

代码效果如下：

如上图所示，本来盒子的宽高为200*200,而我们通过transform: scale(0.5,0.25);进行的缩放

scale的第一个参数为0.5,表示横向缩小为0.5倍

scale的第二个参数为0.25，表示纵向缩小为0.25倍。

scale的参数如果为1，则表示不进行任何缩放，小于1就是做缩小，而大于1表示做放大。

小结：transform转换中其实还包含了skew(倾斜)，matrix(矩阵转换)，相对来说用到的不是特别多，所以在本文中我们便不再做介绍。

4.flex布局

Flex布局，可以简便、完整、响应式地实现各种页面布局。

Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: flex-start}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

代码效果如下：

如图所示，咱们通过display:flex将.parent元素设置为了flex盒子，那么子元素将会按照justify-content设置的方式进行元素的排列，目前看来，和我们没有设置flex盒子的效果是一致的。

接下来我们更改一下，将justify-content设置为flex-end，效果如下图所示：

所以我们就应该发现，flex-start是让所有的子元素从父元素的左侧开始排列

而flex-end是让所有的子元素从元素的右侧开始排列。

我们再来更改一下，将justify-content设置为center，效果如下图所示：

更厉害了，子元素在父盒子的中央位置排列显示了。

然后，我们再将justify-content设置为space-around，效果如下图所示：

它是平均分配的形式为每一个子元素设置了间距，但是看起来有点变扭。

所以我们推荐将justify-content设置为space-between，效果如下图：

我们还可以通过flex-wrap来设置子元素是否换行显示，以及flex-direction设置子元素排列的顺序。

这两个属性可以设置的值如下：

flex-wrap: nowrap;//不换行，会自动收缩

flex-wrap: warp;//换行，会自动收缩

flex-wrap: warp-reverse;//反转，从默认的从上到下排列反转为从下到上。

flex-direction:row; //从左至右一行一行进行子元素的排列

flex-direction:column; //从上到下一列一列进行子元素的排列

flex-direction:row-reverse; //从右至左一行一行进行子元素的排列

flex-direction:column-reverse; //从下到上一列一列进行子元素的排列

案例代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;flex-wrap: nowrap;flex-direction: row-reverse;}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body></html>

我们设置了flex-wrap: nowrap;（不换行，压缩所有的子元素在一行中显示），以及flex-direction: row-reverse;（反向排列）

代码效果如下：

如果设置为flex-wrap: warp（换行显示无法在一行显示的子元素），则效果如下：

如果将flex-direction: column;,则会纵向排列元素，效果如下图：

除了上面的这些给伸缩盒子父元素设置的样式之外，我们还可以可以伸缩盒子的子元素设置flex属性，用来设置平均分配整个父盒子的空间。

代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div{flex:1;width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下：

如上图所示，每个盒子平均分配了父盒子的空间，原本宽度为20%，现在被拉伸了。

除此之外，咱们还可以使用flex属性进行进一步的设置，代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div:nth-of-type(1){flex:1;border:1px solid #ccc;background:red;}.parent div:nth-of-type(2){flex:2;border:1px solid #ccc;background:green;}.parent div:nth-of-type(3){flex:2;border:1px solid #ccc;background:blue;}.parent div:nth-of-type(4){flex:1;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下图：

我们分别给四个子盒子设置了flex:1 , flex:2, flex:2 ,flex:1.

这是什么意思呢？

四个flex加起来一共是6.那么第一个盒子就占据整个父盒子的1/6宽度。

同理，另外三个盒子分别占据2/6,2/6,1/6的宽度，所以就形成了我们现在看到的效果。

原文来源于：黑马程序员社区


学习资源：

想学习css，可以关注：黑马程序员头条号，后台回复：css


在线咨询
上一篇：UI培训：芜湖北大青鸟UI培训怎么样
下一篇：织梦dedecms网站微信支付接口开发流程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 中卫 武宁县 大连 名山县 平原县 容城县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服