分享一个自己画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. C#中关于Cookie的理解

    本文链接出自:https://www.cnblogs.com/xiangzhe-C/p/4230042.html 1.Cookie简介 Cookie 提供了一种在 Web 应用程序中存储用户特定信息的 ...

  2. 【VBA】模块更新方法

    删除模块,重新导入 1 Sub 更新模块() 2 With ThisWorkbook.VBProject 3 .VBComponents.Remove .VBComponents("模块1& ...

  3. MySQL：聊一聊数据库中的那些锁

    在软件开发中,程序在高并发的情况下,为了保证一致性或者说安全性,我们通常都会通过加锁的方式来解决,在 MySQL 数据库中同样有这样的问题,一方面为了最大程度的利用数据库的并发访问,另一方面又需要保证 ...

  4. Java代码优化：使用构造函数和使用一个个setter的效率差别

    在对Java代码进行优化的时候,想方设法的要提高整体的效率,使用JProfiler看代码的时间占比,然后,看看哪些部分是可以优化的,减少运行时间的.下面有这么几个方向. 1. 能使用构造函数一步到位的 ...

  5. 6.10考试总结(NOIP模拟6)

    前言 就这题考的不咋样果然还挺难改的.. T1 辣鸡 前言 我做梦都没想到这题正解是模拟,打模拟赛的时候看错题面以为是\(n\times n\)的矩阵,喜提0pts. 解题思路 氢键的数量计算起来无非 ...

  6. 简述MSTP与配置

    一.简介 二.MSTP概述 三.功能 四.配置命令 一.简介 多生成树协议MSTP(Multiple Spanning Tree Protocol)是IEEE 802.1s中定义的生成树协议,通过生成 ...

  7. NUC980 运行 RT-Thread 驱动 SPI 接口 OLED 播放 badapple

    badapple 是什么,上网随便查了下,没看出个究竟,不过有个关于这个挺火的标签或者主题 < 有屏幕的地方就有 badapple >,网上有很多人用很多方式播放 badapple 动画, ...

  8. 个人使用uploadify插件遇到的一些问题

    当uploadify上传插件遇到的好几个问题 现在开始自我反省,留下脚印希望能够帮助其他遇到同样问题的朋友. 我遇到的第一个是, 在firefox不能执行uploadify事件onUploadSucc ...

  9. actviti7撤回操作

    @Override @Transactional(rollbackFor = Exception.class) public int callBack(String processId) { //通过 ...

  10. 架构之:serverless架构

    目录 简介 什么是serverless serverless的例子 简单的三层服务 消息驱动 FaaS FaaS的缺点 FaaS的优点 总结 简介 不知道什么时候,出现了一个叫做Serverless架 ...