:after 伪类
position 定位
border-radius 圆角边框
linear-gradient 背景颜色渐变
display: flex flex 布局
box-shadow 盒子阴影
网站的整体效果怎么样，主要是看布局设计的应用效果，在网站建设当中，创意的布局设计很重要，它有助于提高网站的整体效果。创意布局设计不同于普通的网站设计，前者必须要有自己的特色，给用户一种新鲜感，让他们觉得新颖、有意思，这才算是创意的设计。那在网页制作中使用这样的设计会有什么优势呢？网页制作 中使用创意布局设计一般倾向于不规则设计，例如网站建设的卡片式设计，所谓的卡片式设计就是具有卡片特点，在颜色、形状和表现形式方面都采用不规则设计以外，简洁的页面布局设计能够突出网站主题，表达出网站内容的重点，这样的网站不但美观，还简洁大方。如果网站中的创意设计运用得当，能够提高用户对网站的印象分。
下面总结一下网站建设中使用创意 网站布局设计 有何优势：
第一，便于用户浏览，网站内容可以使用卡片式的创意布局设计来分，这种设计是沿用了卡片的特点，为了便于用户浏览，以最简短的方式表达核心内容，简洁有序的排版，让用户阅读更方便。
第二，这种设计使用灵活，创意布局设计能够解决不同设备展现问题，像响应式设计一样，在移动端和pc端都能正常显示，完全解决了不同设备的适用性问题，满足的不同的客户需要，大大提升网站用户体验度，并且使用内容板式布局，更清晰展现在用户眼前。
第三，个性化吸引眼球，当然每一种设计都会存在一些缺陷，卡片式创意布局也不例外，肯定也有一定的局限性，有时候为了展现页面的简洁，会采用卡片式框来划分内容，这种设计比较单调死板，但是也展现了个性化，可以通过高质量的内容弥补这种不足，再合理搭配颜色和字体，这样大大提升它的吸引力。
第四，卡片式设计的使用范围很广，不分行业，基本网页制作都可运用上。企业网站建设的时候根据实际情况，以及确定的设计风格，任意选择合适的布局设计。
网站建设中的创意布局设计的方式多样化，而卡片式布局设计只是其中的一种方式，企业建设网站可根据网站基本情况选择最合适的一种方式。要记住创意是可以千变万化，能够给人惊喜，但是它带来的好处却是大同小异，创意布局设计主要在于它的应用是否符合用户的真正需求，能否让用户满意，在网站的布局设计中考虑用户体验的重要性，在网站建设的各个细节做好布局设计的应用，这样才能建设出一个成功的网站。
如果企业用户不知道怎么制作企业网站的，可以通过 免费网站模板 进行自主网站制作，这种方式能给企业在网页制作中更多的自主选择和控制的空间。
四种方式
比如想要做这样一个布局，有哪几种方式。
最简单、最快捷的方式。
element-ui提供的布局容器，el-header头标签，有height属性。el-aside左侧边栏标签，有width属性。el-footer底部标签，有height属性。其他样式可以通过class进行控制。
相对简单的方式。
利用el-col将每行分为24等分的特性，进行布局。其他属性通过class进行控制。
原生css布局的方式，float布局，也是最基础的方式。
将aside向左浮动，固定好宽度。main向右浮动，注意固定好宽度是 100vw - 左侧边栏的宽度 ，注意高度是 100vh - 上下header和footer高度之和 。footer也由于浮动而被挤到到最下面，这边指定float为left、right都是可以的，都可以达到浮动到最下方的效果。
原生css布局的方式，position布局，也是最基础的方式。
sideBar设置好宽度，利用绝对定位将固定在最左边（由于是绝对定位，所以注意已经脱离了文档流）。main设置margin-left为侧边栏宽度，这样就可以使得main不会被遮挡。footer设置为固定定位，bottom为0固定在底部。其他height、width的值也要注意计算哦~
![JS~~!!!! [^d]g 是什么意思啊](/aiimages/JS%7E%7E%21%21%21%21+%5B%5Ed%5Dg+%E6%98%AF%E4%BB%80%E4%B9%88%E6%84%8F%E6%80%9D%E5%95%8A.png)
