pythonav.com
首页
知识库
内部资料
免费视频
每天20道面试题
登录
注册
本节课程主要包含两部分内容:上节作业小米商城讲解 和 CSS样式补充。 ### 3.1 讲解:小米商城头部页面
练习题参考源代码提取地址,如链接失效请联系 武沛齐 获取: ``` 链接: https://pan.baidu.com/s/11IX2NAxdo2yvBYdhy-ME-Q 提取码: yqeq ``` 注意:由还没有讲 `background`属性,所以 logo 部分可暂用图片实现。 ### 3.2 CSS样式 本节继续学习CSS常见样式。 #### 3.2.1 border 边框 用于给标签设置边框。
```html
CSS学习
``` **扩展**:`border-radius`也可以设置圆角边框。
```html
CSS学习
``` ##### 练习:实现小米商城闪购 仅需要实现布局及顶部变宽即可,内部细节不需要实现。
#### 3.2.2 background 背景 background用于设置标签背景,关于background的常用功能有: - `background-color`,设置背景颜色 - `backgroud-imgage`,设置背景图片 - `background-repeat`,背景图片如何重复 - `background-postion`,背景图片位置
```html
CSS学习
``` ##### 练习:实现小米商城logo 小米商城中的logo是基于背景图片实现。
#### 3.2.3 cursor 光标 cursor指鼠标放在标签上之后显示的形状。 ```html
CSS学习
你是谁?
我是你永远的得不到的爸爸。
我去你麻辣个鸡。
你是个傻吊吗?。
不,我是个傻爹?。
``` #### 3.2.5 position 定位 position用于对屏幕上的标签进行定位,定位相关知识点可以分为两种: - `position:fixed`,生成绝对定位的元素,相对于浏览器窗口进行定位。例如最常见的广告位和返回顶部,都是基于它来实现。
```html
CSS学习
回顶部
``` - `position:absolute` ,生成绝对定位的元素,相对于特定第一个父元素进行定位,常与`position:relative`结课使用。例如:想要让某标签相对某指定标签位置显示。
```html
小米商城
小米商城
MIUI
IoT
云服务
下载app
快来扫码下载
规则协议
购物车(0)
登录
注册
消息通知
``` **总结**:如果在使用absolute定位时,找不到特定的父级标签,absolute根据整个
页面
大小的进行定位。 - fixed,只能根据浏览器窗口进行定位,将标签固定在浏览器窗口的某个位置。 - absolute,可结合relative实现相对定位;也可单独使用,将标签固定页面的某个位置。 ##### 扩展应用:后台管理布局 position中的定位也常用于后台管理布局。
```html
CSS学习
``` ##### 练习:小米商城扫码&返回顶部
#### 3.2.4 opacity 透明度 给标签设置透明度,例如:常见的加载、登录框等显示都是基于它实现。
实现思路: - 基于z-index属性把页面分为三层:最底层是文章、中间层是黑色遮罩、最上层是登录框。 - 为中间的黑色遮罩设置透明度,否则无法看到最底层,透明度值范围:0~1,越大越不透明,例如: ```css filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* 老版Mozilla */ -khtml-opacity:0.5; /* 老版Safari */ opacity: 0.5; /* 支持opacity的浏览器*/ ``` ##### 案例:对话框示例代码
```html
Title
用户登录
``` #### 3.2.6 hover 伪类 hover伪类作用:当鼠标放在标签上时,可以能够设置一些样式。 - 示例1:鼠标放在标签上方,标签特殊显示。
```html
小米商城
小米商城
MIUI
IoT
云服务
``` - 示例2:鼠标放在标签上方,显示额外菜单。
```html
小米商城
小米商城
MIUI
IoT
云服务
下载app
快来扫码下载
规则协议
购物车(0)
登录
注册
消息通知
``` #### 3.2.7 after 伪元素 after伪元素作用:在自己内部标签底部设置元素。 - 示例1:在标签后面设置文字。
```html
CSS学习
王宝强
陈羽凡
贾乃亮
``` - 示例2:在标签后添加标签,解决float脱离文档流的问题,不用再额外手动添加标签了。 学习after伪元素之后,再处理脱离文档流的问题时候,只需要为父标签应用 `clearfix`样式即可(严重推荐)。
```html
CSS学习
向左走
向右走
``` ### 3.3 今日作业 实现小米商城首页所有功能(无需实现最底部功能)。 http://www.mi.com
目录
学前必备
第一章 HTML
第二章 CSS(一)
第三章 CSS(二)
第四章 JavaScript
第五章 jQuery
第六章 BootStrap