gpt4 book ai didi

javascript - 不同设备的 body 定心

转载 作者:太空宇宙 更新时间:2023-11-04 15:25:58 25 4
gpt4 key购买 nike

我正在尝试使主体在所有具有不同屏幕尺寸的设备中居中

白色背景部分应该居中

http://jsfiddle.net/ymnkg/1/

http://jsfiddle.net/ymnkg/1/embedded/result/

在下面提供我的代码

<body class="home">

<div id="redColor">
<header style="background-color: white; width: 1224px; margin-left: 339px;">
<div class="inner clearfix"><div class="logo">
<a href="">
<img alt="Splitwise" class="defieLogo" src="http://www.defie.co/designerImages/defie_logo.png">
</a>
</div>

</header>
<div id="banner" class="clearfix" style="border-bottom: 5px solid #C3C3C3; width: 1223px;">
<div class="bx-wrapper" style="width:1227px; position:relative; margin-top: 0px;">
<div class="bx-window" style="position:relative; overflow:hidden; width:1227px;">
<ul id="slider1" style="width: 999999px; position: relative; left: -1227px;">
<li style="width: 1227px; float: left; list-style: none;" class="pager">
<a href=""><img src="http://www.defie.co/designerImages/frontpage_rotate1.png" alt="banner 1" border="0"></a>
</li>
<li style="width: 1227px; float: left; list-style: none;" class="pager">
<a href=""><img src="http://www.defie.co/designerImages/frontpage_rotate2.png" alt="banner 2" border="0"></a>
</li>
<li style="width: 1227px; float: left; list-style: none;" class="pager">
<a href=""><img src="http://www.defie.co/designerImages/frontpage_rotate3.png" alt="banner 3" border="0"></a>
</li>
</ul>
</div>
</div>
</div>
<section id="main" style="background-color: #646464; padding: 0px;">
<div class="inner clearfix" style="background-color: white; width: 1223px;">
<span style="color: #06546a; font-weight: bold; font-size: 14px; background-color: white;">Defie Cloud Buisness Solution offers features and functionality for business - today and tomorrow</span>
<div id="primary">
<section class="primary">
<ul style="width: 800px;">
<li style="padding-bottom: 5px; list-style: none; font-size: 13px;">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
<span style="color: red;">Accounting and Finance:</span> Sales and Customer Management
</li>
<li style="padding-bottom: 5px; list-style: none; font-size: 13px;">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
<span style="color: red;">Buisness Operation Package:</span> Purchasing and Vendor Management, Inventory Management, Build of Materials, Real-Time Production, Product Life Cycle, QA Management
</li>
<li style="padding-bottom: 5px; list-style: none; font-size: 13px;">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png"><span style="color: red;">Customer Relationship Management</span>
</li>
<li style="padding-bottom: 5px; list-style: none; font-size: 13px;">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
<span style="color: red;">Cloud File and Document Apps:</span> Store, Manage, Share, Access and Modify anytime, anywhere on any devices
</li>
<li style="padding-bottom: 5px; list-style: none;">
<img alt="squareList" style="margin-right: 10px; font-size: 13px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
<span style="color: red;">Cloud Buisness Management:</span> From Front to Back Office, z from Hardware to Software, from Desktops to Servers Solution and Support
</li>
</ul>
</section>
</div>

</div>
</section>
<ul id="eM" style="width: 1228px; margin-left: 80px; background-color:#646464;">
<li id="eMli"><a id="eMlia" href="#home">Product</a></li>
<li id="eMli"><a id="eMlia" href="#news">Solutions</a></li>
<li id="eMli"><a id="eMlia" href="#contact">Solutions</a></li>
<li id="eMli"><a id="eMlia" href="#about">Partners</a></li>
<li id="eMli"><a id="eMlia" href="#news">About</a></li>
<li id="eMli"><a id="eMlia" href="#contact">Home</a></li>
<li id="eMli"><a id="eMlia" href="#about">Login</a></li>
</ul>
</div>


</body>

最佳答案

您可以使用百分比而不是像素。或者你可以使用 Repsonsive Booststrap在这方面大放异彩。

关于javascript - 不同设备的 body 定心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14044866/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com