版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
基于DIV+CSS技术介绍我的家乡
--项目介绍01项目介绍项目的流程02项目的分析03目录学到现在，我们会把一个网页分成多个盒子，再分别为盒子设置各种样式。接下来，我们来完成一个项目--介绍自己的家乡。本项目是完成一个网页，用于
介绍自己的家乡。
要求：
1、以右边的布局为基准，至少
包含此页面，可自己扩展；
2、图文并茂；
3、突出家乡特色、让更多的人
认识你的家乡。文字一段内容一段内容一段内容一段内容文字一段内容一段内容一段内容一段内容文字@版权***小组制作一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容1项目介绍2项目流程产品经理1位UI设计人员2位开发人员2-4位测试人员1-2位职责：项目的负责人。从业务出发分析需求，确定网页主题画出网页原型和撰写需求文档，主持需求评审会职责：设计网页，把握网页的整体美观。1人设计，1人收集图片、文字等素材职责：搭建网页的技术架构，并编程实现网页职责：根据产品要求，对网页效果进行测试，把关质量需求分析UI设计编程开发整合测试第一：需求分析需求分析阶段形成的成果是《产品需求文档》，是整个项目的指挥棒。本项目的需求是展示自己的家乡，功能比较单一。我们将重点放在画原型，也就是把设计的想法通过工具呈现出来，即网页的仿真效果，方便小组讨论。这里选用在线原型设计网站“墨刀”（1）访问地址：
https://modao.cc/，安装打开后，使用起来很简单，（2）画原型：考虑不同分辨率大小的屏幕显示情况。这里先只考虑电脑屏幕，特点是水平可显示更多内容，字体较大，需高质量的图片。第二：UI设计UI设计阶段形成的成果是UI设计图。这里主要是排版布局、主题颜色、风格。目前，我们设计能力有限，主要以寻找网络素材为主。高清图片网站：/
/zh//
//图标库常用的免费素材库：/
//阿里巴巴素材库，免费注册使用https://material.io/resources
//material
设计素材库第三：编程开发编程开发阶段形成的成果是可运行的产品。这里我们选用DIV+CSS技术进行编程。测试验收阶段形成的成果是测试报告。对照《产品需求文档》，测试流程主要包括：测试主流程是否通过功能测试记录bug回归测试本项目由于功能较单一，暂不进行测试。第四：测试验收3项目分析1）把网页划分成3个div盒子，控制好盒子的高度、宽度，尽量使用百分比，比如宽度100%；2）设置盒子之间的上下外边距、左右外边距，可先加上边框，注意要注意外边距的合并现象；3）在页头加上背景图；4）在页尾加上文字。分工协作：1、确定介绍的家乡2、找素材3、画原型4、编程搭框架页头：div盒子内容：1个div大盒子页尾：1个div盒子内容上半部分：1个div盒子每个图文内容又是一个子div盒子图、文垂直方向排列内容下半部分：1个div盒子每个图文内容又是一个子div盒子图、文水平方向排列背景图，文字在悬浮在的图指定位置上文字固定在指定位置上文字一段内容一段内容一段内容一段内容文字一段内容一段内容一段内容一段内容文字@版权***小组制作一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容一段内容
总结：郭春丽基于DIV+CSS技术介绍我的家乡
--浮动属性01浮动属性代码示例02目录1浮动属性在标准流中，一般情况下一个块级元素在水平方向会自动伸展，直到包含它的元素的边界，在竖直方向和兄弟元素依次排列。为了使网页的布局和结构更加丰富、自由、合理，CSS样式可以对元素设置浮动属性，使网页元素脱离原有标准流，改变它的排列方式，使块级元素在同一行中排列，让网页布局操作更加方便。元素的浮动是通过float属性来实现，浮动的元素将会脱离原有文档流的控制进行移动，移动的方向根据float属性值确定。float属性值：none：默认值，表示元素不浮动；left：左浮动，则元素的移动目标是网页的左上角。具体运动轨迹是：浮动元素从所在的行开始，自右向左移动，当到达本行的左侧时，移至上一行继续自右向左移动，至到网页的左上角（但该元素未必能达到左上角，还受制于其他元素的特性）。right：右浮动，则元素的移动目标是网页的右上角，它的运动轨迹为：浮动元素从所在行开始，从左往右移动，当到达本行的右侧时，移至上一行继续自左向右移动，至到网页的右上角（但该元素未必能达到右上角，还受制于其他元素的特性）<div>float:right1234<body><div>float:left1234<body>ABCDACBfloat:leftDfloat:rightABDC2代码示例通过几段代码来理解浮动属性：<html><head>
<title>float属性</title>
<style
type="text/css">
*{
margin:0px;
padding:0px;
}
div{
width:150px;
height:50px;
}
#box1{
background-color:red;
}
#box2{
background-color:blue;
}
#box3{
background-color:green;
}
</style></head><body>
<div
id="box1">box1</div>
<div
id="box2">box2</div>
<div
id="box3">box3</div></body>
</html>3个盒子未设置float属性，即默认为none效果解释：代码由上往下执行，3个块级元素，从上往下排列。<html><head>
<title>float属性</title>
<style
type="text/css">
*{
margin:0px;
padding:0px;
}
div{
width:150px;
height:50px;
}
#box1{
background-color:red;
float:left;
}
#box2{
background-color:blue;
float:left;
}
#box3{
background-color:green;
float:left;
}
</style></head><body>
<div
id="box1">box1</div>
<div
id="box2">box2</div>
<div
id="box3">box3</div></body>
</html>3个盒子均设置float=left效果解释：代码由上往下执行，box1的代码先被执行，但由于box1已在网页的左上角，所以它的位置未发生改变；；box2脱离原有文档流的控制从所在行向左移动，当到达本行的左侧时，移至上一行继续自右向左移动，遇到box1就此停止。box3同box2一样的原理。<html><head>
<title>float属性</title>
<style
type="text/css">
*{
margin:0px;
padding:0px;
}
div{
width:150px;
height:50px;
}
#box1{
background-color:red;
float:right;
}
#box2{
background-color:blue;
float:right;
}
#box3{
background-color:green;
float:right;
}
</style></head><body>
<div
id="box1">box1</div>
<div
id="box2">box2</div>
<div
id="box3">box3</div></body>
</html>3个盒子均设置float=right效果解释：代码由上往下执行，box1的代码先被执行，它向右浮动到网页的右侧；而box3的代码最后被执行，则显示在它们的最左侧。<html><head>
<title>float属性</title>
<style
type="text/css">
*{
margin:0px;
padding:0px;
}
div{
width:150px;
height:50px;
}
#box1{
background-color:red;
float:left;
}
#box2{
background-color:blue;
width:250px;
height:150px;
}
#box3{
background-color:green;
}
</style></head><body>
<div
id="box1">box1</div>
<div
id="box2">box2</div>
<div
id="box3">box3</div></body>
</html>第1个盒子设置float=left，第2个盒子高和宽比第1个盒子大效果解释：box1设置向左浮动，但由于box1已在网页的左上角，所以它的位置未发生改变；box2重新调整大小后，但未设置浮动属性，由于非浮动元素会忽略它前面的浮动元素，并取代其前面的浮动元素的位置，则box2置于box1的下方显示；box3未设置浮动属性，故紧挨着box2，并自上而下排列，则显示在box2下方。<html><head>
<title>float属性</title>
<style
type="text/css">
*{
margin:0px;
padding:0px;
}
div{
width:150px;
height:50px;
}
#box1{
background-color:red;
}
#box2{
background-color:blue;
float:left;
}
#box3{
background-color:green;
float:left;
}
</style></head><body>
<div
id="box1">box1</div>
<div
id="box2">box2</div>
<div
id="box3">box3</div></body>
</html>第2个、3个盒子设置float=left效果解释：box1未设置浮动属性，所以它的位置不变；box2设置为左浮动，而它的上一行box1为非浮动元素，则box2不能移至上一行；box3设置为左浮动，而它的上一行box2为浮动元素，则box3可移至上一行，与box2同行显示。
总结：郭春丽基于DIV+CSS技术介绍我的家乡
--浮动属性的应用场景01图文环绕首字下沉02浮动在项目中的应用03目录1图文环绕效果：文字环绕图片，无论怎么调整浏览器大小，文字始终环绕图片。1图文环绕<html>
<head>
<title>文字环绕-图片居右</title>
<style>
img{
float:right;
/*文字环绕图片*/
width:400px;
height:200px;
}
p{
color:#000000;
/*文字颜色*/
text-indent:2em;
letter-spacing:5;
}
p::first-letter{
/*首字放大*/
font-size:30px;
font-family:黑体;
}
</style>
</head>
<body>
<img
src="images/gz-3.png"border="0">
<p>广州由秦汉起至明清2000多年间，一直是中国对外贸易的重要港口城市。是中国海上丝绸之路的起点。据《新唐书·地理志》记载，到唐朝时，这条海上“丝绸之路”称为“广州通海夷道”，其航程从广州起，经南海、印度洋，直驶巴士拉港，到达东非赤道以南海岸，这是16世纪以前世界上最长的远洋航线。到唐宋时期，广州已发展成为世界著名的东方大港，并首设全国第一个管理外贸事务的机构——市舶使；明清时期，广州更是特殊开放的口岸，在一段较长的时间内，曾是全国惟一的对外贸易港口城市。鸦片战争后，中国与英国签订《南京条约》，被迫开放广州、上海、宁波、福州、厦门五个通商口岸，广州一口通商的局面从此结束.
</p>
</body>
</html>
可以不断调整浏览器大小，会发现始终文字环绕图片，图片居右使用浮动属性，应该将谁设置为浮动呢？<html>
<head>
<title>文字环绕-图片居右</title>
<style>
img{
float:right;/*文字环绕图片*/
width:400px;
height:200px;
}
p{
color:#000000;
/*文字颜色*/
text-indent:2em;
letter-spacing:5;
}
p::first-letter{
/*首字放大*/
font-size:30px;
font-family:黑体;
}
</style>
</head>
<body>
<img
src="images/gz-3.png"border="0">
<p>广州由秦汉起至明清2000多年间，一直是中国对外贸易的重要港口城市。是中国海上丝绸之路的起点。据《新唐书·地理志》记载，到唐朝时，
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年云南省楚雄彝族自治州大姚县中考一模生物试题
- 安徽省江南十校2024-2025学年高二下学期5月阶段联考历史试卷
- 代写合同协议书模板图片
- 绿色施工与生态文明城市建设
- 2025年中级社会工作者《社会工作综合能力》考前点题卷一
- 二级Web考试必考内容试题及答案
- 2025年计算机VFP考试真题试题及答案
- 2025年计算机二级C语言在线测试题及答案
- C语言编程与实际应用的结合试题及答案
- 2025年计算机二级VFP新课标解读试题及答案
- T-CCSAS 012-2022 化工企业工艺报警管理实施指南
- 消防挂靠合同范例
- 写字楼保安培训资料
- 养老型金融产品
- (完整版)英语四级词汇表
- 广告费合同模板
- 第五单元 探索1 互联网安全风险及其产生原因教学设计-2023-2024学年苏科版（2023）初中信息科技七年级下册
- 广西壮族自治区2024年普通高中学业水平选择性考历史试题（含答案）
- 心理健康专题课件25心理健康
- 口腔癌护理个案
- 文化行业标准 WH-T 92-2021 临时搭建演出场所舞台、看台安全监督检验规范
评论
0/150
提交评论