分享一个自己画div的技巧
分享一个自己画div的技巧
笔者是小白,前端不是很懂。现在想总结下自己画div布局的小技巧和思路。
先对着设计图把div给好好框选出来
我个人觉得这一步是很重要的,要先分析大局,再细节处理。一定要先决定好大体路线再具体实现。并且将想法画出来有利于回忆,不会走一步算一步。我相信很多人都是写着写着都忘了之前想好的路线是什么,又要花费时间取回忆。既然开发步骤复杂,那为何不去尝试一下记录一下呢?
先找包裹得最大的div,再往每个div里布局内部的div
总的来说就是由浅入深,先把大框架写了,再添加小零件避免散架和不必要的麻烦。
对每一个div设置一个有颜色的border当做参考线
因为div是完全透明的,用一个border描线有利于自己对布局的把控。并且可以时刻对照自己画的div和实际是不是有出入。
分享一个自己画div的技巧的更多相关文章
- 分享一个快速设置背景的js 自动获取背景图的长宽
我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 : <div class="wrap"> ...
- 分享一个手机端好用的jquery ajax分页类
分享一个手机端好用的jquery ajax分页类 jquery-ias.min.js 1,引入jquery-ias.min.js 2,调用ajax分页 <script type="te ...
- 分享一个自己写的MVC+EF “增删改查” 无刷新分页程序
分享一个自己写的MVC+EF “增删改查” 无刷新分页程序 一.项目之前得添加几个组件artDialog.MVCPager.kindeditor-4.0.先上几个效果图. 1.首先建立一个数 ...
- 分享一个命令行计算器-bc
分享一个命令行计算器-bc 假如你在一个图形桌面环境中需要一个计算器时,你可能只需要一路进行点击便可以找到一个计算器.例如,Fedora 工作站中就已经包含了一个名为 Calculator 的工具.它 ...
- 分享一个不错的Unittest测试报告
分享一个不错的,unittest测试报告. 先上图: 代码如下: 复制下来保存成py可用 #coding=utf-8 """ A TestRunner for use w ...
- 【下载】分享一个ida脚本,非常方便
标 题: [下载]分享一个ida脚本,非常方便作 者: 梁萧时 间: 2013-09-05,13:32:14链 接: http://bbs.pediy.com/showthread.php?t=178 ...
- 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行
[微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...
- C# PDF Page操作——设置页面切换按钮 C# 添加、读取Word脚注尾注 C#为什么不能像C/C++一样的支持函数只读传参 web 给大家分享一个好玩的东西,也许你那块就用的到
C# PDF Page操作——设置页面切换按钮 概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者 ...
- 怎么将DWG转PDF?分享一个在线转换方法
了解CAD的朋友们都知道,在使用CAD制图软件绘制图纸的时候,默认的CAD图纸保存格式就是为DWG格式.但是DWG格式的文件不能够直接进行打开查看,就需要将DWG转PDF格式.那具体要怎么来进行操作呢 ...
随机推荐
- MapReduce —— MapTask阶段源码分析(Input环节)
不得不说阅读源码的过程,极其痛苦 .Dream Car 镇楼 ~ ! 虽说整个MapReduce过程也就只有Map阶段和Reduce阶段,但是仔细想想,在Map阶段要做哪些事情?这一阶段具体应该包含数 ...
- SpringBoot——配置类实现WebMvcConfigurer接口来配置拦截器、view-controller、视图解析器等
目的:为了保留SpringBoot对SpringMVC自动配置,另外我们还想要做一些自己拓展的功能 如何做扩展? 以配置view-controller实现跳转为例: 原先在SpringMvc中我们写v ...
- Linkerd 2.10(Step by Step)—4. 如何配置外部 Prometheus 实例
Linkerd 2.10 系列 快速上手 Linkerd v2 Service Mesh(服务网格) 腾讯云 K8S 集群实战 Service Mesh-Linkerd2 & Traefik2 ...
- SpringCloud(1)生态与简绍
一:微服务架构简绍学习目标 1.技术架构的演变,怎么一步步到微服务的:2.什么是微服务,优点与缺点 :3.SOA(面向服务)与MicroServices(微服务)的区别 :4.Dubbo 与Spri ...
- 基于Colab Pro & Google Drive的Kaggle实战
原文:https://hippocampus-garden.com/kaggle_colab/ 原文标题:How to Kaggle with Colab Pro & Google Drive ...
- 给元素设置overflow:hidden,pc端正常,但移动端依然可以滑动
给设置overflow:hidden的元素设置position:fixed即可解决
- 在Visual Studio 中使用git——同步到远程服务器-上(十一)
在Visual Studio 中使用git--什么是Git(一) 在Visual Studio 中使用git--给Visual Studio安装 git插件(二) 在Visual Studio 中使用 ...
- RobotFramework + Python 自动化入门 二 (关键字)
在<RobotFramwork + Python 自动化入门 一>中,完成了Robot环境搭建及测试脚本的创建和执行. 本节,对RobotFramework的关键字使用和查看源码进行介绍. ...
- 18、mysql读写分离实现的方法
18.1.mysql读写分离实现的方法: 1.通过程序实现读写分离: php和java程序实现读写分离(性能,效率最佳,推荐); php和java程序都可以通过设置多个连接文件轻松实现对数据库的读写分 ...
- css文字动画(自动换文字)
html: <div class="content"> <div class="content__container"> <p c ...