文主要介绍了网页布局中左侧固定，右侧自适应的两种实现方法，相信对大家初学网页布局会有很好的帮助！

第一种方法代码如下：

第二种实现方法代码如下：

想学习更多技术，请关注“恒星网络”头条号！

字加载...动画

html

正在加载中<dot>...</dot>

css

dot{ 
 display: inline-block; 
 height: 1em; 
 line-height: 1; 
 text-align: left; 
 vertical-align: -.25em; 
 overflow: hidden; 
} 
dot::before{ 
 display: block; 
 content: '...\A..\A.'; 
 white-space: pre-wrap; 
 animation: dot 2s infinite step-start both; 
} 
@keyframes dot{ 
 33% { 
 transform: translateY(-2em); 
 } 
 66% { 
 transform: translateY(-1em); 
 } 
}

如果你看上图代码没有看懂，请看下图，我注释掉一行代码，你就明白了。原来是dot元素，沿着Y轴在循环位移，隐藏掉就让你看到了加载的动画效果。

border 实现边框

当你需要这样一个上传文件，按钮时，你考虑的是找设计弄个图片，还是自己写一个？？？

其实CSS写，也很简单的。

<a href="javascript：;" class="upload" title="继续上传">添加图片</a>
.upload{ 
 position: relative; 
 display: inline-block; 
 width: 76px; 
 height: 76px; 
 color: #ccc; 
 border: 2px dashed; /*边框虚线*/ 
 text-indent: -12em; /*使其文字看不到*/ 
 transition: color .25s; /*hover事件：颜色渐变动画*/ 
 overflow: hidden; 
 margin: 50px 100px; 
} 
/*用before/after伪类做 + 号样式*/ 
.upload:before, .upload:after{ 
 content: ''; 
 position: absolute; 
 top: 50%; 
 left: 50%; 
} 
.upload:hover{ 
 color: #34538b; 
} 
.upload::before{ 
 width: 20px; 
 border-top: 4px solid; 
 margin: -2px 0 0 -10px; 
} 
.upload::after{ 
 height: 20px; 
 border-left: 4px solid; 
 margin: -10px 0 0 -2px; 
}

不规则的投影 filter

当我们想给一个矩形或其他能用 border-radius 生成的形状加投影时，用 box-shadow 都可以解决，如下图：

但是，当元素添加了一些伪元素或半透明的装饰之后，box-shadow就有些 力不从心了，因为 border-radius 会无耻地忽视透明部分。这类情况包括下列几种情况:

1、半透明图像、背景图像、或者 border-image(比如老式的金质像框);

2、元素设置了点状、虚线或半透明的边框，但没有背景(或者当 background-clip 不是 border-box 时);

3、对话气泡，它的小尾巴通常是用伪元素生成的;

4、几乎所有的折角效果

5、通过 clip-path 生成的形状。

下面来看看这个示例： html代码

<div class="speech">不规则的投影</div>

css样式

div { 
 position: relative; 
 display: inline-flex; 
 flex-direction: column; 
 justify-content: center; 
 vertical-align: bottom; 
 box-sizing: border-box; 
 width: 8em; 
 padding: .5em; 
 height: 5em; 
 margin: .6em; 
 background: #0cc071; 
 color: #fff; 
 /*box-shadow: .1em .1em .3em rgba(0,0,0,.5); 此时是伪类是没有阴影的*/ 
 -webkit-filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); 
 filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); 
} 
 
.speech { 
 border-radius: .3em; 
} 
.speech::before { 
 content: ''; 
 position: absolute; 
 top: 1em; 
 right: -.7em; 
 width: 0; 
 height: 0; 
 border: 1em solid transparent; 
 border-left-color: #0cc071; 
 border-right-width: 0; 
}

从上图可以看出box-shadow搞不定的，drop-shadow给搞定了。这是为什么了？

可以很明显的看出区别，为什么会这样呢？在这里我用的是div标签，大家都知道，div标签是个块标签，说白了是个盒模型，指的是一块区域，box-shadow的属性只能添加到盒模型外面，因此内部的东西是不会添加上的，就变成上图的样子，中间还是白色部分。而drop-shadow就不一样了，他是把所有的非透明区域都做了阴影效果，就相当于一种真正的投影。

css 实现自适应的弹框

经常在网页中看到一些Dialog，例如有些网页点击登录注册时就会跳出一个弹框来显示登录注册页面，下面就使用 css 完成一个可以自适应，无论窗口的大小，始终能保持水平垂直居中的dialog。

<div class="c-pupup"> 
 <div class="dialog"> 
 <div class="content"> 
 我是内容 
 </div> 
 </div> 
</div>

css样式

.c-pupup{ 
 position: fixed; 
 top:0; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 background: rgba(0,0,0,.5); 
 text-align: center; 
 white-space: nowrap; 
 z-index: 99; 
} 
.c-pupup:after{ 
 content: ''; 
 display: inline-block; 
 height: 100%; 
 vertical-align: middle; 
} 
.dialog{ 
 background-color: #fff; 
 display: inline-block; 
 vertical-align: middle; 
 border-radius: 6px; 
 text-align: left; 
 white-space: normal; 
 width: 400px; 
 height: 250px; 
}

总结

这些CSS都是非常实用的，有兴趣的可以收藏起来，没准以后能用上。然后drop-shadow就不用去纠结IE能不能用了，因为我们已经放弃它了。

喜欢小编或者觉得小编文章对你有帮助的，可以点击一波关注哦！

天下数据是国内屈指可数的拥有多处海外自建机房的新型IDC服务商，被业界公认为“中国IDC行业首选品牌”。

天下数据与全球近120多个国家顶级机房直接合作，提供包括香港、美国、韩国、日本、台湾、新加坡、荷兰、法国、英国、德国、埃及、南非、巴西、印度、越南等国家和地区的服务器、云服务器的租用服务，需要的请联系天下数据客服！

除提供传统的IDC产品外，天下数据的主要职责是为大中型企业提供更精细、安全、满足个性需求的定制化服务器解决方案，特别是在直销、金融、视频、流媒体、游戏、电子商务、区块链、快消、物联网、大数据等诸多行业，为广大客户解决服务器租用中遇到的各种问题。

站对于每个企业而言是展现品牌的重要渠道。

当你在为你的用户设计网站的时候，一定要控制好网站的内容量。用户并没有必要在塞满屏幕的大量信息当中，费劲巴拉地去找自己想要的那一条。极简主义风格的流行并不是没有道理的。

有针对性地呈现内容，为品牌进行合理的适配，提供清晰且扣人心弦的视觉设计，这样的网站是令人印象深刻的。

极简的设计并不意味着你无法和用户进行更多的沟通，也许你觉得当前的设计还不足以满足你的品牌和用户进行沟通的需求，好在还有许多方法和技巧帮你做到这一点。

弹出框就是为此而出现的。在几年前，这种设计被作为一种不影响当前网站内容的信息呈现方式而广泛应用，随后又因为大量的、无节制且毫无美感的滥用，被设计师和用户广泛吐槽。Google 认为弹出框对于用户体验造成了明显的干扰，同时，需要借助弹出框提升信息交互的设计师和开发者因此也困扰不已。

那么，这是不是意味着弹出框已经被淘汰了？并非如此。进入的文章我们将会详细为你分析弹出框在如今UI/UX设计当中的真实情况，并且提供一些可供参考的最佳实践。

弹出框的设计现状

首先我们应该聊聊弹出框的类型，正确用法。

弹出框的类型

弹出框遵循着一系列模式而存在。它会在打开网页的时候弹出，滑入网页，或者干脆就在网页加载的时候就直接加载进去了。虽然有的网页会将它置于页面的正中间，不过也有许多设计师将它置于页面的底部或者角落。

插页式和覆盖式的弹出框会覆盖住整个屏幕，通常会出现在一打开网页的时候，

另外一种是通知栏式的弹出框，它会紧贴在页面的顶部或者底部，甚至是常驻式的存在。

使用弹出框的5个原因

弹出框有的时候确实令人头疼，作为设计师你总想远离它。但是，它依然存在于许多网页当中，并且发挥着巨大的作用。下面的5个理由，让设计师真正离不开它。

1. 弹出框能够让人集中注意力

越来越多的用户无法集中注意力阅读，弹出框这种打断式的信息呈现方式，非常抓人眼球，能够快速直接地传递信息。

2. 让用户注意到最重要的信息

弹出框让其中所呈现的信息拥有了额外的价值，当弹出框出现的时候，其中所展现的信息拥有了超过其他信息的重要性，至少感觉上是这样。

3. 弹出框是多用途的

如今的弹出框拥有多种多样的玩法和呈现方式，不会将用户推开，也不再使用广告让用户头疼不已。弹出框的触发机制也非常的多变：

在进入时弹出

滚动到特定的位置时弹出

通过特定操作

触发在离开时候触发

4. 保持页面干净整洁

正如我之前所提到的，极简主义的设计让网站足够美观，但是想要顺畅地传递信息，弹出框能够作为不错的载体，确保不会占用页面位置，影响整体风格。

5. 提升转化率

根据 Sumo 的研究，弹出框和转化率之间有着清晰的关系。他们发现，弹出框让转化率的平均转化速度提升了大概3%，而设计得好的弹出框能够将转化率提升到9%，对于许多网站而言，这个转化率的意义是非同凡响的。

弹出框提升了网站的参与度。

移动端UI中的弹出框

值得一提的是，Google 在分析报告中并不反感移动端的弹出框，而是建议让设计师和开发者尽可能巧妙地进行移动端弹出框的设计，降低弹出框对于用户体验的损害，而是尽量去提升用户体验。

因此，Google 将会对采用下面3种弹出框的网站予以处罚：

当用户一打开首页就弹出的弹出框

弹出框盖住了几乎全部页面

弹出框广告

明白了吧？现在，我们要聊聊弹出框的设计技巧了。

18个弹出框设计的最佳实践

不要为了跟随某个趋势，展现某种设计元素而使用弹出框，它一定要是功能性的，不要浪费用户的时间，这样会降低用户对你的信任。

弹出框的设计应该和网站本身保持一致，无论是风格还是素质上。

确保弹出框是可交互，有响应的。

确保弹出框中的文案是简短而重点突出的。

不要使用被动的或者过于生硬的「是/否」式的行为召唤文案，除非你的品牌个性本就如此。如果弹出框中包含两个 CTA，请尽量采用积极的方式来展现。

如果你在搜集用户的联系信息，最好只让他们提供电子邮件地址。

确保弹出框的内容和对应的页面保持一致。

如果可以，尽量避免在首页上就使用弹出框。尽量让用户先适应所处的页面环境。这是 Google 所允许的弹出框设计之一。

遵循 Google 对于移动端网页的设计规则：不要有插页式的广告，不要设置首页弹出框。

不要让移动端弹出框和桌面端的完全一样，有针对性地进行设计。

总是使用简单统一的方式来关闭弹出框，即在右上角设置一个X关闭按钮。

让所有的弹出框都在恰当的时候才弹出，比如关闭页面的时候。

设置频率规则，确保访客不会在每个页面或者每次访问的时候都会碰到弹出框。

将弹出框设置在正确的位置，根据网站的状况和体验的度量来进行判断。

如果你想让弹出框醒目，尽量让它出现在屏幕的正中心。

如果你想推送优惠信息，可以使用顶部悬浮式的弹出框。

如果你想在用户浏览的时候推送信息，弹出框尽量出现在屏幕的一侧。

根据用户类型细分来自定义弹出框信息。

结语

如果你真的希望用户知悉一些关键的、重要的信息，不要吝啬使用弹出框，你可以尽量让弹出框体验更好，提供更加有用的、他们需要的内容。不要害怕 A/B测试，这样的方法会让弹出框更加优秀。一个优质的弹出框需要你考虑很多因素，包括整体的设计，文案、位置、CTA等等。