天津渤海职业技术  学院
教 师 教 案
课    程
网页制作
班    级
应用161、162
上课时间
年  月  日
vivado申请license任课教师
张玉娟
课    时
4
上课地点
教室/机房
教    材
网页制作与实训
参考材料
章    节
⏹ 第十五章DIV+CSS布局思路
⏹         DIV+CSS布局应用实例
教学目标
⏹ 了解DIV+CSS布局的概念
⏹ 掌握DIV+CSS布局方法
⏹ 掌握应用DIV+CSS布局的实例
教学重点
⏹ 掌握DIV+CSS布局方法
教学难点
⏹ DIV+CSS在网页中的应用方法
教学工具
多媒体教学，软件采用Dreamweaver cs3
splice视频编辑软件哪个好


DIV+CSS布局
本章在CSS定位的基础上，从页面的整体排版出发，介绍CSS排版的观念和具体方法，包括CSS排版的整体思路、两种具体的排版结构、电子相册的几种版式制作，以及与传统表格排版方法的比较。
一、将页面用div分块
二、设计各块的位置
三、实例一
二、实例二    电子相册
#hphoto ul,#vphoto ul {
    list-style: none;
    float: left;
    padding: 0px;
    margin-top: 8px;
    margin-left: 15px;
    font-size: 12px;
    border: 1px solid #00CCFF;
    background: #CCFFFF;
    color: #0066FF;
}
#hphoto {
    width: 500px;
    background: url(framels.jpg) no-repeat left;
    height: 160px;
}
#vphoto {
    width: 500px;
    background: url(framept.jpg) no-repeat left;
    height: 160px;
}
俞敏洪diversity#hphoto img {
    height: 90px;
    width: 135px;
    border: 1px solid #0099FF;
    margin-top: 36px;
margin-left: 10px;
}
#vphoto img {
restartserver翻译    height: 135px;
    width: 90px;
border: 1px solid #0099FF;
    margin-top: 10px;
    margin-left: 34px;
}编程猫破产
#hphoto li,#vphoto li {
    background: #CCFFFF;
}
#hphoto .title,#vphoto .title {
    border-bottom: 1px solid #66CCFF;
    line-height: 1.5;
    padding-left: 10px;
    font-weight: bold;
html个人网页完整代码div+css
}
#hphoto a,#vphoto a {
    display: block;
    height: 160px;
    width: 160px;
    float: left;
}
#hphoto a:hover{
    background: url(framels_hover.jpg) no-repeat;
    display: block;
    height: 160px;
    width: 160px;
}
#vphoto a:hover {
    background: url(framept_hover.jpg) no-repeat;
    display: block;
    height: 160px;
    width: 160px;
}
div {
    margin-bottom: 15px;
}
#hphoto .xh,#vphoto .xh {
    float: left;
    margin-left: 150px;
    border-left: 1px solid #66CCFF;
    padding-left: 10px;
    padding-right: 20px;
}
#hphoto .price,#vphoto .price{
    border-left: 1px solid #00CCFF;
    float: left;
    font-style: italic;
    padding-right: 10px;
    padding-left: 10px;
}
   
   

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。