传统企业站开发 - 模块开发
这几周我们接连讲解了如何实现一个页面的搭建,从最初的各种分析,标签选择,一直到可以实现页面的整体布局。这一系列的知识点讲解中,我们熟知了对一个网页PSD图的处理,也懂得了该如何着手进行页面开发。但是上周的标签选择那篇文章当中,我们发现在实现页面中的某个模块的时候,对于标签的使用有很多种选择,所以今天我们就给大家举一个例子来讲解下具体模块开发是如何进行的。
本文内容概要:
1 模块分析&标签选择
2 模块结构搭建
3 模块样式处理
4 模块开发视频讲解
5 课后作业
一、模块分析&标签选择
如上图,页面的头部和导航我们在之前都已经完成了,但是如下图中的“学堂展示”模块,这个模块在具体制作上该如何进行的呢?
参照设计图,我们应该怎么把它实现出来,这时候我们要经历的第一步正好是我们上周说过的标签选择,这时我们有好多种方式来进行制作。最简单的就是把小模块分成上部和下部来制作,上部是标题和More链接,下部是几个展示内容的标题,分别是一个个div,里面包含着一个数据图img和一个标题文字,在右侧还有一个箭头。
上述的这种制作方式也是可以的,不过我们既然学习过了常用的标签,我们今天就带大家使用另外一种方式来制作。模块也一样分成上下两个部分,上部分的制作方式跟原来一样制作。但是下部分制作我们采用dl、dt、dd标签来制作。每一个展示行都是一个dl标签,在里面的数据图放在dt标签里面,文字标题链接放在dd标签里面。
二、模块结构搭建
我们使用了一种新的标签选择方式来制作这个模块,但是具体怎么做结构的搭建呢?这点我们看下面的代码就能够明白了,结构搭建代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>H5course</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
<div class="wrap">
<div class="header">
<img src="images/logo.png" alt="" />
<h1><a href="" title="HTML5学堂"></a>HTML5学堂——h5Course</h1>
</div>
<div class="nav">
<a class="active-nav" href="" title="">首页</a>
<a href="" title="">H5学堂</a>
<a href="" title="">H5学堂</a>
<a href="" title="">H5学堂</a>
<a href="" title="">H5学堂</a>
<a href="" title="">H5学堂</a>
<a href="" title="">H5学堂</a>
<a href="" title="">H5学堂</a>
<a href="" title="">H5学堂</a>
<a href="" title="">H5学堂</a>
</div>
<div class="main">
<div class="bigpic">
</div>
<div class="manage">
<div class="com-black">
<h2>学堂展示</h2>
<a href="">More</a>
</div>
<div class="manage-list">
<dl>
<dt><a href=""><img src="images/logo.png" alt="" /></a></dt>
<dd><a href="">学堂展示案例</a></dd>
</dl>
<dl>
<dt><a href=""><img src="images/logo.png" alt="" /></a></dt>
<dd><a href="">学堂展示案例</a></dd>
</dl>
<dl>
<dt><a href=""><img src="images/logo.png" alt="" /></a></dt>
<dd><a href="">学堂展示案例</a></dd>
</dl>
<dl>
<dt><a href=""><img src="images/logo.png" alt="" /></a></dt>
<dd><a href="">学堂展示案例</a></dd>
</dl>
<dl>
<dt><a href=""><img src="images/logo.png" alt="" /></a></dt>
<dd><a href="">学堂展示案例</a></dd>
</dl>
</div>
</div>
</div>
</div>
</body>
</html>
三、模块样式处理
搭建好网页结构之后,我们需要处理的就是相应的样式,这时候我们发现下部分的每个展示条样式基本一致,只有最后一个展示行的底部没有边框,所以在处理的时候我们需要量取这个下部分的高度,然后书写超出隐藏,这样再相应的样式实现时,最后一行的边框就会超出父级而被隐藏掉。具体的代码实现如下:
<style type="text/css">
.wrap {
width: 980px;
height:1046px;
margin: 0 auto;
background: url("images/index_bac.jpg") 0 0 repeat;
}
.header {
height: 65px;
border-top: 7px solid #000;
background: #fff;
}
.nav {
width: 892px;
height: 34px;
margin: 0 auto;
padding: 4px 0 0 88px;
background: url("images/nav_bac.jpg") 0 0 repeat-x;
}
.main {
width: 960px;
height: 817px;
padding: 10px;
}
/*主体内容架构*/
.bigpic {
float: left;
position: relative;
width: 722px;
height: 256px;
margin-bottom: 9px;
padding: 5px;
background-color: #fff;
border-radius: 3px;
}
.manage {
float: right;
width: 209px;
height: 256px;
margin-bottom: 9px;
padding: 5px;
background-color: #fff;
border-radius: 3px;
background-color: #fff;
border-radius: 3px;
}
/*头部制作*/
.header img {
float: left;
width: 65px;
height: 65px;
padding-left: 40px;
}
.header h1 {
float: left;
padding-left: 20px;
font-size: 18px;
line-height: 65px;
/*字间距*/
letter-spacing: 0.1em;
}
/*导航制作*/
.nav a {
float: left;
height: 34px;
padding: 0 15px;
line-height: 34px;
color: #fff;
}
.nav .active-nav, .nav a:hover {
padding: 0 14px;
border-left: 1px solid #ac1736;
border-right: 1px solid #ac1736;
background: url("images/nav_act_bac.jpg") 0 0 repeat-x;
}
/*学堂展示模块上部分制作*/
.com-black {
height: 28px;
padding: 0 10px 0 25px;
background: #303338 url("images/icon.png") 0 center no-repeat;
line-height: 28px;
color: #fff;
border-radius: 3px;
}
.com-white {
height: 28px;
padding: 0 10px 0 25px;
background: url("images/icon.png") 0 center no-repeat;
line-height: 28px;
border-radius: 3px;
}
.com-black h2 {
float: left;
height: 28px;
font-weight: bold;
}
.com-black a {
float: right;
height: 28px;
color: #fff;
}
/*学堂展示模块下部分制作*/
.manage-list {
overflow: hidden;
height: 224px;
margin-top: 4px;
padding: 0 4px 0 2px;
}
.manage-list dl {
height: 44px;
border-bottom: 1px dotted #333;
background: url("images/arrow.png") right center no-repeat;
line-height: 44px;
}
.manage-list dt {
float: left;
width: 42px;
height: 34px;
padding: 5px 0;
}
.manage-list dd {
float: left;
overflow: hidden;
width: 136px;
height: 44px;
margin-left: 8px;
}
.manage-list dt a {
display: block;
height: 100%;
}
.manage-list dt img {
display: block;
width: 40px;
height: 32px;
border: 1px solid #000;
}
.manage-list dd a {
display: block;
height: 100%;
}
</style>
对应的代码效果图如下:
四、模块开发视频讲解
为了让大家能够更好的掌握页面的开发,小编在这边给大家提供了一个HTML5学堂 - 利利录制的视频,由于受到各种因素的影响,视频的声音可能有时候不是很清晰,请大家谅解。
模块开发(上)
五、课后作业
参照上述模块的制作方式,对比设计图,完成剩余模块的制作,网页的设计图效果如下:
HTML5学堂小编:祥辉(耗时6.5h),欢迎大家沟通交流~~~
下周我们将继续于周一为大家分享基础知识方面的HTML+CSS,下期的主要内容为:标签选择&单个模块的开发(二)。
- NBitcoin:密码学第2部分
- gh-ost:在线DDL修改MySQL表结构工具
- poj-----(2828)Buy Tickets(线段树单点更新)
- javaSE之线程联合
- ASM 翻译系列第三十一弹:了解ASM文件的空间分配
- 备份重于一切:远离“Gitlab删库事件”,QBackup是你的最佳选择!
- FFMPEG指令
- Gitlab删库事件回顾,备份手段还停留在“原始社会”?
- ASM 翻译系列第三十二弹:自制数据抽取小工具
- WordPress集成SendCloud邮件代发,规避SMTP泄漏网站主机真实IP的风险
- ASM 翻译系列第三十三弹:REQUIRED_MIRROR_FREE_MB的含义
- 放弃Python转向Go语言:这9大理由就够了 !(附代码)
- CCKiller:Linux轻量级CC攻击防御工具,秒级检查、自动拉黑和释放
- 利用HSTS安全协议柔性解决全站HTTPS的兼容性问题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 详解Apache下.htaccess文件常用配置
- 你的模型需要解释(二)
- 算法工程师-SQL进阶:强大的Case表达式
- SOLID设计原则和我的一点个人感悟
- SpringBoot整合Freemarker使用
- Vm常见虚拟网络模式
- 设计模式 | 桥接模式
- Supervisor快速入门 | 使用Supervisor守护Nginx进程
- 技术选型的艺术---湖北技术价值分享会
- SpringBoot 配置文件编写及使用方式 (拒绝硬编码)
- Docker六脉神剑 (六) 1. Docker集群之Kubernetes(K8S) 了解k8s - 理论篇
- SpringBoot thymeleaf自定义错误页面
- SpringBoot 配置Redis操作
- SpringBoot 自定义banner (小彩蛋)
- SpringBoot使用Mybatis 快速入门