- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
您好,我开发的这个网站有很多问题。除了移动分辨率外,它在大多数屏幕上都很好。由于某种原因,它减小了宽度,我似乎无法终生找到问题的根源。
这是网站: http://hghazni.com/jewel
代码如下:
html {
margin: 0;
padding: 0;
background-color: #0c0e1b;
}
body {
margin: 0;
padding: 0;
}
/*contact bar*/
.contact-bar {
width: 100%;
height: 3.5em;
top: 0;
float: left;
background-color: #0c0e1b;
color: #fff;
z-index: 999;
border-bottom: solid 1px #232737;
}
.contact-bar p {
margin-left: 19%;
padding-bottom: 2em;
}
.myaccount {
top: 0%;
position: absolute;
text-align: center;
right: 0;
padding-right: 25%;
}
.phoneemail {
top: 0;
position: absolute;
text-align: center;
margin-left: 19%;
}
.phoneemail img {
vertical-align: bottom;
}
.phoneemail th {
font-weight: normal;
font-size: 1em;
}
.myaccount {
right: 0;
top: 0;
margin-top: 1em;
position: absolute;
}
/*navigation menu + logo */
.logo {
display: inline-block;
margin-left: -22%;
padding-bottom: 1.5em;
height: auto;;
width: auto;;
}
.search-icon {
display: inline-block;
padding: 0.2em;
padding-bottom: 2.2em;
padding-left: 1.5em;
}
.search-icon:hover {
opacity: 0.5;
}
.checkout {
display: inline-block;
padding: 0.2em;
padding-bottom: 2.2em;
}
.checkout:hover {
opacity: 0.5;
}
.top-bar {
width: 100%;
height: 7.4em;
background-color: #0c0e1b;
top: 0;
float: right;
}
.nav-item {
list-style-type: none;
text-decoration: none;
padding-left: 1em;
float: left;
color: #fff;
display: inline-block;
padding-bottom: 2.5em;
font-size: 1.2em;
}
.top-nav {
margin-left:10%;
}
.top-nav ul {
text-align: center;
}
.top-nav li {
display: inline-block;
}
.top-nav > ul {
text-decoration: none;
list-style-type: none;
}
.top-nav a:hover {
color: #e3b05f;
text-decoration: none;
}
/*banner*/
.banner {
background-color: #fff;
width: 100%;
height: 60em;
}
.banner img {
width: 100%;
}
/*exclusive section*/
.exclusive {
position: relative;
top: 100%;
background-color: #fff;
width: 100%;
float: left;
padding-top: 2%;
padding-bottom: 2%;
z-index: 999;
}
.exclusive img:hover {
opacity: 0.5;
}
/*royal banner*/
.royal-banner {
width: 100%;
position: relative;
}
.royal-banner img {
width: 100%;
}
/*rings section*/
.rings {
width: 100%;
margin: auto;
background-color: #fff;
}
.rings h3 {
padding-top: 1.5em;
font-size: 1.5em;
color: #a6834b;
text-align: center;
text-decoration: none;
font-weight: normal;
}
.rings img {
padding-top: 0.5em;
}
.ring-content {
margin:auto;
width:46em;
padding-bottom: 4em;
text-align: center;
}
.rings h3 {
font-size: 2em;
text-align: center;
}
.tgg {border-collapse:collapse;border-spacing:0;}
.tgg td{
overflow:hidden;
width: 100%;
}
.tgg h3 {
color: #222;
font-weight: bold;
font-size: 1em;
word-spacing: 0.3em;
padding-right: 5%;
padding-left: 5%;
}
.tgg h4 {
color: #a6834b;
font-size: 1.5em;
}
.tgg th{
font-size:14px;
font-weight:normal;
padding:10px 5px;
overflow:hidden;
}
.tgg .tg-r4y5{background-color:#fcf7f3;}
.tgg .tg-a8i3{background-color:#fcf7f3;text-align:center;}
.tgg .tg-i81m{background-color:#ffffff;text-align:center;}
.tgg .tg-3we0{background-color:#ffffff;}
#addcart {
cursor:pointer;
background:#c89a4f; /*the colour of the button*/
border:1px solid ##c89a4f; /*required or the default border for the browser will appear*/
/*give the button curved corners, alter the size as required*/
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border: 2px solid #c89a4f;
color: #000;
padding: 0.5em;
font-size: 1em;
font-weight: bold;
font-family: "Open Sans", sans-serif;
}
input#addcart:hover, input#addcart:focus{
background-color :#e9b45c; /*make the background a little darker*/
/*reduce the drop shadow size to give a pushed button effect*/
-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
}
/*blog section*/
.blog {
width: 100%;
background-color: #fcf7f3;
margin: 0;
float: left;
padding-bottom: 5em;
}
.blog h3 {
text-align: center;
font-size: 2em;
}
.blog ul {
text-decoration: none;
list-style-type: none;
width: 65%;
margin: 0px auto;
}
.blog li {
text-align: left;
display: inline-block;
width: 29.5%;
color: #aa9146;
vertical-align: middle;
}
#blogtable {
width: 10%;
}
#blogtable h3 {
text-align: left;
font-weight: bold;
font-size: 1.3em;
color: #222;
padding: 0;
}
#blogtable p {
text-align: left;
font-size: 0.9em;
color: #7a7878;
font-family: "Open Sans", sans-serif;
}
#blogarrowright {
position: relative;
vertical-align: middle;
margin-top: -670%;
}
#blogarrowleft {
}
#blogarrowleft:hover {
opacity: 0.5;
}
#blogarrowright:hover {
opacity: 0.5;
}
/*bottom section*/
.bottom-wrapper {
background-color: #0c0e1b;
width: 100%;
padding-bottom: 3em;
}
.bottom-wrapper a {
color: #acacac;
text-decoration: none;
}
.bottom-wrapper a:hover {
color: #aa9146;
}
.bottom {
background-color: #0c0e1b;
width: 50%;
margin-left: 15%;
position: relative;
display: inline-block;
color: #fff;
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
column-gap: unset;
padding: 0;
padding-bottom: 3em;
}
.bottom h3 {
font-weight: lighter;
font-size: 1.5em;
padding: 0;
color: #aa9146;
}
.bottom ul {
list-style-type: none;
text-decoration: none;
margin: auto;
padding: 0;
font-family: "Open sans", sans-serif;
font-size: 0.85em;
color: #acacac;
}
.bottom li {
padding-bottom: .85em;
}
/*newsletter section*/
.newsletters {
position: relative;
color: #acacac;
display: inline-block;
}
.newsletters {
text-decoration: none;
list-style-type: none;
}
.newsletters h3 {
font-size: 1.5em;
color: #aa9146;
font-weight: normal;
}
.newsletters img:hover {
opacity: 0.5;
}
/*bottom bar (copyright)*/
.bottom-bar-wrapper {
width: 100%;
background-color: #0c0e1b;
position: relative;
}
.bottom-bar {
margin-left: 15%;
width: 63%;
background-color: #0c0e1b;
border-top: 1px solid rgb(255,255,255);
}
.bottom-bar table th {
padding-left: 3%;
font-weight: normal;
}
/*.bottom-bar l {
list-style-type: none;
text-decoration: none;
margin-left: 10%;
float: left;
padding-left: 0.5em;
padding-top: 2em;
background-color: #0c0e1b;
}*/
.bottom-bar p {
width: 250px;
text-align: center;
color: #acacac;
font-family: "Open sans", sans-serif;
font-size: 0.80em;
float: left;
padding-left: 10%;
padding-bottom: 1.5%;
padding-top: 1.5%;
margin: auto;
}
/*copyright bar */
.copyright-bar {
position: relative;;
width: 100%;
float: left;
background-color: #000000;
}
.copyright-bar p {
font-family: "Open sans", sans-serif;
color: #acacac;
text-align: center;
text-decoration: none;
font-size: 0.9em;
}
.copyright-bar a {
text-decoration: none;
font-weight: bold;
color: #aa9146;
}
.copyright-bar a:hover {
color: #acacac;
}
/*subscribe form*/
.newsletter-form form {
border-radius: 3em;
border: 2px solid #aa9146;
background-color: #000000;
}
/*responsive styling*/
/*iphone */
@media only screen and (max-width : 1023px) and (min-width : 480px){
.contact-bar {
height: 3em;
}
.contact-bar p {
margin-left: 5%;
}
.contact-bar p {
font-size: 2em;
}
.contact-bar a {
color: #fff;
text-decoration: none;
}
.contact-bar a:visited {
color: #fff;
}
.top-bar {
}
.top-nav {
float: left;
}
#logo {
height: 20%;
width: 20%;
}
.banner {
background-color: #fff;
width: 100%;
height: 36em;
}
.exclusive {
top: 100%;
background-color: #fff;
width: 100%;
z-index: 999;
align-items: center;
overflow-x: auto;
}
.exclusive img {
width: 98%;
height: 90%;
float: left;
position: relative;
}
.exclusive img:hover {
opacity: 0.5;
}
}
/*laptop 1*/
@media only screen and (max-width : 1366px) and (min-width : 1024px) {
.top-nav {
margin-left:15%;
}
.banner {
background-color: #fff;
width: 100%;
height: 45em;
}
}
/*laptop 2*/
@media only screen and (max-width : 1024px) and (min-width : 768px) {
}
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="img/crown.ico" type="image/x-icon" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
<title>Jewellery Shop</title>
</head>
<body>
<div class="contact-bar">
<table class="phoneemail">
<tr>
<th><img src="img/phone.jpg" alt="" /> 00 11 22 33 44 55 <img src="img/email.jpg" alt="" /> support@yourmail.com<div class="my-account">
</th>
<th>
</th>
</tr>
</table>
<table class="myaccount">
<tr>
<th>
<img src="img/myaccount.jpg" alt=""/>
</th>
</tr>
</table>
</div>
</div>
<div class="top-bar">
<nav class="top-nav">
<ul>
<img id="logo" src="img/logo.jpg" class="logo" alt="" />
<li><a href="#" class="nav-item">CONTACT US</a></li>
<li><a href="#" class="nav-item">BLOG</a></li></a>
<li><a href="#" class="nav-item">COLLECTIONS</a></li>
<li><a href="#" class="nav-item">FEATURES</a></li>
<li><a href="#" class="nav-item">PAGES</a></li>
<li><a href="#" class="nav-item">HOME</a></li>
<img src="img/search.jpg" class="search-icon" alt="" />
<img src="img/checkout.jpg" class="checkout" alt="" />
</ul>
</nav>
</div>
<div class="banner">
<img src="img/banner.jpg" alt="" />
</div>
<!-- exclusive content section -->
<div class="exclusive">
<table class="tg" align="center" >
<tr>
<th class="tg-baqh"><img src="img/27.jpg" alt="" /></th>
<th class="tg-baqh" rowspan="2"><img src="img/29.jpg" alt="" /></th>
<th class="tg-baqh"><img src="img/28.jpg" alt="" /></th>
</tr>
<tr>
<td class="tg-baqh"><img src="img/31.jpg" alt="" /></td>
<td class="tg-baqh"><img src="img/37.jpg" alt="" /></td>
</tr>
</table>
</div>
<div class="royal-banner">
<img src="img/royal-banner.jpg" alt="" />
</div>
<div class="rings">
<h3>Necklaces | <span style="color: #000; word-spacing: normal;">Diamond Ring</span> | Earrings<br>
<img class="under" src="img/sub_under.jpg" alt="" /></h3>
<div class="ring-content">
<table class="tgg" align="center" border="0px">
<tr>
<th class="tg-a8i3"><img src="img/ring1.jpg" alt="" /></th>
<th class="tg-i81m" rowspan="3"></th>
<th class="tg-a8i3"><img src="img/ring2.jpg" alt="" /></th>
<th class="tg-3we0" rowspan="3"></th>
<th class="tg-r4y5"><img src="img/ring3.jpg" alt="" /></th>
<th class="tg-3we0" rowspan="3"></th>
<th class="tg-r4y5"><img src="img/ring4.jpg" alt="" /></th>
</tr>
<tr>
<td class="tg-r4y5"><h3>PRODUCT NAME</h3><img src="img/ring_linebreak.jpg" alt="" /><h4>$ 5000.00/-</h4></td>
<td class="tg-r4y5"><h3>PRODUCT NAME</h3><img src="img/ring_linebreak.jpg" alt="" /><h4>$ 5000.00/-</h4></td>
<td class="tg-r4y5"><h3>PRODUCT NAME</h3><img src="img/ring_linebreak.jpg" alt="" /><h4>$ 5000.00/-</h4></td>
<td class="tg-r4y5"><h3>PRODUCT NAME</h3><img src="img/ring_linebreak.jpg" alt="" /><h4>$ 5000.00/-</h4></td>
</tr>
<tr>
<td class="tg-r4y5"><input id="addcart" type="submit" value="ADD TO CART" /></td>
<td class="tg-r4y5"><input id="addcart" type="submit" value="ADD TO CART" /></td>
<td class="tg-r4y5"><input id="addcart" type="submit" value="ADD TO CART" /></td>
<td class="tg-r4y5"><input id="addcart" type="submit" value="ADD TO CART" /></td>
</tr>
</table>
</div>
</div>
<div class="blog">
<h3>LATEST BLOGS<br>
<img class="under" src="img/sub_under_1.jpg" alt="" /></h3>
<table id="blogtable" align="center">
<tr>
<th><img id="blogarrowleft" src="img/blogarrow_left.png" alt="" /></th>
<th rowspan="3"><img src="img/blog1.jpg" alt="" /><h3>LOREM IPSUM DOLOR SIT AME</h3><p>Lorem ipsum dolor sit amet, consectetur adipsicin elit, do eiusmod temport {...}</p></th>
<th rowspan="3"><img src="img/blog2.jpg" alt="" /><h3>LOREM IPSUM DOLOR SIT AME</h3><p>Lorem ipsum dolor sit amet, consectetur adipsicin elit, do eiusmod temport {...}</p></th>
<th rowspan="3"><img src="img/blog3.jpg" alt="" /><h3>LOREM IPSUM DOLOR SIT AME</h3><p>Lorem ipsum dolor sit amet, consectetur adipsicin elit, do eiusmod temport {...}</p></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><img id="blogarrowright" src="img/blogarrow_right.png" alt="" />
</tr>
</table>
</div>
<div class="bottom-wrapper">
<div class="bottom">
<div class="aboutus">
<h3>ABOUT US</h3>
<ul>
<li><a href="#">My Account</a></li>
<li><a href="#">Order History</a></li>
<li><a href="#">Wish List</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="information">
<h3>INFORMATION</h3>
<ul>
<li><a href="#">My Account</a></li>
<li><a href="#">Order History</a></li>
<li><a href="#">Wish List</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="ourpolicy">
<h3>OUR POLICY</h3>
<ul>
<li><a href="#">My Account</a></li>
<li><a href="#">Order History</a></li>
<li><a href="#">Wish List</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="newsletters">
<h3>GET NEWSLETTERS</h3>
<form action="index.html" method="post" class="newsletter-form">
<input type="email" name="email" class="subscribe-input" placeholder="Email address" autofocus>
<button type="submit" class="subscribe-submit">Subscribe</button>
</form>
<h3>FOLLOW US</h3>
<a href="#"><img src="img/facebook.jpg" alt="" /></a>
<a href="#"><img src="img/twitter.jpg" alt="" /></a>
<a href="#"><img src="img/googleplus.jpg" alt="" /></a>
<a href="#"><img src="img/linkedin.jpg" alt="" /></a>
</div>
<div class="bottom-bar">
<table align="center">
<th rowspan="3">
<p><img src="img/contact.jpg" alt="" /><br> 00 11 22 33 44 | 22 33 44 55 66</p>
</th>
<th rowspan="3">
<p><img src="img/location.jpg" alt="" /><br>Lorem ipsum dolor sit amet, consectetur adipiscling elit, india.</p>
</th>
<th rowspan="3">
<p><img src="img/emailicon.jpg" alt="" /><br>Yourdomainname@youremail.com</p>
</th>
</table>
</div>
<div class="copyright-bar">
<p>
Copyright © 2016 by <a href="http://www.hghazni.com">hghazni</a> All rights reserved.
</p>
</div>
</body>
</html>
最佳答案
对于移动设备,您应该在头部包含响应式元标记,例如:
<meta name="viewport" content="width=device-width">
但是作为this link建议您应该使用:
<meta name="viewport" content="width=device-width, initial-scale=1">
也在 this famous 上和非常完整的 github 存储库,您可以找到其他有趣的元标记,也许您应该将其包含在您的元素中。
通过将此标签添加到您的网站,您会看到它仍然有一个正确的空间,这是由于 <table>
你正在使用。你应该考虑在这些表周围添加一个响应式包装器,以便它们易于管理,例如 Bootstrap 有一个很好的 .table-responsive
wrapper http://getbootstrap.com/css/#tables-responsive
关于html - 移动设备上的网站宽度太短 (HTML/CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40166973/
iphone设备UDID、iphone设备ID和iphone设备Token之间有什么区别? 通常,当我们使用苹果推送通知服务时,会使用 iPhone 设备 token 。 但我的目标只是识别唯一的 i
我们使用 firebase 从服务器向 Android 和 IOS 设备发送通知,并且我们使用旧版 FCM 发送通知。但是当我们的应用程序在后台时,通知由系统本身处理,因此我们无法通过应用程序处理它。
在 Google 上搜索后,我发现人们说只能通过“MFi 程序”将 iOS 设备与非 iOS 设备连接起来。这是真的吗? 我的项目主要集中于直接通过蓝牙与Arduino设备发送和接收信息。 iOS和非
所以我有一个通用应用程序,我正在设置 UIScrollView 的内容大小。显然,iPhone 和 iPad 上的内容大小会有所不同。如何为 iPad 设置某种尺寸,为 iPhone 和 iPod t
问题:如何在 pod 中使用连接到主机的原始设备作为 block 设备。 我尝试使用类型为“BlockDevice”的“hostPath” volumes: - my-data: hostPath
Implemented GCKDeviceScannerListener Singleton Class on ViewController, however its delegate methods
我有一个 (PhoneGap) 应用程序,它将成功获得 Passbook 通行证,并且还将成功接收与 Passbook 分开的推送通知(当伪造设备 ID 时)。 我遇到的问题是发送给注册设备的设备 I
我正在尝试找到一种方法,通过我目前正在使用的 iOS 应用程序访问我的信标的电池电量。我正在使用 Kontakt 的 iBeacon 设备。我浏览了 Estimote iOS SDK,他们提供了一种实
我正在努力让 CUDA 应用程序也能监控 GPU 的核心温度。可通过 NVAPI 访问该信息。 问题是我想确保在运行代码时监控的是同一个 GPU。 但是,似乎有信息表明我从 NvAPI_EnumPhy
从沙箱模式到生产模式,设备 token 有何不同? 我认为我已将一些设备 token 锁定为生产模式,并且无法将它们从开发中插入。 关于如何检查有什么想法吗? 最佳答案 当您使用开发证书构建应用程序时
目录 /run/user/1000/gvfs 和 ~/.gvfs 分别是空的和不存在的。我的图形文件管理器 (Thunar) 能够检测和访问设备的内部和外部存储器。 命令 gvfs-mount -l
我有一个 Android 平板电脑,它有一个迷你 USB 端口和一个 USB 端口,我想编写一个与 USB key 通信的应用程序。我写了一个demo来找出U盘,但是没有任何反应。 令我不安的是,如果
我们将 PHP 版本从 5.4.25 更改为 5.4.45,并在服务器上安装了 MS SQL 驱动程序。在更改服务器之前,一切正常,但在更改服务器之后,我遇到了 Web 服务问题。我们的身份验证 So
我想知道是否有人使用此 API 在 Android 设备上同时从 2 个后置摄像头捕获图像或视频:https://source.android.com/docs/core/camera/concurr
我正在为客户构建一个物联网解决方案,网络管理员坚持要求设备仅通过访客网络进行连接,该网络有一个强制门户,其中的服务条款必须通过按下 UI 按钮来接受,然后才能获得外部互联网访问。到目前为止,我见过的大
我无法弄清楚这里的格式规则..在我的示例中,代码行太多,无法为每行添加 4 个空格,因此这里是我需要帮助的代码的链接 http://nitemsg.blogspot.com/2011/01/heres
如果我在我的设备上接受推送通知,并且不保存设备 token ,那么我如何在自定义 View 中查看设备 token 或恢复警报 View ? 我删除了应用程序并重新安装,但看不到设备 token 警报
我试图找出在尝试并行比较和复制设备 block 与 pthreads 时我做错了什么。看起来我正在脱离同步并且比较阶段无法正常工作。任何帮助将不胜感激 #ifndef __dbg_h__ #defin
我刚刚写完所有这些内容,但这个红色的小栏告诉我我不能发布图片或两个以上的链接。因此,如果您可以引用 this Imgur album , 那简直太好了。谢谢。 我在这里相对较新,甚至对 android
我需要启用 mysql 常规日志并将其通过 nsf 移动到我系统中的另一个驱动器/设备! 所以,我在 my.cnf 中启用了它: general_log = 1 general_log_fi
我是一名优秀的程序员,十分优秀!