设计投票系统
我在这里制作了一个样本投票系统：Sample Voting System
然而，经过反复尝试，我无法按照我想要的方式进行设计，因为开发人员在这里使用了太多div。字体变得太大或与数字重叠或不成比例等等。
我希望它看起来像这样：
这是我的代码：
<!DOCTYPE html>
<head>
<title>Sample Polling System</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".vote").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if(name=='up')
{
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
}
});
}
else
{
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "down_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
}
});
}
return false;
});
});
</script>
<style type="text/css">
body
{
font-family:'Georgia', Times New Roman, Times, serif;
}
#main
{
height:100px;
width:800px;
}
a
{
color:#DF3D82;
text-decoration:none;
}
a:hover
{
color:#DF3D82;
text-decoration:underline;
}
.up
{
height:40px; font-size:24px; text-align:center; background-color:gray; margin-bottom:2px;
-moz-border-radius: 6px;-webkit-border-radius: 6px;
}
.up a
{
color:#FFFFFF;
text-decoration:none;
}
.up a:hover
{
color:#FFFFFF;
text-decoration:none;
}
.down
{
height:40px; font-size:24px; text-align:center; background-color:gray; margin-top:2px;
-moz-border-radius: 6px;-webkit-border-radius: 6px;
}
.down a
{
color:#FFFFFF;
text-decoration:none;
}
.down a:hover
{
color:#FFFFFF;
text-decoration:none;
}
.box1
{
float:left; height:80px; width:50px;
}
.box2
{
float:left; width:440px; text-align:left;
margin-left:10px;height:60px;margin-top:10px;
font-size:18px;
}
img
{
border:none;
padding-top:7px;
}
</style>
</head>
<body>
<div align="center">
<h3>Sample Polling System</h3><hr>
<?php
include('config.php');
$sql=mysql_query("SELECT * FROM Messages LIMIT 9");
while($row=mysql_fetch_array($sql))
{
$msg=$row['msg'];
$mes_id=$row['mes_id'];
$up=$row['up'];
$down=$row['down'];
?>
<div id="main">
<div class="box1">
<div class='up'><a href="" class="vote" id="<?php echo $mes_id; ?>" name="up"><?php echo $up; ?></a><!--Tried placing here, didn't work--></div>
<div class='down'><a href="" class="vote" id="<?php echo $mes_id; ?>" name="down"><?php echo $down; ?></a></div>
</div><!-- tried to put this box below box2 but still didn't work -->
<div class='box2' ><?php echo $msg; ?></div>
</div><!-- tried atleast 10 permutations and combinations, couldn't get it work-->
<hr>
<?php
}
?>
</div>
</body>
</html>
请帮助我获得我想要达到的效果。
谢谢
3 个答案:
答案 0 :(得分：1)
我修复了你的代码：
<!DOCTYPE html>
<head>
<title>Sample Polling System</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".vote").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if(name=='up')
{
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
}
});
}
else
{
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "down_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
}
});
}
return false;
});
});
</script>
<style type="text/css">
body
{
font-family:'Georgia', Times New Roman, Times, serif;
}
#main
{
width:800px;
overflow:hidden;
}
a
{
color:#DF3D82;
text-decoration:none;
}
a:hover
{
color:#DF3D82;
text-decoration:underline;
}
.up
{
height:40px; font-size:24px; text-align:center; background-color:gray; margin-bottom:2px;
-moz-border-radius: 6px;-webkit-border-radius: 6px; float:left; width:40px;
}
.up a
{
color:#FFFFFF;
text-decoration:none;
}
.up a:hover
{
color:#FFFFFF;
text-decoration:none;
}
.down
{
height:40px; font-size:24px; text-align:center; background-color:gray; margin-top:2px;
-moz-border-radius: 6px;-webkit-border-radius: 6px; float:left; margin-left:40px; width:40px;
}
.down a
{
color:#FFFFFF;
text-decoration:none;
}
.down a:hover
{
color:#FFFFFF;
text-decoration:none;
}
.box1
{
float:left; clear:both;
}
.box2
{
float:left; width:440px; text-align:left;
font-size:18px;
}
img
{
border:none;
padding-top:7px;
}
</style>
</head>
<body>
<div align="center">
<h3>Sample Polling System</h3><hr>
<?php
include('config.php');
$sql=mysql_query("SELECT * FROM Messages LIMIT 9");
while($row=mysql_fetch_array($sql))
{
$msg=$row['msg'];
$mes_id=$row['mes_id'];
$up=$row['up'];
$down=$row['down'];
?>
<div id="main">
<div class='box2' ><?php echo $msg; ?></div>
<div class="box1">
<div class='up'><a href="" class="vote" id="<?php echo $mes_id; ?>" name="up"><?php echo $up; ?></a></div><span style="margin-top:10px; float:left; margin-left:10px;">People Agree to This</span>
<div class='down'><a href="" class="vote" id="<?php echo $mes_id; ?>" name="down"><?php echo $down; ?></a></div><span style=" margin-top:10px; float:left; margin-left:10px;">People Disagree to This</span>
</div><!-- tried to put this box below box2 but still didn't work -->
</div><!-- tried atleast 10 permutations and combinations, couldn't get it work-->
<hr>
<?php
}
?>
</div>
</body>
</html>
#box2标题位于#box1之上，我给了float:left; {}} #box1 float:left;和clear:both;所以它可以出现在新的一行。
我在每个灰色框旁边添加了span，第一个说人们同意这个，另一个人们不同意这个，他们获得了{ {1}}放在灰色框旁边，还有一些float:left;。我删除了一些margin-left属性。
答案 1 :(得分：1)
首先，您的标记也应该更改。您正在使用具有相同名称（'main'）的多个elemtn ID，这是错误的。在一个HTML页面中，您的元素宽度不应超过1个。
我建议您执行以下操作，而不是标记：
<div align="center">
<h3>Sample Polling System</h3><hr>
<div id="main">
<div class="row">
<div class="wrapper">
<div class="item">
<div class="box1">
<div class='up'><a href="" class="vote" id="13" name="up">2</a></div>
<div class='down'><a href="" class="vote" id="13" name="down">0</a></div>
</div><!--end box1-->
<div class='box2' >Sachin Tendulkar is GOD</div>
</div><!--end item-->
<div class="item">
<div class="box1">
<div class='up'><a href="" class="vote" id="13" name="up">2</a></div>
<div class='down'><a href="" class="vote" id="13" name="down">0</a></div>
</div><!--end box1-->
<div class='box2' >Sachin Tendulkar is GOD</div>
</div><!--end item-->
</div><!--end wrapper-->
</div><!--end row-->
</div><!--end main-->
然后你的CSS就可以了：
#main{width:100%;}
.row{width:100%; border-bottom:1px solid black;}
.wrapper{width:800px; margin:0 auto;}
.item{width:400px; float:left;}
你可以在这里看到一个有效的例子：http://jsfiddle.net/gHmDv/
答案 2 :(得分：0)
我在这里做了一个投票系统。我从 Stackoverflow 的投票中获取了颜色。我用剪辑路径制作了“图标”，并给了它们一个三角形。使用单选按钮，我将标签与 name 属性连接起来，如果您现在单击三角形，则单选按钮被激活，三角形变为橙色。这是代码（您可以省略 javascript 代码）：
var number = 0;
var count = document.getElementById("voteCounter");
function plusOne() {
number = 1;
count.innerHTML = number;
}
function minusOne() {
number = - 1;
count.innerHTML = number;
}* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
#vote {
display: flex;
flex-direction: column;
align-items: center;
width: 50px;
font-size: 25px;
color: #6C737B;
}
#upvote {
background: #BCC0C3;
height: 50px;
width: 40px;
clip-path: polygon(50% 60%, 0% 100%, 100% 100%);
margin-bottom: 10px;
cursor: pointer;
}
#downvote {
background: #BCC0C3;
height: 50px;
width: 40px;
clip-path: polygon(50% 40%, 100% 0%, 0% 0%);
margin-top: 10px;
cursor: pointer;
}
input[type="radio"] {
display: none;
}
input[id="upvoteRadio"]:checked ~ #upvote {
background: #E5863D;
}
input[id="downvoteRadio"]:checked ~ #downvote {
background: #E5863D;
}<div id="vote">
<input type="radio" id="upvoteRadio" name="vote" value="upvote">
<label for="upvoteRadio" id="upvote" onclick="plusOne()"></label>
<p id="voteCounter">0</p>
<input type="radio" id="downvoteRadio" name="vote">
<label for="downvoteRadio" id="downvote" onclick="minusOne()"></label>
</div>
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？