CSS编程排版练习
一、前言
本篇开发环境
1、操作系统： windows 10 x64
2、编辑器：WebStorm
实验目的
熟悉层叠样式表css语法
二、实验内容
任务1
制作一个简单的页面， 要求：
1） 菜单始终在屏幕的上方（无论拖动）；
2） 网页的结构如图所示。每个区块之间，需要有边距和空白。
3） 在屏幕的右下方，固定一个“联系电话”的方框；不随滚动条而改变位置。
4） 进行界面设计。要求有布局、色彩、字体等因素的考虑；
示例图：
图1
任务2
基于以前的实验所做的网页，重新分栏/分区块（如果之前未分栏，先分栏显示页面）。使得html内容不变，但不同的css所控制的版面布局不同。
三、实验步骤
任务1
1.对每个区块分别定义一个class，再在body里引用一次即可
2.参考代码（仅区块）
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>2.0</title>
<style type="text/css">
body
{
text-align:center;
}
.top
{
margin:0 10%;
position:fixed;
top:0;
left:0;
width:80%;
height:80px;
background:#e2dbbe;
z-index:2;
border:1px solid #000
}
.left
{
margin:30px 10%;
position:absolute;
top:80px;
left:0;
width:23%;
height:800px;
background:#4cb4e7;
z-index: 1;
border:1px solid #000
}
.right
{
margin:30px 10%;
position:absolute;
top:80px;
right:0;
width:54%;
height:800px;
background:#4cb4e7;
z-index: 1;
border:1px solid #000
}
.bottom
{
margin:40px 10%;
position:absolute;
top:900px;
right:0;
width:80%;
height:80px;
background:#a3a380;
z-index: 1;
border:1px solid #000
}
.tel
{
margin-top:40px;
position:fixed;
bottom:0;
right:0;
width:10%;
height:200px;
background:#043e6b;
z-index: 1;
border:2px solid #000
}
</style>
</head>
<body>
<div class="top">
</div>
<div class="left">
</div>
<div class="right">
</div>
<div class="bottom">
</div>
<div class="tel">
</div>
</body>
</html>
3.最终代码（包含内容）
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>2.0</title>
<style>
body
{
margin:0;
}
.backgournd
{
width:100%;
height:100%;
margin:0;
text-align:center;
background:url(back.jpg) 0 0;
}
.top
{
margin:0 10%;
position:fixed;
top:0;
left:0;
width:80%;
height:80px;
background:#cbedfd;
z-index:2;
border:1px solid #000;
opacity:0.8;
}
.left
{
margin:30px 10%;
position:absolute;
top:80px;
left:0;
width:23%;
height:68%;
background:#87c2df;
z-index: 1;
border:1px solid #000;
opacity:0.8;
}
.right
{
margin:30px 10%;
position:absolute;
top:80px;
right:0;
width:54%;
height:68%;
background:#87c2df;
z-index: 1;
border:1px solid #000;
opacity:0.8;
}
.bottom
{
margin:40px 10%;
margin-bottom:0;
position:absolute;
bottom:0;
right:0;
width:80%;
height:80px;
background:#bbbba5;
z-index: 1;
border:1px solid #000;
text-align:center;
opacity:0.8;
}
.tel p{
color:white;
line-height:10px;
}
.tel
{
margin-top:40px;
position:fixed;
bottom:0;
right:0;
width:10%;
height:200px;
background:#5291c2;
z-index: 1;
border:1px solid #000;
opacity:0.8;
}
ul{
list-style: none;
}
li{
margin-top:10px;
border: black;
width:24%;
height:60px;
text-align:center;
float:left;
}
a{
color:black;
display:block;
text-decoration:none;
}
a:visited{
color:black;
}
a:hover{
color:white;
}
a:active{
color:white;
}
p{
font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;
margin:30px;
line-height:20px;
}
td{
width:500px;
height:80px;
text-align:center;
}
table{
margin:30px;
}
</style>
</head>
<body>
<div class="backgournd">
<div class="top">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">题库</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">支持</a></li>
</ul>
</div>
<div class="left">
<p>Online Judge系统（简称OJ）是一个在</p>
<p>线的判题系统。用户可以在线提交程序多</p>
<p>种程序（如C、C++、Pascal）源代码，</p>
<p>系统对源代码进行编译和执行，并通过预</p>
<p>先设计的测试数据来检验程序源代码的正</p>
<p>确性。</p>
</div>
<div class="right">
<table border="1">
<tr>
<th>题类</th>
<th>数量</th>
<th>难度</th>
</tr>
<tr>
<td>课后题</td>
<td>114514</td>
<td>☆☆</td>
</tr>
<tr>
<td>竞赛题</td>
<td>1919</td>
<td>☆☆☆☆</td>
</tr>
<tr>
<td>提高题</td>
<td>820</td>
<td>☆☆☆☆☆</td>
</tr>
</table>
</div>
<div class="bottom">
<p>Copyright c 2019 - DingZili. All Rights Reserved.</p>
</div>
<div class="tel">
<p>QQ:</p><p>436026787</p>
<p>Wechat:</p><p>18723748889</p>
</div>
</div>
</body>
</html>
任务2
1.分栏方法参照任务1
2.将不同区块的css单独存储为一个文件，再全部链接至html即可
<link rel="stylesheet" type="text/css" href="top.css"/>
<link rel="stylesheet" type="text/css" href="left.css"/>
<link rel="stylesheet" type="text/css" href="right.css"/>
<link rel="stylesheet" type="text/css" href="middle.css"/>
<link rel="stylesheet" type="text/css" href="bottom.css"/>
网友评论