小工具首页导航加四图

原创 2018-11-09 11:51:36 155
摘要:<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <style type="text/css">     *{margin:0px;padding:0px;} 

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8">

<style type="text/css">

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

       .nav{width: 100%;height: 60px;background-color:#1E1E1E;}

       ul li{float:left;background-color:#ccc;list-style: none;width:150px;height:60px;text-align: center;line-height: 60px;font-size:24px;margin:0px 2px;}

       ul li:nth-child(1){margin-left:755px;}

       ul li:hover{background-color:pink;}

       .box1{width:480px;height:270px;background-color: #CCC;float: left;margin:10px 30px;margin-left:180px;text-align: center;}

       .box2{width:480px;height:270px;background-color: #CCC;float: left;margin:10px 30px;text-align:center;}

</style>

</head>

<body>

    <div class="nav">

        <ul>

           <li>首页</li>

           <li>天气查询</li>

           <li>地图查询</li>

           <li>航班查询</li>

           <li>酒店查询</li>

           <li>其他信息查询</li>

        </ul>

    </div>

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

    <div class="box1">天气查询图</div>

    <div class="box2">地图查询图</div>

    <div class="box2">航班查询图</div>

    <div class="box2">其他信息查询图</div>

</body>

</html>


批改老师:灭绝师太批改时间:2018-11-09 12:28:04
老师总结:完成的不错,可以将上课知识融入到自己的小案例,继续保持

发布手记

热门词条