在经过周末的豆瓣主页和这周的豆瓣电影,表示网页什么的已经被我玩坏了。

老师在周末布置豆瓣主页,对于只学了四天的css和html的我,表示鸭梨山大。

  最开始的两个小时只能做出一个连自己都看不下去的导航栏。最后在网上各种百度,问同学,在前辈的帮助下,勉强写出了个框架。经过熬夜到凌晨五点熟悉了写网页的基本套路后,开始觉得网页什么的太happy了。

在后来做豆瓣电影时基本排版两个小时就搞定了。开始觉得飘飘然的时候,发现网页布局细节有很多问题。如下图。

看到了这样的结果,我开始反思。开始放慢自己的脚步,花了一天的时间来调试这个margin。最开始调整的时候网页布局几乎全部乱了。经过慢慢的试调过后发觉错误的的原因可能就只是那1px。我开始1px,的调试。

最后在通过各种度娘,和看书,终于把margin和padding搞清楚了。慢慢掌握了利用margin来布局的一些技巧。慢慢解决我写的网页上的细节问题。最后对比原图发现,哪怕1px的差别都是很大的。

   现在的人们,对于界面的美观要求越来越高了。现在table布局已经被抛弃。div是主流,在div中margin设置时很重要的。

总而言之,网页的美观在于细节。对于一个web初学者来说,在后面的学习中我会放慢自己的脚步,静下心来写好每一个页面。

神奇的margin之豆瓣豆瓣么么哒的更多相关文章

  1. 还有这种书,程序开发心理学(豆瓣) - 豆瓣读书,转载自:https://book.douban.com/subject/1141154/

    登录/注册 下载豆瓣客户端 豆瓣 读书 电影 音乐 同城 小组 阅读 FM 时间 豆品 更多 豆瓣读书   购书单 电子图书 豆瓣书店 2018年度榜单 2018书影音报告 购物车 程序开发心理学 作 ...

  2. 豆瓣移动端风格的css命名方法与学习

    在CSS取名相对于刚入门来说是最头疼的事情,往往取一个可读性的名字相对以后的代码风格还是很重要的. 在配合团队方面一个好的类名可以帮助同事来理解,增加团队之间的效率有着很大的意义. 豆瓣的前段相对其他 ...

  3. CSS基础深入之细说盒子模型

    Html任何一个元素(element)都可以当成一个盒子(box)来看待,可以结合现实中的盒子来理解下文,下文其中一些单词应该是通俗易懂的需要记录的单词. 基本情况 每一个盒子都有一个内容区域(con ...

  4. iOS 组件化的几篇文章

    随着工程的成长,开发人员的增多,合理的模块划分及低耦合的重要性显得愈发重要.最近在思考这方面的问题,也读了不少通过组件化解耦的文章,这里记录一下. 前 5 篇文章有些关联,建议阅读顺序,1.3.2.4 ...

  5. 【转】4w+1h 教你如何做用户画像

    记得14年开始做用户画像的时候,对于用户画像完全没有概念,以为是要画一幅幅图画,经过两年多的学习和理解,渐渐的总结出了一些方法和技巧,在这里就通过4个W英文字母开头和1个H英文字母开头的单词和大家分享 ...

  6. Python应用与实践-转自(吴秦(Tyler))

    1.      Python是什么? 1.1.      Python语言 1.2.      Python哲学 2.      Python在工作中的应用 2.1.      实例1:文件批量处理 ...

  7. 金融量化分析【day112】:因子选股

    一.因子选股基础 二.因子选股策略实现代码 # 导入函数库 import jqdata import psutil #初始化函数,设定基准等等 def initialize(context): set ...

  8. vue脚手架 构建豆瓣App 第一天

    课堂笔记: 项目结构分析: 项目入口:index.html(div#app) 全局vue组件:App.vue(template:div#app) 通过相同id的div,index.html与Appvu ...

  9. 基于vue2.0的一个豆瓣电影App

    1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...

随机推荐

  1. No module named caffe

    1.直接打开终端,输入python,enter,输入import caffe,enter,不出错 2.直接打开终端,输入sudo su切换到root下,或者是直接 sudo python,enter, ...

  2. Kafka深度解析

    本文转发自Jason’s Blog,原文链接 http://www.jasongj.com/2015/01/02/Kafka深度解析 背景介绍 Kafka简介 Kafka是一种分布式的,基于发布/订阅 ...

  3. C++中的4个类型转换关键字

    转载:http://poplars.blog.163.com/blog/static/1394221742013021111210567/ n多书里面推荐要养成使用转型关键字的习惯,几年过去了,感觉还 ...

  4. 结构体struts的长度

    在需要计算结构体大小的时候,涉及到的一个问题就是其对齐模数 计算机系统对基本类型数据在内存中存放的位置有限制,它们会要求这些数据的首地址的值是某个数k(通常它为4或8)的倍数,这就是所谓的内存对齐,而 ...

  5. C++内存泄露之野指针

    写出本文仅仅是处于备忘的目的. 最近为现在做的软件添加了一个内存回收机制(以前处于某种内存只申请不释放,这并不等于内存泄露,因为我们知道这些内存块在内存中的位置)-- 在某一块内存不使用的时候将其释放 ...

  6. 《利用python进行数据分析》读书笔记--第九章 数据聚合与分组运算(一)

    http://www.cnblogs.com/batteryhp/p/5046450.html 对数据进行分组并对各组应用一个函数,是数据分析的重要环节.数据准备好之后,通常的任务就是计算分组统计或生 ...

  7. LoadRunner使用之变量参数化

    LR性能测试之参数化设置 Q:何为参数化? LR在录制程序运行的过程中,VuGen(脚本生成器) 自动生成了包含录制过程中实际用到的数值的脚本,如果你企图在录制的脚本中使用不同的数值执行脚本的活动(如 ...

  8. 用JavaScript实现的选项卡

    Codes wins arguments! <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  9. mybatis 细粒度控制二级缓存

    本文要解决的问题:细粒度控制mybatis的二级缓存.mybatis的二级缓存的问题:当更新SQL执行时只清除当前SQL所在命名空间(namespace)的缓存.如果存在2个命名空间namespace ...

  10. 兼容IE7音乐播放器之jplayer的使用

    首先列出为何要写这篇随笔的原因: 1:兼容IE7 2:音乐播放器 3:任意控制播放器 1: 最近做的网站需要兼容IE7,在此之前已经写好了关于音乐播放的插件,火狐,IE8以上,以及谷歌浏览器等都可以随 ...