返回 CSS浮动的作...... 登陆

CSS浮动的作业

2018-12-03 14:18:01 163

<!DOCTYPE>

<html>

<head>

<meta charset="utf-8">

<title>css中的浮动的作业</title>

<style>

    *{padding:0px; margin:0px;}

.daohang1{list-style:none; width:100px; height:40px; line-height:40px; text-align:center; margin:1px; float:left;box-shadow:0px 10px 30px pink inset; border-radius:6px; position:relative; z-index:100}

.daohang2{list-style:none; width:100px; height:40px; background:pink; line-height:40px; text-align:center; margin:1px; display:none;   position:relative; z-index:100}

.daohang1:hover .daohang2{display:block;}

.clear{clear:both;}

p{display:inline-block; color:red; margin:15px;}

.box1{width:320px; height:320px; background-image:url(images/niurou.jpg); position:relative;}

.box2{width:27px; height:19px; background-image:url(images/hot.gif); position:absolute; top:0px; right:0px;}

</style>

</head>

<body>

<ul>

<li class="daohang1">肉类

<ul>

    <li class="daohang2">牛肉</li>

    <li class="daohang2">羊肉</li>

    <li class="daohang2">猪肉</li>

    </ul>

</li>

<li class="daohang1">蔬菜

<ul>

<li class="daohang2">黄瓜</li>

<li class="daohang2">番茄</li>

<li class="daohang2">萝卜</li>

</ul>

</li>

<li  class="daohang1">饮料

<ul>

<li class="daohang2">苹果汁</li>

<li class="daohang2">牛奶</li>

<li class="daohang2">酸奶</li>

</ul>

</li>

    </ul>

    <div class="clear"></div>

    <p>本店特色</p><b>酱牛肉</b>

    <div class="box1">

    <div class="box2"></div>

    </div>

</body>

</html>

QQ截图20181203141717.jpg

最新手记推荐

• 用composer安装thinkphp框架的步骤 • 省市区接口说明 • 用thinkphp,后台新增栏目 • 管理员添加编辑删除 • 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消 回复 发送
  • PHP中文网