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

老师在周末布置豆瓣主页,对于只学了四天的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. 《编写可维护的JavaScript》——JavaScript编码规范(一)

    缩进层级 代码如何缩进通常有两种主张: 使用制表符缩进 每一个缩进层级都用单独的制表符表示.这种方法的主要缺点是:系统对制表符的解释不一致.这些差异会导致不同的开发者对同一段代码有不同的看法的,这正是 ...

  2. 安装tomcat

    一.JDK1.7安装 1.下载jdk,下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk-7u1-download-513 ...

  3. [TCPIP] IP路由表及选路 Note

    TCP/IP IP路由表及选路 1.路由表信息 路由表一般包含信息:目的IP地址.下一站路由器的IP地址.标志. 为数据报传送指定的一个网络接口. 查看路由表信息mac-abeen:~ abeen$ ...

  4. sql-GOTO跳转

    --声明变量 DECLARE @X INT --标记GOTO跳转位置 TEST: PRINT @X --WHILE @X<=3 --GOTO跳转到执行位置 GOTO TEST

  5. 遗传算法在JobShop中的应用研究(part 5:解码)

    解码操作是整个遗传算法最重要的一步,在这步里面我们利用配置文件中的信息将染色体解码成一个有向无环图. 在介绍解码操作之前我们先来看一下配置文件,在part1绪论中我们已经介绍了一个车间调度问题的基本信 ...

  6. Upload Files To FTP in Oracle Forms D2k

    Upload Files To FTP in Oracle Forms D2k Use following procedure to upload files to Ftp.   PROCEDURE ...

  7. php数据类型及转换

  8. ECharts-图表回执组件

    测试地址:http://echarts.baidu.com/doc/example.html

  9. 使用 Babel + React + Webpack 搭建 Web 应用

    话不说直接上正题. 环境搭建 Babel--目前浏览器对于ES6的语法解析支持度还不高,所以要通过转码在编译,所以在使用ES6之前要安装Babel,之前安装的时候遇到了一些问题但是没有全部记录下来,现 ...

  10. iOS 圆的放大动画效果

    第一步:创建一个View,将这个View添加到当前的控制器 如: CGFloat timeW = self.view.bounds.size.width; timeAnimation * timean ...