Question

下面是jsfiddle的链接，请在本地测试时添加图片，我想要一个看起来像移动应用程序的网站。我使用过html，css和jquerymobile。

我的测试网站：http://kumarindia.byethost24.com/dj.html

和jsfiddle是 http://jsfiddle.net/noo62eclipse/cFKss/1/

                <div id="home" data-role="page">
                    <div data-role="header">
                       <h6> welcome to Digital Justice</h6>
                    <div data-role="navbar">
                         <ul>
                        <li><a href="a.html" class="ui-btn-active ui-state-persist">One</a></li>
                        <li><a href="b.html">Two</a></li>
                        </ul>
                    </div>

                    </div>



                    <div id="content" data-role="content">



                          <a href="#court" data-transition="turn" class="court"><img src="court.jpg"alt="Smi" height="100px" width="100px"></a> 
                          <a href="#db" data-transition="turn" class="database"><img src="database.jpg"alt="Smi" height="100" width="100"></a>
                           <a href="#db" data-transition="turn" class="abtus"><img src="abtus.jpg" alt="Smiley face" height="100" width="100"></a> 

                            </div>  


                    </div>


                <div id="court" data-role="page">
                    <div data-role="header">
                            <h2> your now online in court</h2>  
                    </div>
                    <div data-role="navbar">
                         <ul>
                        <li><a href="a.html" class="ui-btn-active ui-state-persist">One</a></li>
                        <li><a href="b.html">Two</a></li>
                        </ul>
                    </div>

                            <img src="abtus.jpg" alt="Smiley face" height="42" width="42">
                            <a href="#" class="akk" data-rel="back" ></a>

                    </div>


                    <div id="db" data-role="page">
                            <h2>please enter your credentials</h2>
                            <div class="ui-field-contain">
                            <form method="post" action="demoform.asp">
                              <label for="fname">your login:</label>
                              <input type="text" name="fname" id="fname" placeholder="your id" >
                              <label for="pass">your password:</label>
                              <input type="password" name="pass" id="pass" placeholder="password">

                              <input type="submit" value="Submit Button" data-corners="true" data-inline="true" data-shadow="true">
                            </form>
                            </div>




                            <div class="cen">

                            <a href="#" class="ui-btn ui-btn-inline ui-mini ui-shadow" data-rel="back" >Go Back</a>
                            </div>
                    </div>  
            </body>         
                </html>

Answer 1

在响应式开发中，您应该使用最相对的位置。更改你的.ui-content css并给它这样的风格：位置：相对;身高：32em; padding-left：30％; padding-right：30％;

所以现在属于你的div的元素将位于中心，剩余空间（40％）

给.court这些风格：位置：相对;顶部：0; display：inline-block;漂浮：对; text-align：left; 宽度：50％;

.database和abtus 位置：相对;顶部：0; display：inline-block;向左飘浮; text-align：left; 宽度：50％;

在abtus之后添加一个div，它与.court

具有相同的风格

AND ...你有两个名字法庭，其中一个你使用背景网址，你必须删除这个......

更改屏幕大小时，基于图像的链接会重叠（即使调整浏览器窗口大小）

1 个答案: