html和css的小结

来源：互联网发布：插画比赛知乎编辑：程序博客网时间：2024/05/01 01:54

img标签的特殊性：

1、块级元素的表现，有宽和高
2、内联元素的表现，不占一整行

块级元素和内联元素的互换：

display：block | inline | none
block为块级，inline为内联，none不占空间的消失

display：inline-block；（把div变成图片排列形式）

form表单

css层叠样式表：

      外部样式表，内联样式表，嵌入式样式表
               8种选择器：id，class，元素，伪内，伪元素，包含元素，属性，通配符*
               ：before{}     ：after{}
               字体、文字、背景的设置
定位：margin，padding，border，float，position
图片与文字对齐：在图片里设置vertical属性，vertical：middle | top | bottom

局部布局可以用table标签，ul等标签

布局：定宽布局，圣杯布局，流式布局，局部布局，盒子（注意padding和margin）

css3：有兼容性问题，-webkit-（谷歌） -moz-（火狐） -o-
                动画：animation   @keyframes
                渐变：background：gradient
                阴影：box-shadow
                过渡：transition
                字体引用： @font-face

下面这个例子是一个导航效果的实现

 <pre class="html" name="code"><!DOCTYPE html><html><head><title>导航</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="导航.css"></head><body><div class="warp"><ul><li><a href="#">首页</a></li><li class="sec-nav"><a href="#">狗雄联盟</a><ul><li class="subnav"><a href="#">法海</a>      <ul>      <li>小徒弟</li>      <li>白素贞</li>      <li>许仙</li>      <li>小青</li>      </ul></li><li class="subnav"><a href="#">不懂</a><ul>      <li>小徒弟</li>      <li>白素贞</li>      <li>许仙</li>      <li>小青</li>      </ul></li><li  class="subnav"> <a href="#">爱，下来</a>      <ul>      <li>小徒弟</li>      <li>白素贞</li>      <li>许仙</li>      <li>小青</li>      </ul></li></ul></li><li><a href="#">EVE</a></li><li><a href="#">找你妹</a></li><li><a href="#">剑灵</a></li></ul></div></body></html>

外部引用文件导航.css

body{margin: 0px;padding: 0px;}ul{list-style: none;margin-left: -40px;/*visibility: hidden;*/}.warp{width: 600px;margin: 100px auto;height: 43px;background: red;font-size: 0;}.warp>ul>li{/*将元素转化为类图片格式“半妖”*/display: inline-block;width: 20%;height: 100%;text-align: center;/*line-height: 100%;这里100%不行的*/line-height: 45px;font-size: 14px;background: #faa;vertical-align: top;}.warp>ul>li:hover{background: #E5266A;}a{text-decoration: none;font-size: 16px;font-family: "幼圆";font-weight: 500;}.warp a:link,.warp a:visited{color: #fff;text-decoration: none;}.sec-nav>ul{display: none;margin: 0px;padding: 0px;}.sec-nav>ul>li{height: 45px;font-size: 16px;font-family: "幼圆";color: #fff;}.sec-nav>ul>li:hover{background: #faa;cursor: pointer;color: yellow;}.sec-nav:hover ul{display: block;}.s{/*display: none;*//*隐藏可视化，结构保留“隐形的翅膀！”*/visibility: hidden;}.subnav>a:hover{color: yellow;background: #faa;}.subnav>ul{width: 100px;background: lightblue;position: relative;left: 160px;top: -45px;visibility: hidden;padding: 0px;  }/*.subnav>ul>li{width: 25%;display: inline-block; background: lightblue;padding: 0px; }*/.subnav:hover ul{visibility: visible; }.subnav>ul>li:hover{ background: purple; color: red;}

效果为：

当鼠标放在狗熊联盟上时会显示

当把光标放在法海上时会出现

0 0