学完除定位后的其他内容,后写出的作品。
模仿小米商城后的作品,没有做完(扣照片后麻烦就没继续做)
经典广告格式
1:大致内容+重点:
CSS包含选择器和属性,其中选择器和属性是组成CSS的大部分内容,同时选择器的选择(是让网页好看的第一步,选择器的选择很简单),属性是作用于网页内容变好看的直接原因。
CSS中的重点内容则是:浮动、盒子模型、定位。
2选择器:
选择器分为基础选择器和复合选择器。
其中基础选择器我之前写的有,这里不再多说。
复合选择器:
选择器类型 | 后代选择器 | 子选择器 | 并集选择器 | 链接伪类选择器 | :focus伪类选择器 |
常用程度 | 常用 | 不常用但要会 | 常用 | 常用 | 待商定 |
其中,链接伪类选择器和 :focus伪类选择器都属于伪类选择器,而伪类选择器用于向某些选择器添加特殊的效果,其中,伪类选择器最大特点是用冒号(:)表示。
其中的颜色从白色变成黄色,鼠标放到该盒子时出现阴影都需要伪类选择器
1后代选择器:
.header h1 {
display: block;
width: 610px;
height: 50px;
color: #fff;
padding-top: 10px;
margin: 0 auto;
}
后代选择器格式:元素1+空格+元素2(可以在添加其它元素)
该模式表示:选择元素1里面的所有元素2(元素2是元素1的后代元素,即元素1包含元素2)
如:<div> <p> </p> </div>,p即是div中的后代元素。
要谨记:
1:元素1和元素2中间用空格隔开
2:元素1是父级,元素2是子级,最终选择的是元素2
3:元素2要是元素1的后代
4:元素1和元素2可以是任意基础选择器
如:
.nav1 ul li a {
color: #fff;
}
2子选择器:
与后代选择器要区分开,格式:元素1+>+元素2(可以在添加其它元素)
要记好,与后代选择器相比空格换成了>符号,且只能选择作为某元素最近一级的子元素,其中包含清梦的 <p> </p>标签是div标签的子元素,包含星河的<p> </p>标签是div标签的孙子元素。
要谨记:
1:元素1和元素2中间用大于号(>)隔开
2:元素1是父级,元素2是子级,最终选择的是元素2
3:元素2必须是亲儿子元素才行,其他的元素都不行
3并集选择器:
并集选择器格式:元素1,元素2(可以在添加其它元素)
并集选择器个元素之间的逗号是英文的要谨记(逗号表示:和的意思),改选择器表明:为多组标签同时为他们定义相同的样式。
如:
.content1, .content2, .content3, .content4 {
height: 510px;
margin: 10px auto;
margin-top: 20px;
}
4链接伪类选择器:
格式:
a:link (选择所有未被访问的链接)
a:visited (选择所有已被访问的链接)
a:hover (选择鼠标指针位于其上的链接)
a:active (选择活动链接(鼠标按下未弹起的链接))
其中的颜色从白色变成黄色,鼠标放到该盒子时出现阴影都需要伪类选择器