菜鸟学习笔记——前端开发——CSS（4）

练习网址：

菜鸟教程CSS实例：http://www.runoob.com/css/css-examples.html

W3SCHOOL HTML参考手册：http://www.w3school.com.cn/tags/tag_a.asp

一、伪类、伪元素

练习题：

# 把<a href="http://www.baidu.com">中的URL用content属性插入到每个链接后面

a：after{  
    content:"（"attr(href)"）";  
}

# 使章节<h1>和分节<h2>的编号是"第1节"，"1.1"，"1.2"等

<!DOCTYPE html>
<html>
<head>
<style>
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
	counter-increment:section;
	content:"Section " counter(section) ". ";
}
h2:before 
{
	counter-increment:subsection;
	content:counter(section) "." counter(subsection) " ";
}
</style>
</head>

<body>

<p><b>注意:</b> 仅当 !DOCTYPE已经定义 IE8支持 这个属性.</p>

<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>

</body>
</html>

# quotes 属性指定了引号范围

q:lang(en)
{
quotes: "~" "~" "《" "》";
}

<p><q>This is a <q>big</q> quote.</q></p>

#    把文本的第一个字母设为特殊的字母 :first-letter
#    把第一行文字设置为特殊 :first-line
#    把第一行文字的第一个字母设置为特殊    :first-letter、:first-line
#    在一个元素之前插入一些内容    :before
#    在一个元素之后插入一些内容 :after

知识点：

* content属性

与 :before 及 :after 伪元素配合使用，来插入生成内容。

"string"、counter(x)、attr(attribute) ......

* counter-reset属性

counter-reset属性创建或重置一个或多个计数器。通常与counter-increment属性、content属性一起使用。

counter-reset:x;

* counter-increment属性

counter-increment属性递增一个或多个计数器值。

counter-increment属性通常与counter-reset属性和content属性一起使用。

* quote属性

quotes属性设置嵌套引用的引号类型。

二、导航栏设置

* 导航栏

练习题：

# 垂直导航栏

# 水平导航栏

注意：ul{padding:0;}a{display:block;}

ul{padding:0;}
a{display:block;}

知识点：导航栏讲解 http://www.runoob.com/css/css-navbar.html

* 下拉菜单

实现效果如下：↓↓↓ 效果很简单，实现起来却有点点hold不住，一些关键性的内容没有掌握。

学习下拉菜单需要掌握定位的相关知识，对定位的position:absolute、position:relative一直是一知半解，看了下面的文章感觉明白了很多！案例写的很明了，走心！点赞！

通过案例理解position:relative与position:absolute https://segmentfault.com/a/1190000006924181

display:inline-block的使用方法、与float的区别：https://www.cnblogs.com/Ry-yuan/p/6848197.html

* 下拉菜单变形——提示工具tooltip

圆角？ border-radius设置圆角。

箭头？ border设置一个边的颜色，其他transparent；长度为0。

在不同位置显示？ position:absolute;进行定位。

三、图片处理

* 改变图片透明度

方法一： opacity属性：取值0-1。1为不透明

方法二： filter属性：opacity(%) 该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

* 图片滤镜

filter属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

具体看下面动图↓↓↓

到这里，CSS部分的基础学习暂时告一段落了。

草草过了一遍之后，其中还有很多内容无法很好掌握，后面CSS3之后再开综合练习的笔记！

菜鸟学习笔记——前端开发——CSS（4）

猜你喜欢