HbuilderX 静态常规操作 快忘快看

一、HbuilderX的静态使用

自动缩进快捷键：Ctrl+K

1.style里的常用标签内容

width: 100px;
设置宽度
height: 100px;
设置高度
padding:5px;
内边距(顺时针上右下左)
margin:5px;
外边距(顺时针上右下左)
border: 1px solid #FF0000;
边线: 线粗 实线 颜色
background-color: black;
设置背景颜色
text-align: center;
文字居中
font-size: 13px;
文字大小
line-height: 20px;
线高,控制盒子的高
display: inline-table;
默认流式布局 类似表格布局 控制表格大小
color: red;
设置字体颜色
font-weight: bold;
设置字体加粗
list-style: none;
去掉菜单目录ul前的序列标志
float: left;
左浮动,排在一行上
border-radius: 15px;
radius圆半径,常设置圆角方体
li:hover{background-color: aqua;}
鼠标移入触发,移出后取消

2.常用标签理解

<ul><li></li></ul>
ul是菜单 li包在ul里 是菜单列表的行
<a href="www.baidu.com">点击</a>
用a标签,嵌入网址,点击连接写在a标签内
<a target="_blank"></a>
写在a标签内,网址跳到下一个网页
<hr style="border: 1px dashed;"/>
dashed虚线,默认是直线
<table><tr><td></td></tr></table>
table表 tr行 td列
<img src="images/qr.png" />
图片的使用
<h1>标题</h1>
标题1234567越大越小
<audio src="audio/li.mp3" controls="controls"></audio>
音乐的插入,controls播放音乐控制台
<video src="" controls="controls"></video>
视频的插入,controls播放视频控制台

3.静态动画效果(全在style里执行)

1.实现移动

1.通过position改变其相对位置
position:relative;
2.给定动画(animation)判断样式 名称 时间 反复
animation: mymove 1s infinite;
3.设定动画脚本及关键帧(keyframe)

@-webkit-keyframes mymove{
    from{top: 0px;}
    to{top: 300px;}
   }

2.实现拉伸

1.通过position改变其相对位置
position:relative;
2.通过transition来拉伸持续的效果
transition: height 2s;
3.拉伸的效果不是使用关键帧来触发动画执行,利用鼠标,注意写法,样式后:hover(鼠标移入触发才能动起来)

.transitionbox:hover{
    height: 300px;
   }

3.实现旋转

1.给定动画(animation)判断样式 名称 5s执行一次时间 linear线性执行 0s动画延时 infinite 重复循环
animation: earth-rotation 5s linear 0s infinite ;
2.设定动画脚本及关键帧(keyframe)

@-webkit-keyframes earth-rotation{
    /* 变形动画 transform  旋转是rotate 旋转单位是度(deg)*/
    from{transform: rotate(360deg);}
    to{transform: rotate(0deg);}
   }

3.设置鼠标移入时,地球暂停播放,移除,继续运行

/* animation-play-state 播放的状态 */
  .ears-rotation:hover{
   animation-play-state: paused ;
  }