html的的归纳点

标签：

html+css的一些小点：

1.文字环绕图片：

<p style="height:400px;width:600px; background:blue;">
<img src=1.jpg align="left" Style="width:300px;height:300px;"/>
长江日报消息，21日中午，一辆满载小龙虾的货车在汉宜高速
</p>

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

2.锚点应用

连接的url 是 #name 

<a href="#mm12" style="text-decoration:none ;">登录</a>

<a name="mm12" style="text-decoration:none ;" >  新用户注册</a>

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

3.图片滚动：纯标签

<marquee direction=right scrolldealy=90>
<ul>
<li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li>
</ul>
</marquee>

<marquee>标签的一些属性;

       3-1.direction属性(right,left,up,down) >> loop 循环次数(infinite是不循环) loop=3

       scrollamount 速度=50  scrolldelay 延时(单位是毫秒)=500(毫秒)

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

4.对于 bs的 应用和 字符图标

<link href="css/font-awesome.min.css" rel="stylesheet" />

<span><i class="fa fa-rmb"></i> </span>

直接 使用的 字体的 属性 来调

span{
font-size:25px;
color:red;
}

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

5.为了让 img 中的 图片 保持一致的 大小，

使用 width=600px height=200px 加到 img 标签里面 

<img src=33.png align=left width=146px height=210px/>

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

6.表格 ：没有什么

td{
font-size:12px;
text-align:center;

}  对齐 和 为了 让字居中 padding：5px 5px 5px  5px;

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

7.导航条：为了 让 ul li 更加具体和方便;

#nav{height:30px;margin:auto;background:#acd6ff;
width:600px;border-bottom:1px solid black;}
#nav ul{position:absolute;
top:-7px;padding-left:0px;}
ul li{height:30px;width:99px;list-style:none;
display:inline-block;margin:0;padding:0px;   注意 是99+1=100 的平分600才行
text-align:center;line-height:30px;               border 的宽度 是算入 盒子的
border-right:1px solid black;}
ul #kk{background:blue;}
li:hover{background:blue;}

_____________

<div id=nav>
<ul>
<li id=kk>全组</li><li>全组</li><li>
全组</li><li>全组</li><li>全组
</li><li>全组</li>
</ul>
</div>

————————————————————————————

ul li{
margin-right:2px;
list-style:none;
display:inline-block;
line-height:38px;
background:#C30;
padding:0 6px 0 6px;
text-align:center;
}

——————————————————————————————————————————————————
对于导航框的 下部 不见了，可以用 border-bottom:5px solid #白色             |

下面的 连接 就是 盒子的                                                                                                             |

border:1px solid #099;                                                                                                           |
margin:-3px 5px 15px 5px ;                margin-top:-8px;实现 上移动                                           |

——————————————————————————————————————————————————

对于有下拉的 ul li

ul li ul{display:none;}
ul li:hover ul{
display:block;
}

直接 把样式改成这样就行了， 就可以 做成 下拉的效果

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

8. 对于 已经确定的格式， 下划线是u 和 pre 解决 空格问题

<u> <pre> <font>游戏特征:</font>奇幻 <font>游戏特征:</font>奇幻 </pre>
</u>

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

9.在 一个 input 的text框里面加 图标

#input1{line-height:23px;border:1px solid #000;
height:23px;width:200px;

background:url(search.gif) no-repeat;padding-left:25px; 这个padding 就是 打字时 会空出 图标的 距离
}    

 <input id=input1 type="text" value="笔记本"/>

input框的 <input type="image" src="zuo.gif">可以 加入 背景的

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

10.对于首 字的 大小，可以使用 font-size：3em; 就会 形成 下沉的效果

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

11.一般的 table 都是 嵌入到 form里面，解决 对齐的 input

label{
width:60px;height:30px;
text-align:left;}

.inputE{
width:160px;
height:20px;
}
.row{width:300px;height:30px;}  div把 两个 label和input 包进去了

<div id="login">
<form action="checklogin.do" method="post">
<div class="row">
<label for="username">用户名:</label>
<input type="text" class="inputE" id="username" />
</div>
</form>

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

12.对于框内部的 框

<frameset rows="50,*" frameborder="0">
<frame src="nav3.html" />

<frameset cols="300,*" frameborder="0">
<frame id=ll src="left2.html" name=left />
<frame src="网吧用户查询1.html" name=right /> 这里的 right 可以作为 target="right" 
</frameset>

</frameset>

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

13.QQ相册的 功能

#left{width:70%;height:350px;
overflow:hidden;float:left;text-align:center;margin:0 15px 0 15px;}

#left span{ display:block}
#left img{ width:390px; height:280px; border:7px solid #FFF;}
#left li{ display:block; height:350px;} 被隐藏的 元素，一律 变成 block

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

16.文字阴影：

<div style="text-shadow:#333 5px 0px 2px;">
文字阴影 颜色 水平
</div>

border-radius：5px;

box-shadow: inset 0px 0px 20px black;

 1 .section 定义文档或者应用程序中的区域，新闻部分之类

2.nav 定义主导航区域 3.article 也是独立包裹 博客内容 4.aside 侧边栏 5.header footer

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

17. 这是 最终的 变形结果div：hover{ transform:translate(90px ,0)；移动

                                        transform:rotate(90deg);  转动 transform:scale(1.5) 变大}

                                     div{要加上一句：translation：all 3s ease 0s;变形的过程的}

      动画的 就是 div{animation:函数名 1.5s infinite ease-in；}  

             @webkit-keyframes 函数名{0%{需要改变的东西}；10%{}；}                  

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

html的的归纳点

标签：

原文地址：http://www.cnblogs.com/yyjxxd/p/5582006.html