高级网页设计.doc

第 一 次课教学设计书 2012年2月 28日 星期2授课地点：615课时：2标题第一章 网页和网站制作流程教学目标能力目标知识目标从全局的角度概要性的了解网站制作技术和流程，了解本学期学习目标及进度安排。认识网页和网站；网页的基本构成元素；网页设计的相关术语；如何设计网页；网页设计师应具备的素质；静态页面的制作流程；教学任务(内容)网页是因特网展示信息的一种形式。一般网页上会有文本和图像，复杂一些的还会有声音、视频、动画等多媒体。要制作出精美的网页，不仅要能够熟练的使用软件，还要掌握网页的一些基本概念和基本原则，只有对网页的基础知识进行深入的学习，才能快速掌握网页的设计技巧。重点难点重点： 网站制作流程难点： 网页设计原则步骤教学内容教学方法教学手段学生活动时间分配复习/课程引入Div+css布局网站案例赏析回答法；演示法；板书；多媒体教学；网络资源；实训设备；思考；回答问题；5知识讲授1认识网页网页和网站网页的基本构成元素文本和图像；超链接；动画；表单；音频和视频2什么是网页设计网页设计概述网页设计与网页制作网页设计的特点交互性；版式的不可控性；技术与艺术结合的紧密型；多媒体的综合性；多维性3网页设计的相关术语因特网；浏览器；网页；网站；html；dhtml；url；http;tcp/ip;ftp;ip地址；域名；静态网页；动态网页；虚拟主机；租赁服务器；主机托管；4 网页设计涵盖的内容视听元素；版式设计；回答法；演示法；板书；多媒体教学；实训设备；思考；理解；记忆；5555能力训练5 如何设计网页网页设计的基本原则明确主题；首页设计；分类；互动性；图像应用技巧；避免滥用技术；及时维护更新网站设计成功的要素：整体布局；信息；下载速度；图像和版面设计；文字的可读性；多媒体功能的运用；导向清晰网页设计风格及色彩搭配6网页设计原则为用户考虑原则；主题突出原则；整体原则；内容与形式相统一的原则；更新和维护原则7网页设计师应具备的素质艺术素质；技能素质；综合素质8网站制作流程前期策划；页面细化及实施；后期维护9静态页面的制作流程观察设计稿；拆分设计稿；网页设计的实现；表格布局；div布局回答法；演示法；实际操作法；多媒体教学；实训设备；实践操作1010101010归纳提高Div布局页面特点：表现、内容和行为相分离讲述法；演示法；板书；多媒体教学；实训设备；思考；回答问题3课后任务2课后小结第 二 次课教学设计书 2012年3月 1日 星期4授课地点：615课时：2标题第二章 css样式入门第一节 css样式教学目标能力目标知识目标网页制作离不开css技术，采用css技术可以有效对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制，只要对相应代码做出一些简单的编辑，就可以改变同一页面中不同部分或不同页面的外观和格式。本节主要掌握css的特点及基本语法。Css的特点；Css的类型；Css的基本语法；如何使用css；内联样式表；嵌入样式表；外部样式表；Css的单位和值；教学任务(内容)对于设计者来说，css是一个非常灵活的工具，使用户不必再把复杂的样式定义编写在文档结构中，而将有关文档的样式内容全部脱离出来，在行内定义，在标题中定义，甚至作为外部样式文件供html页面调用。Css规则Css的特点Css的类型Css的基本语法：Css能做什么Css样式表的基本用法：怎样在html中插入样式表应用到网页中单位和值重点难点重点：内联样式；嵌入式样式；外部样式表难点：单位和值的定义 步骤教学内容教学方法教学手段学生活动时间分配复习/课程引入网页中的css回答法；演示法；板书；多媒体教学；思考；回答问题；5知识讲授Css规则如下：选择符属性1：值1；属性2：值2；Css的特点Css的类型自定义css样式；html样式；css选择器样式；Css的基本语法：选择符属性1：值1；属性2：值2；Css的冲突怎样使用cssCss和html；css和xmlCss能做什么文本格式和颜色；图形外观和布局；动态操作回答法；演示法；板书；多媒体教学；实训设备思考；理解；记忆；101010能力训练Css样式表的基本用法：怎样在html中插入样式表Css样式表规则选择符；声明应用到网页中内联样式；嵌入式样式；外部样式表单位和值定义颜色值；定义字体；群选择符；派生选择符；id选择符；类别选择符回答法；演示法；实际操作法；多媒体教学；实训设备实践操作151515归纳提高Css的三种选择器Css的三种定义方式 讲述法；演示法；板书；多媒体教学；实训设备；思考；回答问题3课后任务预习应用实例：为页面添加css样式2课后小结第 三 次课教学设计书 2012年3月日6 星期2授课地点：615课时：2标题第二章 css样式入门第二节 应用实例：为页面添加css样式教学目标能力目标知识目标本例通过一个工作室网站页面，讲解如何在页面中添加css样式及控制页面元素，在完成本例制作后，能够掌握css样式基本应用。外部样式文件添加；常见的样式设置技巧；教学任务(内容)本例设计制作一个工作室的网站页面，页面布局新颖，运用的色彩艳丽，页面中的背景及图片的布局给浏览者一种神秘的感觉。在设计页面时结合了相应的配色原理，使页面形成了一种独特的设计风格。重点难点重点： 难点： 步骤教学内容教学方法教学手段学生活动时间分配复习/课程引入Div布局案例赏析回答法；演示法；板书；多媒体教学；思考；回答问题；5知识讲授1设计分析2布局，css解析：#boxwidth:100%;height:900px;background-image:url(./images/2401.jpg);background-repeat:no-repeat;#toppadding-top: 10px;margin-left:283px;width:550px;height:20px;font-size:16px;font-family:微软雅黑;color:#FFF;#top liwidth:110px;text-align: center;float:left;list-style-type:none;#top2 width:640px;height:360px;margin:20px 0px 0px 285px;font-size:15px;font-family:宋体;color:#379b99;line-height:22px;#mainwidth:830px;height:390px;margin-left:95px;#main-leftwidth:234px;height:320px;margin-top:35px;margin-left:40px;float:left;line-height:20px;#main-mainwidth:234px;height:320px;margin-top:35px;margin-left:40px;float:left;line-height:20px;#main-rightwidth:234px;height:320px;margin-top:35px;margin-left:40px;float:left;line-height:20px;#bottomwidth:100%;height:100px;background-image:url(.);background-repeat:repeat-x;color:#000;text-align:center;line-height:20px;#bottom spanmargin:0px 6px 0px 6px;回答法；演示法；板书；多媒体教学；实训设备思考；理解；记忆；1020能力训练制作步骤：站点建立页面div 布局添加css样式回答法；演示法；实际操作法；多媒体教学；实训设备实践操作2020归纳提高案例总结使用css样式表可以彻底减轻网页设计者的工作负担，css样式表能够在恰当的地方集中一批命令，以实现某种可视效果，而不是将它们分散在整个文档中。本节通过制作一个网站页面，介绍在网页设计中应用css样式的方法和技巧。 讲述法；演示法；板书；多媒体教学；实训设备；思考；回答问题3课后任务完成制作产品介绍网站首页2课后小结第 四 次课教学设计书 2012年3月8 日 星期4授课地点：615课时：2标题第三章 使用div+css布局页面定位；常用布局方式教学目标能力目标知识目标介绍div+css布局的基本知识，如css布局页面、定义div及常见布局方式。掌握及使用关于css布局知识和方法。什么是div；div的嵌套和固定格式；浮动定位；position定位；可视化盒子模型；常用的布局方式教学任务(内容)在设计网页时，能否控制好各个模块在页面中的位置非常关键，本课将对css定位和div进行详细介绍，讲解利用div+css对页面元素定位的方法。重点难点重点：常用的布局方式难点：定位方式步骤教学内容教学方法教学手段学生活动时间分配复习/课程引入工作室页面的制作要点回顾回答法；演示法；板书；多媒体教学；网络资源；实训设备；思考；回答问题；5知识讲授1、定义div插入divdiv的嵌套和固定格式2、Css布局定位（1）浮动定位（2）Position定位 相对定位 绝对定位 悬浮定位3、可视化盒子模型盒子模型视觉可视化模型空白边叠加回答法；演示法；板书；多媒体教学；实训设备思考；理解；记忆；51010能力训练4、常用的布局方式居中布局设计 使用自动空白边让设计居中 使用定位和负值空白边让设计居中浮动布局设计 两列固定宽度布局 两列固定宽度居中布局 两列宽度自适应布局 两列右列宽度自适应布局 三列浮动中间列宽自动适应布局 高度自适应设计回答法；演示法；实际操作法；多媒体教学；实训设备实践操作2025归纳提高5、css3.0盒子模型的新增属性OverflowOverflow-xOverflow-y讲述法；演示法；板书；多媒体教学；实训设备；思考；回答问题5课后任务熟练常用布局方式设计2课后小结第 五 次课教学设计书 2012年3月13日 星期2授课地点：615课时：2标题第三章 使用div+css布局页面应用实例:使用div+css布局页面（1）教学目标能力目标知识目标通过实例的制作，在使用css排版的页面中，利用div标记，加上css对其样式的控制，可以方便的实现各种效果，而且还实现了网站结构、表现、行为三者分离的目的。 100%宽度居中布局；盒子模型应用；Div布局方法；其它css属性应用教学任务(内容)完成某企业网站首页的制作，要求简洁布局结构及统一的排版方式，整个页面给人以一种清晰的感觉，再加上整个页面以蓝色为主色调，图片和文字巧妙搭配，使页面更具商业气息。重点难点重点：div布局与css样式表现 难点：100%宽度显示居中布局方法 步骤教学内容教学方法教学手段学生活动时间分配复习/课程引入1、 复习居中布局和左右有侧自动列宽布局2、 Css3.0盒子新增模型回答法；演示法；板书；多媒体教学；思考；回答问题5知识讲授1、设计分析：页面配色整个页面以蓝色为主色调，图片和文字巧妙搭配，使页面更具商业气息版面布局2、布局分析*margin:0px;border:0px;padding:0px;bodybackground-image:url(.);background-repeat:repeat-x;font-family:宋体;font-size:12px;color:#666666;line-height:19px;.font01 color:#144c81;font-size:18px;font-family:微软雅黑;line-height:50px;.font01 color:#144c81;font-size:15px;font-family:微软雅黑;line-height:30px; 回答法；演示法；板书；多媒体教学；实训设备思考；理解；记忆；510能力训练1、 版面布局分析2、 页面布局3、背景制作 演示法；实际操作法；多媒体教学； 实践操作102020归纳提高100%宽度居中对齐网页布局方法讲述法；多媒体思考5课后任务继续完成此案例5课后小结第 六 次课教学设计书 2012年3月15日 星期4授课地点：615课时：2标题第三章 使用div+css布局页面应用实例:使用div+css布局页面（2）教学目标能力目标知识目标通过实例的制作，在使用css排版的页面中，利用div标记，加上css对其样式的控制，可以方便的实现各种效果，而且还实现了网站结构、表现、行为三者分离的目的。 100%宽度居中布局；盒子模型应用；Div布局方法；其它css属性应用教学任务(内容)完成某企业网站首页的制作，要求简洁布局结构及统一的排版方式，整个页面给人以一种清晰的感觉，再加上整个页面以蓝色为主色调，图片和文字巧妙搭配，使页面更具商业气息。重点难点重点：div布局与css样式表现 难点：100%宽度显示居中布局方法 步骤教学内容教学方法教学手段学生活动时间分配复习/课程引入复习此例整体版面布局回答法；演示法；板书；多媒体教学；思考；回答问题；5知识讲授Div布局：#box width:100%;height:947px;background-image:url(.);background-repeat:no-repeat;background-position:center 187px;#top padding-top: 8px;margin:auto;width:960px;height:106px;background-image:url(./images/3402.png);background-repeat:no-repeat;#top-1 width:322px;height:103px;float:left;#top-2 width:88px;height:20px;margin:40px 10px 0px 0px;float:right;#top2 margin:auto;width:960px;height:40px;font-family:微软雅黑;font-size:18px;color:#144c81;#top2 li width:100px;height:25px;float:left;list-style-type:none;text-align:center;margin-top:10px;#main margin:auto;width:960px;height:417px;#main-1 margin-top:20px;width:960px;height:96px;#main2 margin:auto;width:960px;height:256px;background-image:url(./images/3406.png);background-repeat:no-repeat;#main2-1 width:300px;height:256px;margin:0px 10px 0px 10px;float:left;#text1 width:260px;height:68px;padding-left:40px;background-image:url(./images/d1.png);background-repeat:no-repeat;#text2 width:260px;height:68px;padding-left:40px;background-image:url(./images/d2.png);background-repeat:no-repeat;#text3 width:260px;height:68px;padding-left:40px;background-image:url(./images/d3.png);background-repeat:no-repeat;#main2-2 width:300px;height:256px;margin:0px 10px 0px 10px;float:left;#main2-3 width:300px;height:256px;margin:0px 10px 0px 10px;float:left;#bottom width:100%;height:100px;background-color:#185488;color:#fff;text-align:center;line-height:20px;margin-top:20px;#bottom01 width:960px;height:100px;margin:auto;#bottom01 span margin:0px 5px 0px 5px;回答法；演示法；板书；多媒体教学；实训设备思考；理解；记忆；15能力训练4Logo制作5导航条制作6主体内容制作7 底部信息制作 回答法；演示法；实际操作法；多媒体教学；实践操作10102010归纳提高本节通过实例的制作，简单介绍了div+css布局的基本知识，如css布局页面、定义div及常见的布局方式，完成本例后，应了解、掌握及使用关于css布局的知识和方法。讲述法；演示法；板书；多媒体教学；思考；回答问题5课后任务完成举一反三：制作健康网站5课后小结第 七 次课教学设计书 2012年3月 20日 星期2授课地点：615课时：2标题第四章 使用css控制网页背景网页背景属性介绍教学目标能力目标知识目标在网页设计中，使用css控制网页背景是很常用的一项技术。一个优秀的页面，背景颜色要能够和网页中的内容相匹配，以吸引浏览着的目光，本章使学生达到能灵活运用用css2.0及3.0提供的背景属性设置页面背景。页面背景颜色；块背景颜色；页面背景图片；页面背景图片的重复；页面背景图片的位置；教学任务(内容)通过如下页面背景设置掌握背景属性的设置及技巧重点难点重点：设置背景图片位置 难点：css3.0背景新增属性 步骤教学内容教学方法教学手段学生活动时间分配复习/课程引入复习100%宽度布局页面回答法；演示法；板书；多媒体教学；网络资源；实训设备；思考；回答问题；5知识讲授Background-colorBgcolorBackground-imageBackground-repeatBackground-attachmentBackground-positionBackground:回答法；演示法；板书；多媒体教学；实训设备思考；理解；记忆；101010能力训练1、 设置页面背景颜色2、 设置块背景颜色3、 背景图片4、 为页面设置背景图片5、 背景图片的重复6、 设置背景图片的位置7、 设置背景滚动8、 背景样式的缩写方式回答法；演示法；实际操作法；多媒体教学；实训设备实践操作101010归纳提高9、 Css3.0中的背景新增属性讲述法；演示法；板书；多媒体教学；实训设备；思考；回答问题10课后任务画出案例金融网站版式5课后小结第 八 次课教学设计书 2012年3月 22日 星期4授课地点：615课时：2标题第四章 使用css控制网页背景应用案例：制作金融类网站页面教学目标能力目标知识目标通过设计制作一个金融类网站页面，来讲解控制页面背景的方法，并讲解使用div+css控制页面整体布局的方法。页面背景颜色；块背景颜色；页面背景图片；页面背景图片的重复；页面背景图片的位置；教学任务(内容)根据提供的素材完成如图所示案例制作重点难点重点：背景图片的常用技巧设置难点：背景图片的精确控制步骤教学内容教学方法教学手段学生活动时间分配复习/课程引入背景的相关Css属性回答法；演示法；板书；多媒体教学；网络资源；实训设备；思考；回答问题；5知识讲授设计分析页面布局及配色页面背景应用技巧分析回答法；演示法；板书；多媒体教学；实训设备思考；理解；记忆；2810能力训练制作步骤：新建文件整体布局页面top制作页面主题内容制作页面底部信息制作回答法；演示法；实际操作法；多媒体教学；实训设备实践操作101010105归纳提高案例总结：使用css控制网页背景是网页设计中的一种很常用的方法，使用css控制网页背景可以使网页设计者精确控制页面中的每一种背景颜色和背景图像的显示方式。通过一个金融网站案例掌握背景设置技巧。讲述法；演示法；板书；多媒体教学；实训设备；思考；回答问题5课后任务完成课后练习“保健品网站页面制作”5课后小结第 九 次课教学设计书 2012年3月 27日 星期2授课地点：615课时：2标题第五章 使用css控制文字样式教学目标能力目标知识目标对于网站设计者来说，文字永远是不可缺少的重要组成部分。站点越大，图形和字内容越多，需要管理的文字样式也就越多。使用css控制文字样式是一种很好的方法，便于设计者进行设置或修改。本章详细的为读者讲述使用css控制页面中文字及段落样式的方法。字体和大小；文字颜色和粗细；斜体；下划线、顶划线和删除线；英文字母大小写；控制段落样式教学任务(内容)根据提供的素材完成如图所示案例制作重点难点重点：控制段落样式难点：英文字母大小写步骤教学内容教学方法教学手段学生活动时间分配复习/课程引入背景css应用要点回答法；演示法；板书；多媒体教学；网络资源；实训设备；思考；回答问题；5知识讲授字体和大小；文字颜色和粗细；斜体；下划线、顶划线和删除线；英文字母大小写；控制段落样式回答法；演示法；板书；多媒体教学；实训设备思考；理解；记忆；101010能力训练1、 字体大小css应用训练2、 颜色、下划线等应用训练3、 中英文段落控制训练4、 背景图片制作训练回答法；演示法；实际操作法；多媒体教学；实训设备实践操作10101010归纳提高文字处理css3.0讲述法；演示法；板书；多媒体教学；实训设备；思考；回答问题4课后任务画出应用实例：设计类网站制作版式1课后小结第 十 次课教学设计书 2012年3月 29日 星期4授课地点：615课时：2标题第五章 使用css控制文字样式应用实例：制作设计类网站教学目标能力目标知识目标本例运用div+ css布局方式制作一个设计类网站页面，在该页面的制作过程中，要仔细理解是用div+css布局制作页面的方法，并能够应用css样式对文字进行控制和设置。Css样式对文字的控制和设置教学任务(内容)本例设计制作设计类网站，其页面布局比较简单。导航栏中的文字采用span标签来调整文字的字间距并且为文字应用了css样式，以方便后期进行修改。从整体看，网页效果美观、大方。重点难点重点： css样式对文字进行控制和设置难点：仔细理解用div+css布局制作页面的方法 步骤教学内容教学方法教学手段学生活动时间分配复习/课程引入文字样式相关属性控制回答法；演示法；板书；多媒体教学；网络资源；实训设备；思考；回答问题；5知识讲授设计分析布局，css样式分析：#boxwidth:960px;height:750px;margin:auto;#topwidth:960px;height:103px;background-image:url(./images/5301.gif);background-repeat:no-repeat;background-position:40px 15px;#top1width:180px;height:20px;float:right;padding:12px 5px 0px 0px;#top1 spanmargin:0px 5px 0px 5px;#top2width:730px;height:71px;margin-left:230px;float:right;background-image:url(./images/5302.gif);#top2-1height:27px;margin-left:88px;margin-top:19px;#top2-1 spanmargin:0px 30px 0px 30px;#top2-2padding-left:65px;margin-top:5px;#top2-2 spanmargin:0px 15px 0px 15px;#main1width:960px;height:383px;background-image:url(./images/5303.gif);background-repeat:no-repeat;#left1width:727px;height:383px;float:left;margin-left:6px;#right1width:227px;height:383px;float:right;#right1-1width:197px;height:127px;background-image:Url(./images/5304.gif);background-repeat:no-repeat;padding-top:45px;padding-left:30px;#right1-1 liheight:19px;#right1-2width:200px;height:160px;background-image:Url(./images/5305.gif);background-repeat:no-repeat;padding-left:27px;padding-top:50px;#right1-2-1height:25px;width:88px;padding-top:9px;padding-left:50px;padding-bottom:10px;border-bottom:#ccc solid 1px;background-image:url(./images/5306.gif);background-repeat:no-repeat;background-position:5px 6px;float:left;line-height:15px;#right1-2-2height:20px;width:36px;margin-right:20px;padding-top:14px;padding-left:4px;padding-bottom:10px;border-bottom:#ccc solid 1px;float:left;#right1-2-3height:25px;width:88px;padding-top:9px;padding-left:50px;padding-bottom:10px;border-bottom:#ccc solid 1px;background-image:url(./images/5307.gif);background-repeat:no-repeat;background-position:5px 6px;float:left;line-height:15px;#right1-2-4height:20px;width:36px;margin-right:20px;padding-top:14px;padding-left:4px;padding-bottom:10px;border-bottom:#ccc solid 1px;float:left;#right1-2-5height:25px;width:88px;padding-top:9px;padding-left:50px;padding-bottom:10px;background-image:url(./images/5308.gif);background-repeat:no-repeat;background-position:5px 6px;float:left;line-height:15px;#main2width:960px;height:151px;margin-top:15px;#main2-1width:325px;height:108px;margin-right:25px;padding-top:43px;padding-left:7px;background-image:url(./images/5311.gif);float:left;#main2-1 liwidth:105px;list-style-type:none;margin-top:8px;height:20px;float:left;text-align:center;#main2-2width:345px;height:106px;padding-top:45px;padding-left:3px;margin-right:25px;float:left;background-image:url(./images/5316.gif);#main2-2 liwidth:85px;list-style-type:none;margin-top:15px;height:20px;float:left;text-align:center;#bottomwidth:960px;height:71px;margin-top:27px;background-image:url(./images/5322.gif);background-repeat:no-repeat; line-height:18px;回答法；演示法；板书；多媒体教学；实训设备思考；理解；记忆；510能力训练1页面布局2导航背景photoshop处理3页面制作回答法；演示法；实际操作法；多媒体教学；实训设备。实践操作101030归纳提高Css样式表能够在恰当的地方集中一批命令，以实现某种可视效果，从而彻底减轻网页设计者的工作负担。通过一个网站页面的设计制作，介绍css样式在网页设计中的应用方法和技巧。讲述法；演示法；板书；多媒体教学；实训设备；思考；回答问题5课后任务举一反三：制作社区类网站5课后小结第 十一 次课教学设计书 2012年4月 3日 星期2授课地点：615课时：2标题第六章 使用css控制图片样式教学目标能力目标知识目标设计者在制作网页页面时不仅要考虑如何才能实现图片的特殊效果，而且要考虑在制作完成后如何才能对图片进行修改，使用css控制图片不仅可以解决以上问题，而且可以实现一些在html页面中无法实现的特殊效果。本章讲解使用css控制图片样式的方法。图片边框设置；图片缩放设置；图片水平对齐；图片垂直对齐；图文混排；教学任务(内容)使用css可以通过控制具体的数值来控制图片样式，比直接在html中进行手动调整更加精确，而且可以实现一些在html中无法实现的特殊效果。本节讲解两种控制图片的基本方法，控制图片边框与控制图片缩放。重点难点重点：图文混排难点：混排效果调整 步骤教学内容教学方法教学手段学生活动时间分配复习/课程引入背景css设置要点回答法；演示法；板书；多媒体教学；网络资源；实训设备；思考；回答问题；5知识讲授1图片样式图片边框的设置；图片缩放的设置2图片对齐 水平对齐；垂直对齐3图文混排 文本混排；设置混排间距回答法；演示法；板书；多媒体教学；实训设备思考；理解；记忆；101010能力训练1 图片边框设置2图文混排效果设置回答法；演示法；实际操作法；多媒体教学；实训设备实践操作1020归纳提高4 css3.0中边框的新增属性Border-image；border-radius；box-shaow；border-color讲述法；演示法；板书；多媒体教学；实训设备；思考；回答问题10课后任务画出应用实例：某婚庆网站版式5课后小结第 十二 次课教学设计书 2012年4月 5日 星期4授课地点：615课时：2标题第六章 使用css控制图片样式应用实例-制作婚庆网站教学目标能力目标知识目标通过设计制作一个婚庆公司网站页面，来讲解在网页中实现图文混排的方法，以及为页面中的图片和文字应用样式的方法。掌握图文混排的方法和样式的设置。Html ，css图文混排技巧教学任务(内容)完成以下部分页面的制作重点难点重点：图文混排难点：相关html脚本步骤教学内容教学方法教学手段学生活动时间分配复习/课程引入背景css设置要点回答法；演示法；板书；多媒体思考；回答问题；5知识讲授设计分析布局分析图文混排html，css样式分析#m-middle1height:350px;width:508px;padding-left:18px;padding-top:1