2019-03-30

CSS编程排版练习


一、前言

本篇开发环境

1、操作系统: windows 10 x64
2、编辑器:WebStorm

实验目的

熟悉层叠样式表css语法


二、实验内容

任务1

制作一个简单的页面, 要求:
​1) 菜单始终在屏幕的上方(无论拖动);
2) 网页的结构如图所示。每个区块之间,需要有边距和空白。
3) 在屏幕的右下方,固定一个“联系电话”的方框;不随滚动条而改变位置。
4) 进行界面设计。要求有布局、色彩、字体等因素的考虑;
示例图:


图1

任务2

基于以前的实验所做的网页,重新分栏/分区块(如果之前未分栏,先分栏显示页面)。使得html内容不变,但不同的css所控制的版面布局不同。

三、实验步骤

任务1

1.对每个区块分别定义一个class,再在body里引用一次即可
2.参考代码(仅区块)


    
    2.0
    




3.最终代码(包含内容)


    
    2.0
    



Online Judge系统(简称OJ)是一个在

线的判题系统。用户可以在线提交程序多

种程序(如C、C++、Pascal)源代码,

系统对源代码进行编译和执行,并通过预

先设计的测试数据来检验程序源代码的正

确性。

题类 数量 难度
课后题 114514 ☆☆
竞赛题 1919 ☆☆☆☆
提高题 820 ☆☆☆☆☆

Copyright c 2019 - DingZili. All Rights Reserved.

QQ:

436026787

Wechat:

18723748889

任务2

1.分栏方法参照任务1
2.将不同区块的css单独存储为一个文件,再全部链接至html即可






你可能感兴趣的:(2019-03-30)