技术文章 | Technical articles

前端培训项目实战—华为荣耀商城

复习:

1.1到目前所学的布局方式

table布局:

div+css布局:

固定布局

百分比布局

1.2 盒子模型

Margin  border padding  content

1.3 布局模型

流动模型  标准流  block  inline  inline-block

浮动模型  left  right

层模型  relative  absolute  fixed

1.4 BFC(Block Formating Context)  块级格式化上下文

Float  不为none

Position 不为static

......

1.5 雪碧图 CSS Sprite

减少http请求

利用background属性实现

1.6 Hack

Html Hack   Css Hack: 值的Hack  选择器Hack

IE Tester  模拟

一、 
项目实战一

一个网站会有很多页面,可以通过a标签进行跳转;

每个页面都是多种信息的载体

 

一个网站包含这么几个部分:

网页结构 html

网页表现 css

网页行为 js

可能会存在一些素材及配置文件等等

 

目前为止,一个网站包含这么几个目录:

Images  图片目录 存放所有的素材文件

Css     存放所有css样式文件

Js      存放所有的js文件

网页文件

还可能会有一些其他的第三方引包

 

做一个项目之前,首先要分析项目需求;

拿到效果图,查看素材尺寸等是否完整,及时和美工沟通;

没有问题之后,分析页面结构组成,形成一个大概的思路

进行页面及效果的布置

 

网站首页  index.html  对应的css文件一般名字为 style.css default.css

其他页面按照语义化进行命名

一些比较简单的样式 原子类设置  base.css

多个页面可以共享的样式  我们叫做公共样式 comment.css

当前页面的样式

 

看到通栏  width:100%

版心  inner  900-1300px之间

 项目实战视频教程,请添加微信“haomei0452”免费领取


微信个人号二维码.jpg

关注微信公众号“icketang”,获取最新前端资讯,学习资料

B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg

上一篇文章: 前端培训——html源码笔记
下一篇文章: 前端培训—html源码笔记 第二天

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>