CSS编程练习和界面设计
2019-03-25 本文已影响0人
未央花语
1. 实验准备
- 熟悉层叠样式表css语法；
- 登录w3school，进行示例练习；
http://www.w3school.com.cn/css/index.asp - 查看一个在线的css实战教程：
http://www.imooc.com/learn/147
2. 实验内容
实验一
-
根据所学知识，实现如下图所示的简单两列布局。
整个页面宽度为960px，背景颜色为#CFF。左侧盒子宽度为740px，背景颜色为#C9F，右侧盒子宽度为210px，背景颜色为#FCF。左侧和右侧盒子的高度均为300px。
页面图片.png
实验二
- 根据所学知识，对新闻内容进行排版。
要求：div的最小高度是300px，随新闻内容的增多可以自动撑开，每段文字首行缩进2个字符，行高25px。新闻中的图片水平居中。
效果展示.png
图片引用地址: http://img.mukewang.com/53edaa5a0001c86705000420.jpg
3.详细操作
实验一具体要求
- 在右侧代码的body标签中添加一个div，设置其class属性为mainBox。
- 在mainBox中添加两个div，其class属性分别为leftBox和rightBox。
- 在右侧代码的之前，分别定义类选择器mainBox、leftBox、rightBox，并按照题目要求定义其CSS样式。
基础代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
/*在此定义相应的类选择器，并根据要求设置相关CSS属性*/
</style>
</head>
<body>
<div class="mainBox">//添加div标签，并设置属性
<div class="leftBox"></div> //leftBox和rightBox需要嵌套在mainBox中
<div class="rightBox"></div>
</div>
</body>
</html>
- 如何让leftBox和rightBox浮在mainBox上面，我们学习使用css中的float属性
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
<style>
.mainBox{
width: 960px;
height: 300px;
background-color: #CFF;
}
.leftBox{
width: 740px;
height: 300px;
background-color: #C9F;
background-repeat: no-repeat;
float: left; //使leftBox向左浮动
}
.rightBox{
width: 210px;
height: 300px;
background-color: #FCF;
text-align: center;
float: right; //使rightBox向右浮动
}
</style>
- 注意：
leftBox和rightBox设置浮动之后脱离了普通的文档流，不再占用原来文档中的位置，因此无法把父div撑开。
解决的方法：
①可以给父div也设置高度为300px，使页面中的leftBox和rightBox看起来“好像”还在原来的位置；
②定义一个类选择器，并设置clear:both；清除浮动，同时为了解决IE6中div有高度的问题可以增加属性height:0; overflow:hidden;
实验二具体要求
在style标签内完以下样式定义:
- 定义新闻内容所在div的整体样式.newsBox。
- 定义标题的样式.newsTitle
- 定义标题下方发布人、发布时间等样式.newsInfo
- 定义新闻内容的样式.newsContent
- 设置新闻中的图片水平居中
- 设置新闻内部标题加粗
基础代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/*在此定义相关样式*/
</style>
</head>
<body>
<div class="newsBox">
<h1 class="newsTitle">慕课网获App Store强力推荐荣登四榜单</h1>
<p class="newsInfo">发布人：Admin 发布时间：2014-08-01 浏览：5321次</p>
<div class="newsContent">
<p> 8月伊始，慕课网App……是IT学习的最佳选择。</p>
<p> App Store力荐慕课网荣登四榜单</p>
<p>App Store因公平著称，……推荐。</p>
<p><img src=" http://img.mukewang.com/53edaa5a0001c86705000420.jpg" width="500" height="420" alt=""/></p>
<p>事实上，……得到了用户的认可。</p>
</div>
</div>
</body>
</html>
- 定义新闻内容所在div的整体样式.newsBox
.newsBox{
width: 800px;
}
- 定义标题的样式.newsTitle
.newsTitle{
text-align: center;
}
- 定义标题下方发布人、发布时间等样式.newsInfo
.newsInfo{
text-align: center;
color:#8A8989;
}
- 定义新闻内容的样式.newsContent
.newsContent p{
text-indent: 2em;
line-height: 25px;/* 行高25px */
font-family:Arial,Helvetica;
/*em是相对单位，2em即现在一个字大小的两倍*/
}
- 设置新闻中的图片水平居中
.imgine{
width: 800px;
display: table-cell; /* 图片水平居中显示 */
vertical-align: middle;
text-align: center;
}
- 设置新闻内部标题加粗
.sTitle{
font-weight: bold;
}
注意：<p></p>之间的文字可以替换成自己想要的内容，图片也可以更换。
