其他：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; }
但是怎么都修改不了的是菜单的位置，怎样实现它紧贴下边
