CSS3 VS CSS2大PK

本文作者通过制作同样的页面对CSS2和CSS3进行了比较,我们来看一下谁更胜一筹。
CSS3已经面世很久,目前仍处于开发完善阶段。不过网上关于CSS3的介绍、使用方法和夸奖已经传得沸沸扬扬了,建站学也有少关于CSS3的介绍。CSS3比CSS2到底是不是真的好?到底有什么优越之处呢?
本文借鉴国外作者的文章(原文可以查看文章底部链接),从CSS3编写及作用原理以外的角度分析一下CSS3与CSS的差别。
笔者利用自己制作的一个页面为例,分别使用CSS和CSS3?两个版本制作了相同的页面,使这两个页面效果几乎相同,然后对这两个CSS文件进行比较。

 


制作时间
首先,笔者在制作时间上进行对比,利用CSS3制作页面远比使用CSS节省时间。因为CSS3可以直接制作很多效果用来替换图片,而使用旧CSS版本制作的页面需要制作一些图片来体现效果,所以在制作图片上也要花费很多时间。


文件数量、容量及加载时间
其次,作者从文件的大小和加载时间方面进行了比较,如上图图一中所示。
CSS3版本的CSS文件大小为5.2K,网页文件总数为12,总容量为767.9K;CSS版本的CSS文件为4.5K,但网页文件总数为22,网页容量为849.2K。加载时间分别是3.3秒和4.7秒。
从以上数据可见,CSS3比CSS精简很多,速度也更快。


服务器请求次数
另外一个衡量指标是服务器请求次数,一般网页中有多少文件,就会对服务器有多少次请求数。不要小看这个指标,很多网页制作高手为了减少对服务器的请求负载,才探索出CSS Sprite技术。
如上图中图二所示,CSS3中一共有12个文件,CSS版本中有22个文件,所以它们对服务器的请求数分别为12和22。又是CSS3胜出。
最后,综合以上的数据,在图三中已经列出CSS3和CSS的相关数据,CSS3完胜。
这下我们可以看到CSS3除了比较美观的效果外,还有更多的优点,毕竟它是网络技术发展中的产物,必然会向更加简单实用美观的方向发展。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的图书管理系统的 Django 代码示例: 首先,在终端中创建一个 Django 项目: ``` django-admin startproject myproject ``` 然后,创建一个名为 `myapp` 的应用程序: ``` cd myproject python manage.py startapp myapp ``` 接下来,我们需要安装一些第三方库,包括: - Bootstrap:用于构建网页样式; - jQuery:用于处理网页交互; - django-crispy-forms:用于创建美观的表单。 可以通过以下命令安装这些库: ``` pip install django-bootstrap4 jquery django-crispy-forms ``` 接下来,在 `myapp/models.py` 文件中定义一个 `Book` 模型: ```python from django.db import models class Book(models.Model): title = models.CharField(max_length=200) author = models.CharField(max_length=200) description = models.TextField(blank=True) published_date = models.DateField(blank=True, null=True) def __str__(self): return self.title ``` 在 `myapp/forms.py` 文件中创建一个 `BookForm` 表单: ```python from django import forms from .models import Book class BookForm(forms.ModelForm): class Meta: model = Book fields = ['title', 'author', 'description', 'published_date'] ``` 在 `myapp/views.py` 文件中创建视图函数和路由: ```python from django.shortcuts import render, redirect from .models import Book from .forms import BookForm def book_list(request): books = Book.objects.all() return render(request, 'book_list.html', {'books': books}) def book_create(request): if request.method == 'POST': form = BookForm(request.POST) if form.is_valid(): form.save() return redirect('book_list') else: form = BookForm() return render(request, 'book_form.html', {'form': form}) def book_update(request, pk): book = Book.objects.get(pk=pk) if request.method == 'POST': form = BookForm(request.POST, instance=book) if form.is_valid(): form.save() return redirect('book_list') else: form = BookForm(instance=book) return render(request, 'book_form.html', {'form': form}) def book_delete(request, pk): book = Book.objects.get(pk=pk) book.delete() return redirect('book_list') urlpatterns = [ path('', book_list, name='book_list'), path('new/', book_create, name='book_create'), path('<int:pk>/edit/', book_update, name='book_update'), path('<int:pk>/delete/', book_delete, name='book_delete'), ] ``` 在 `myapp/templates` 文件夹中创建三个 HTML 文件: `base.html`: ```html {% load static %} <!DOCTYPE html> <html> <head> <title>{% block title %} {% endblock %}</title> <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"> <link rel="stylesheet" href="{% static 'css/main.css' %}"> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="{% url 'book_list' %}">图书管理系统</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="{% url 'book_list' %}">图书列表</a> </li> <li class="nav-item"> <a class="nav-link" href="{% url 'book_create' %}">添加图书</a> </li> </ul> </div> </div> </nav> <div class="container mt-4"> {% block content %} {% endblock %} </div> <script src="{% static 'js/jquery.min.js' %}"></script> <script src="{% static 'js/bootstrap.min.js' %}"></script> </body> </html> ``` `book_list.html`: ```html {% extends 'base.html' %} {% block title %}图书列表{% endblock %} {% block content %} <h1>图书列表</h1> <table class="table"> <thead> <tr> <th>标题</th> <th>作者</th> <th>描述</th> <th>出版日期</th> <th></th> </tr> </thead> <tbody> {% for book in books %} <tr> <td>{{ book.title }}</td> <td>{{ book.author }}</td> <td>{{ book.description }}</td> <td>{{ book.published_date }}</td> <td> <a href="{% url 'book_update' book.pk %}" class="btn btn-sm btn-primary">编辑</a> <a href="{% url 'book_delete' book.pk %}" class="btn btn-sm btn-danger">删除</a> </td> </tr> {% empty %} <tr> <td colspan="5">暂无数据</td> </tr> {% endfor %} </tbody> </table> {% endblock %} ``` `book_form.html`: ```html {% extends 'base.html' %} {% block title %}{{ form.instance.title }}{% endblock %} {% block content %} <h1>{{ form.instance.pk|default_if_none:"添加" }}图书</h1> <form method="post"> {% csrf_token %} <div class="form-group"> {{ form.title.label_tag }} {{ form.title }} </div> <div class="form-group"> {{ form.author.label_tag }} {{ form.author }} </div> <div class="form-group"> {{ form.description.label_tag }} {{ form.description }} </div> <div class="form-group"> {{ form.published_date.label_tag }} {{ form.published_date }} </div> <button type="submit" class="btn btn-primary">保存</button> <a href="{% url 'book_list' %}" class="btn btn-secondary">取消</a> </form> {% endblock %} ``` 最后,在 `myproject/settings.py` 文件中添加一些配置项: ```python INSTALLED_APPS = [ 'myapp', 'bootstrap4', 'crispy_forms', ] CRISPY_TEMPLATE_PACK = 'bootstrap4' STATIC_URL = '/static/' STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media') ``` 现在可以启动 Django 开发服务器并访问 `http://127.0.0.1:8000/`,应该会看到一个简单的图书列表页面,可以添加、编辑和删除图书。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值