CSS样式学习

最新推荐文章于 2024-07-20 15:40:46 发布

幼兒园扛把子

最新推荐文章于 2024-07-20 15:40:46 发布

阅读量131

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_53321685/article/details/119954375

版权

文本样式

		<style type="text/css">
			.notice {
				text-align: center;
			}
			
			.notice h1 {
				font-size: 40px;
			}
			
			.notice p {
				font-size: 14px;
			}
			
			.notice a {
				color: #FF6700;
				text-decoration: none;
			}
			
			.notice h4 {
				font-size: 18px;
			}
		</style>
	</head>
	<body>
		<link rel="stylesheet" href="css样式.css"/>
		<!-- 取名字时需要想一想这个功能是干什么的 匹配释义 -->
		<section class="notice">
			<h1>You aren't following anyone yet</h1>
			<p><a href="#">Find friends you</a> already Know from Twitter</p>
			<h4>Check out some of today's popular shots</h4>
		</section>
	</body>
</html>

列表

<style>
	ul li {
		list-style: none; /* 作用是去掉前面的序号或者点 */
	}
	
	</style>
	<body>
		<!-- 无序列表 -->
		<ul>
			<li>衣服</li>
			<li>裤子</li>
			<li>鞋子</li>
		</ul>
		
		<!-- 有序列表 -->
		<ol>
			<li>空调</li>
			<li>电视</li>
			<li>冰箱</li>
		</ol>
	</body>

图片背景

<style type="text/css">
			.item {
				width: 100px;
				height: 200px;
				border: 1px solid #000;
				background: #b72e24 url(https://cdn.dribbble.com/users/42659/screenshots/16321841/media/339c947226356f5fb1ae0de21f7df956.png) center no-repeat;
				background-size: contain;  /* cover是图片充满容器 contain是图片包含在容器内*/
			}
		</style>
	</head>
	<body>
		<div class="item"></div>
	</body>

圆阴影过渡

<style>
		.box {
			width: 100px;
			height: 100px;
			border: 1px solid #B72E24;
			border-radius: 50%;
			transition: all 0.3s; /* 使效果停留时间为3秒 */
			
		}
		
		.box:hover {
			box-shadow: 2px 2px 8px 0 rgba(0,0,0,0.3),
			/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
			inset -10px -10px 10px #FF8500;
			opacity: 0.5; /* 透明度 1为不透明 0为全透明 */
			transform: translate(10px,10px) scale(1.2);  /* translate使水平移动 scale使放大*/
			cursor: pointer; /* 使鼠标放上去变成拇指形状 */
		}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>

两栏布局

<style>
			.container {
				display: flex;
				boerder: 1px solid #000;
			}
			
			.container .main {
				border: 1px solid #B72E24;
				flex: 1; /* 这个在哪里哪个就是自适应布局*/
			}
			
			.container .aside {
				border: 1px solid #FF6700;
				width: 50px; /* 固定宽度 */
			}
			
			
		</style>
	</head>
	<body>
		<!-- flex 来实现两栏布局 -->
		<div class="container">
			<div class="main">幼兒园扛把子</div>
			<div class="aside">你好呀</div>
		</div>
	</body>

垂直水平居中

<style>
		.wrap {
			display: flex;
			align-items: center; /* 垂直居中 */
			justify-content: center; /* 水平居中 */
		}
		</style>
	</head>
	<body>
		<div class="wrap">
			<strong>幼兒园</strong> <span>扛把子</span>
		</div>
	</body>

均匀分布

<style>
		* {
			box-sizing: border-box; /* 使用IE盒模型 */
		}
		
		.ct {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			border: 1px solid #000000;
			margin: 0 auto;
			
		}
		
		.child {
			width: 24%;
			height: 100px;
			border: 1px solid orangered;
			padding: 10px;
			margin-top: 10px;
			margin-bottom: 10px;
		}
		</style>
	</head>
	<body>
		<div class="ct">
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
		</div>
	</body>

绝对定位

<style type="text/css">
			.item {
				position: relative;
				width: 200px;
				height: 200px;
				border: 1px solid #000;
				background: #b72e24 url(https://cdn.dribbble.com/users/42659/screenshots/16321841/media/339c947226356f5fb1ae0de21f7df956.png) center no-repeat;
				background-size: contain;  /* cover是图片充满容器 contain是图片包含在容器内*/
				border-radius: 50%;
			}
			
			.item span {
				position: absolute;
				right: -1px;
				bottom: 15px;
				color: #000;
				background: yellowgreen;
				font-size: 16px;
				font-family: "微软雅黑";
				border-radius: 16px;
				padding: 2px 4px;
				
				
			}
		</style>
	</head>
	<body>
		<div class="item">
			<span class="text">在线</span>
		</div>
	</body>

幼兒园扛把子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式学习

<style type="text/css"> .notice { text-align: center; } .notice h1 { font-size: 40px; } .notice p { font-size: 14px; } .notice a { color: #FF6700; text-decoration: none; } .notice h...
复制链接

扫一扫