一个Web布局实例

最新推荐文章于 2023-03-07 16:03:54 发布

laoyaotask

最新推荐文章于 2023-03-07 16:03:54 发布

阅读量820

点赞数

分类专栏： Web前端文章标签：布局 web

本文链接：https://blog.csdn.net/laoyaotask/article/details/47071269

版权

Web前端专栏收录该内容

36 篇文章 5 订阅

订阅专栏

<!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>

这里写图片描述

laoyaotask

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个Web布局实例

<!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 t
复制链接

扫一扫