一些存在的可以改进的地方:

达到一个效果不必要墨守成规,比如:

这个效果,我的实现方式是:

一个大div里面,先放一个图片,左浮动,然后放一个首页div,相对定位放到背景图片的白色区域的适当位置,右边导航栏的做法我的是使用无序列表,然后全部li左浮动,将列表调margin属性到适当位置,中间的三个|我将它认定是li的边框右。然后就需要设置最后一个li没有右边框。

同学的做法是:

一个大div里面的是一个无序列表,无序列表的子元素分别是开心网图片、首页、右侧的导航栏。当然导航栏也使用的是无序列表,就是一个嵌套的过程。导航栏中的li选项有8个,3个是|,|就不使用a链接包裹,然后调位置搞定。

我的感觉:  不能有思维定势,比如导航栏的白色不一定是li的某个边框,布局方式也不能被局限住,使用属于你的布局方式,越简单越好。

调控件的位置,就是表示的时候居中显示,不止是可以通过调整该控件的margin属性通过与父容器的距离定位,也可以通过调整控件的填充来达到控件内容的居中。当然,对padding的调整如果没有首先固定容器宽高可能会改变容器。

在页面中的布局尽量简明扼要,先简后繁,先抽象后具体。一些id或者name的命名应该做到见明知意,对于一些页面的内容最好使用后代选择器,一个区域一个区域调整样式,不对其他地方造成影响

如果受到莫名的影响,找不出所写代码的问题的话,不妨考虑下前面代码是否造成了冲突。可以使用浏览器的开发者工具查找对应的控件然后针对修改。可以使用clear属性清除上面的div或者其他的位置影响

写代码要仔细,比如我之前一个li里面的width设置成了190没有写px,前面没有问题,后面不知道受了什么影响,浏览器无法辨别190的意义width属性就失效了。

处理问题选择最简单的方式:结果是给别人看的,过程自己享受,先达到效果,再考虑拓展或者其他。花最少的时间完成最多的工作才是现在需要的做法。

对于父容器的宽高,不建议在父容器中加入<div style="clear:both;"></div>让它的父容器自动填充高度,因为这可能影响到其他浮动元素。可以先确定大概高度后面针对内容修改或者后面再修改。

有些首行缩进如果操作对象不是太多的话可以考虑使用空格实现

命名最好使用字母、数字、下划线的组合,一些特殊字符可能无法识别。

当调整容器的宽度与父容器一致可以使用百分比试试。

图片与文字的对齐可以使用vertical-align也可以使用图片浮动来实现。

HTML项目总结的更多相关文章

  1. Fis3前端工程化之项目实战

    Fis3项目 项目目录结构: E:. │ .gitignore │ fis-conf.js │ index.html │ package.json │ README.md │ ├─material │ ...

  2. 【原】Android热更新开源项目Tinker源码解析系列之三:so热更新

    本系列将从以下三个方面对Tinker进行源码解析: Android热更新开源项目Tinker源码解析系列之一:Dex热更新 Android热更新开源项目Tinker源码解析系列之二:资源文件热更新 A ...

  3. 最近帮客户实施的基于SQL Server AlwaysOn跨机房切换项目

    最近帮客户实施的基于SQL Server AlwaysOn跨机房切换项目 最近一个来自重庆的客户找到走起君,客户的业务是做移动互联网支付,是微信支付收单渠道合作伙伴,数据库里存储的是支付流水和交易流水 ...

  4. Hangfire项目实践分享

    Hangfire项目实践分享 目录 Hangfire项目实践分享 目录 什么是Hangfire Hangfire基础 基于队列的任务处理(Fire-and-forget jobs) 延迟任务执行(De ...

  5. Travis CI用来持续集成你的项目

    这里持续集成基于GitHub搭建的博客为项目 工具: zqz@ubuntu:~$ node --version v4.2.6 zqz@ubuntu:~$ git --version git versi ...

  6. 【原】Android热更新开源项目Tinker源码解析系列之一:Dex热更新

    [原]Android热更新开源项目Tinker源码解析系列之一:Dex热更新 Tinker是微信的第一个开源项目,主要用于安卓应用bug的热修复和功能的迭代. Tinker github地址:http ...

  7. 【原】Android热更新开源项目Tinker源码解析系列之二:资源文件热更新

    上一篇文章介绍了Dex文件的热更新流程,本文将会分析Tinker中对资源文件的热更新流程. 同Dex,资源文件的热更新同样包括三个部分:资源补丁生成,资源补丁合成及资源补丁加载. 本系列将从以下三个方 ...

  8. Angular企业级开发(5)-项目框架搭建

    1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...

  9. 【分享】标准springMVC+mybatis项目maven搭建最精简教程

    文章由来:公司有个实习同学需要做毕业设计,不会搭建环境,我就代劳了,顺便分享给刚入门的小伙伴,我是自学的JAVA,所以我懂的.... (大图直接观看显示很模糊,请在图片上点击右键然后在新窗口打开看) ...

  10. ABP入门系列(2)——通过模板创建MAP版本项目

    一.从官网创建模板项目 进入官网下载模板项目 依次按下图选择: 输入验证码开始下载 下载提示: 二.启动项目 使用VS2015打开项目,还原Nuget包: 设置以Web结尾的项目,设置为启动项目: 打 ...

随机推荐

  1. 【附10】kibana创建新的index patterns

    elk整体架构图: 一.logstash indexer 配置文件: input { stdin{} } filter { } output { elasticsearch { hosts => ...

  2. 51nod 1009 数字1的数量

    1009 数字1的数量   给定一个十进制正整数N,写下从1开始,到N的所有正数,计算出其中出现所有1的个数.   例如:n = 12,包含了5个1.1,10,12共包含3个1,11包含2个1,总共5 ...

  3. NOI 08 石头剪刀布

    石头剪刀布(NOI 08) 总时间限制: 1000ms 内存限制: 65536kB 描述 石头剪刀布是常见的猜拳游戏.石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一样,则不分胜负. 一天,小A和小B ...

  4. 关于xargs cp中,如何确定拷贝的源和目的 (copied)

    Seker: find . -name "*" |xargs cp ???? 这里 xargs cp 怎么区分cp源 和 cp目的 例如:想把 查询到的文件 都copy到/home ...

  5. Codeforces Beta Round #94 div 1 D Numbers map+思路

    D. Numbers time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...

  6. 顶点与UV

    1.顶点坐标和UV坐标是三维模型重要的两个坐标系统. 2.什么是UV?UV分别是图像在显示器水平和垂直方向上坐标,值在 0 - 1 之间 ,即水平方向的第 U 个做像素/图片宽度,垂直方向的第 V 个 ...

  7. Java开发常用Util工具类-StringUtil、CastUtil、CollectionUtil、ArrayUtil、PropsUtil

    字符串工具类 StringUtil.java package com.***.util; /** * StringUtil * @description: 字符串工具类 **/ public clas ...

  8. 最应该注意的Oracle版本之一

    最近以来,两个用户的库接连出现问题,经过查阅资料和分析,确定为数据库bug所致,其实,早在很久前,也遭遇过这个版本的类似bug,当时似乎还惊动了原厂的技术人员,后来确定为这个版本的bug,这个版本就是 ...

  9. 微信access_token全局缓存,处理过期

    //PHP创建access_token.json文件,将access_token 和 生成时间expires 保存在其中, //{"access_token":"xxxx ...

  10. elment-ui table组件 -- 远程筛选排序

    elment-ui table组件 -- 远程筛选排序 基于 elment-ui table组件 开发,主要请求后台实现筛选 排序的功能. 需求 排序 筛选 是对后台整个数据进行操作,而不是对当前页面 ...