其他
其他: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="width: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{ width:1349px; height:119px; } #logowai{ width:1200px; height:118px; } #logo{ width:200px; height:100px; float:left; } #meau{ width:800px; height:118px; } .meau1{ width: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{ width:1200px; height:642px; margin-top:10px } #prev{ width:44px; height:44px; background-image:url(jiantou.png); position:relative; top:-343px; left:-560px; } #next{ width: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{ width:1349px; height:300px; } #tuijian{ width: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{ width:1200px; height:300px; } .youhuitu{ width:280px; height:300px; margin-left:9px; margin-right:9px; border:1px solid #f2e5ba; float:left; } .tu1{ width:280px; height:180px; } .wenzi{ width:270px; height:40px; padding:5px; font-weight:bold; text-align:center; line-height:40px; vertical-align:middle; } .neirong{ width:270px; height:60px; padding:5px; font-size:13px; over-flow:hidden; } #qitawai{ width:1349px; height:406px; margin-top:10px; } #qita{ width:1200px; height:406px; } .list{ width:280px; height:406px; margin-left:9px; margin-right:9px; border: 1px solid #f2e5ba; float:left; } .list-title{ width: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{ width:280px; height:269px; } .list-wz{ padding:10px; width:260px; height:72px; text-indent:20px; overflow:hidden; } #yejiao{ width:1351px; height:122px; border: 1px solid #f2e5ba; margin-top:50px; } .yj-one{ width:1200px; height:30px; margin-top:20px; } .yj{ width:1200px; height:35px; text-align:center; line-height:35px; vertical-align:text-bottom; color:#898989; font-size:13px; } .yj-two{ width:1200px; height:35px; text-align:center; line-height:35px; vertical-align:text-bottom; color:#898989; font-size:13px; }
但是怎么都修改不了的是菜单的位置,怎样实现它紧贴下边