CSS编程排版练习

1. 实验准备

  • 熟悉层叠样式表css语法;
  • 登录w3school,进行示例练习;
    http://www.w3school.com.cn/css/index.asp
  • 查看一个在线的css实战教程:
    https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout

2. 实验内容

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

3.实验环境

  • JetBrains WebStorm 2018.3.5 x64 : html+css

4.实验样式

样式.png

4.具体过程

1、整体布局
整体布局.png
  • 同时,我们在可以用css定义全局样式;
  • 开始前,在