分享一个自己画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. Javaweb：Servlet

    servlet简介 Servlet(Server Applet)是 Java Servlet 的简称,是使用 Java 语言编写的运行在服务器端的程序.具有独立于平台和协议的特性,主要功能在于交互式地 ...

  2. liunx：网络命令

    现系统的学习一下Web渗透相关的命令 ping ping 命令是用来测试TCP/IP 网络是否畅通或者测试网络连接速度的命令,对确定网络是否正确连接,以及网络连接的状况十分有用.简单的说,ping就是 ...

  3. 实验3、Flask数据库操作-如何使用Flask与数据库

    1. 实验内容 数据库的使用对于可交互的Web应用程序是极其重要的,本节我们主要学习如何与各种主要数据库进行连接和使用,以及ORM的使用 2. 实验要点 掌握Flask对于各种主要数据库的连接方法 掌 ...

  4. 【NX二次开发】Block UI 线条颜色/线型/宽度

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

  5. UF_PART 部件操作

    Open C uc5000 uc5001uc5003UF_PART_add_to_recent_file_listUF_PART_apply_family_instanceUF_PART_ask_co ...

  6. Luat Inside | 多功能YAP物联网终端机，你不会还不知道吧？

    简洁高效是合宙产品的一个重要特点,合宙的工程师们用Demo取代繁杂的说明书,以便于开发者快速上手. 有没有可能把这个学习的过程变得更有趣,并且把技术入门难度进一步降低?作为一名Luat技术爱好者,我对 ...

  7. iNeuOS工业互联网平台，在高校教学实训领域的应用

    目       录 1.      概述... 2 2.      实训柜... 2 3.      培训内容... 4 4.      二次开发培训... 5 1.   概述 中国工业互联网从 0 ...

  8. 【题解】Luogu p3047 [USACO12FEB]附近的牛Nearby Cows 树型dp

    题目描述 Farmer John has noticed that his cows often move between nearby fields. Taking this into accoun ...

  9. 『无为则无心』Python基础 — 11、Python中的数据类型转换

    目录 1.为什么要进行数据类型转换 2.数据类型转换本质 3.数据类型转换用到的函数 4.常用数据类型转换的函数 (1)int()函数 (2)float()函数 (3)str()函数 (4)bool( ...

  10. WEB安全新玩法 [6] 防范图形验证码重复使用

    在完成关键业务操作时,要求用户输入图形验证码是防范自动化攻击的一种措施.为安全起见,即使针对同一用户,在重新输入信息时也应该更新图形验证码.iFlow 业务安全加固平台可以加强这方面的处理. 某网站系 ...