运营狗转前端程序员的第1天

大学专业为软件工程，大三期间阴差阳差做了运营实习生，现在想跳出运营坑，转为程序猿，希望能在这里记录学习和进步的每一天，因为笔者大学专业为软件工程，所以前端所需基本标签基本都了解的，在这里就直接从项目做起啦

一年没有写代码感觉真的是“阿西吧”，太难了，想着大学期间老师交了淘宝网站实战项目，今天想要再做一遍发现那么难。没办法还是找了某某某网站的基础教程看了，边看边在这里做笔记。

---

希望几年后的我看到这篇文章，我能diss 我自己！！！

做项目前准备
第一步 准备项目存放文件夹
项目文件：ds及ds 文件夹需要建立的文件夹 images (存放页面所有图片的文件夹) js(存放后期需要js的文件夹)style(存放css样式的文件夹)
ds->images->style

第二步 打开编辑器建立文件【笔者用sublime 编辑器】
1先建立index.html 文件存放在ds 文件夹中

2建立css.css文件，存放在css文件夹中

3在index.html 文件中引用css.css文件
代码演示 href地址就说你存放css文件的地址

4 css重制样式
某些标签的样式是自定义的，需要在css样式中修改其样式，但是一个网页中某些标签是重复出现的非常麻烦，把所有清零方式放在一个记事本，留着后期使用。

css清零方式

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd, input{margin:0;padding:0;}
body{font-size:12px;}
img{border:none;}
li{list-style:none;}
input, select,textarea{outline:none;}
textarea{resize:none;}
a{text-decoration:none;}
/清楚浮动/
.clearfix:after{content:"";display:block; clear:both;}
.clearfix{zoom:1;}

ps
大学期间对margin padding 这两个表弄弄不清楚，也不理解块元素和内连元素的含义！今天一定要都弄明白了什么意思！

5 分析页面结构

这次我选择的是淘宝的首页部分，一般页面结构分为：top 导航栏 banner 等，都是从页面上面往下分析的。