HTML中美化页面,10 使用CSS美化页面

2024-04-14 20:23:09

在项目根目录下创建静态文件夹static，如下图所示。在static文件夹下创建base.css文件，内容如下所示。这样就可以解决上一小节中在HTML中嵌入CSS代码的混乱感。

static文件夹.png

* {

margin: 0;

padding: 0;

}

div.nav {

background-color: #eee;

border-bottom: 1px solid #ccc;

}

div.nav a {

text-decoration: none;

color: #000;

padding: 10px 5px;

}

div.nav a.logo {

display: inline-block;

font-size: 120%;

}

打开mysite文件夹下的全局设置文件settings.py，在该文件的最后添加静态文件夹static所存放的位置，添加如下内容所示：

STATICFILES_DIRS = [

os.path.join(BASE_DIR, 'static'),

]

在base.html文件中引入static文件夹下的base.css文件，有两种方法：下面采用方法1。此时，base.html文件如下所示：

{% load staticfiles %}

{% block title %}{% endblock %}

个人博客网站

首页

博客

{% block content %} {% endblock %}

同理，在static文件夹下创建home.css，然后将home.html中的CSS代码剪切至home.css中。如下所示：

h3.home-content {

font-size: 222%;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

由于home.html文件是对base.html文件的拓展，于是，对base.html文件进行修改增加模板标签{% block header_extends %}{% endblock %}，修改后的文件内容如下所示：

{% block title %}{% endblock %}

{% block header_extends %}{% endblock %}

个人博客网站

首页

博客

{% block content %} {% endblock %}

最后，在home.html中对模板标签{% block header_extends %}{% endblock %}进行详细说明。因此需要在home.html中引入home.css才能对博客首页的前端页面进行CSS美化，此处使用方法2进行引入CSS文件。home.html文件中的内容如下：

{% extends 'base.html' %}

{% load staticfiles %}

{% block title %}

我的网站|首页

{% endblock %}

{% block header_extends %}

{% endblock %}

{% block content %}

欢迎访问我的网站，随便看

{% endblock %}

HTML中美化页面,10 使用CSS美化页面相关推荐

10使用CSS美化页面
技术交流QQ群:1027579432,欢迎你的加入! 本教程来源于B站杨仕航Django2.0开发视频教程,如需转载,必须注明来源! 1.页面设计 2.导航栏设计打开blog文件夹的urls.py文 ...
【技术】nuxt中引入wow和animate.css随页面滚动出现动画
通过nodejs安装 cnpm install wowjs --save-dev 安装成功后:"package.json "wowjs": "^1.1.3&qu ...
大学web基础期末大作业~仿品优购商城页面制作(HTML+CSS+JavaScript)
HTML网页设计期末课程大作业~~仿品优购页面制作(HTML+CSS+JavaScript) 关于HTML期末网页制作,大作业A+水平 ~仿品优购网页作业HTML+CSS+JavaScript实现,共 ...
小程序跳转样式布局错乱_解决导致CSS布局页面错乱的方法
在做网站建设中,经常会遇到css布局页面错乱,下面是如解决错乱的方法. 1. float元素务必指定width属性很多浏览器在显示未指定width的float元素时会有bug.所以不管float元素 ...
在HTML中使用CSS美化网页的三种方法
在HTML中使用CSS美化网页的三种方法 CSS是Cascading Style Sheets(级联样式表)的缩写,CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距 ...
前段html css部分试卷,CSS美化试卷页面
经CSS美化后的试卷页面使用CSS美化前面做的纯HTML页面,实现如上的效果. *-- 第一步: 使用text-align:center实现将标题居中,width:auto使宽度自适应,height ...
用CSS美化你的滚动条
本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条.改变它们的颜色,调整它们的外形,适配你对页面UI设计.我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS属性,最后,还将介绍如何用 ...
移动端屏幕适配和css美化浏览器自带的滚动条
一.css美化浏览器自带的滚动条: 浏览器自带的滚动条显示不太美观,我们可以调css样式来美化一下.了解以下浏览器(webkit内核)滚动条自带伪类样式: ::-webkit-scrollbar:针对 ...
Form 表单详解：案例、CSS 美化
本文要点: 常见表单表单的性质表单CSS美化使用 radio 实现 Tab 选项卡什么是表单用户通过表单填写信息,然后通过计算机网络传送给服务器.表单标签不是一个标签,而是一组标签,因为不同 ...
java rcp中lable设置透明_RCP界面美化技术（转）
Eclipse RCP 界面概览 Eclipse RCP 简介 Eclipse 是一种基于 Java 的可扩展开源开发平台.就其自身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境.同时也 ...

最新文章

热门文章