等距排列 html,【任务8-6】创建等距排列的4列式布局网页0806.html.pptx

《网页美化与布局》课程资源

数字媒体专业群教学资源库项目组

等距排列的

4列式布局网页创建

【任务描述】

(1)创建样式文件base.css和main.css，在样式文件中定义标签的属性、类选择符及其属性。

(2)创建网页文档0806.html，且链接外部样式文件base.css和main.css。

(3)在网页0806.html中添加必要的HTML标签实现网页主体布局结构。

(4)将已有的HTML代码片断插入到网页0806.html中的合适位置。

【任务描述】

(5)浏览网页0806.html的效果，如图8-26所示，该网页为等距排列的4列式布局结构。

【任务实施】

(1)创建站点与文件夹

在站点“单元8”中创建文件夹“8-6”，在该文件夹中创建子文件夹“CSS”，将单元1已创建好的样式文件base.css拷贝至“CSS”文件夹中。

(2)定义网页主体布局结构的CSS代码

在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码。

【任务实施】

(3)创建网页文档0806.html与链接外部样式表

在文件夹“8-6”中创建网页文档0806.html，切换到网页文档0806.html的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示：

【任务实施】

(4)编写网页主体布局结构的HTML代码

网页0806.html主体布局结构的HTML代码如表8-21所示。

(5)在网页中插入代码片断

根据网页0806.html的浏览效果图在该网页文档中合适位置插入相应的代码片断，从而形成结构和内容都完整的网页。

(6)保存与浏览网页

保存网页文档0806.html。

【任务实施】

(7)将网页0806.html中的4列等距式布局改为5列等距式布局的关键CSS代码如表8-22所示。

5列等距式布局网页的浏览效果如图8-27所示。

(1)创建文件夹3-2

(2)创建网页文档并编辑网页内容

(3)编写样式代码

(4)浏览网页效果

本次课程结束

感谢大家观看！

等距排列 html,【任务8-6】创建等距排列的4列式布局网页0806.html.pptx相关推荐

创建等距世界：游戏开发入门
在本教程中,会让你知道要创建的等距世界的广泛概述.你将学习什么是等角投影,以及如何用二维数组表示等距水平.我们会制定视图和逻辑之间的联系,这样我们就可以很容易的操纵屏幕上的对象,处理区块碰撞检测.我们 ...
sass 基于ruby_使用Sass和Gerillass创建漂亮的基于卡片的设计布局
sass 基于ruby Creating a card-based design layout can often be challenging, especially if you don't us ...
vue 图片自适应排列插件_朋友圈图片动态排列，qq说说图片自适应排列
更新记录 1.0.0(2021-02-07) 首次提交组件平台兼容性 app 微信小程序支付宝小程序百度小程序字节小程序 QQ小程序快应用 2.9.7 √ × × × × × h5-Safa ...
Stimulsoft Reports.Net基础教程（七）：创建列式报表①
2019独角兽企业重金招聘Python工程师标准>>> 1.运行设计器 2.连接数据 2.1创建New Connection 2.2创建New Data Source 3.设置列选项 ...
一年中所有节日的排列顺序_计数问题（二）-排列组合的使用
在计数问题(一)中我们分析了排列和组合的定义,计算方法以及公式的含义.排列组合的基本定义讲述的是从一列元素中分先后(排列)或不分先后地选出部分元素,其可能的选择方法数.在这一期中我们会更仔细地分析组合 ...
创建一个方便设计的自定义栅格布局
让我们看看如何使用css创建栅格覆盖(grid overlay),这是响应式的,且很容易用户自定义,使用的是css变量(和"css custom properties"相对应). ...
python随机产生10个数然后前5个升序后5个降序_编写程序,生成包含 20 个随机数的列表,然后将前 10 个元素升序排列,后 10 个元素降序排列,并输出结果。_学小易找答案...
[填空题]在 Python3.x 中 input() 函数接收到的用户输入数据一律为 ________ . [填空题]运算符% (可以.不可以)对浮点数进行求余数操作. [简答题]解释 Python ...
如何创建一张属于自己的简单的网页
1.如何创建一张属于自己的简单的网页? 步骤一:启动笔记本开始--所有程序--附件--记事本步骤二: 用记事本来编辑HTML 在记事本中输入代码,例如: <!DOCTYPE HTML> ...
Python编写程序，生成包含20个随机数列表，然后将前十个元素升序排列，后十个元素降序排列，并输出结果。
编写程序,生成包含20个随机数列表,然后将前十个元素升序排列,后十个元素降序排列,并输出结果. import random listone=[random.randint(0,100) for i i ...

等距排列 html,【任务8-6】创建等距排列的4列式布局网页0806.html.pptx

等距排列 html,【任务8-6】创建等距排列的4列式布局网页0806.html.pptx相关推荐

最新文章

热门文章