Web前端开发之CSS学习笔记5—溢出、浮动、层叠
2024-04-22 01:58:54
目录
位置
1.解决溢出问题overflow
1.1 overflow
1.2 resize属性
2.display 属性：定义显示框类型
2.1 display: block;将行内元素转块级元素
2.2 display：inline;将块级元素转换成行内元素
2.3 display: inline-block将行内元素转化为行内块元素
2.4 display: none;使元素消失
2.5 visibility: hidden;元素隐藏
2.6 display: list-item;使元素前有小点点
3 浮动float属性
3.1 文本和行内元素浮动
3.2 块级元素浮动
3.3 清除浮动clear
4. position 属性规定元素的定位类型
4.1 position: relative;
4.2 position: absolute;
4.3 粘滞定位 position: sticky;
5. z-index 属性
5.1 z-index:正数;—将元素显示在层叠元素前前
5.2 z-index:负数;—数将元素显示在层叠元素后
位置
1.解决溢出问题overflow
1.1 overflow
overflow 属性规定当内容溢出元素框时发生的事情。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
语法：
overflow:visible|hidden|scroll|auto|inherit;
| 值 | 说明 |
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
首先，针对下图溢出的问题，加overflow可以解决。
例子：overflow: auto; 溢出就加滚动条，不溢出就不加。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>解决溢出</title><style type="text/css">P{width: 300px;height: 100px;border: 2px solid cornflowerblue;overflow: auto;}</style></head><body><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nam aperiam sunt repudiandae soluta repellendus voluptatum dolores harum ex qui vel deleniti illum inventore rem optio autem quam quisquam aspernatur?</p><p>Hi.</p></body>
</html>
第一个溢出了，就加了滚动条。第二个没溢出，没有加。
overflow: scroll; 都加滚动条。
1.2 resize属性
resize属性指定一个元素是否是由用户调整大小的。
语法：
resize: none|both|horizontal|vertical:
| 属性 | 说明 |
| none | 用户无法调整元素的尺寸。 |
| both | 用户可调整元素的高度和宽度。 |
| horizontal | 用户可调整元素的宽度。 |
| vertical | 用户可调整元素的高度。 |
注：只有overflow设置为auto hidden scroll时，resize属性才有效。
例子：加resize:both; 可以拖拽右下角改变文本框大小。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>解决溢出</title><style type="text/css">P{width: 300px;height: 100px;border: 2px solid cornflowerblue;overflow: auto;resize:both;}</style></head><body><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nam aperiam sunt repudiandae soluta repellendus voluptatum dolores harum ex qui vel deleniti illum inventore rem optio autem quam quisquam aspernatur?</p><p>Hi.</p></body>
</html>
2.display 属性：定义显示框类型
display 属性规定元素应该生成的框的类型。
语法：
display:inline|block|A|;
| 值 | 说明 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| block | 此元素将显示为块级元素。 |
| inline-block | 此元素将显示为行内块元素。 |
| none | 此元素不会被显示。 |
| list-item | 此元素会作为列表显示。 |
任何HTML元素都可以通过display: block;变成块级元素。
块级元素：会另起一行，比如p元素。
行内元素：一个挨着一显示。
2.1 display: block;将行内元素转块级元素
例子：行内元素span转为块级。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>行内转块级</title><style type="text/css">span{display: block;}</style></head><body bgcolor="lightgray"><span>我是第一句。</span><span>我是第二句。</span><span>我是第三句。</span></body>
</html>span作为行内元素，结果应当如下：
但是加了display: block;之后：
例子：行内元素a转换成块级元素，就可以自动换行表示，否则是在同一行。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>纵向换行显示</title><style type="text/css">a{width: 500px;height: 30px;display: block;background-color: #ffffff; /*白色*/border: 15px solid #989898; /*灰色*/}</style></head><body><a href="http://www.baidu.com" target="_blank">百度</a><a href="http://bilibili.com" target="_blank">B站</a><a href="https://mp.csdn.net/" target="_blank">CSDN</a></body>
</html>
2.2 display：inline;将块级元素转换成行内元素
注：行内元素不可以设置宽，高，上下边距。可以设置左右边距。
例子：将块级元素p转为行内元素.
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>块级元素转行内元素</title><style>p {/*p元素将显示为内联，两元素合为一行显示。*/display:inline;}</style></head><body><p style="color: pink;">这是第一段落:古之学者必有师。师者，所以传道受业解惑也。人非生而知之者，孰能无惑？惑而不从师，其为惑也，终不解矣。生乎吾前，其闻道也固先乎吾，吾从而师之；生乎吾后，其闻道也亦先乎吾，吾从而师之。</p><p style="color: lightblue;">这是第二段落：吾师道也，夫庸知其年之先后生于吾乎？是故无贵无贱，无长无少，道之所存，师之所存也。</p></body>
</html>
2.3 display: inline-block将行内元素转化为行内块元素
例子：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>行内块元素</title><style type="text/css">/*修改代码，使得宽度和高度生效*//* #nav a{display: inline-block; /*使a变成行内块元素*/width: 200px;height: 50px;color: white;background-color:brown; text-align: center; /*文本水平居中*/line-height: 50px; /*line-height设置行高。此处50的值等于weight值，作用：垂直居中*/}*/</style></head><body><div id="nav"><a href="http://www.baidu.com" target="_blank">百度</a><a href="http://bilibili.com" target="_blank">B站</a><a href="https://mp.csdn.net" target="_blank">CSDN</a></div></body>
</html>
不设置 display: inline-block结果如下，几个行内元素宽度不同。
2.4 display: none;使元素消失
例子：使P元素消失
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>使元素消失</title><style type="text/css">#oho {/*使元素消失*/display: none;}p{background-color: lightgrey;}</style></head><body><p>以下一共三句话：</p><p>这是第一句</p><p id="oho">这是第二句</p><p>这是第三句</p></body>
</html>
2.5 visibility: hidden;元素隐藏
例子：使元素不显示，但位置还在
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>元素不存在但位置还在</title><style type="text/css">#oho{visibility: hidden;}p{background-color: lightgray;}</style></head><body><p>以下一共三句话：</p><p>这是第一句</p><p id="oho">这是第二句</p><p>这是第三句</p></body>
</html>
2.6 display: list-item;使元素前有小点点
例子：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>元素不存在但位置还在</title><style type="text/css">span{display: list-item;}p{display: list-item;}</style></head><body><ul><span>这是第一句</span><span>这是第二句</span><span>这是第三句</span><hr><p>这是第四句</p><p>这是第五句</p><p>这是第六句</p></ul></body>
</html>
3 浮动float属性
float 属性定义元素在哪个方向浮动。
浮动对文本和行内元素采取的做法是被环绕，对块级元素就是覆盖。
语法：
float:none|left|right|inherit;
| 值 | 说明 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
3.1 文本和行内元素浮动
例子：设置文字和文字之间的位置
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div.left {background-color: pink; width:50%; float:left;}div.right{background-color: lightblue; width:50%; float:right;}</style></head><body><div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eveniet facilis soluta inventore officiis harum nobis at illo debitis labore doloribus quis quos voluptatum alias perferendis maiores repellat tempora dicta!</div><div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo aut accusamus soluta sit minima maxime iure aperiam quam ipsum neque obcaecati vel veritatis reprehenderit. Placeat obcaecati molestiae voluptas repudiandae corporis.</div></body>
</html>
例子：设置图片和文字之间的位置
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">img{float:right}</style></head><body><p>为图片添加float:right，图像会浮动到段落的右侧：</p><p><img src="tu西瓜.jpg" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur, at atque aut cupiditate delectus ea earum error eveniet hic in iusto, laudantium nihil, tenetur ut vel velit voluptate voluptates?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dolore in nemo quam recusandae. Delectus dicta distinctio nobis quia sed similique, vero! Debitis inventore labore, quidem tempore totam velit voluptas.</p></body>
</html>
3.2 块级元素浮动
例子：浮动元素会脱离正常的文档流，第三块直接接在第二块后面。
<DOCTYPE html>
<html><head><meta charset="utf-8"><title>div元素浮动</title><style type="text/css">div.pink {background-color: pink; width:100px; height:100px;}div.lightblue {background-color: lightblue; width: 200px; height:100px; float: left;}div.lavender {background-color: lavender; width:300px; height:100px;}div.lightgray {background-color: lightgray; width:400px; height:100px;}</style></head><body><div class="pink"></div><div class="lightblue"></div><div class="lavender"></div><div class="lightgray"></div></body>
</html>
例子：float: right;不断收缩网页，块级元素会覆盖块级元素。
<DOCTYPE html>
<html><head><meta charset="utf-8"><title>div元素浮动</title><style type="text/css">div.pink {background-color: pink; width:100px; height:100px;}div.lightblue {background-color: lightblue; width: 200px; height:100px; float: right;}div.lavender {background-color: lavender; width:300px; height:100px;}div.lightgray {background-color: lightgray; width:400px; height:100px;}</style></head><body><div class="pink"></div><div class="lightblue"></div><div class="lavender"></div><div class="lightgray"></div></body>
</html>
1. 2. 3.
例子：三列布局
<DOCTYPE html>
<html><head><meta charset="utf-8"><title>实现三列布局</title><style type="text/css">div.left {background-color: pink; width:33.33%; float: left; padding:20px;box-sizing:border-box;}div.middle {background-color: lavender; width:33.33%; float: left; padding:20px;box-sizing:border-box;}div.right {background-color: lightblue; width: 33.33%; float: right; padding:20px;box-sizing:border-box;}</style><body><div class="left"><h2>左侧</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aut eum blanditiis omnis quisquam quas quo atque excepturi recusandae possimus reiciendis rem delectus dolorem laboriosam quae quibusdam eos officia amet.</p></div><div class="middle"><h2>中间</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa incidunt itaque corporis aspernatur voluptates quam est reprehenderit dolorem aperiam assumenda recusandae vero error maiores similique quibusdam. Ducimus dolor odio sit?</p></div><div class="right"><h2>右边</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium aperiam quos eveniet dolorum pariatur inventore. Maiores impedit hic suscipit pariatur consectetur odio vitae repudiandae adipisci harum quis atque perspiciatis! Incidunt.</p></div></body>
</html>
3.3 清除浮动clear
例子：想在文本框下面添加文字
<DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div.left {background-color: pink; width:33.33%; float: left; padding:20px;box-sizing:border-box;}div.middle {background-color: lavender; width:33.33%; float: left; padding:20px;box-sizing:border-box;}div.right {background-color: lightblue; width: 33.33%; float: right; padding:20px;box-sizing:border-box;}</style><body><div class="left"><h2>左侧</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aut eum blanditiis omnis quisquam quas quo atque excepturi recusandae possimus reiciendis rem delectus dolorem laboriosam quae quibusdam eos officia amet.</p></div><div class="middle"><h2>中间</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est illo culpa dolorum porro suscipit dicta totam quia. Cumque magnam eaque nulla soluta fugit a debitis perferendis dolorum. Saepe eum repudiandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa incidunt itaque corporis aspernatur voluptates quam est reprehenderit dolorem aperiam assumenda recusandae vero error maiores similique quibusdam. Ducimus dolor odio sit?</p></div><div class="right"><h2>右边</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium aperiam quos eveniet dolorum pariatur inventore. Maiores impedit hic suscipit pariatur consectetur odio vitae repudiandae adipisci harum quis atque perspiciatis! Incidunt.</p></div><footer>xxxxxxxxxxxxxxxxxxxxxxxx</footer></body>
</html>由于中间文本框长度大，文字为实现浮动环绕效果，就跑到中间文本框右侧去了：
解决方案：clear
clear属性指定段落的左侧或右侧不允许浮动的元素。
语法：
clear:none|left|right|both|inherit;
| 值 | 说明 |
| none | 默认值。允许浮动元素出现在两侧。 |
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
例子：清除footer左侧浮动clear: left;
<DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div.left {background-color: pink; width:33.33%; float: left; padding:20px;box-sizing:border-box;}div.middle {background-color: lavender; width:33.33%; float: left; padding:20px;box-sizing:border-box;}div.right {background-color: lightblue; width: 33.33%; float: right; padding:20px;box-sizing:border-box;}footer{clear: left;}</style><body><div class="left"><h2>左侧</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aut eum blanditiis omnis quisquam quas quo atque excepturi recusandae possimus reiciendis rem delectus dolorem laboriosam quae quibusdam eos officia amet.</p></div><div class="middle"><h2>中间</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est illo culpa dolorum porro suscipit dicta totam quia. Cumque magnam eaque nulla soluta fugit a debitis perferendis dolorum. Saepe eum repudiandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa incidunt itaque corporis aspernatur voluptates quam est reprehenderit dolorem aperiam assumenda recusandae vero error maiores similique quibusdam. Ducimus dolor odio sit?</p></div><div class="right"><h2>右边</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium aperiam quos eveniet dolorum pariatur inventore. Maiores impedit hic suscipit pariatur consectetur odio vitae repudiandae adipisci harum quis atque perspiciatis! Incidunt.</p></div><footer>xxxxxxxxxxxxxxxxxxxxxxxx</footer></body>
</html>
4. position 属性规定元素的定位类型
position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
语法：
position:static|absolute|relative|fixed|inherit;
| 值 | 说明 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。像右下角的小广告就是这样的定位方式 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。 |
4.1 position: relative;
例子：position: relative; 相对于其正常位置进行定位
<DOCTYPE html>
<html><head><meta charset="utf-8"><title>定位决定地位</title><style type="text/css">img{top:20px; left:120px; width:100px;position: relative; /*相对于其正常位置进行定位*/border: 2px solid lightblue;}</style><body><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est illo culpa dolorum porro suscipit dicta totam quia. Cumque magnam eaque nulla soluta fugit a debitis perferendis dolorum. Saepe eum repudiandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa incidunt itaque corporis aspernatur voluptates quam est reprehenderit dolorem aperiam assumenda recusandae vero error maiores similique quibusdam. Ducimus dolor odio sit?</p><img src="tu3.jpg" /><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium aperiam quos eveniet dolorum pariatur inventore. Maiores impedit hic suscipit pariatur consectetur odio vitae repudiandae adipisci harum quis atque perspiciatis! Incidunt.</p></body>
</html>
4.2 position: absolute;
例子：position: absolute; 相对于父元素进行定位
<DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">img{top:20px; left:120px; width:100px;position: absolute; /*相对于父元素进行定位*/border: 2px solid lightblue;}div{width: 500;height:200;position: relative; /*父元素需要设置位置信息*/border:2px solid pink ;}</style><body><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est illo culpa dolorum porro suscipit dicta totam quia. Cumque magnam eaque nulla soluta fugit a debitis perferendis dolorum. Saepe eum repudiandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa incidunt itaque corporis aspernatur voluptates quam est reprehenderit dolorem aperiam assumenda recusandae vero error maiores similique quibusdam. Ducimus dolor odio sit?</p><div><img src="tu3.jpg" /></div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium aperiam quos eveniet dolorum pariatur inventore. Maiores impedit hic suscipit pariatur consectetur odio vitae repudiandae adipisci harum quis atque perspiciatis! Incidunt.</p></body>
</html>
4.3 粘滞定位 position: sticky;
例子：下拉网页滚动框，标题位置依旧在页顶显示。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>粘滞定位</title><style type="text/css">#top { /* 尝试实现粘滞定位 */ position: sticky; top: 0;}h3{display: block;color: white; background:#429296; text-align: center;}</style></head><body><h1>粘滞定位</h1><div id="top"><h3>标题</h3> </div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta ducimus quos delectus numquam dolorum ab quidem consequuntur ad dolores molestiae rem laborum aperiam tempore vel accusantium magnam fuga minus enim!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus blanditiis quia dicta fuga pariatur repudiandae hic ut ratione exercitationem aperiam reprehenderit ad odit temporibus fugit facere quae eveniet dolore! Consequatur.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sint quas molestiae inventore expedita illo dolorem veniam ut ratione! Eos quam molestias ducimus iusto facere doloremque non odit nostrum unde.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta ducimus quos delectus numquam dolorum ab quidem consequuntur ad dolores molestiae rem laborum aperiam tempore vel accusantium magnam fuga minus enim!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus blanditiis quia dicta fuga pariatur repudiandae hic ut ratione exercitationem aperiam reprehenderit ad odit temporibus fugit facere quae eveniet dolore! Consequatur.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sint quas molestiae inventore expedita illo dolorem veniam ut ratione! Eos quam molestias ducimus iusto facere doloremque non odit nostrum unde.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta ducimus quos delectus numquam dolorum ab quidem consequuntur ad dolores molestiae rem laborum aperiam tempore vel accusantium magnam fuga minus enim!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus blanditiis quia dicta fuga pariatur repudiandae hic ut ratione exercitationem aperiam reprehenderit ad odit temporibus fugit facere quae eveniet dolore! Consequatur.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sint quas molestiae inventore expedita illo dolorem veniam ut ratione! Eos quam molestias ducimus iusto facere doloremque non odit nostrum unde.</p></body>
</html>
5. z-index 属性
z-index 属性设置元素的堆叠顺序。设值高的堆叠在设值低的前面。
z-index不设置时，默认值为0。
语法：
z-index:auto|number
例子：position: absolute;图片重叠（不设置z-index时）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图片定位</title><style type="text/css">#tu1{top: 20px;left: 20px;width: 200px;position: absolute;}#tu2{top: 40px;left: 40px;width: 200px;position: absolute;}#tu3{top: 60px;left: 60px;width: 200px;position: absolute;}</style></head><body><img id="tu1" src="tu11.jpg" /> <!--黄色--><img id="tu2" src="tu22.jpg" /> <!--蓝色--><img id="tu3" src="tu3.jpg" /> <!--粉色--></body>
</html>
position定位会使元素脱离文档流，出现元素重叠现象。
5.1 z-index:正数;—将元素显示在层叠元素前前
例子： z-index设置重叠图片谁在前，值大的在前
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图片定位</title><style type="text/css">#tu1{top: 20px;left: 20px;width: 200px;position: absolute;z-index: 1;}#tu2{top: 40px;left: 40px;width: 200px;position: absolute;z-index: 2; /*值越大，越靠前*/}#tu3{top: 60px;left: 60px;width: 200px;position: absolute;}</style></head><body><img id="tu1" src="tu11.jpg" /> <!--黄色--><img id="tu2" src="tu22.jpg" /> <!--蓝色--><img id="tu3" src="tu3.jpg" /> <!--粉色--></body>
</html>
5.2 z-index:负数;—数将元素显示在层叠元素后
例子：粘滞定位+堆叠z-index: -1;
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>粘滞定位+堆叠</title><style type="text/css">article {max-width: 600px;margin: 1em auto;}article h4, article footer {position: -webkit-sticky; position: sticky; /*粘滞定位*/}article h4 {margin: 2em 0 0;background-color: #333;color: #fff;padding: 10px;top: 0;z-index: 1;}article content {display: block;background-color:#ffffe0 ;position: relative;padding: 1px 10px;}article footer {background-color:#c0d4ff;padding: 10px;bottom: 50vh;z-index: -1; /*footer部分藏在content下面，随页面拉动显示出来*/}</style></head><body><article><section><h4>蜀道难</h4><content><p>噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。</p><p>问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！</p><p>剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！</p></content><footer>诗词释义：……</footer></section><section><h4>春江花月夜</h4><content><p>春江潮水连海平，海上明月共潮生。滟滟随波千万里，何处春江无月明！江流宛转绕芳甸，月照花林皆似霰；空里流霜不觉飞，汀上白沙看不见。江天一色无纤尘，皎皎空中孤月轮。江畔何人初见月？江月何年初照人？人生代代无穷已，江月年年望相似。不知江月待何人，但见长江送流水。白云一片去悠悠，青枫浦上不胜愁。谁家今夜扁舟子？何处相思明月楼？可怜楼上月裴回，应照离人妆镜台。玉户帘中卷不去，捣衣砧上拂还来。此时相望不相闻，愿逐月华流照君。鸿雁长飞光不度，鱼龙潜跃水成文。昨夜闲潭梦落花，可怜春半不还家。江水流春去欲尽，江潭落月复西斜。斜月沉沉藏海雾，碣石潇湘无限路。不知乘月几人归，落月摇情满江树。</p></content><footer>诗词释义：...</footer></section><section><h4>师说</h4><content><p>古之学者必有师。师者，所以传道受业解惑也。人非生而知之者，孰能无惑？惑而不从师，其为惑也，终不解矣。生乎吾前，其闻道也固先乎吾，吾从而师之；生乎吾后，其闻道也亦先乎吾，吾从而师之。吾师道也，夫庸知其年之先后生于吾乎？是故无贵无贱，无长无少，道之所存，师之所存也。</p><p>嗟乎！师道之不传也久矣！欲人之无惑也难矣！古之圣人，其出人也远矣，犹且从师而问焉；今之众人，其下圣人也亦远矣，而耻学于师。是故圣益圣，愚益愚。圣人之所以为圣，愚人之所以为愚，其皆出于此乎？爱其子，择师而教之；于其身也，则耻师焉，惑矣。彼童子之师，授之书而习其句读者，非吾所谓传其道解其惑者也。句读之不知，惑之不解，或师焉，或不焉，小学而大遗，吾未见其明也。巫医乐师百工之人，不耻相师。士大夫之族，曰师曰弟子云者，则群聚而笑之。问之，则曰：“彼与彼年相若也，道相似也。位卑则足羞，官盛则近谀。”呜呼！师道之不复，可知矣。巫医乐师百工之人，君子不齿，今其智乃反不能及，其可怪也欤！</p><p>圣人无常师。孔子师郯子、苌弘、师襄、老聃。郯子之徒，其贤不及孔子。孔子曰：三人行，则必有我师。是故弟子不必不如师，师不必贤于弟子，闻道有先后，术业有专攻，如是而已。</p><p>李氏子蟠，年十七，好古文，六艺经传皆通习之，不拘于时，学于余。余嘉其能行古道，作《师说》以贻之。</p></content><footer>诗词释义：...</footer></section><section><h4>项脊轩志</h4><content><p>项脊轩，旧南阁子也。室仅方丈，可容一人居。百年老屋，尘泥渗漉，雨泽下注；每移案，顾视，无可置者。又北向，不能得日，日过午已昏。余稍为修葺，使不上漏。前辟四窗，垣墙周庭，以当南日，日影反照，室始洞然。又杂植兰桂竹木于庭，旧时栏楯，亦遂增胜。借书满架，偃仰啸歌，冥然兀坐，万籁有声；而庭堦寂寂，小鸟时来啄食，人至不去。三五之夜，明月半墙，桂影斑驳，风移影动，珊珊可爱。</p><p>然余居于此，多可喜，亦多可悲。先是庭中通南北为一。迨诸父异爨，内外多置小门墙，往往而是。东犬西吠，客逾庖而宴，鸡栖于厅。庭中始为篱，已为墙，凡再变矣。家有老妪，尝居于此。妪，先大母婢也，乳二世，先妣抚之甚厚。室西连于中闺，先妣尝一至。妪每谓余曰：”某所，而母立于兹。”妪又曰：”汝姊在吾怀，呱呱而泣；娘以指叩门扉曰：‘儿寒乎？欲食乎？’吾从板外相为应答。”语未毕，余泣，妪亦泣。余自束发，读书轩中，一日，大母过余曰：”吾儿，久不见若影，何竟日默默在此，大类女郎也？”比去，以手阖门，自语曰：”吾家读书久不效，儿之成，则可待乎！”顷之，持一象笏至，曰：”此吾祖太常公宣德间执此以朝，他日汝当用之！”瞻顾遗迹，如在昨日，令人长号不自禁。</p><p>轩东，故尝为厨，人往，从轩前过。余扃牖而居，久之，能以足音辨人。轩凡四遭火，得不焚，殆有神护者。</p><p>项脊生曰：”蜀清守丹穴，利甲天下，其后秦皇帝筑女怀清台；刘玄德与曹操争天下，诸葛孔明起陇中。方二人之昧昧于一隅也，世何足以知之，余区区处败屋中，方扬眉、瞬目，谓有奇景。人知之者，其谓与坎井之蛙何异？”</p><p>余既为此志，后五年，吾妻来归，时至轩中，从余问古事，或凭几学书。吾妻归宁，述诸小妹语曰：”闻姊家有阁子，且何谓阁子也？”其后六年，吾妻死，室坏不修。其后二年，余久卧病无聊，乃使人复葺南阁子，其制稍异于前。然自后余多在外，不常居。</p><p>庭有枇杷树，吾妻死之年所手植也，今已亭亭如盖矣。</p></content><footer>诗词释义：...</footer></section><p>好好学习鸭~</p><img src="tu11.jpg" /></article></body>
</html>
效果展示
学习来源：B站小甲鱼
Web前端开发之CSS学习笔记5—溢出、浮动、层叠相关推荐
- Web前端开发之CSS学习笔记11—文本格式和动画设计
目录 1.文本对齐text -align 2.保留空白字符white-space 3.设置文本方向direction 4.设置文本缩进text-indent 4.设置字符间距letter-spacin ...
- Web前端开发之CSS学习笔记3—颜色和背景
目录 1.CSS的颜色表达 1.1前景色color 1.2背景色background-color 2.背景 2.1 background-image:url()设置背景图; 2.2 backgroun ...
- Web前端开发之CSS学习笔记8—居中和自适应
目录 1.居中 1.1水平居中 1.2垂直居中 2.单列布局自适应 3.双列布局自适应 3.1双列自适应 3.2半边固定半边自适应 3.三列布局自适应 3.1浮动法 3.2绝对定位法 3.3margi ...
- Web前端开发之CSS学习笔记10—栅格布局（网格布局）
目录 [网格布局grid] 1.网格布局的构成 2.父容器grid container 3.生成网格容器 display:grid/inline-grid 4.构建网格 grid-template-c ...
- 【转载】前端开发之CSS兼容写法经验总结
为什么80%的码农都做不了架构师?>>> 前端开发之CSS兼容写法经验总结技术 maybe yes 发表于2014-11-23 22:47 原文链接 : http://blog ...
- 正则至少一个数字_好程序员web前端培训分享JavaScript学习笔记之正则
好程序员web前端培训分享JavaScript学习笔记之正则,正则表达式,又名 "规则表达式" 由我们自己来书写 "规则",专门用来检测 字符串 是否符合 &q ...
- react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
- date javascript 时区_第23节 Datejs 日期库-Web前端开发之Javascript-零点程序员-王唯
Datejs 是一个开源的JavaScript库,用来解析.格式化和处理日期数据,支持多种语言的日期格式处理:官网:www.datejs.com/ Moment.js 是一个简单易用的轻量级JavaS ...
- Swift网络开发之NSURLSession学习笔记
为什么80%的码农都做不了架构师?>>> Swift网络开发之NSURLSession学习笔记 先上效果图: 功能: -单个任务下载 -暂停下载任务 -取消下载任 ...
- web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
最新文章
- WiFi已攻占世界 芯片原厂、模组方案商盘点
- 【SharePoint 2010】将Sharepoint Server 2010部署到WINDOWS 7
- 在大厂工作5年的大神,给前端初学者的四大建议,收藏咯
- 博文视点大讲堂第33期——如何让你既能干得漂亮又说得清楚？
- 数字电子技术基础第六版阎石王红课后答案
- 从零开始编译LEDE固件 默认中文material主题_php_sir_新浪博客
- 【数竞笔记2】—— 常见积分方法
- jquery的keyup()事件案列——根据输入中文名称自动显示添加对应的拼音简写+时间戳
- OpenBmc开发9：dts简介与使用
- 在线模拟linux终端,linux下tty，控制台，虚拟终端，串口，console（控制台终端）详解...
- 分布式搜索引擎es原理
- 大学计算机课英语心得体会,【大学计算机课程总结12篇】_大学计算机课程总结范文大全_2021年大学计算机课程总结_东城教研...
- 文献检索（学术搜索）
- 如何在Mac上使用“剪切和粘贴”
- C++/Python PAT乙级1051 复数乘法 (15分)
- canvas 实现图片预览和下载
- 微信小程序全栈开发实践 第二章 微信小程序组件介绍及使用 -- 2.3 rich-text 组件，以及如何单击预览它的节点图片并保存
- 牛客练习赛51 C 勾股定理 （结论题）
- EXCEL VBA学习例子之【升降序】
- 【opencv学习】opencv基础用法