其他

其他：1、hover：鼠标移上执行那些样式

cursor：pointer；鼠标光标变成手

2、display：none代表这个元素隐藏；不占位置

block：代表这个元素显示；把span标签变成div

3、visility：hidden隐藏，位置还存在

visible显示

4、overflow：超出部分

visilible：超出部分可见

hidden：超出部分隐藏

scroll：超出出现滚动条

5、透明：opacity：0.5；

-moz-opacity：0.5；

filter：alpha（opacity=50）；

6、圆角：border-radius：5px（代表圆弧直径）；

7、阴影：box-shadow：0 0（阴影出现的位置） 5px（阴影像素） white（阴影色）；

网页

<body>
<!--开头-->
    <div id="head">
         <div id="logowai">
          <div id="logo"><img src="logo1.png" style="200px;height:100px;" /></div>
          <div id="meau">
               <div class="meau1">联系我们</div>
               <div class="meau1">关于我们</div>
               <div class="meau1">新闻动态</div>
               <div class="meau1">产品展示</div>
               <div class="meau1 muea2">首页</div>          
          </div>          
         </div>
         <hr style="color:#f2e5ba; size:1;"/>   
    </div>
    <!--开头结束-->
    <!--大图-->
    <div id="datu">
    <img src="20170516114133939.jpg" width="1200" height="642"/>
        <div id="prev">
        </div>
        <div id="next">
        </div>
    </div>
    <!--大图结束-->
    <!--列表-->
    <div id="tuijianwai">
        <div id="tuijian">公司产品推荐
        </div>
        <div id="youhui">
            <div class="youhuitu">
                <div class="tu1"><img  src="20170518071914505.jpg" width="280" height="180"/></div>
                <div class="wenzi">明星产品推荐</div>
                <div class="neirong">推荐产品</div>
            </div>
            <div class="youhuitu">
                <div class="tu1"><img  src="20170518071914505.jpg" width="280" height="180"/></div>
                <div class="wenzi">明星产品推荐</div>
                <div class="neirong">推荐产品</div>
            </div>
            <div class="youhuitu">
                <div class="tu1"><img  src="20170518071914505.jpg" width="280" height="180"/></div>
                <div class="wenzi">明星产品推荐</div>
                <div class="neirong">推荐产品</div>
            </div>
             <div class="youhuitu">
                <div class="tu1"><img  src="20170518071914505.jpg" width="280" height="180"/></div>
                <div class="wenzi">明星产品推荐</div>
                <div class="neirong">推荐产品</div>
            </div>
            
        </div>
    </div>
    <!--列表结束--> 
    <div style="clear:both"></div>
     <!--qita -->
    <div id="qitawai">
        <div id="qita">
            <div class="list">
                <div class="list-title">
                    <div class="bt">产品展示</div>
                    <div class="bt-">更多>></div>
                </div>
                <div class="list-tp"><img  src="20170516071750947.jpg" width="280" height="269"/></div>
                <div class="list-wz">臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。</div>
            </div>
                        <div class="list">
                <div class="list-title">
                    <div class="bt">新闻动态</div>
                    <div class="bt-">更多>></div>
                </div>
                <div class="list-tp"><img src="20170519022757809.jpg" width="280" height="269"/></div>
                <div class="list-wz">怎样才能成为易瘦体质！有些人怎么吃都不胖，有些人喝水就会长肉，综其原因是体质不同，易瘦体质的人是属于那种怎么吃都不胖的，而且每个人</div>
            </div>
            <div class="list">
                <div class="list-title">
                    <div class="bt">关于我们</div>
                    <div class="bt-">更多>></div>
                </div>
                <div class="list-tp"><img src="20170519025058768.jpg"width="280" height="269"/></div>
                <div class="list-wz">臻体纤美坐落于美丽的江北水城，多年来致力于减肥，保健行业，拥有专业的项目研发中心，与国……</div>
            </div>
            <div class="list">
                <div class="list-title">
                    <div class="bt">联系我们</div>
                    <div class="bt-">更多>></div>
                </div>
                <div class="list-tp"><img src="20170515112752777.jpg" width="280" height="269"/></div>
                <div class="list-wz">臻体纤美 公司地址：聊城市东昌府区柳园北路市政办公楼</div>
            </div>

        </div>
    </div>   
     <!--qita结束-->
     <!--yejiao-->
     <div id="yejiao">
         <div class="yj-one">
            <div class="yj">Copyright © 2017-2018 臻体纤美 版权所有　天启网络技术支持</div>
            <div class="yj-two">电话：0635-8240686　邮箱：ztqm001@163.com　地址：聊城市东昌府区市政大楼</div>
        </div>
     </div>
      <!--yejiao结束-->
</body>
样式：
@charset "utf-8";
*{ 
margin:0px auto;
padding:0px;
font-family:微软雅黑;
}
#head{
    1349px;
    height:119px;
    }
    #logowai{
        1200px;
        height:118px;        
        }
        #logo{
            200px;
            height:100px;
            float:left;
            }
        #meau{
            800px;
            height:118px;
            }
        .meau1{ 80px;
        height:80px;
        background-image:url(li_bg.png);
        float:right;
        font-size:13px;
        text-align:center;
        line-height:80px;
        vertical-align:text-bottom;
        color: #b08f23;
        }
        .meau1:hover{ cursor:pointer;
        color:white;
        background-image:url(li_bg_h.png);        
            }
.muea2{ color:white;
        background-image:url(li_bg_h.png);    
}
    #datu{ 
    1200px;
    height:642px;
    margin-top:10px
    }
    #prev{ 
    44px;
    height:44px;
    background-image:url(jiantou.png);
    position:relative;
    top:-343px;
    left:-560px;
    }
    #next{
        44px;
    height:44px;
    background-image:url(jiantou.png);
    background-position:right 44px;
    position:relative;
    top:-387px;
    left:560px;    
        }
    #prev:hover{
        cursor:pointer;
        }
    #next:hover{
        cursor:pointer;
        }
    #tuijianwai{
        1349px;
        height:300px;
        }
    #tuijian{
        1200px;
        height:50px;
        text-align:center;
        line-height:50px;
        vertical-align:middle;
        color:#1E90FF;
        font-weight:bold;
        font-size:22px;
        margin-bottom:10px;
        margin-top:30px;
        }
    #youhui{
        1200px;
        height:300px;
        }
    .youhuitu{
        280px;
        height:300px;
        margin-left:9px;
        margin-right:9px;
        border:1px solid #f2e5ba;
        float:left;
    
        }
    .tu1{
        280px;
        height:180px;
        }
    .wenzi{
        270px;
        height:40px;
        padding:5px;
        font-weight:bold;
        text-align:center;
        line-height:40px;
        vertical-align:middle;
        }
    .neirong{
        270px;
        height:60px;
        padding:5px;
        font-size:13px;
        over-flow:hidden;
        }
    #qitawai{
        1349px;
        height:406px;
        margin-top:10px;
        }
    #qita{
        1200px;
        height:406px;
        }
    .list{
        280px;
        height:406px;
        margin-left:9px;
        margin-right:9px;
        border: 1px solid #f2e5ba;
        float:left;
        }
    .list-title{
        280px;
        height:45px;
        background-color:#b08f23;
        }
    .bt{
        color:white;
        float:left;
        font-weight:bold;
        font-size:15px;
        margin-left:10px;
        line-height:45px;
        vertical-align:middle;
        }
    .bt-{
        float:right;
        font-size:15px;
        margin-right:10px;
        line-height:45px;
        vertical-align:middle;
        }
    .list-tp{
        280px;
        height:269px;
        }
    .list-wz{
        padding:10px;
        260px;
        height:72px;
        text-indent:20px;
        overflow:hidden;
        }
    #yejiao{
        1351px;
        height:122px;
        border: 1px solid #f2e5ba;
        margin-top:50px;
        }
    .yj-one{
        1200px;
        height:30px;
        margin-top:20px;
        }
    .yj{
        1200px;
        height:35px;
        text-align:center;
        line-height:35px;
        vertical-align:text-bottom;
        color:#898989;
        font-size:13px;
        }
    .yj-two{
        1200px;
        height:35px;
        text-align:center;
        line-height:35px;
        vertical-align:text-bottom;
        color:#898989;
        font-size:13px;
        }

但是怎么都修改不了的是菜单的位置，怎样实现它紧贴下边

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/NCL--/p/6986508.html