创建一个style.css文件
把css代码放入这个文件
<style>
*{
margin:0;
padding:0;
list-style-type:none;
font-size:13px;
font-family:'Helvetica Neue',Helvetica,Arial,Sans-serif;
}
body {
background-color: #54B1EB;
}
#all_wrap {
width: 958px;
margin: 0 auto;
margin-top:30px;
background-color:#CCCCCC;
}
#header h1 {
font-size: 36px;
line-height:70px;
}
#header {
margin: 0 auto;
width: 916px;
}
#content {
margin: 0 auto;
width: 916px;
border: 1px solid #3683D8;
}
.item {
margin: 0 auto;
width: 896px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #900;
clear:both;
}
.a {
float: left;
width:60px;
margin-top:5px;
}
/*留言列表*/
.n,.t,.m{
line-height:30px;
}
.n {
float: left;
color:#00F;
padding-right:5px;
}
.t{
color:#666;
}
.o {
float: right;
}
.m{
padding-left:60px;
padding-right:30px;
word-break:break-all;
}
/*新留言表单*/
.form_line{
clear:both;
margin-top:10px;
}
.form_box {
margin: 0 auto;
width: 890px;
}
.form_text {
float: left;
width: 80px;
text-align:right;
}
#form_select_avater label {
width: 60px;
display: block;
float: left;
text-align: center;
cursor: pointer;
}
.form_input textarea {
width: 500px;
height: 70px;
}
#submit_0{
width:100px;
height:30px;
}
#footer{
margin: 0 auto;
width: 896px;
}
.footer_message {
line-height: 40px;
}
.pagination {
text-align: center;
margin:10px auto 10px auto;
}
.pagination a {
display: inline-block;
border: 1px solid #00F;
padding-right: 8px;
padding-left: 8px;
padding-top: 2px;
padding-bottom: 2px;
text-decoration: none;
color: #900;
margin-right: 4px;
}
.pagination a:hover{
border-color:#F0F;
color:#000;
}
.login_button {
float: right;
}
#submit_1 {
width: 60px;
}
.login_form form label {
float: left;
display: block;
width: 220px;
}
.login_form {
padding-top: 20px;
}
.login_form form {
display: block;
border: 1px dashed #F0F;
width:520px;
padding-top:10px;
padding-bottom:10px;
padding-left:3px;
}
.welcome_info {
color: #900;
float: right;
}
.r {
color: #F00;
}
.retime{
color:#666;
}
.login_button a{
text-decoration:none;
}
#login_form{
display:none;}
</style>在前端页面输入这样一句代码，所有文件放在同一目录下以便调用，如果放在其他文件夹中需要输入路径才能调用。
<link rel="stylesheet" type="text/css" href="style.css"/>
创建一个index.js文件
把js代码 放入
<script type="text/javascript">
$(document).ready(function() {
random_checked_avatar();
$("#submit_0").click(validate_input);
// toggle() 方法切换元素的可见状态。
// 如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
$("#login_show_button").toggle(function(){
$("#login_form").show(100);
return false;
},function(){
$("#login_form").hide(100);
return false;
});
$(".reply_button").click(function(){
if($(this).parent().parent().children(".m").children(".reply_form_wrap").size()==0){
//parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。
var id=$(this).attr("href"); //attr() 方法设置或返回被选元素的属性值。
var reply_form=$("#reply_form").html();
$(this).parent().parent().children(".m").append(reply_form); //append() 方法在被选元素的结尾插入指定内容。
$(this).parent().parent().children(".m").children(".reply_form_wrap").show(200);
$(this).parent().parent().children(".m").children(".reply_form_wrap").children("form")
.children("input[name='id']").val(id);
}
return false;
});
});
function random_checked_avatar(){
var r=Math.random()*2; //返回介于 0 ~ 2 之间的一个随机数。
$("#form_select_avater input:radio").eq(r).attr("checked","checked");
}
function validate_input(){
var l=$("#nickname").val().trim().length;
if(l==0) {alert("昵称不能为空");return false;};
if(l>6) {alert("昵称要6个字符以内");return false;}
l=$("#message").val().trim().length;
if(l==0) {alert("留言内容不能为空");return false;}
if(l>300) {alert("留言内容要300字符以内");return false;}
return true;
}
</script>在前端页面加入这样的代码，所有文件放在同一目录下以便调用，如果放在其他文件夹中需要输入路径才能调用。
<script type="text/javascript" src="index.js"></script>下一节
