分享一个自己画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. JVM集合之开篇点题

    大家在平时的开发过程中是否遇到过StackOverflowError.OutOfMemoryError等类似的内存溢出错误呢?大家又是怎么解决这个问题的?再来,大家在面试过程中有没有被面试官提问过jv ...

  2. Java 面试题关于包装类

    这几个问题的知识点涉及的内容非常的刁钻,值得自己好好的理解. 问以下程序的输出结果是: 问题一: Object object=true ? new Integer(1):new Double(2.0) ...

  3. Java IO学习笔记五：BIO到NIO

    作者:Grey 原文地址: Java IO学习笔记五:BIO到NIO 准备环境 准备一个CentOS7的Linux实例: 实例的IP: 192.168.205.138 我们这次实验的目的就是直观感受一 ...

  4. 【NX二次开发】Block UI 曲线收集器

    属性说明 属性   类型   描述   常规           BlockID    String    控件ID    Enable    Logical    是否可操作    Group    ...

  5. 我试了试用 SQL查 Linux日志，好用到飞起

    大家好,我是小富~ 最近发现点好玩的工具,迫不及待的想跟大家分享一下. 大家平时都怎么查Linux日志呢? 像我平时会用tail.head.cat.sed.more.less这些经典系统命令,或者aw ...

  6. 【题解】Grape luogu1156改 dp

    考试时被数据坑了 题目 原题 传送门 题目描述: 众所周知的是oyyf 沉迷葡萄,今天的oyyf为了葡萄溜到了He 大佬家的葡萄园偷葡萄,可惜的是还没偷到葡萄He 大佬就来葡萄园了,吓的oyyf 直接 ...

  7. NOIP模拟测试3「序列·熟练剖分·建造游乐园（play）」

    ---恢复内容开始--- 序列 刚调出来样例就A了,假装是水题. 因为是乱序,我们要求出来每两项之间最小公比,而不是直接比 求出来每两项之间最小公比,然后扫一遍就完了.(还要注意重复情况) 那么问题就 ...

  8. 『无为则无心』Python基础 — 10、Python字符串的格式化输出

    目录 1.什么是格式化输出 2.Python格式化输出的五种方式 方式一:字符串之间用+号拼接 方式二:print()函数可同时输出多个字符串 方式三:占位符方式 方式四:f格式化方式(推荐) 方式五 ...

  9. CORS跨源资源共享概念及配置（Kubernetes Ingress和Spring Cloud Gateway）

    我最新最全的文章都在南瓜慢说 www.pkslow.com,欢迎大家来喝茶! 1 跨源资源共享CORS 跨源资源共享 (CORS) (或通俗地译为跨域资源共享)是一种基于HTTP 头的机制,该机制通过 ...

  10. Java行为参数化的演进

    首先感谢<java8实战>一书作者某某某. 需求场景: 为一位果农设计一款软件,可以根据果农的需求筛选出相应的水果. 例如: 根据颜色筛选 根据重量筛选 根据颜色和重量筛选 准备工作 定义 ...