TEL：400-8793-956
当前位置：程序、服务器

如何设计页面标题布局以适合平板电脑和智能手机？

提问者： 近期获赞： 浏览人数： 发布时间：2021-02-01 12:20:12

 问：我有此页面标题，我需要做出响应，以便使其适合平板电脑和智能手机，并且我需要从右到左直接引导表单，以及如何使用纯JavaScript来实现这一目标（不需要Jquery） 

 
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Arabic HTML responsive grid</title>
    <meta name="viewport " content="width=device-width">
    <!--  favicon.ico -->
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="bootstrap-grid.css">
    <link rel="stylesheet" href="bootstrap-reboot.css">
    <link rel="stylesheet" href="css/style.css">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <script src=" http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js "></script>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <style>
        body {
            background-color: #d1d1d1;
            direction: rtl;
        }
        
        .header {
            border: #222 double;
            width: 100%;
            display: inline-table;
            height: 20px;
            min-width: 980px;
            background-color: #4c4e5a;
        }
        
        .header .div1 {
            *background-color: skyblue;
            width: 25%;
            float: right;
        }
        
        .div2 {
            *background-color: burlywood;
            width: 50%;
            float: right;
            margin: 0 auto;
        }
        
        .div2,
        .div2 ul,
        .div2 li,
        .div2 a {
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
        }
        
        .div2 ul {
            height: 40px;
            width: 505px;
            margin: 5px auto;
            background: #4c4e5a;
            background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
            background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
            background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
            background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
            background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
        
        .div2 li {
            position: relative;
            list-style: none;
            float: right;
            display: block;
            height: 40px;
        }
        
        .div2 li a {
            display: block;
            padding: 0 14px;
            margin: 6px 0;
            line-height: 28px;
            text-decoration: none;
            border-left: 1px solid #393942;
            border-right: 1px solid #4f5058;
            font-family: Helvetica, Arial, sans-serif;
            font-weight: normal;
            font-size: 18px;
            color: #f3f3f3;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
            -webkit-transition: color .2s ease-in-out;
            -moz-transition: color .2s ease-in-out;
            -o-transition: color .2s ease-in-out;
            -ms-transition: color .2s ease-in-out;
            transition: color .2s ease-in-out;
        }
        
        .div2 li:first-child a {
            border-left: none;
        }
        
        .div2 li:last-child a {
            border-right: none;
        }
        
        .div2 li:hover>a {
            color: #8fde62;
        }
        
        .div3 {
            *background-color: gainsboro;
            width: 25%;
            float: left;
        }
        
        .div3 .dropdown {
            margin-top: 15px;
        }
        /* DropDown */
        
        .dropdown {
            color: #555;
            margin: 3px -22px 0 0;
            width: 143px;
            position: relative;
            height: 17px;
            text-align: left;
        }
        
        .submenu {
            position: absolute;
            z-index: 100;
            width: 135px;
            display: none;
            margin-left: 10px;
            padding: 40px 0 5px;
            border-radius: 6px;
        }
        
        .dropdown li a {
            color: #555555;
            display: block;
            font-family: arial;
            font-weight: bold;
            padding: 6px 15px;
            cursor: pointer;
            text-decoration: none;
        }
        
        .dropdown li a:hover {
            background: #155FB0;
            color: #FFFFFF;
            text-decoration: none;
        }
        
        a.account {
            font-size: 18px;
            line-height: 16px;
            color: #fff;
            position: absolute;
            z-index: 110;
            display: block;
            padding: 11px 0 0 20px;
            height: 28px;
            width: 150px;
            margin: -11px 0 0 -10px;
            text-decoration: none;
            background: url(images/arrow.png) 80px 32px no-repeat;
            cursor: pointer;
        }
        
        .root {
            list-style: none;
            font-size: 11px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
            background: #fff;
            padding: 10px 0 10px 0;
            border-radius: 5px 5px 5px 5px;
            margin: 21px 0 0 0;
        }
        
        .root:before {
            content: '';
            display: inline-block;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-bottom: 7px solid #ccc;
            border-bottom-color: #ffffff;
            position: absolute;
            color: #ffffff;
            top: 54px;
            right: 17px;
        }
        /* DropDown */
    </style>
    <script>
        $(document).ready(function()
            {
                $(".account").click(function()
                    {
                        var X = $(this).attr('id');
                        if (X == 1)
                        {
                            $(".submenu").hide();
                            $(this).attr('id', '0');
                        } else
                        {
                            $(".submenu").show();
                            $(this).attr('id', '1');
                        }
                    });
                $(".submenu").mouseup(function()
                    {
                        return false
                    });
                $(".account").mouseup(function()
                    {
                        return false
                    });
                $(document).mouseup(function()
                    {
                        $(".submenu").hide();
                        $(".account").attr('id', '');
                    });
            });
    </script>
</head>
<body>
    <div class="header">
        <div class="div1">
            <a href="" class="navbar-brand"><img src="website-logo.png" alt="" height="30"></a>
        </div>
        <div class="div2">
            <ul>
                <li>
                    <a href="#"></a>
                </li>
                <li>
                    <a href="#">  </a>
                </li>
                <li>
                    <a href="#">  </a>
                </li>
                <li>
                    <a href="#"> </a>
                </li>
            </ul>
        </div>
        <div class="div3">
            <div class="dropdown">
                <a href="#" class="account" id="account"> </a>
                <div class="submenu" style="display: none; " id="submenu">
                    <ul class="root">
                        <li><a href="#">Dashboard</a></li>
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Settings</a></li>
                        <li><a href="#">Sign Out</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row justify-content-center mt-5">
            <div class=" col-xl-5 col-md-6 col-xs-12 col-sm-12 col-12 bg-default ">
                <div class="card ">
                    <div class="card-block pt-3">
                        <h2 class="card-title text-center"> </h2>
                        <p class="card-text text-center text-muted"><small>Please fill out all the fields</small></p>
                        <form action="" method="">
                            <fieldset class="form-group">
                                <label for="username"> </label>
                                <input type="text" class="form-control" />
                            </fieldset>
                            <fieldset class="form-group">
                                <label for="username"> </label>
                                <input type="text" class="form-control" />
                            </fieldset>
                            <div class="checkbox">
                                <label for="">
                                           <input type="checkbox">
                                    </label>
                            </div>
                            <div>
                                <a href="#">   </a>
                            </div>
                            <div>
                                <button class="btn btn-block btn-success"> </button>
                            </div>
                        </form>
                    </div>
                    <div class="card-footer text-muted text-center">
                        <p> </p>
                        <a href=""> </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="jquery-1.8.2.min.js"></script>
</body>
</html>
 
 
 
答：在CSS中进行以下更改，希望这一点对您有用，您想要实现。
 
        <style>
            body {
                background-color: #d1d1d1;
                direction: rtl;
            }
            
            .header {
                border: #222 double;
                /*width: 100%;
                display: inline-table;
                height: 20px;
                min-width: 980px;*/
                background-color: #4c4e5a;
            }
            .header::after{
                clear: both;
                content: "";
                display: block;
            }
            
            .header .div1 {
                *background-color: skyblue;
                width: 25%;
                float: right;
                /*float: left;*/
            }
            
            .div2 {
                *background-color: burlywood;
                width: 50%;
                float: right;
                margin: 0 auto;
                /*float: left;*/
            }
            
            .div2,
            .div2 ul,
            .div2 li,
            .div2 a {
                margin: 0;
                padding: 0;
                border: none;
                outline: none;
            }
            
            .div2 ul {
                height: 40px;
                /*width: 505px;*/
                margin: 5px auto;
                background: #4c4e5a;
                background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
            }
            
            .div2 li {
                position: relative;
                list-style: none;
                float: right;
                display: block;
                height: 40px;
            }
            
            .div2 li a {
                display: block;
                padding: 0 14px;
                margin: 6px 0;
                line-height: 28px;
                text-decoration: none;
                border-left: 1px solid #393942;
                border-right: 1px solid #4f5058;
                font-family: Helvetica, Arial, sans-serif;
                font-weight: normal;
                font-size: 18px;
                color: #f3f3f3;
                text-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
                -webkit-transition: color .2s ease-in-out;
                -moz-transition: color .2s ease-in-out;
                -o-transition: color .2s ease-in-out;
                -ms-transition: color .2s ease-in-out;
                transition: color .2s ease-in-out;
            }
            
            .div2 li:first-child a {
                border-left: none;
            }
            
            .div2 li:last-child a {
                border-right: none;
            }
            
            .div2 li:hover>a {
                color: #8fde62;
            }
            
            .div3 {
                *background-color: gainsboro;
                width: 25%;
                float: left;
            }
            
            .div3 .dropdown {
                margin-top: 15px;
            }
            /* DropDown */
            
            .dropdown {
                color: #555;
                margin: 3px -22px 0 0;
                width: 143px;
                position: relative;
                height: 17px;
                text-align: left;
            }
            
            .submenu {
                position: absolute;
                z-index: 100;
                width: 135px;
                display: none;
                margin-left: 10px;
                padding: 40px 0 5px;
                border-radius: 6px;
            }
            
            .dropdown li a {
                color: #555555;
                display: block;
                font-family: arial;
                font-weight: bold;
                padding: 6px 15px;
                cursor: pointer;
                text-decoration: none;
            }
            
            .dropdown li a:hover {
                background: #155FB0;
                color: #FFFFFF;
                text-decoration: none;
            }
            
            a.account {
                font-size: 18px;
                line-height: 16px;
                color: #fff;
                position: absolute;
                z-index: 110;
                display: block;
                padding: 11px 0 0 20px;
                height: 28px;
                width: 150px;
                margin: -11px 0 0 -10px;
                text-decoration: none;
                background: url(images/arrow.png) 80px 32px no-repeat;
                cursor: pointer;
            }
            
            .root {
                list-style: none;
                font-size: 11px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
                background: #fff;
                padding: 10px 0 10px 0;
                border-radius: 5px 5px 5px 5px;
                margin: 21px 0 0 0;
            }
            
            .root:before {
                content: '';
                display: inline-block;
                border-left: 7px solid transparent;
                border-right: 7px solid transparent;
                border-bottom: 7px solid #ccc;
                border-bottom-color: #ffffff;
                position: absolute;
                color: #ffffff;
                top: 54px;
                right: 17px;
            }
            /* DropDown */
上一篇： 如何在Node.Js App中在公共服务器上部署存储库
下一篇： 如何通过上传YouTube以外的视频来获得更多收益
安优网络专注于南京网站建设、南京网站制作等服务，南京网站制作公司、南京网站建设公司、南京小程序开发-多家上市集团的合作伙伴。
苏ICP备12071769号-1