前端小知识区域

最新推荐文章于 2023-09-21 09:19:42 发布

我是个菜鸡.

最新推荐文章于 2023-09-21 09:19:42 发布

阅读量245

点赞数

分类专栏：前端文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_45988242/article/details/113309876

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.水平居中垂直居中

居中记住啊！！！！margin上下有值左右auto就居中了！
垂直居中：line-height: 与父元素一样如果父元素没设置height 那么什么值都可以

2.行内元素不能设置宽高因为不生效

3.圆角和圆形

在这里插入图片描述

4.li:before 就是在每个li前操作！

5.placeholder

  <input type="text" name="Userame" placeholder="用户名" id="Username">

在这里插入图片描述
就是在未输入东西的时候文本框显示的内容

6.背景图

background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）；
background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）；
background-size ：100px 100px; // 调整图片到指定大小；
background-size ：50% 100%; // 调整图片到指定大小，百分比相对于包含元素的尺寸。

一些背景的属性设置

7.line-height

在这里插入图片描述
让line-height=0 可以消除上述状况

排版图片

在这里插入图片描述


	<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淡入淡出</title>
		<script src="js/jquery-3.5.1.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
			}

			body {
				background: #000;
			}

			.wrap {
				margin: 100px auto 0;
				width: 630px;
				height: 394px;
				padding: 10px 0 0 10px;
				background: #000;
				overflow: hidden;
				border: 1px solid #fff;
			}
			.wrap li {
			            float: left;
			            margin: 0 10px 10px 0;
			        }
					   
					        .wrap img {
					          
					            border: 0;
					        }
		</style>
	</head>
	<body>
		<div class="wrap">
			<ul>
				<li>
					<a href="#"><img src="img/01.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="img/02.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="img/03.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="img/04.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="img/05.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="img/06.jpg" alt="" /></a>
				</li>
			</ul>
		</div>

		<script>
			$(function() {


			})
		</script>
</html>