CSS 入门手册(二)

12-Overflow

13-下拉菜单

14-提示框

14.1 显示位置（左右）

14.2 显示位置(上下)

14.3 添加箭头

14.4 淡入效果

15-图片

16-列表

17-表格

17.1 表格宽度和高度

17.2 文字对齐

17.3 表格颜色

18-计数器

19-导航栏

19.1 导航栏UI优化

19.2 社会实践

12-Overflow

overflow 属性用于控制内容溢出元素框时显示的方式。

注:overflow 属性只工作于 指定高度的块 元素上。
注: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。

<head><style>#OverflowVis {width: 200px;height: 100px;background-color: aquamarine;}#OverflowScroll {width: 200px;height: 100px;margin-left: 240px;background-color: rebeccapurple;overflow: scroll;}</style>
</head><body><div id="OverflowVis"><p>这是OverflowVis，你滚滚试试撒。</p><p>这是OverflowVis，你滚滚试试撒。</p>.......</div><div id="OverflowScroll"><p>这是OverflowScroll，你滚滚试试撒。</p><p>这是OverflowScroll，你滚滚试试撒。</p>.......</div>
</body>

13-下拉菜单

创建一个鼠标移动上去后显示下拉菜单的效果。

<head><style>/* 下拉按钮样式 */.dropbtn {background-color: #4CAF50;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;}/* 容器 <div> - 需要定位下拉内容 */.dropdown {position: relative;display: inline-block;}/* 下拉内容 (默认隐藏) */.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);}/* 下拉菜单的链接 */.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;}/* 鼠标移上去后修改下拉菜单链接颜色 */.dropdown-content a:hover {background-color: #f1f1f1}/* 在鼠标移上去后显示下拉菜单 */.dropdown:hover .dropdown-content {display: block;}/* 当下拉内容显示后修改下拉按钮的背景颜色 */.dropdown:hover .dropbtn {background-color: #3e8e41;}</style>
</head><body><div class="dropdown"><button class="dropbtn">下拉菜单</button><div class="dropdown-content"><a href="1-规则.html">1-规则</a><a href="2-创建.html">2-创建</a><a href="4-背景.html">4-背景</a><a href="5-文本.html">5-文本</a></div></div>
</body>

14-提示框

<head><style>.tip{position: relative;display: inline-block;border-bottom: 1px dotted black;margin-top: 200px;margin-left: 200px;}.tip .tiptext {visibility: hidden;/* 隐藏 */width: 200px;background-color:blueviolet;color: #fff;text-align: center;border-radius: 6px;padding: 5px 0;/* 11-定位 */position: absolute;z-index: 1;}.tip:hover .tiptext {visibility: visible;/* 显示 */}</style>
</head><body><div class="tip" >鼠标，你过来呀<span class="tiptext">哎呀呀呀，提示框文本</span></div></body></html>

14.1 显示位置（左右）

        .tip .tiptext {padding: 5px 0;top: -5px;right: 105%; }

top:-5px 同于定位在容器元素的中间。使用数字 5 因为提示文本的顶部和底部的内边距（padding）是 5px。
右侧：left:105%;
左侧：right: 105%;

14.2 显示位置(上下)

        .tip .tiptext {top: 100%;left: 50%; margin-left: -100px; }

使用 margin-left 属性，并设置为 -100px。这个数字计算来源是使用宽度的一半来居中对齐，即： width/2 (200/2 = 100)。
居中对齐：left: 50% 。
顶部：top: 100%;
底部：bottom: 100%;

14.3 添加箭头

        .tip .tiptext::after {content: "";position: absolute;bottom: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: transparent transparent blueviolet transparent;}

border-width 属性指定了箭头的大小
border-color 用于将内容转换为箭头。
- 箭头向上：border-color: transparent transparent blueviolet(紫色) transparent;
- 箭头向左：border-color: blueviolet(紫色) transparent transparent transparent;
- 其他略

14.4 淡入效果

使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果。

        .tip .tiptext {......opacity: 0;transition: opacity 2s;}.tip:hover .tiptext {visibility: visible;/* 显示 */opacity: 1;}

15-图片

<head><style>div.img {margin: 5px;border: 3px solid #f40606;float: left;width: 400px;}div.img:hover {border: 3px solid #04ef6e;}div.img img {width: 100%;height: auto;}div.desc {padding: 15px;text-align: center;}</style>
</head><body><div class="responsive"><div class="img"><a target="_blank"href="https://profile-avatar.csdnimg.cn/f9c3e04cbd4546c6be3442fdf4140b12_g984160547.jpg!1"><img src="https://profile-avatar.csdnimg.cn/f9c3e04cbd4546c6be3442fdf4140b12_g984160547.jpg!1"alt="图片文本描述" width="300" height="200"></a><div class="desc">这里添加图片文本描述</div></div></div>....
</body>

图像透明度

        div.img {opacity:0.4;}div.img:hover {opacity:1.0;}

opacity 属性值从0.0 - 1.0。值越小，使得元素更加透明。

16-列表

在 HTML中，有两种类型的列表：

无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol - 列表项的标记有数字或字母

使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。

<head><meta charset="utf-8"><title>列表</title><style>ul.a {list-style-type:circle;}ul.b {list-style-type:square;}ol.c {list-style-type:upper-roman;}ol.d {list-style-type:lower-alpha;}</style>
</head><body><p>无序列表实例:</p><ul class="a"><li>北京</li><li>上海</li><li>广州</li><li>深圳</li></ul><ul class="b"><li>北京</li><li>上海</li><li>广州</li><li>深圳</li></ul><p>有序列表实例:</p><ol class="c"><li>北京</li><li>上海</li><li>广州</li><li>深圳</li></ol><ol class="d"><li>北京</li><li>上海</li><li>广州</li><li>深圳</li></ol>    
</body>

图像作列表项标记

      ul.e {list-style-image:url('src/bg.png');list-style-type: none;padding-left: 150px;}<p >图像列表实例:</p> <ul class="e"><li>北京</li><li>上海</li><li>广州</li><li>深圳</li></ul>

17-表格

border：th和th元素的边框(粗细线条颜色)。
border-collapse：边框是否被折叠成一个单一的边框或隔开：

<head><meta charset="utf-8"><title>表格</title><style>table {border-collapse: collapse;/* 折叠边框 */}table,th,td {border: 1px solid coral;}</style>
</head><body><table><tr><th>姓名</th><th>班级</th><th>学号</th></tr><tr><td>嬴政</td><td>二班</td><td>001</td></tr><tr><td>刘邦</td><td>二班</td><td>002</td></tr><tr><td>刘秀</td><td>三班</td><td>003</td></tr></table>
</body>

有点拥挤，有点丑，咱们再优化一下。

17.1 表格宽度和高度

        table {width:100%;}th{height:50px;}td{height: 40px;}

width和height属性定义表格的宽度和高度。

table width:100%; 按百分比设置表格宽度
th/td height:50px/40px; 指定单元格具体高度

17.2 文字对齐

text-align 属性设置水平对齐方式，向左，右，或中心。
vertical-align 属性设置垂直对齐方式，顶部，底部或中间。

        td{height: 60px;text-align: right;vertical-align: bottom;}

17.3 表格颜色

        /* 表格线条颜色 */table,th,td {border: 1px solid coral;}......th{height:50px;background-color: blueviolet; /* 表头背景色 */color: white;}td{height: 60px;text-align: center;background-color:cadetblue;/* 内容背景色 */color: white;}

18-计数器

计数器通过一个变量来设置，根据规则递增变量。

CSS 计数器使用到以下几个属性：

counter-reset：创建或者重置计数器
counter-increment：递增变量
content：插入生成的内容
counter() 或 counters() 函数：将计数器的值添加到元素要使用 CSS 计数器，得先用 counter-reset 创建：

嵌套计数器，可用于注册协议/或结合列表使用。

    <style>body {counter-reset: section;}p {counter-reset: subsection;}h1::before {counter-increment: section;content: "第 " counter(section) " 条：";}p::before {counter-increment: subsection;content: "" counter(section) "." counter(subsection) " ";}</style><h1>头衔</h1><p>CSDN博客砖家-帅次</p><p>华为云享砖家-帅次</p><p>软件设计师(中级)</p><h1>中午吃啥呀</h1><p>兰州国际</p><p>全球沙县</p><p>华中菜饭</p>

19-导航栏

导航栏，无处不在，还是需要熟练使用的。导航条基本上是一个链接列表。

    <ul><li><a href="/Users/scc/Qianduan/css/1-规则.html">博客</a></li><li><a href="/Users/scc/Qianduan/css/2-创建.html">下载</a></li><li><a href="4-背景.html">学习</a></li><li><a href="5-文本.html">知道</a></li></ul>

接下来我们删除边距和列表前小标志：

    <style>ul {list-style-type: none;margin: 0;padding: 0;}</style>

移除列表前小标志(list-style-type:none)。一个导航栏并不需要列表标记。
移除浏览器的默认设置将边距和填充设置为 0。

19.1 导航栏UI优化

a：link - 代表当一段文本为链接时的属性。
a：visited - 代表这段文本被点击之后的属性。
a：hover - 代表鼠标指针放在这个链接上时的属性。
a：active - 代表鼠标按下时一瞬间的属性。

        a:link,a:visited {display: block;color: #FFFFFF;background-color: #eb0b0b;width: 120px;text-align: center;padding: 4px;text-decoration: none;text-transform: uppercase;}a:hover,a:active {background-color: #0395e9;}

19.2 社会实践

        ul {list-style-type: none;margin: 0;padding: 0;width: 20%;background-color: #f5f5f5;position: fixed;height: 100%;overflow: auto;}<div style="margin-left:20%;padding:1px 16px;height:100%;"><h2>帅次</h2><h3>CSDN博客专家，华云云享专家，专注Android开发多年，分享一些你需要的小知识点！</h3><h2>HTML介绍</h2><p>HTML 英文全称 " HyperText Mark-up Language " , 中文名称是 " 超文本标记语言 " 。是一种用于创建网页的标准标记语言。它使用一系列标签来描述网页内容的结构和样式，包括段落、标题、链接、图片、列表等。HTML文档是由HTML元素组成的，这些元素可以嵌套在其他元素中，从而构建出复杂的网页结构。</p><p>HTML5是HTML的最新版本，相比之前的版本，它引入了许多新的元素和API，使得网页可以更好地支持多媒体内容、图形和动画等。此外，HTML5还提供了更多的表单控件和数据绑定功能，使得用户可以更方便地与网页进行交互。</p><p>更多内容</p>......<p>更多内容</p></div>

width: 20%; - 宽度 20%。
height: 100%; - 高度全屏。
background-color: #f5f5f5; - 背景色
position: fixed; - 固定定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动