HTML学习——最终实现小米商城第三天

PS基础

量取长宽像素
HTML学习——最终实现小米商城第三天
**可以在视图中选择标尺,更为准确的量出需要的长宽像素。根据电脑的配置,略有差别。
HTML学习——最终实现小米商城第三天
切图片
HTML学习——最终实现小米商城第三天
HTML学习——最终实现小米商城第三天
HTML学习——最终实现小米商城第三天
注意要选择所有用户切片,图片的格式是gif或者jpg都没关系,这个跟PS的版本有关

开始写首页布局

引入图标
HTML学习——最终实现小米商城第三天
HTML学习——最终实现小米商城第三天
就是这个!引入的时候注意图片的路径
头部div框和背景颜色的设置
HTML学习——最终实现小米商城第三天
HTML学习——最终实现小米商城第三天
清除边距
HTML学习——最终实现小米商城第三天
版心居中
HTML学习——最终实现小米商城第三天
HTML学习——最终实现小米商城第三天
开始写标题栏的文字,左右类似
HTML学习——最终实现小米商城第三天
清除一些默认的格式
HTML学习——最终实现小米商城第三天
效果图
HTML学习——最终实现小米商城第三天
设置浮动,左右都需要,以左边为例,line是每个文字中间的一条线
HTML学习——最终实现小米商城第三天
效果图
HTML学习——最终实现小米商城第三天