CSS列表标签+图片设置+盒子模型

最新推荐文章于 2023-05-13 23:49:27 发布

pigpigpi

最新推荐文章于 2023-05-13 23:49:27 发布

阅读量3.2k

点赞数 2

文章标签：列表 html css css3 animation

本文链接：https://blog.csdn.net/qq_40733968/article/details/107216244

版权

一.CSS列表标签

1.列表属性

1.设置无序列表:
		<ul>
			<li>无序列表项1</li>
			<li>无序列表项2</li>
		</ul>
2.设置有序列表:
		<ol>
			<li>有序列表项1</li>
			<li>有序列表项2</li>
		</ol>

以小写字母为有序列表前的选项为list-style-type: lower-alpha;

列表属性:
1.list-style-type设置列表前的图形
2.list-style:none和list-style-type: none;取消列表前的图形设置
3.list-style-image:url(a.jpg); 列表的标记图片
4.list-style-position: inside/outside;  列表的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul{
				/* 设置无序列表前的图形为圆形 */
				list-style-type: disc;
				
			}
			ol{
				/* 设置有序列表前没有顺序 */
				list-style-type: none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>无序列表项1</li>
			<li>无序列表项2</li>
		</ul>
		<ol>
			<li>有序列表项1</li>
			<li>有序列表项2</li>
		</ol>
	</body>
</html>

在这里插入图片描述

2.行高的设置

line-height设置行高
属性取值:
  normal---浏览器默认的行高
  数字--设置行高带上单位
  百分比----表示行高是该元素字体大小的百分比

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				/* 添加下划线 */
				text-decoration: underline;
				/* 行高 */
				line-height: 2em;
				/* 首行缩进 */
				text-indent: 2em;
				background-image: url(img/girl1.jpg);
			}
		</style>
	</head>
	<body>
		<p>根据北朝兵制，花府应该是军事贵族，所以必须上战场，否则政治特权和经济特权
		（授田）都没有了。花木兰的晋升速度也可以看出来她的出身。花木兰不是动员兵“大头兵”
		，而是具装骑兵。骑兵从军除了带着武器和马匹，还要从家里带一队部曲伺候自己和战马、
		兵器。花府应该是小贵族，部曲和骑兵装备是最重要家当。如果把家当交给别人代劳服役，
		深怕家当被人拐跑，失去军事贵族身份，一步从小地主跌落到自耕农甚至更糟。所托非良人，
		他直接落草为寇，花家怕是要杀头。所以花木兰必须替父从军。花木兰近身的战友都是从家
		里带出来的私兵奴仆，对二小姐的身份心知肚明。隔壁战友是其他骑士老爷及随从，保持了
		一定的社交距离，不知道花木兰的底细是很正常的。
		</p>
	</body>
</html>

二.图片设置

1.彩色图片变为黑白

filter: grayscale(100%); 
filter: gray;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>彩色图片变成黑白</title>
		<style type="text/css">
			img{
				filter:grayscale(100%);
				filter: gray;
			}
		</style>
	</head>
	<body>
		<div id="">
			<img src="img/img/girl1.jpg" >
		</div>
	</body>
</html>

在这里插入图片描述

2.旋转图片

		transform旋转图片:
		transform: rotate(30deg);向右翻转30度
		transform:translate(50px,100px) 把图片从左往右移动50px,从上到下移动100px
		transform: scale(1.5,2);把宽度变为1.5倍,长度变为2倍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				/* transform: rotate(30deg); */
				transform: translate(50px,100px);
				/* 把宽度变为1.5,长度变为2 */
				transform: scale(1.5,2);
			}
		</style>
	</head>
	<body>
		<img src="girl1.jpg" width="" height="" >
	</body>
</html>

3.过渡动画

过渡的属性 过渡的时长 延时加载 过渡的速率
transition: all 1s 0s linear;

过渡的速率:
		linear	规定以相同速度开始至结束的过渡效果。
		ease	规定慢速开始，然后变快，然后慢速结束的过渡效果。
		ease-in	规定以慢速开始的过渡效果
		ease-out	规定以慢速结束的过渡效果。
属性:
transition-property把鼠标指针放到 div 元素上，会产生带有平滑改变元素宽度的过渡效果,多个需要过滤的元素以逗号分隔
transition-duration过渡的持续时间
transition-delay延迟加载
transition-timing-function加载速度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过渡动画</title>
		<style type="text/css">
			#div1 {
				width: 400px;
				height: 300px;
				/* 边框: 边框粗细 边框线的颜色 边框是实线还是虚线 */
				border: 1px aqua solid;
				background-color: pink;
				/* 过渡的属性 过渡的时长 延时加载 过渡的速率*/
				transition: all 1s 0s linear;
			}

			#div1:hover {
				width: 100px;
				height: 600px;
				border: 1px red solid;
				transition: all 1s 1s linear;		
			}
			
			#div2{
				width: 100px;
				height: 100px;
				border: 1px black solid;
				background-color: #00FFFF;
				/* 设置鼠标不在框内时如何回归到初始状态 */
				transition-property: width,height,background-color: ;
				transition-duration: 1s;
				transition-delay: 0s;
				transition-timing-function: linear;
			}
			#div2:hover{
				width: 200px;
				height: 200px;
				border: 1px #FF0000 solid;
				
				transition-property: width,background-color,height;
				transition-duration: 1s;
				transition-property: 0s;
				transition-timing-function: linear;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
	</body>
</html>

在这里插入图片描述

4.transform动画

			位移动画  左右位置，上下位置
			transform: translate(300px,200px);
			transform: translateX(100px);
			transform: translateY(100px);
			旋转动画
			transform: rotate(45deg);
			transform: rotateX(45deg);
			缩放动画
			transform: scale(2);
			transform: scaleX();
			扭曲动画
			transform: skew(45deg);
			transform: skewX(35deg);
			
first-child标签的第一个位置,指的是父元素的第一个子元素
父元素的第n个子元素 div:nth-child(2)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border: 1px black solid;
			}
			div:first-child{
				background-color: red;
				/* 位移动画 左右移动 上下移动 */
				/* transform: translate(200px,100px); */
				transition: transform 1s;
			}
			/* 让第一个块向右移动300px */
			div:first-child:hover{
				transform: translate(300px,0px);
				transition: transform 1s;
			}
			/* 旋转动画 */
			div:nth-child(2){
				background-image: url(img/img/girl1.jpg);
				transform: rotate(45deg);
			}
			/* 缩放动画 */
			div:nth-child(3){
				background-image: url(img/img/girl1.jpg);
				transform: scale(0.5);
			}
			/* 扭曲动画 */
			div:nth-child(4){
				background-image: url(img/img/girl2.jpg);
				transform: skew(45deg);
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
		<div id="div4"></div>
	</body>
</html>

在这里插入图片描述

5.修改元素自带样式

更改文本框的边角为圆角
border-radius: 5px

分别更改四个边角为圆角
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修改元素自带样式</title>
		<style type="text/css">
			/* 修改文本框 */
			input{
				width: 200px;
				height: 200px;
				border: 1px black solid;
				/* 更改文本的边角为圆角*/
				/* border-radius: 5px; */
				/* 左上 */
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
				}
				
				button{
					background-color: red;
					width: 100px;
					border-top-left-radius: 5px;
					border-top-right-radius: 5px;
					border-bottom-left-radius: 5px;
					border-bottom-right-radius: 5px;
				}
			
		</style>
	</head>
	<body>
		<!-- 文本框 -->
		<input type="text" name="" id="" value="" />
		<!-- 按钮 -->
		<button type="button">注册</button>
	</body>
</html>

在这里插入图片描述

三.自定义动画

1.概述

自定义动画animation
1.用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
       0% 是动画的开始，100% 是动画的完成。
2.使用关键字@keyframes 来给动画起一个名字
3.使用关键字animation来开启动画,后面跟的是 动画名 动画持续时间 延迟加载时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 300px;
				border: 1px black solid;
				/* 开启动画 */
				/*        名字    动画持续时间   延迟加载时间*/
				animation: myfirst 2s 2s;
			}
			@keyframes myfirst{
				from{
					background-color: red;
				}
				to{
					background-color: yellow;
				}
			}
		</style>
	</head>
	<body>
		<div id="div1">
			
		</div>
	</body>
</html>

2.详细属性

  animation-name: myfirst  规定 @keyframes 动画的名称
  animation-duration: 2s   规定动画持续时间,默认为0,即播放周期
  animation-timing-function: linear  规定动画播放速率
  animation-iteration-count: 3  规定动画播放次数
  animation-direction: alternate  规定动画是否在下一周期逆向播放,默认为normal
  animation-delay: 1s  延迟加载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 300px;
				border: 1px black solid;
				/* 规定@keyframes的名字 */
				animation-name: myfirst;
				/* 规定动画持续时间,默认为0,即动画播放的周期 */
				animation-duration: 4s;
				/* 规定动画播放的速率 */
				animation-timing-function: linear;
				/* 规定动画播放次数 */
				animation-iteration-count: 2;
				/* 规定动画是否在下一周期逆向的播放 */
				animation-direction: alternate;
			}
			@keyframes myfirst{
				from{
					background-color: red;
				}
				to{
					background-color: yellow;
				}
			}
		</style>
	</head>
	<body>
		<div id="div1">
			
		</div>
	</body>
</html>

3.动画的播放

1.animation-fill-mode: forwards  动画播放完停留在那一帧, backwards停留在最开始的那一帧,forwards停留在最后一帧
2.animation-direction  动画的播放
	normal	默认值。动画按正常播放。
	reverse	动画反向播放。
	alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
	alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
3. 动画开启或暂停 animation-play-state: running;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				border: 1px black solid;
				background-color: deeppink;
				/* 开启动画 
				animation:myfirst 2s 1s;*/
				animation-name: myfirst;
				animation-duration: 2s;
				animation-timing-function: linear;
				animation-delay: 1s;
				/* 动画执行完停留
				 backwards停留在最开始的那一帧
				 forwards停留在最后一帧
				 */
				animation-fill-mode: forwards;
				/* 反转播放 */
				animation-direction: reverse;
				animation-play-state: running;
			}

			@keyframes myfirst {
				from {
					background-color: deeppink;
				}

				to {
					background-color: yellow;
				}
			}
		</style>
	</head>
	<body>
		<div id="div1">

		</div>
	</body>
</html>

4.以百分比形式表现动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border: 1px #000000 solid;
				/* 开启动画 */
				animation-name: myfirst;
				animation-duration: 4s;
				animation-direction: alternate;
				animation-delay: 1s;
				animation-play-state: running;
				animation-fill-mode: forwards;
			}
			@keyframes myfirst{
				0%{
					background-color: red;
				}
				25%{
					background-color: yellow;
				}
				50%{
					background-color: aliceblue;
				}
				75%{
					background-color: black;
				}
				100%{
					background-color: aqua;
				}
			}
		</style>
	</head>
	<body>
		<div id="div1">
			
		</div>
	</body>
</html>

5.漂浮广告页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#out{
				width: 300px;
				height: 400px;
				position: absolute;
				background-image: url(img/img/girl1.jpg);
				/* 让图片铺满在div上 */
				background-size: cover;
				
				animation-name: gk;
				animation-duration: 10s;
				animation-delay: 1s;
				/* 无穷次 */
				animation-iteration-count: infinite;
				animation-play-state: running;
				animation-direction: alternate;
			}
			
			#out:hover{
				/* 当鼠标悬浮时,暂停动画  */
				animation-play-state: paused;
				/* 更改鼠标样式为小手样式 */
				cursor: pointer;
			}
			
			#out > #in{
				color: wheat;
			}
			@keyframes gk{
				0%{
					background-image: url(img/img/girl2.jpg);
					left: 100px;
					top: 100px;
				}
				25%{
					background-image: url(img/img/girl3.jpg);
					left: 200px;
					top: 200px;
				}
				50%{
					background-image: url(img/img/girl4.jpg);
					left: 300px;
					top: 300px;
				}
				75%{
					background-image: url(img/img/girl5.jpg);
					left: 500px;
					top: 500px;
				}

			}
		</style>
	</head>
	<body>
		    <div id="out">
		        <div id="in">
		            <span onclick="closeAd()">关闭</span>
		        </div>
		    </div>
		
		    <script type="text/javascript">
		        function closeAd() {
		            document.getElementById("out").style.display = "none";
		        }
		    </script>
	
	</body>
</html>

四.盒子模型

1.概述

所有HTML元素可以看作盒子

在这里插入图片描述

指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				width: 100px;
				height: 200px;
				border: 1px black solid;
				padding: 50px;
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<h1>一级标题</h1>
		<p>啊哈,芜湖,起飞</p>
		<h2>二级标题</h2>
	</body>
</html>

在这里插入图片描述

2.弹性盒子的设置

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#out {
				width: 600px;
				height: 600px;
				border: 1px black solid;
				/* 将外层设置为弹性盒子 */
				display: flex;
				/* justify-content: center; */
				/* justify-content:space-around; */
				/* flex-direction: row; */
				/* 当所有子层的宽度和高度超过了盒子是否要换行 */
				/* flex-wrap:wrap;
				align-content:space-between; */

			}

			.in {
				width: 200px;
				height: 200px;
				border: 1px pink solid;
				/* 让盒子里面的子层自动适配,默认就会自动适配 */
				/* margin:20px auto; */
			}
		</style>
	</head>
	<body>
		<div id="out">
			<div id="in1" class="in">1</div>
			<div id="in2" class="in">2</div>
			<div id="in3" class="in">3</div>
			<div id="in4" class="in">4</div>
		</div>
	</body>
</html>

3.overflow属性

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow属性有以下值：
		visible 默认值。内容不会被修剪，会呈现在元素框之外。
		hidden 内容会被修剪，并且其余内容是不可见的。
		scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

注意: overflow 属性只工作于指定高度的块元素上。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div{
				background-color: #808080;
				overflow: scroll;
			}
		</style>
	</head>
	<body>
		<div id="div">
			<p>文本内容可以滚动,滚动条是垂直方向</p>
		</div>
	</body>
</html>

五.案例

1.鼠标悬浮上拉一个层

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#out{
				width: 100px;
				height: 200px;
				background-image: url(img/img/girl1.jpg);
				background-size: 100% 100%;
				overflow: hidden;
				
			}
			#out:hover{
				background-size: 120% 120%;
			}
		</style>
	</head>
	<body>
		<div id="out">
			<div id="in">鼠标悬浮上拉一个层</div>
		</div>
	</body>
</html>

2.旋转相片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background-color: pink;
			}
			div{
				height: 200px;
				width: 200px;
				border-color: #000000;
				border-width: 10px;
				border-style: solid;
				float: left;
				margin-left: 50px;
				box-shadow: 10px 10px 30px yellow;
			}
			#div1{
				background-image: url(img/img/girl1.jpg);
				background-size: cover;
				transform: rotate(15deg);
				transition: transform 2s;
			}
			#div1:hover{
				background-image: url(img/img/girl2.jpg);
				background-size: 100% 100%;
				transform: rotate(45deg);
				transition: transform 1s;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
		<div id="div4"></div>
		<div id="div5"></div>
	</body>
</html>

六.总结

1.背景

属性	描述
background-color	设置背景颜色
background-image	设置背景图片，url
background-repeat	设置背景图片是否重复，no-repeat
background-size	放大/缩小背景图片以铺满整个div，cover
background-attachment	设置背景图片是否滚动，默认滚动scoll，fixed固定
background-position	设置背景图片的位置

2.文本

属性	描述
color	设置文本颜色
letter-spacing	设置字符间距
word-spacing	设置字间距
line-height	设置行高，文本垂直居中
text-align	设置水平对齐方式
text-decoration	设置文本修饰
text-shadow	设置文本阴影
text-indent	设置首行缩进
text-transform	设置文本的大小写

3.字体

属性	描述
font-family	设置字体系列
font-style	设置字体风格
font-size	设置字体尺寸
font-weight	设置字体的粗细

pigpigpi

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
CSS列表标签+图片设置+盒子模型

一.CSS列表标签1.简介1.设置无序列表: <ul> <li>无序列表项1</li> <li>无序列表项2</li> </ul>2.设置有序列表: <ol> <li>有序列表项1</li> <li>有序列表项2</li> </ol>以小写字母为有序列表前的选项为list-style-type: lower-alph
复制链接

扫一扫