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%{}；}
》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》