一个Web布局实例

来源：互联网发布：淘宝的旗舰店可信吗编辑：程序博客网时间：2024/04/30 03:48
<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">        $(function(){            //让所有链接加上默认样式            $("#nav ul li a").addClass("linkstyle");            $("#nav ul li ul").css("display","none");            $("#nav ul li").each(function() { //为每一个#menu中每一个li元素绑定click事件                $(this).bind(                    "mouseover",                    function()                    {                        $("#menu li a").addClass("curstyle");// 事件的方法为：（1）将当前li中的a加上curstyle样式，                        $(this).siblings("li").find("a").removeClass("curstyle");//（2）将当前li的其他所有兄弟li中的a去掉curtyle样式。                        $(this).hover(function(){                            $(this).find("ul:eq(0)").fadeIn(100)                        },                        function(){                            $(this).find("ul:eq(0)").fadeOut(100)                        });                    });              });            })        </script>        <style type="text/css">            /*以下为设置li自动横向排列的样式*/            #nav            {                margin: 0 auto;                width: 80%;                background-color: black;                color: white;            }            ul,li /*这是关键，去掉ul li默认的margin padding 值*/            {                margin: 0px;                padding: 0px;                list-style: none;            }            #nav ul /*这是关键*/            {                display: flex;                flex-direction: row;                flex-wrap: wrap;            }            #nav ul li            {                max-width: 100px; /*每个元素的最大宽度*/                text-align: center;                margin-top: 10px;                margin-bottom: 10px;                flex:auto;  /*这是关键*/                        }            /*以下设置子菜单*/            #nav ul li ul            {                position:absolute;                background-color: #444444;                top: 50px;                opacity: 0.9;            }            #nav ul li ul,#nav ul li ul li            {                margin: 0px;                padding: 0px;                max-width: 100px;            }            #nav ul li ul li            {                height: 40px;                line-height: 40px;            }            #nav ul li ul li:hover            {                background-color: #000000;            }            /*以下为设置多栏div自动横向排列的样式*/            .boxes /*这是关键*/            {                display: flex;                flex-direction: row;                flex-wrap: wrap;                width: 80%;                margin: 0 auto;            }             .box             {                border: 1px solid #999;                 border-radius: 10px;                 flex: auto;/*这是关键*/                margin: 5px;                 padding: 10px;                 width: 100px;/*每个元素的初始化宽度,这是关键*/            }               .linkstyle            {                color:white;                font-size:18px;                text-decoration:none;            }            .linkstyle:hover            {                color:#00CED1;                text-decoration:none;            }            .curstyle            {                color:#FF0000;                font-size:18px;                text-decoration:underline;            }           </style>    </head>    <body>        <div id="nav">            <ul>                <li><a href="#">AAAA</a></li>                <li><a href="#">BBBB                    <ul>                        <li><a href="#">子子孙孙</a></li>                        <li><a href="#">bbbbbb</a></li>                        <li><a href="#">bbbbbb</a></li>                    </ul>                </li>                <li><a href="#">CCCC</a></li>                <li><a href="#">DDDD</a></li>                <li><a href="#">EEEE</a></li>                <li><a href="#">FFFF</a></li>            </ul>        </div>        <div class="boxes">            <div class="box box1">                <h2>Don't excessively interpret South China Sea drill</h2>                <p>"Holding sea drills is a common practice for navies with various countries. The annual, regular drill by the Chinese navy aims to test the troops' real combat abilities, boost their maneuverability, search and rescue power and the abilities to fulfil diversified military missions," said spokesperson Liang Yang on Saturday.  </p>             </div>            <div class="box box2">                 <h2>Putin, Blatter voice mutual support at World Cup</h2>                 <p>FIFA's President Sepp Blatter shakes hands with Russia's President Vladimir Putin (R) during the preliminary draw for the 2018 FIFA World Cup at Konstantin Palace in St. Petersburg, Russia July 25, 2015.</p>            </div>            <div class="box box3">                <h2>Passenger detained for creating chaos on flight</h2>                <p>A passenger attempted to damage facilities on Shenzhen Airlines flight ZH 9648, which departed from Taizhou City of east China's Zhejiang Province, when it was landing in Guangzhou Baiyun International Airport at around 1 a.m. on Sunday, according to the airport. </p>             </div>        </div>    </body></html>
这里写图片描述
0 0