19.04.15html5培训第一天

最新推荐文章于 2024-10-01 22:08:10 发布

Nettie777

最新推荐文章于 2024-10-01 22:08:10 发布

阅读量135

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/sinat_41732109/article/details/89313804

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

上午

1.head

<head>
		<meta charset="utf-8" />
		<title>标题</title>
	</head>

2.字体

	<!--不同字体-->
		<h1>你</h1>
		<h2>好</h2>
		<h3>漂</h3>
		<h4>亮</h4>
		<h5>啊</h5>
		<h6>喂</h6>
		<b>定义字体加粗</b>
		<!--换行标签 选中ctrl+？ 变成注释代码-->
		<br  />
		<big>定义加粗字体</big>
		<button>按钮</button>```

在这里插入图片描述
3.按钮&标签

<button>按钮</button>
		<div style="width: 100px;height: 100px;background: pink;">一只可爱的小标签</div>

在这里插入图片描述
4.图片
需要先拷到img文件夹里

<!--图片-->
		<img src="img/QQ图片20180211235851.jpg" style="width: 500px;"/>

5.无序列表&有序列表

<!--无序列表-->
		<ul>
			<li>段宜恩</li>
			<li>王嘉尔</li>
		</ul>
		
	    <!--	有序列表-->
		<ol>
			<li>林在范</li>
			<li>朴珍荣</li>
		</ol>

在这里插入图片描述
6.input

<!--搜集用户信息，type类型-->
		<input type="text" /><br  />
		<input type="password" /><br  />
		<input type="range" /><br  />
		<input type="date" /><br  />
		<input type="week" /><br  />

在这里插入图片描述

下午

1.使用.css链接html的样式
html的内容

<head>
		<meta charset="UTF-8">
		<title>基本属性</title>
		<!--导入css文件，链接起来-->
		<link rel="stylesheet" href="css/shuxing.css" />
	</head>
	<body>
		<div class="box"></div>
	</body>

.css中的内容

@charset "utf-8";

body{
	background: lavenderblush;
}

.box{
	width: 200px;
	height: 200px;
	background: red;

2.外边距设置

 外边距 顺时针设置
	 一个参数：上、下、左、右
	 两个参数：上下、左右
	 三个参数：上、左右、下
	 四个参数：上、右、下、左
	margin: 50px 200px 100px 20px;

在这里插入图片描述

 /*auto自适应居中*/
	margin: 50px auto;

在这里插入图片描述
3.内边距

4.边框

/*边框：边框宽度 类型（solid实线 dashed虚线）颜色*/
	border: 10px solid cadetblue;

在这里插入图片描述
圆角

	/*圆角半径 */
	border-radius: 25px;

在这里插入图片描述

50%就是圆
border-radius: 50%;

在这里插入图片描述
5.阴影

/*阴影：X轴偏移量 Y轴偏移量（左上为0点）羽化值 颜色*/
	box-shadow: 10px 10px 10px darkgreen;

在这里插入图片描述
6.
在.box中

background: url(../img/ad.jpg);
	/*背景图片大小*/
	background-size: 100% 100%;

在这里插入图片描述

/*旋转,+顺时针,-逆时针*/
	transform: rotate(-30deg);

在这里插入图片描述
鼠标悬停旋转

/*鼠标停在box上时*/
.box:hover{
	transform: rotate(360deg);
}

7.动画效果

/*设置动画效果：名称 多少秒执行一次 动画类型（无限循环+匀速运动）*/
	animation: roo 1s infinite linear;

/*实现动画效果，和设置动画是一起有的*/
@keyframes roo{
	from{}
	to{transform: rotate(360deg);}
}

左右摇摆30度

@keyframes roo{
	0%{}
	25%{transform: rotate(30deg);}
	50%{transform: rotate(0deg);}
	75%{transform: rotate(-30deg);}
	100%{transform: rotate(0deg);}

Nettie777

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录