分享一个自己画div的技巧

笔者是小白，前端不是很懂。现在想总结下自己画div布局的小技巧和思路。

先对着设计图把div给好好框选出来

我个人觉得这一步是很重要的，要先分析大局，再细节处理。一定要先决定好大体路线再具体实现。并且将想法画出来有利于回忆，不会走一步算一步。我相信很多人都是写着写着都忘了之前想好的路线是什么，又要花费时间取回忆。既然开发步骤复杂，那为何不去尝试一下记录一下呢？

先找包裹得最大的div，再往每个div里布局内部的div

总的来说就是由浅入深，先把大框架写了，再添加小零件避免散架和不必要的麻烦。

对每一个div设置一个有颜色的border当做参考线

因为div是完全透明的，用一个border描线有利于自己对布局的把控。并且可以时刻对照自己画的div和实际是不是有出入。

分享一个自己画div的技巧的更多相关文章

  1. 分享一个快速设置背景的js 自动获取背景图的长宽

    我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 : <div class="wrap"> ...

  2. 分享一个手机端好用的jquery ajax分页类

    分享一个手机端好用的jquery ajax分页类 jquery-ias.min.js 1,引入jquery-ias.min.js 2,调用ajax分页 <script type="te ...

  3. 分享一个自己写的MVC+EF “增删改查” 无刷新分页程序

    分享一个自己写的MVC+EF “增删改查” 无刷新分页程序 一.项目之前得添加几个组件artDialog.MVCPager.kindeditor-4.0.先上几个效果图.      1.首先建立一个数 ...

  4. 分享一个命令行计算器-bc

    分享一个命令行计算器-bc 假如你在一个图形桌面环境中需要一个计算器时,你可能只需要一路进行点击便可以找到一个计算器.例如,Fedora 工作站中就已经包含了一个名为 Calculator 的工具.它 ...

  5. 分享一个不错的Unittest测试报告

    分享一个不错的,unittest测试报告. 先上图: 代码如下: 复制下来保存成py可用 #coding=utf-8 """ A TestRunner for use w ...

  6. 【下载】分享一个ida脚本,非常方便

    标 题: [下载]分享一个ida脚本,非常方便作 者: 梁萧时 间: 2013-09-05,13:32:14链 接: http://bbs.pediy.com/showthread.php?t=178 ...

  7. 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行

    [微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...

  8. C# PDF Page操作——设置页面切换按钮 C# 添加、读取Word脚注尾注 C#为什么不能像C/C++一样的支持函数只读传参 web 给大家分享一个好玩的东西，也许你那块就用的到

    C# PDF Page操作——设置页面切换按钮   概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者 ...

  9. 怎么将DWG转PDF？分享一个在线转换方法

    了解CAD的朋友们都知道,在使用CAD制图软件绘制图纸的时候,默认的CAD图纸保存格式就是为DWG格式.但是DWG格式的文件不能够直接进行打开查看,就需要将DWG转PDF格式.那具体要怎么来进行操作呢 ...

随机推荐

  1. Tomcat配置probe详细过程（步骤加截图）

    1.先下载probe.war包,点击probe.war进行下载:附上下载地址:https://github.com/psi-probe/psi-probe/releases 2.将probe.war包 ...

  2. pytest的allure的环境配置

    一.下载地址: https://github.com/allure-framework/allure2/releases 二.配置环境变量: 三.验证allure安装成功

  3. 实战SpringBoot Admin

    长话短说哦,直接查看下文吧 目录 声明 先锋 前提 SpringBoot Admin 介绍 服务端的搭建 客户端的搭建 参数的指南 尾声 声明 见名知意,实战SpringBoot Admin,实战!实 ...

  4. 数据结构与算法Python版 熟悉哈希表，了解Python字典底层实现

    Hash Table 散列表(hash table)也被称为哈希表,它是一种根据键(key)来存储值(value)的特殊线性结构. 常用于迅速的无序单点查找,其查找速度可达到常数级别的O(1). 散列 ...

  5. 【接口测试】-1.常用的接口测试工具（Postman、soupUI、Jemeter）

      1)  Postman 1.get/post请求--  postman获取用户信息1 get方式:可以直接在url中写入参数 Post方式:请求体可以写到URL或Body的form-data中写参 ...

  6. lsnrctl start 报错

    lsnrctl start报错: TNS-12541:TNS:no listener TNS-12560:TNS:protocol adapter error TNS-00511:No listene ...

  7. Map集合中的方法

    Map集合中的方法: values() 方法 : 获取集合中的所有的值----没有键,没有对应关系, KeySet() 方法: 将Map中所有的键存入到set集合中.因为set具备迭代器.所有可以迭代 ...

  8. SpringCloud-OAuth2（三）：进阶篇

    上篇文章讲了SpringCloud OAuth 的实战篇,但是在微服务环境下,常常会有一个认证中心. 而普通服务接收到请求后,判断token是否有效并不是自己处理的,因为token的管理统一交给认证中 ...

  9. 有趣的开源项目集结完毕，HelloGitHub 月刊第 63 期发布啦！

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这里有实战项目.入门教程.黑科技.开源书籍.大厂开源项目等,涵盖多种编程语言 Pyt ...

  10. linux 下安装 docker 环境

    一分钟了解 Docker Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源.Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然 ...