分享一个自己画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. Kettle通过Http post请求webservice接口以及结果解析处理

    kettle中有两种方式请求webservice服务,一个是Web服务查询,但是这个有缺陷,无法处理复杂的需求,遇到这种情况就需要用Http post来处理了. 网上也有很多关于Http post请求 ...

  2. NOIP2018初赛普及组原题&题解

    NOIP2018初赛普及组原题&题解 目录 NOIP2018初赛普及组原题&题解 原题&答案 题解 单项选择题 第$1$题 第$2$题 第$3$题 第$4$题 第$5$题 第$ ...

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

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

  4. PL/SQL连不上,报 ORA-12170:TNS 连接超时

    排错步骤: 1.查看网络是否通畅 打开cmd, ping 数据库IP 2. 查看端口是否通畅 打开cmd,tnsping 数据库IP 如果piing不通,可能是防火墙问题 3.检查防火墙状态 #ser ...

  5. 『心善渊』Selenium3.0基础 — 8、使用CSS选择器定位元素

    目录 1.CSS选择器介绍 2.CSS选择器定位语法 3.Selenium中使用CSS选择器定位元素 (1)通过属性定位元素 (2)通过标签定位元素 (3)通过层级关系定位元素 (4)通过索引定位元素 ...

  6. unity调用安卓方法实现安装apk文件(androidx)

    原文链接:点击打开 unity想要实现安装apk文件需要与安卓通讯,所以需要自己来实现安卓代码. 第一步先要新建一个安卓项目提供给unity来使用,我这里使用的工具是android studio4.1 ...

  7. kubernetes之副本控制器(RC/RS)

    1.了解ReplicationController ReplicationController是一种kubernetes资源,可确保它的pod始终保持运行状态. 如果pod因任何原因消失(例如节点从集 ...

  8. 开发小技巧之:unicode的排序和正则匹配

    目录 简介 ASCII字符的排序 本地字符的排序 为什么不使用unicode进行排序 emoji的正则匹配 总结 简介 我们知道计算机最先兴起是在国外,出于当时计算机性能的考虑和外国常用字符的考虑,最 ...

  9. 46、django工程(view)

    46.1.django view 视图函数说明: 1.http请求中产生两个核心对象: (1)http请求:HttpRequest对象. (2)http响应:HttpResponse对象. 2.vie ...

  10. 使用 .net WEBAPI 返回 application/json类型导致 IE8 提示下载

    1, 场景介绍 项目使用了 jquery.form.js这个插件,用 ajax的方式提交 form 表单里面的信息.因为需要使用 ajax获取到返回信息.数据录入使用的是 .net mvc方式的 we ...