神奇的margin之豆瓣豆瓣么么哒
在经过周末的豆瓣主页和这周的豆瓣电影,表示网页什么的已经被我玩坏了。
老师在周末布置豆瓣主页,对于只学了四天的css和html的我,表示鸭梨山大。
最开始的两个小时只能做出一个连自己都看不下去的导航栏。最后在网上各种百度,问同学,在前辈的帮助下,勉强写出了个框架。经过熬夜到凌晨五点熟悉了写网页的基本套路后,开始觉得网页什么的太happy了。
在后来做豆瓣电影时基本排版两个小时就搞定了。开始觉得飘飘然的时候,发现网页布局细节有很多问题。如下图。
看到了这样的结果,我开始反思。开始放慢自己的脚步,花了一天的时间来调试这个margin。最开始调整的时候网页布局几乎全部乱了。经过慢慢的试调过后发觉错误的的原因可能就只是那1px。我开始1px,的调试。
最后在通过各种度娘,和看书,终于把margin和padding搞清楚了。慢慢掌握了利用margin来布局的一些技巧。慢慢解决我写的网页上的细节问题。最后对比原图发现,哪怕1px的差别都是很大的。
现在的人们,对于界面的美观要求越来越高了。现在table布局已经被抛弃。div是主流,在div中margin设置时很重要的。
总而言之,网页的美观在于细节。对于一个web初学者来说,在后面的学习中我会放慢自己的脚步,静下心来写好每一个页面。
神奇的margin之豆瓣豆瓣么么哒的更多相关文章
- 还有这种书,程序开发心理学(豆瓣) - 豆瓣读书,转载自:https://book.douban.com/subject/1141154/
登录/注册 下载豆瓣客户端 豆瓣 读书 电影 音乐 同城 小组 阅读 FM 时间 豆品 更多 豆瓣读书 购书单 电子图书 豆瓣书店 2018年度榜单 2018书影音报告 购物车 程序开发心理学 作 ...
- 豆瓣移动端风格的css命名方法与学习
在CSS取名相对于刚入门来说是最头疼的事情,往往取一个可读性的名字相对以后的代码风格还是很重要的. 在配合团队方面一个好的类名可以帮助同事来理解,增加团队之间的效率有着很大的意义. 豆瓣的前段相对其他 ...
- CSS基础深入之细说盒子模型
Html任何一个元素(element)都可以当成一个盒子(box)来看待,可以结合现实中的盒子来理解下文,下文其中一些单词应该是通俗易懂的需要记录的单词. 基本情况 每一个盒子都有一个内容区域(con ...
- iOS 组件化的几篇文章
随着工程的成长,开发人员的增多,合理的模块划分及低耦合的重要性显得愈发重要.最近在思考这方面的问题,也读了不少通过组件化解耦的文章,这里记录一下. 前 5 篇文章有些关联,建议阅读顺序,1.3.2.4 ...
- 【转】4w+1h 教你如何做用户画像
记得14年开始做用户画像的时候,对于用户画像完全没有概念,以为是要画一幅幅图画,经过两年多的学习和理解,渐渐的总结出了一些方法和技巧,在这里就通过4个W英文字母开头和1个H英文字母开头的单词和大家分享 ...
- Python应用与实践-转自(吴秦(Tyler))
1. Python是什么? 1.1. Python语言 1.2. Python哲学 2. Python在工作中的应用 2.1. 实例1:文件批量处理 ...
- 金融量化分析【day112】:因子选股
一.因子选股基础 二.因子选股策略实现代码 # 导入函数库 import jqdata import psutil #初始化函数,设定基准等等 def initialize(context): set ...
- vue脚手架 构建豆瓣App 第一天
课堂笔记: 项目结构分析: 项目入口:index.html(div#app) 全局vue组件:App.vue(template:div#app) 通过相同id的div,index.html与Appvu ...
- 基于vue2.0的一个豆瓣电影App
1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...
随机推荐
- 使用Xmanager远程访问Redhat Enterprise Linux 6.1
使用Xmanager远程访问Redhat Enterprise Linux 6.1 在Linux服务器开启gdm 配置防火墙 配置selinux 使用xmanager连接linux服务器 在Lin ...
- MVC JS中非表单元素路由传值
<span id="a" onclick="aaa(111)" style="cursor:pointer;">跳</sp ...
- Mysql Specified key was too long; max key length is 767 bytes
今天导入一个数据库时,看到以下报错信息: Specified key was too bytes 直译就是索引键太长,最大为767字节. 查看sql库表文件,发现有一列定义如下: 列 名:cont ...
- React 快速入门小记
大约半个月前,我一直在思考一个问题,Angular.React 和 Vue,究竟该学什么? 听取了几位前辈的意见,也综合考虑了各方面的原因,最终选择了 React,希望我"没有选错" ...
- T-Sql 递归查询(给定节点查所有父节点、所有子节点的方法)
-- 查找所有父节点with tab as( select Type_Id,ParentId,Type_Name from Sys_ParamType_V2_0 where Type_Id=316-- ...
- Mac 安装 MySQL
在 Mac 下用 Homebrew 安装 MySQL, 网上的教程倒是很多,不过大多数都很默契地雷同.如果稍有点定制要求,就无从下手了. 我先也不免俗,从基本的开始: 一.首先安装 Homebrew ...
- Java四种线程池
Java四种线程池newCachedThreadPool,newFixedThreadPool,newScheduledThreadPool,newSingleThreadExecutor 时间:20 ...
- PHPStorm技巧篇 -- 观感优化
(1)设置默认显示行号 (2)设置自动换行 (3)去除代码下划线(拼写检测) 优化说明:自动换行和显示行号字面意思很好理解,下划线说明一下,phpstorm默认对代码进行拼写校验,即对于不符合英文单词 ...
- .net mvc利用NPOI导入导出excel
1.导出Excel :首先引用NPOI包(Action一定要用FileResult) /// <summary> /// 批量导出需要导出的列表 /// </summary> ...
- Failed: error processing document #281: unexpected EOF,往MongoDB当中插入json文件时出现的错误。
往MongoDB当中插入json文件时提示的错误(我的操作系统是win10): 当时的执行命令是:mongoimport -d test -c restaurants d://primer-datas ...