css学习点总结

最新推荐文章于 2024-09-15 19:00:01 发布

转载最新推荐文章于 2024-09-15 19:00:01 发布 · 92 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qq547372511/p/5797140.html

技术总结换行符

这是一个段落

定义粗体文本 定义斜体文本 ~~定义删除文本~~ ^{定义上标字}_{定义下标字}链接的

说明： shape 热区形状(rect、circle、poly ) coords

第1li
第2li
第3li
第4li
第5li

第几个li
第几个li
第几个li
第几个li
第几个li

我靠左

空二格在开始

我靠左

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>技术总结</title>
</head>
<body>
 换行符
<br />
<p align="left">这是一个段落</p>
<!-- right.center -->
<b>定义粗体文本</b>
<i> 定义斜体文本 </i>
<del>定义删除文本</del>
<sup>定义上标字</sup>
<sub>定义下标字</sub>
<a href="">链接的</a>
<img src="url" width="" height="" alt="">
<!-- 9. 图像热区(扩展)
 -->
<img src="URL"  usemap="# map 名称" />
<map name="map 名称">
    <area shape="形状" coords="坐标值" href="URL" />
</map>

说明：
shape       热区形状(rect、circle、poly )
coords      <!-- 形状的坐标值 -->

<ul>
    <li>第1li</li>
    <li>第2li</li>
    <li>第3li</li>
    <li>第4li</li>
    <li>第5li</li>
</ul>

<ol class="8">
    <li>第几个li</li>
    <li>第几个li</li>
    <li>第几个li</li>
    <li>第几个li</li>
    <li>第几个li</li>
</ol>

<dl>
    <dt>我靠左</dt>
    <dd>空二格在开始</dd>
    <dt>我靠左</dt>
</dl>
<table width="120" height="120"align="center"bgcolor="red" >
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>

</table>
<form >
    <input type="text" name="user">
    <input type="password" name="password">
    <input type="image" name="img" src="">
</form>

<input type="radio" name="sex" value="1" id="male" />
<label for="male">男</label>
<input type="radio" name="sex" value="0" id="female" />
<label for="female">女</label>

</body>
</html>

男女

ef
e>f
e+f
e-f
!>id>class>子>行>块
#ccc 
red
link
visited
hover
active
float:left;
margin-left:12px
padding-top:12px;
font-family:字体;
font-size:12px;
font-weight:bold;
color；red;
text-decoration:none;
/* opacity:0.5; */
boder:2px solid red;
border-radius:12px;
line-heigt；12px;
text-align:center;
text-indent:2em;
/* letter-spacing:-5px;
文字之间的距离 */
background-images:url();
background:url() no-repeat center top;
/* background-origin ： border-box | padding-box | content-box;
background-clip ： border-box | padding-box | content-box | text
ul { list-style-type:disc;}     实心圆
ul { list-style-type:circle;}       空心圆
ul { list-style-type:square;}       实心方块
ul { list-style-type:none;}     不显示项目符号
ol { list-style-type:decimal;}      阿拉伯数字
ol { list-style-type:lower-roman;}      小写罗马数字
ol { list-style-type:upper-alpha;}      大写英文字母
 */
list-style-image :none;
transition-duration: .5s;
/* ease:默认值，逐渐变慢(cubic-bezier(0.25,0.1,0.25,1))
linear:匀速过渡效果(等于 cubic-bezier(0,0,1,1))
ease-in:加速的过渡效果(等于 cubic-bezier(0.42,0,1,1))
ease-out:减速的过渡效果(等于 cubic-bezier(0,0,0.58,1))
ease-in-out:加速然后减速(等于cubic-bezier (0.42, 0, 0.58, 1.0))
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。
可能的值是 0 至 1 之间的数值。(动画速度自定义) */
/* transition-delay:.1s;
animation-timing-function： ease | linear | ease-in | ease-out | ease-in-out
 */
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态
static : 无定位，默认值
absolute：绝对定位
relative ： 相对定位
fixed：固定定位

                   切图部局的总结

2.作图没有归纳好就开始做了。（后来再做归纳）
3.再做图的过程中发现问题时，会停留5到10钟做 
  思考，再去找答案。
4.通过作图发现自己记住的标签属性太小了，做一
  段不知道了，要去查资料。
5.打字速度慢了点。
6.总结起来还是要多做多练了。
7.希望同学们或老师有什么好的方法教教我帮帮我。

转载于:https://www.cnblogs.com/qq547372511/p/5797140.html