HTML+CSS 项目总结

  在过去的大概一个月的学习,基本掌握了HTML+CSS的用法和特性。

  这个星期老师给我们布置了一个PC端的实战项目,并且要求在3-4天内完成,我不惜废寝忘食,在紧迫的时间内大致地完成了,但是有些效果不能像想象中的那样实现出来,毕竟时间有限,能力有限。经过了这次的实战之后,我对此有各方面的总结:

一、技术总结

  1. 在开发之前必须要先把这个项目的所有设计图从头到尾看一遍,注意观察相同的部分,比如说每个页面的头部和底部都是相同的,那么就把他们提取出来,应用到每个页面当中,这样可以大大提高了开发的效率。

  2.在开发过程中,肯定写了很多重复的css样式,拖慢了开发速度,这样可以根据个人的习惯和爱好给自己做一套css框架——base.css,作用是重置默认样式和提供通用样式。不过在团队开发中,当然最好就是每个成员都用同一套"base.css",这样更容易理解,以提高团队开发的效率。

  以下是我个人初步用的一套base.css:

/*
    @ 重置默认样式
*/

/* 去除默认内外边距 */
* {
    margin: 0;
    padding: 0;
}
/* 去除默认边框 */
img {
    border: none;
}
/* 根据要求设定默认字体 */
body {
    font-family: "微软雅黑";
}

/*
    @ 提供通用样式
*/

/* 设置左浮动 */
.fl {
    float: left;
}
/* 设置右浮动 */
.fr {
    float: right;
}
/* 清除浮动 */
.clear {
    clear: both;
}
/* 去掉列表前的标识 */
.li-none {
    list-style: none;
}
/* 去掉a链接下划线 */
.a-none {
    text-decoration: none;
}
/* 设置行内块级元素 */
.in-bl {
    display: inline-block;
}

  

  3.HTML的编码规范:在遵循HTML标准和语义的前提下,尽量使用最少的标签并保持最小的复杂度。

   比如:如果单独引入一张图片可以直接用<img>标签,而不需要再用一个<div>标签去包着这个<img>标签。

  4.在bootstrap中有很多关于CSS的编码规范,在这里我说几个最实用的,

    ①有多项选择器时,将选择器单独放在一行。

    ②为了代码的易读性,在每个声明块的左花括号前加一个空格,每一个声明块的右花括号单独成行,每条声明独占一行。

    ③以逗号分隔的属性值,每个逗号后面都应该插入一个空格。

    ④省略小于1的小数前面的0 (如:用.5代替0.5)。

    ⑤当值为0时,省略单位 (如:margin: 0;)

  5.代码注释:在我的理念中,注释分为两种,一种是用于划分内容区块,一种是对某些代码进行描述。编写代码注释,更方便于后期维护,并且易于他人理解。

    举个简单的例子:

/* content 开始 */
#content {
    width:500px;    /*content的宽高均为500px*/
    height: 500px;
}
/* content 结束 */

  6.至于clss和id的命名,最好还是用英文单词吧,不要用拼音和纯数字。如果英文单词过长,可以用缩写,不过要在别人都能理解的情况下使用缩写。如果一个类有多项的时候,可以用英文单词+数字,比如(.box01 .box02 .box03 ……)。

二、心态总结

  在长时间编写代码的时候,难免会感到烦躁,甚至抓狂。如果不调整好心态,就很难继续下去。还有些时候,会被周围的环境影响到自己。我呢,平时在编写代码时,会带上耳机,听着音乐,与世隔绝。

时间: 2024-10-03 22:29:14

HTML+CSS 项目总结的相关文章

style.css项目中的自定义款式用来覆盖Bootstrap中的一些默认设置

这里有两个关键点,其间"bootstrap.cssBootstrap中的根本款式文件,只需运用Bootstrap就必需调用这个文件.而 bootstrap-responsive.css则能够依据你喜好来挑选,假如想让项目具有呼应式规划的作用,就必需求调用这个款式文件,并且调用必需遵从先后顺序,bootstrap-responsive.css必需放置在bootstrap.css以后,不然便不具有呼应式规划功用.而最终的style.css项目中的自定义款式,用来覆盖Bootstrap中的一些默认设置

HTML+CSS项目开发总结

好几天没更新博客了,刚实战完一个HTML+CSS的简单项目.经过几天的摸索,发现收益良多.之前只是单纯得写demo,看知识点,没有亲自实战项目.但实战过后才会了解,如何才能更好地提升自己的技术.针对这次项目开发,我总结了以下内容: 一.技术总结 1.公共样式的设定 在开始项目之前,我们可以先大体了解一下项目中每个页面的内容,比如字体样式,段落结构,文字大小等.我们可以针对这些内容来设定一个固定的样式文件.在开发中    就可以直接引入此文件,而无需再重复敲CSS代码. /*基本样式*/ * {

动态加载js,css(项目中需要的)

最近做的一个项目需要加入百度统计,大家都知道百度统计在页面引用就是一坨js,实现方法很简单引用到页面就ok了. 那么问题来了,虽然我不知道百度统计的原理是啥,我的测试服引用了百度统计,百度统计账号里面配置的域名是正式服的域名,但是却检测到了我测试服的访问量,这就尴尬了,然后就想到了动态加载js 1.动态加载js文件 我们要把这块链接加入页面 <script src="js/count.js"></script> 具体代码实现如下 function loadJs(

超级简单CSS项目,悬停过渡动画三部曲

CSS不一定要写得多么复杂才能实现特殊效果.如下就是三个超级简单的过渡的例子,可能只是几行代码,但是添加到Web应用程序中,却会让它增色不少. 如下是我们将在本教程中构建的代码 这里推荐一下我的前端学习交流扣qun:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程.自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS[炫酷特效,游戏,插件封装,设计模式]到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,每天分享技术 点击:加入

2018.7.1 css项目之模仿满屋花首页css+idv布局实现

可以分开写 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible

HTML/CSS 项目

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0px; /*盒子外边距*/ padding: 0px; /*盒子内边距*/ } .NavigatorView { width: 100%; height: 50px; background-color:cadetblue; }

CSS Modules如何使用?

本文和大家分享的主要是CSS Modules的相关内容,一起来看看吧,希望对大家学习css有所帮助. 什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好的可管理模块的方式.它可以通过在不同组件设定不同的功能,把一个问题分解成多个小的独立.互相作用的组件,来处理复杂.大型的软件.看完模块化,是不是有种拼图的即视感,可以把大图分成各个小图,然后把小图拼成大图,分与合的

Django之路 - 项目实战之&lt;教育行业CRM开发&gt;

本节内容 业务痛点分析 项目需求讨论 使用场景分析 表结构设计 业务痛点分析 我2013年刚加入老男孩教育的时候,学校就一间教室,2个招生老师,招了学生后,招生老师就在自己的excel表里记录一下,每月算工资时,就按这个表来统计招生提成, 后来学校大了点,教室变成了3间,招生老师变成了4个人,招的学生也开始多了起来,不过大家依然是招了学生就纪录在自己的excel里,但问题开始出现了,我们的招生多是通过网络qq聊天在线咨询,好多客户需要聊很久才能转化成学员,经常会出现一个客户跟一个招生老师聊过后,

给所有浏览器的元素设置了一个共同的样式:Normalize.css

使用Normalize.css重置默认样式 CSS重置有助于根据所有设置的样式建立一个基准样式.样式重置有效重写了浏览器某些元素(在浏览器里有很大的不同)默认的样式. 尽管CSS resets在过去的几年里很受欢迎,但是,很多网站至今也没有使用,这些网站CSS的可扩展性因css resets会有很大的困难. 大多数人推荐使用normalize.css重置默认样式,而不是使用由Eric Meyer写的非常流行的CSS Reset或者自己写的Reset.Normalize.css给所有浏览器的元素设