分享一个自己画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. 简单测试 APISIX2.6 网关

    Apache APISIX是一个动态的.实时的.高性能的 API 网关.它提供丰富的流量管理功能,例如负载均衡.动态上游服务.金丝雀发布.断路.身份验证.可观察性等.您可以使用 Apache APIS ...

  2. 【逆向实战】ES文件浏览器未授权访问漏洞(CVE-2019-6447)具体分析及利用

    /作者:Kali_MG1937 CSDN博客号:ALDYS4 QQ:3496925334 未经许可,禁止转载/ 漏洞简介 CVE-2019-6447是Android端上的一个知名软件:ES文件浏览器的 ...

  3. 【渗透实战】那些年我们遇到的奇葩WAF_第一期_请求方式绕过

    /文章作者:Kali_MG1937 CSDN博客:ALDYS4 QQ:3496925334/ 该博文为本人18年左右的渗透记录,文法粗糙,技术含量极低,流水账文章,且今日不知为何被顶上博客首页 为了避 ...

  4. 【C++】fopen与fopen_s

    说明: VS2010中使用fopen,是没有问题的.使用VS2015时由于VS的高版本对文件操作的安全性有了较高的要求,所以会出现如下情况: fopen用法:  fp = fopen(filename ...

  5. 《Learning to warm up cold Item Embeddings for Cold-start Recommendation with Meta Scaling and Shifting Networks》论文阅读

    <Learning to warm up cold Item Embeddings for Cold-start Recommendation with Meta Scaling and Shi ...

  6. 关于MySQL索引面试题的六连炮！招架的住吗？

    1.面试真题 MySQ索引的原理和数据结构能介绍一下吗? b+树和b-树有什么区别? MySQL聚簇索引和非聚簇索引的区别是什么? 他们分别是如何存储的? 使用MySQL索引都有哪些原则? MySQL ...

  7. 【dp】背包问题

    01背包 呐,为什么叫它01背包呢,因为装进去就是1,不装进去就是0.所以针对每个物品就两种状态,装,不装(请允许我用这么老套的开篇,相信听过很多次背包讲解的人,大多都是这个开篇的)所以咯,我这个背包 ...

  8. 手写Spring Config，最终一战，来瞅瞅撒！

    上一篇说到了手写Spring AOP,来进行功能的增强,下面本篇内容主要是手写Spring Config.通过配置的方式来使用Spring 前面内容链接: 我自横刀向天笑,手写Spring IOC容器 ...

  9. 微信sdk上传图片大小1k，损坏的问题以及微信上传图片需要的配置

    微信公众号的appid和appsecret有问题,会导致上传图片大小为1k这个问题 微信上传图片需要设置公众号的'JS接口安全域名'

  10. php反序列化-unserialize3

    目录 unserialize3-php反序列化 unserialize3 unserialize3-php反序列化 unserialize3 环境地址:https://adworld.xctf.org ...