莫方教程网

专业程序员编程教程与实战案例分享

手把手教你常见的CSS布局方式【实践】


作者:sunshine小小倩

转发链接:https://juejin.im/post/599970f4518825243a78b9d5

前言

温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现方法太多,所以本文主要是介绍 flex 布局和 grid 布局,以及 CSS 常见的居中方式和两种经典的布局方式“圣杯布局”和“双飞翼布局”。想到哪写到哪,请各位见谅。

(原创)ie6、7、8不支持bg-size解决方法

现在做前端开发 需要考虑 Retina屏幕,即精度比较高的屏幕,

一般以苹果系列屏幕为主,

所以在切图网(qietu.com)前端切图项目中,

会发现类似 logo@2x.png 规则的命名,

这个其实就是相对于 logo.png 做了一个2倍大小的图片,

而布局的时候我们通常会使用 2倍的图片,

正常尺寸图片一般用来做兼容性会使用到。

例如 二倍图片用来做背景的时候,

我们需要加上 background-size:cover; 来让2倍的图片刚好铺满正常大小的屏幕,

手摸手,带你用vue撸后台 系列四(vueAdmin 极简的后台基础模板)



完整项目地址:vue-element-admin

https://github.com/PanJiaChen/vue-element-admin

前言

做这个 vueAdmin-template 的主要原因是: vue-element-admin 这个项目的初衷是一个 vue 的管理后台集成方案,把平时用到的一些组件或者经验分享给大家,同时它也在不断的维护和拓展中,比如最近重构了dashboard,加入了全屏功能,新增了 tabs-view 等等。所以项目会越来越复杂,不太适合很多初用 vue 的同学来构建后台。所以就写了这个基础模板,它没有复杂的功能,只包含了一个后台需要最基础的东西。

小诺VUE快速开发平台通用型后台权限管理框架

小诺快速开发平台

通用型后台权限管理框架,紧随潮流、开箱即用

拥有多种版本选择,前端可以根据熟悉的语言进行随意搭配使用。

Snowy :前端使用Antd-Vue开发。

Snowy-Layui版:前后端一体,单人开发更高效。

Snowy-Cloud版:微服务项目架构,安全稳定,前后端分离开发,前端使用Easyweb多标签版。

推荐web前端框架bootstrap

bootstrap是基于Jquery而开发的一个前端框架。

全中文的学习网站:http://www.runoob.com/bootstrap/bootstrap-tutorial.html

实际上就是html+css,但是使用该框架可以让我们的项目界面更统一,更美观,更强大。当然对我们来说,他最大的好处在于响应式布局,在如今手机上访问bootstrap开发的网站,和在电脑上看起来几乎一样。

目前使用较广的是版本2和3,其中2的最新版本的是2.3.2,3的最新版本是3.3.7。

Web屏幕适配的解决方案

就目前看来,web的屏幕适配是贯穿整个前端行业的,如常见的PC端,移动端,响应式,小程序等。

PC端

推荐一款适合程序员使用的前端框架ZUI,基于Bootstrap深度定制款

ZUI

一个基于 Bootstrap 深度定制开源前端实践方案,帮助你快速构建现代跨屏应用。

Bootstrap是非常优秀的前端框架,但在构建大型应用的开发时通常远远不够。如果Bootstrap能够完全满足你的项目,建议使用Bootstrap,如果你需要的更多,则建议使用ZUI。使用ZUI的显著理由如下:

<< 1 >>
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言