Php 设计投票系统的样式_Php_Javascript_Jquery_Html_Css

Php 设计投票系统的样式

php javascript jquery html css

Php 设计投票系统的样式,php,javascript,jquery,html,css,Php,Javascript,Jquery,Html,Css,我在这里制作了一个投票系统示例：然而，在反复尝试之后，我无法让它按照我想要的方式进行样式设置，因为开发人员在这里使用了太多的div。要么字体太大，要么与数字重叠，要么不成比例，等等我希望它看起来像这样：这是我的代码： <!DOCTYPE html> <head> <title>Sample Polling System</title> <script type="text/javascript" src="jquery.js"

我在这里制作了一个投票系统示例：

然而，在反复尝试之后，我无法让它按照我想要的方式进行样式设置，因为开发人员在这里使用了太多的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>


抽样调查系统
$（函数（）{
$（“.vote”）。单击（函数（）
{
var id=$（this.attr（“id”）；
var name=$（this.attr（“name”）；
var dataString='id='+id；
var parent=$（这是）；
如果（名称=='up'）
{
$（this.fadeIn（200.html）（“”）；
$.ajax({
类型：“POST”，
url:“up_vote.php”，
数据：dataString，
cache:false，
成功：函数（html）
{
html（html）；
}  
}); 
}
其他的
{
$（this.fadeIn（200.html）（“”）；
$.ajax({
类型：“POST”，
url:“down_vote.php”，
数据：dataString，
cache:false，
成功：函数（html）
{
html（html）；
}
});
}
返回false；
});
});
身体
{
字体系列：'Georgia'，Times New Roman，Times，衬线；
}
#主要
{
高度：100px；
宽度：800px；
}
A.
{
颜色：#DF3D82；
文字装饰：无；
}
a:悬停
{
颜色：#DF3D82；
文字装饰：下划线；
}
向上的
{
高度：40px；字体大小：24px；文本对齐：居中；背景色：灰色；页边距底部：2px；
-moz边界半径：6px；-webkit边界半径：6px；
}
.上a
{
颜色：#FFFFFF；
文字装饰：无；
}
a:悬停
{
颜色：#FFFFFF；
文字装饰：无；
}
.下来
{
高度：40px；字体大小：24px；文本对齐：居中；背景色：灰色；页边空白顶部：2px；
-moz边界半径：6px；-webkit边界半径：6px；
}
.下a
{
颜色：#FFFFFF；
文字装饰：无；
}
a:悬停
{
颜色：#FFFFFF；
文字装饰：无；
}
.box1
{
浮动：左侧；高度：80px；宽度：50px；
}
.box2
{
浮动：左；宽度：440px；文本对齐：左；
左侧边距：10px；高度：60px；顶部边距：10px；
字号：18px；
}
img
{
边界：无；
填充顶部：7px；
}
样本轮询系统

请帮我达到我想要达到的效果

谢谢

我修复了您的代码：

    <!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>


抽样调查系统
$（函数（）{
$（“.vote”）。单击（函数（）
{
var id=$（this.attr（“id”）；
var name=$（this.attr（“name”）；
var dataString='id='+id；
var parent=$（这是）；
如果（名称=='up'）
{
$（this.fadeIn（200.html）（“”）；
$.ajax({
类型：“POST”，
url:“up_vote.php”，
数据：dataString，
cache:false，
成功：函数（html）
{
html（html）；
}  
}); 
}
其他的
{
$（this.fadeIn（200.html）（“”）；
$.ajax({
类型：“POST”，
url:“down_vote.php”，
数据：dataString，
cache:false，
成功：函数（html）
{
html（html）；
}
});
}
返回false；
});
});
身体
{
字体系列：'Georgia'，Times New Roman，Times，衬线；
}
#主要
{
宽度：800px；
溢出：隐藏；
}
A.
{
颜色：#DF3D82；
文字装饰：无；
}
a:悬停
{
颜色：#DF3D82；
文字装饰：下划线；
}
向上的
{
高度：40px；字体大小：24px；文本对齐：居中；背景色：灰色；页边距底部：2px；
-moz边框半径：6px；-webkit边框半径：6px；浮点：左；宽度：40px；
}
.上a
{
颜色：#FFFFFF；
文字装饰：无；
}
a:悬停
{
颜色：#FFFFFF；
文字装饰：无；
}
.下来
{
高度：40px；字体大小：24px；文本对齐：居中；背景色：灰色；页边空白顶部：2px；
-moz边框半径：6px；-webkit边框半径：6px；浮点：左；左边距：40px；宽度：40px；
}
.下a
{
颜色：#FFFFFF；
文字装饰：无；
}
a:悬停
{
颜色：#FFFFFF；
文字装饰：无；
}
.box1
{
浮动：左；清除：两个；
}
.box2
{
浮动：左；宽度：440px；文本对齐：左；
字号：18px；
}
img
{
边界：无；
填充顶部：7px；
}
样本轮询系统
人们同意这一点
人们不同意这一点

看看

#box2

这是放置在

#box1

上方的标题，我给它一个

浮动：左和#box1
得到了一个浮动：左和a清除：两者都有以便它可以显示在新行上
我在每个灰色框旁边都添加了一个span
，第一个说人们同意这个，另一个人们不同意这个，他们得到了一个浮动：左
放在灰色框旁边，一些留有空白
。我删除了一些height
属性。
首先，您应该更改标记。您正在使用多个同名（'main'）的elemtn ID，这是错误的。在一个HTML页面中，同一ID的元素宽度不应超过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-->

您可以在这里看到一个工作示例：问题出在哪里？我看到的唯一区别是，你的选项是并排的，而在页面上，它们是垂直的。这是唯一的问题吗？首先：您在该页面中有多个ID。不酷。如果你能做点什么（或者让开发者做点什么），那就去做吧。非常感谢你的代码。但是非常感谢下面的解释。我把你的解释弄乱了，成功地得到了我想要的：）
#main{width:100%;}
.row{width:100%; border-bottom:1px solid black;}
.wrapper{width:800px; margin:0 auto;}
.item{width:400px; float:left;}