CSS-文字环绕浮动、行内块分页、三角强化妙用、伪元素选择器

文字环绕浮动

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字环绕浮动效果</title>
	<style>
		.container {
		  width: 300px; /* 根据需要设置容器的宽度 */
		}
		
		img {
		  float: left; /* 图片向左浮动 */
		  margin-right: 10px; /* 可根据需要设置图片与文本之间的间距 */
		  width: 100px;
		  height: 100px;
		}
		
		p {
		  overflow: hidden; /* 清除浮动 */
		}
		
	</style>
</head>

<body>

	<div class="container">
	  <img src="img/7bf51d9fa40156eccb6c7cec218996368dc72872.jpg" alt="Image">
	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut dapibus luctus, velit mauris aliquam tellus, sit amet luctus nunc nisl id justo.</p>
	<p>如果他正在受苦,他会被考虑帮助他。但现在,就像他在口袋里哭一样,他想把胡子剪掉,所以他现在必须哭。</p>
	</div>
	
</body>

</html>

行内块分页

html 复制代码
<!DOCTYPE html>
<html lang="cn-ZH">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内块分页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
            display: inline-block;
            width: 45px;
            line-height: 45px;
            height: 45px;
            background-color: silver;
            border-radius: 15px;
            border: 1px solid wheat;
        }
        
        li:hover {
            box-shadow: 0 0 7px 3px rgba(0, 0, 0, 0.6);
        }
        
        ul .s {
            list-style: none;
            display: inline-block;
            width: 100px;
            line-height: 45px;
            height: 45px;
            background-color: silver;
            border-radius: 10px;
            border: 1px solid wheat;
        }
        
        .box {
            font-size: 16px;
            font-weight: 600;
            margin: 100px auto;
            text-align: center;
        }
        
        .box .two,
        .box .three {
            background-color: white;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li class="s">&lt;&lt;上一页</li>
            <li>1</li>
            <li class="two">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li class="three">...</li>
            <li class="s">下一页&gt;&gt;</li>
            <span style="width: 200x;height: 40px;display: inline-block;
                font-weight: 400;
            ">到第<input style="width: 40px;height: 30px;border: 1px solid;margin: 0 5px;" type="text">页
            <input type="button" style="width: 40px;height: 30px;"  value="确定"></span>

        </ul>

    </div>


</body>

</html>

三角强化的妙用

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角形</title>

    <style>
        .box {
            width: 0px;
            height: 0px;
            border-top: 50px solid transparent;
            border-bottom: 0px solid yellow;
            border-left: 0px solid violet;
            border-right: 25px solid white;
            position: relative;
            right: 50px;
            float: left;
        }
        
        .box2 {
            width: 100px;
            height: 50px;
            float: left;
            position: relative;
            right: 50px;
            background-color: white;
            line-height: 50px;
            text-align: center;
            color: darkgray;
            font-weight: 800;
        }
        
        .box3 {
            width: 150px;
            height: 50px;
            line-height: 50px;
            text-align: left;
            padding-left: 50px;
            float: left;
            color: white;
            font-weight: 800;
            background-color: tomato;
        }
        
        .nav {
            position: absolute;
            border: 1px solid tomato;
        }
    </style>


</head>

<body>

    <div class="nav">
        <div class="box3">
            <span> $1405</span>
        </div>
        <div class="box"></div>
        <div class="box2">
            <span><del>$1243.62</del></span>
        </div>
    </div>


</body>

</html>

伪类选择器

伪类选择器是CSS中一种特殊的选择器,用于选择元素的特定状态或位置。通过使用伪类选择器,可以为元素的不同状态或位置应用不同的样式。以下是一些常见的伪类选择器及其功能:

  • :hover:选择鼠标悬停在元素上时的状态。
css 复制代码
a:hover {
  color: red;
}

当鼠标悬停在链接上时,链接的颜色将变为红色。

  • :active:选择元素被激活(被点击)时的状态。
css 复制代码
button:active {
 background-color: yellow;
}

当按钮被点击时,按钮的背景颜色将变为黄色。

  • :focus:选择元素获得焦点时的状态。
css 复制代码
input:focus {
  border-color: blue;
}

当输入框获得焦点时,输入框的边框颜色将变为蓝色。

  • :first-child:选择作为其父元素的第一个子元素的元素。
css 复制代码
ul li:first-child {
  font-weight: bold;
}

选择ul元素下的第一个li元素,并将其字体加粗。

  • :nth-child(n):选择作为其父元素的第n个子元素的元素。
css 复制代码
ul li:nth-child(odd) {
  background-color: lightgray;
}

选择ul元素下的奇数位置的li元素,并将其背景颜色设置为浅灰色。

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素选择器</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: antiquewhite;
        }
        
        div::after {
            content: '我在后面';
        }
        
        div::before {
            content: '我在前面';
        }
		
		 a:hover {
		      color: red;
		    }
		
		    button:active {
		      background-color: yellow;
		    }
		
		    input:focus {
		      border-color: blue;
		    }
		
		    ul li:first-child {
		      font-weight: bold;
		    }
		
		    ul li:nth-child(odd) {
		      background-color: lightgray;
		    }
    </style>
</head>

<body>

    <div>
        哇哇哇哇
		<br />
		
		<a href="#">Hover me</a>
		  <br><br>
		  <button>Click me</button>
		  <br><br>
		  <input type="text">
		  <br><br>
		  <ul>
		    <li>Item 1</li>
		    <li>Item 2</li>
		    <li>Item 3</li>
		    <li>Item 4</li>
		    <li>Item 5</li>
		  </ul>
		
    </div>
</body>

</html>

当鼠标悬停在链接上时,链接的颜色将变为红色。当按钮被点击时,按钮的背景颜色将变为黄色。当输入框获得焦点时,输入框的边框颜色将变为蓝色。列表中的第一个li元素的字体将加粗,奇数位置的li元素的背景颜色将设置为浅灰色。

相关推荐
开心工作室_kaic7 分钟前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā7 分钟前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年1 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder2 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727572 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart2 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
会发光的猪。2 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客3 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记3 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安3 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js