js和ajax点赞功能代码_文章点赞功能（Ajax）

一、文章点赞样式构建

1、将base.html的css样式改为外部引入

将base.html的内嵌样式删除，改为使用 HTML 头部的 

 标签对中使用标签来引入外部的 CSS 文件。

base.html内容如下所示：

Title

{ { blog.title }}

管理

{% load my_tags %}

{% get_classification_style username %}

{% block content %}

{% endblock %}

个人站点的样式——home_site.css：

* {

margin: 0;

padding: 0;

}

.header {

width: 100%;

height: 60px;

background-color: #369;

}

.header .title {

font-size: 18px; /* 字体大小 */

font-weight: 100; /* 字体粗细 */

line-height: 60px; /* 行高与页头一致，完成居中 */

color: white;

margin-left: 15px;

margin-top: -10px;

}

.backend {

float: right; /* 浮动到右边 */

color: white;

text-decoration: none; /* 去除下划线 */

font-size: 16px;

margin-right: 12px;

margin-top: 10px;

}

.pub_info {

margin-top: 10px;

color: darkgray;

}

.menu {

margin-top: 20px;

}

文章详情页的样式——article_detail.css：

.article_info .title {

margin-bottom: 20px;

}

上述css代码是将标题部分和文字主体部分错开20像素。

2、构建点赞样式

根据博客园代码，在article_detail.html引入文章推荐踩灭:

{% extends "base.html" %}

{% block content %}

{ { article_obj.title }}

{ { article_obj.content|safe }}

{# 文章点赞 #}

1

0

{% endblock %}

将点赞的css样式写入article_detail.css中：

.article_info .title {

margin-bottom: 20px;

}

#div_digg {

float: right;

margin-bottom: 10px;

margin-right: 30px;

font-size: 12px;

width: 125px;

text-align: center;

margin-top: 10px;

}

/* 推荐 */

.diggit {

float: left;

width: 46px;

height: 52px;

background: url('/static/font/upup.gif') no-repeat;

text-align: center;

cursor: pointer;

margin-top: 2px;

padding-top: 5px;

}

/* 反对 */

.buryit {

float: right;

margin-left: 20px;

width: 4