我有像这样的MySQL查询
SELECT `transaction`.id,
CONCAT(contact.`name`, " ", contact.last_name) as fullName,
(SELECT SUM(total) FROM transaction_product WHERE transaction_product.ref_transaction = `transaction`.id) as subtotal,
(SELECT SUM(transaction_payment.idr_cash + transaction_payment.idr_bni + transaction_payment.idr_ame_exp + transaction_payment.idr_cc_niaga) FROM transaction_payment WHERE transaction_payment.`transaction` = `transaction`.id ) AS payment,
(subtotal - payment) as balance
FROM `transaction`
LEFT JOIN contact
ON contact.id = `transaction`.contact_id
WHERE reservation_status = 3
AND `transaction`.id = 6345
Run Code Online (Sandbox Code Playgroud)
如你所见,我希望获得数学进入SELECT的平衡.(subtotal - payment) as balance
我应该怎么做?
基本上我正在制作一些按钮,但即使通过我将宽度设置为自动和设置填充,列表仍然延伸100%的页面.我不想以像素为单位设置宽度,我只想在任一侧设置填充.
任何人都可以解释我出错的地方:http: //jsfiddle.net/spadez/KYdnJ/5/
#nav li {
color: #333;
line-height: 28px;
background-color: #F8F8F8;
border: 1px solid #D3D3D3;
padding: 0px 9px 0px 9px;
font-family: arial, sans-serif;
font-size: 11px;
width: auto;
}
Run Code Online (Sandbox Code Playgroud) 正如您在jsfiddle中看到的那样,当没有换行时,布局看起来没问题.但是,如果窗口变小,且<li>
项目开始包装,它们包住下面<dt>
的内容(这是字一个,2和3).
我想要做的是<li>
在必要时进行换行,但是我希望它能够在自身下方开始新线,而不是完全在左侧.所以基本上,我试图让第一个<dd>
标签中的第二个列表项包含所有行.
我如何在CSS中做到这一点?
HTML
<article>
<header><h2>Title</h2></header>
<dl>
<dt>One</dt>
<dd>
<ul>
<li>This is a relatively short sentence, not really long.</li>
<li>This is a relatively short sentence, not really long.</li>
</ul>
</dd>
<dt>Two</dt><dd>This is a relatively short sentence, not really long.</dd>
<dt>Three</dt><dd>This is a relatively short sentence, not really long.</dd>
</dl>
</article>
Run Code Online (Sandbox Code Playgroud)
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
dl { …
Run Code Online (Sandbox Code Playgroud) 我想做一些可能不可能的事情,但让我们看看你的想法.这是我的代码:
html {
background: url(../img/pattern.png) repeat, url(../img/up2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: black;
}
Run Code Online (Sandbox Code Playgroud)
因此我试图获得具有多个背景的html元素,例如2,问题是我想将背景大小仅设置为第二个背景而不是第一个背景..任何想法?
我正在尝试为一个网站创建一个测试用例,其中包含一个包含3个链式选择的表单.加载网页时默认填充第一个选择.如果选择了第一个选择中的任何选项,则通过ajax调用填充第二个选择.以相同的方式,当在所选的第二个选项上选择一个选项时,通过ajax调用填充第三个选项.最后,当在第三个选择上选择一个选项时,将使用我需要验证的信息填充html表.
三个互连的选择具有此结构
<select id="s1" name="s1">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<select id="s2" name="s2"></select>
<select id="s3" name="s3"></select>
Run Code Online (Sandbox Code Playgroud)
我确信该网站使用Jquery来进行ajax调用.有人用或知道用casperJs创建这个案例的干净方法吗?
我有一个图像,其上方有一个播放图标.当用户将鼠标悬停在图像上时,图像的亮度会变暗,并且"播放"图标将替换为"放大玻璃"图标.
我遇到的问题是,当用户将鼠标悬停在Magnify Glass图标上时,此图标会切换到"播放"图标.这不应该发生,因为仅当用户没有悬停在图像上时,"播放"图标才可见..search:hover ~ .play { display:none; }
如果Magnify Glass图标悬停在上面,我已经应用了哪些不会使Play图标可见,但这不起作用.
<a href="#">
<img class="art" src="http://farm4.staticflickr.com/3133/3255025717_49268c7c85_z.jpg?zz=1">
<img class="search" src="http://icons.iconarchive.com/icons/deleket/scrap/256/Magnifying-Glass-icon.png">
<img class="play" src="http://icons.iconarchive.com/icons/icons-land/play-stop-pause/256/Play-Normal-icon.png">
<div class="cover"></div>
</a>
Run Code Online (Sandbox Code Playgroud)
.art { width:320px; height:240px; }
.search { z-index:3; position:absolute; top:90px; left:130px; width:75px; height:75px; display:none; }
.play { z-index:2; position:absolute; top:90px; left:130px; width:75px; height:75px; }
.cover { z-index:1; position:absolute; top:8px; left:8px; width:320px; height:240px; background:#000; opacity:0.5; display:none; }
.art:hover ~ .search { display:block; }
.art:hover ~ .play { visibility:hidden; }
.art:hover ~ .cover { display:block; } …
Run Code Online (Sandbox Code Playgroud) 我在更改列表中的子弹颜色时遇到问题.
所以<nav>
我的HTML文件中的标签内有一个列表:
<nav id="top-menu">
<ul>
<li> <a href="">Home</a> </li>
<li><span> <a href="">Products</a> </span></li>
<li> <a href="">Statistics</a> </li>
<li> <a href="">Countries</a> </li>
<li> <a href="">Settings</a> </li>
<li> <a href="">Contacts</a> </li>
</ul>
</nav>
Run Code Online (Sandbox Code Playgroud)
所以你可以看到我的<nav>
标签有一个id="top-menu"
.还有一件事:
<li><span> <a href="">Products</a> </span></li>
Run Code Online (Sandbox Code Playgroud)
在这里你可以看到我<span>
在我的子弹中放了一个标签.
这是我的CSS文件:
nav#top-menu {
width: 100%;
height: 33px;
background-color: #696969;
margin: 0;
padding: 0;
}
#top-menu ul {
display: block;
list-style-type: none;
width: 600px;
margin: 0 auto;
padding: 0;
}
#top-menu ul li {
margin: 0; …
Run Code Online (Sandbox Code Playgroud) 我想在菜单元素之间添加一个白色的间隙,但我遇到了一个奇怪的问题.看到这个jfiddle:http://jsfiddle.net/ERYat/1/
这是CSS代码:
/* a styling */
ul#menu-menu-services a {
display: block;
font-size: 20px;
color: #000;
text-decoration: none;
padding: 5px;
border-bottom: 2px solid #fff;
border-left-style: solid;
border-left-width: 3px;
border-left-color: #000;
}
/* li fix */
ul#menu-menu-services li {
margin: 0;
padding: 0;
border: none;
}
/* Sub Menu */
ul#menu-menu-services li ul.sub-menu {
display: block;
margin-left: 0px;
}
ul#menu-menu-services li ul.sub-menu li a {
padding-left: 15px;
font-size: 14px;
}
Run Code Online (Sandbox Code Playgroud)
我无法弄清楚为什么左边的边界对角线.有谁知道?
我的浮动工作......有点......我在调整浏览器大小时遇到问题.当屏幕变小时,我希望文本环绕div,但是它只是在一长行文本中向右压缩到底部.
这是一些照片.
这是它更广泛的时候
然后,当我调整浏览器大小时,这就是它正在做的事情
我的html看起来像这样
<div class="info">
<div class="userInfo">
<p>info here</p>
<img>
</div>
<div class="bio">
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我的css看起来像这样
.userInfo{
float: left;
}
.bio p{
padding-left: 14em;
}
Run Code Online (Sandbox Code Playgroud) 我有两个与Glyphicons的链接,想要Text-decoration:none; 但由于某种原因,它不会消失,我总是一个悬停线.
链接是:
<p class="user-profile-social-links pull-right">
<% if @user.facebooklink.present? %>
<%= link_to @user.facebooklink, title: "Facebook", :target => '_blank' do %>
<i class="icon-facebook-sign"></i>
<% end %>
<% end %>
<% if @user.twitterlink.present? %>
<%= link_to @user.twitterlink, title: "Twitter", :target => '_blank' do %>
<i class="icon-twitter-sign"></i>
<% end %>
<% end %>
</p>
Run Code Online (Sandbox Code Playgroud)
这个类有这个CSS:
.user-profile-social-links {
text-decoration: none;
display: block;
color: #777;
}
Run Code Online (Sandbox Code Playgroud)
难道我做错了什么 ?为什么不工作?
*编辑:* 这是我仍然得到的 - > http://imgur.com/raC362u(稍微放大以查看图标下方的线条)
出于某种原因,我的媒体查询存在问题.
这是我的CSS的样子
#main {
font-size: 16px;
font-size: 1.6rem;
}
Run Code Online (Sandbox Code Playgroud)
使用PHP,我为每个浏览器的HTML提供一个类,以防黑客,即IE,如下所示:
<?php
// ----| user agent (browser) |----------------------------
$msie = strpos($_SERVER["HTTP_USER_AGENT"], 'MSIE') ? true : false;
$firefox = strpos($_SERVER["HTTP_USER_AGENT"], 'Firefox') ? true : false;
$safari = strpos($_SERVER["HTTP_USER_AGENT"], 'Safari') ? true : false;
$chrome = strpos($_SERVER["HTTP_USER_AGENT"], 'Chrome') ? true : false;
?>
<html class="<?php if($msie == true){ echo "msie "; } if($firefox == true){ echo "firefox "; } if($safari == true){ echo "safari "; } if($chrome == true){ echo "chrome "; } …
Run Code Online (Sandbox Code Playgroud)