b站白嫖的网课,黑马的小兔鲜儿案例,教程链接点这里就行
CSS
- base.css:基本样式,内外边距,字体之类的
- common.css:网页的公共样式,一般是 header 部分和 footer 部分
- index.css:首页样式
images
- logo.png:网站logo
- sprites.png:拿来存精灵图的、
uploads
以图片为主,主要存放需要经常更新的资源例如商品图片,活动图片等
favicon.ico
网站图标
index.html
首页的html
搜索引擎优化,又称为 SEO ,即 Search Engine Optimization 两种优化方式:氪金,优化网页相关信息 SEO 三大标签
- title:网页标题标签
- description:网页描述标签
- keywords:网页关键词标签
切页面啦,别人给你一个psd图片你要能转换成网页。视频里使用工具 PxCook ,由于平常用 archlinux 所以暂时没有找到它的linux版本,直接跟着视频数据做了。
版心
头部模块
快捷菜单模块
- 背景色块为通栏,设置高度和颜色即可
- 快捷菜单整体在版心右侧,向右浮动实现
- 菜单其实就是一个导航列表,使用li标签包裹a标签,然后CSS装饰即可
- 手机版的图标可以使用伪类元素标签把图标从精灵图中插入到网页中
主导航模块
- 背景色块为通栏,设置高度和颜色即可
- 分为三块:logo 图标,导航栏 , 搜索栏,直接左浮动
- logo图标:设置好和版心左边,上下的边距
- 导航栏:设置好和logo的间距,每一项之间的间距即可,文字和logo中部对齐。处理的时候把a标签设置成块,不然没法调大小。注意鼠标经过后样式变化。
- 搜索栏:搜索栏前面的搜索图标用伪类元素整上去,购物车上数字图标使用定位+实现
网站入口模块
轮播图
目前还写不了轮播功能,不过要预先设置好框架 li 标签包含 a 标签,a标签包含 img标签
侧边栏
- 黑色透明背景
- li标签实现列表
- 首个词语字体样式和后面的有区别,使用span把后面的包起来设置样式
- 侧边栏后面的箭头图标使用伪类元素实现,并且使用“子绝父相”的方式来定位
左右按钮
- css画圆: border-radius: 50%;
- 箭头用伪类元素弄上去
轮播图指示器
- 整体一个div盒子,内部使用li标签包含a标签,a标签包含img标签实现
- 使用active类标记选中,方便设置选中状态的样式
新鲜好物模块
好物模块头部
- 左右两个盒子,一个左浮动,一个右浮动进行布局
- 左边盒子使用h2标签+span标签实现不同字体样式
好物模块商品列表
- 分成四个盒子,左浮动布局
- 每个盒子分为 img 标签,h3 标签,p 标签分别独占一行
底部模块
宣传服务模块
- 版心内三个盒子(a标签浮动)三等分
- 图标采用伪类元素+精灵图弄上去
版权信息模块
- 两个p标签,每个占一行设置字体样式即可
- 第一行p标签包含a标签