教育ui设计课件-编写代码html_第1页
教育ui设计课件-编写代码html_第2页
教育ui设计课件-编写代码html_第3页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

一、HTML：超文本标记语言（HyperTextMarkupLanguage）WWW：网（worldwideweb）W3C：网（worldwidewebconsortium）：.等形式，具有唯一性二、网页结构分逐级划分、1像素原则 PS工具：切片工保存24位png格式，三剑客+s保存时选仅限图像、选中的切片补充切片时不要点开images文件夹三、新建HTML文1的盘/case(案例responsive，拖入images文件、3、保存 首页命名四、HTML标记（ 空2~31、HTML 2、head<head 3、meta<meta/>----网页的元信 编4、tittle<tittle></ 5、body<body></body>网页的、浏览器窗口显示的所有内容都在这里6、div---div盒<div></ 7、h系列-------网页的标<h1></h1>~~~<h6></h6>h2开始用快捷键Ctrl+对应的数字（1~6）特征：具有div的全部特征，自带字体大小，自带加粗、自带8、p段落------<p>段落文字 具有div的全部特10、<i></i>----倾斜字体，把需要倾斜的文字放在i内10、span万能----<span>特殊样式11、img前景图---<imgsrc=”路径”/>----写在结构body中的背景图是样式，写在style中，前景图是结构，写在body前景图可以加，有点击效12、单：<img/><br双 12、ulliUlli具有div的全部特征，ul自带列表符，去掉默认的列表符Ul{list- 13、a---<ahref=””>文字或</a> 取消a自带的下划线a{text-A属于行级，不可设宽高，如果需要设宽高，要转块行级：aimg块级：divh1~h6pulli宽度100%，独占一行，可设宽高 常制定A：导航---文字的样式一般都加在a上，如果范围需要扩大，需要给a转块导航的制作，要么等宽li{width：124px；}，要么等留白li{padding:0绝对路径------站外 相对路径------站内/打开../返回上邮件---<a 技 页内跳①在要跳转的位置<aname=”名”>②在跳转处<ahref=”#名”>跳转点击跳转，即可跳到名那 src=”地址”controlsautoplay></> autoplay：自动<audiosrc=”音频地址”controlsautoplay></audio> autoplay：自动15、Form表 <Inputtype=“text”value=“请输入文字 <inputtype="password"value=“请输入”/>---<inputtype="radio单选框name=<inputtype=”checkbox”/>---多选 <inputtype=”submit”value=”提交” <inputtype=”reset”value=”重置” HTML注释---结构中 CSS注释----样式中 JS注释-----js中 五、选择器（命名，找对象 空11、选择器----针对当前页面所有此名称的都起作用样式中div{2、ID选择 结构中<div3、class选择器-----二级及以上的盒命名，调用时结构中<div建议：子盒和父盒错位一个tab键或4个空格，方便结构的管理选择器名规范：特殊符号只能用-减号4、通配符选择器*-------指代页面中所有的取消自带的外间距和内填 公共样5、后代选择器选择器A选择器B{选择器A中的所有B都生选择器 Class选择器ID选择器：100 Style内联：10007、伪类选择器选择器A:hover{样式:值 8、亲子选择器：A>B用>把父子选择器，A里面只生效儿子辈的BUl>lili>a√ ul>a×应该写：ul>li>a六、样式--- CTRL+H代码提1Style内联样式：style=”样式：值内部样式：在head内部，</head>之前，应用下面的语<styletype=”text/css”>样式外部样式：内转外更利于保新建css文件并保存到的 将style对闭合，剪切到css文件中，同时删除style将新保存的css文件到当前的html中：在</head>之前右键---css样式---附加样式表---找到css文件---确定更新背景图：在css中Ctrl+f查找，添加../替2、height：高单位 3width：200px200像4background-color：#000000；背景颜色，用#色值或颜色的英文单词red、green、blue5盒居中margin:06、Float浮动float：left；左浮 7margin盒子的外间margin-top：上留白margin-bottom：下留白margin-left：左留白margin-right：右留白 四周都留10像素的白margin：10px20px；---上下10px左右margin：10px20px30px---10px左右20pxmargin：10px20px30px paddingpadding-top：上填充padding-bottom：下填充padding-left：左填充padding-right：右填充padding合写 四周都留10像素的padding：10px20px；---上下10px左右20pxpadding：10px20px30px---上10px左右20px下30pxpadding：10px20px30px40px； margin当父盒有背景或边框时会出现bug，优先用注意：padding会撑开盒子，导致盒子变大，所以想要保持盒子大小不变用padding时，要减掉相应的宽或高8、背景 No-repeat不重复丨repeat-x水平重复丨repeat-y垂直重Background-position：背景定位：xy X：left丨center丨right Y:top丨center丨bottomX的数值：距左边的距 Y的数值：距顶部的距离负值往盒外Background-size：宽高；---宽高可随意设置，默认的是原始大小，单位 css3样前景图的尺寸：只需对img设置宽或高一项即可，会等比例缩补充：如果img被a包含，会生成淡蓝色边框，取消img的边 背景合写：background：colorimgrepeatposition，colorimgrepeatposition，colorimgrepeatposition，colorimgrepeatposition； css3样9 公共：body设置微软雅Font-size：20pxText-align：left丨center丨 Font-weight：bold加粗丨normal正 text-decoration文本装饰noneunderline下划线丨overline上划线丨删除线line-throughText-transform文字的大小写转换：uppercase全大写丨lowercaseCapitalize 边框border:1pxredsoliod;1像素的红色直线边框 线型dashed虚线 position----网页中出现覆盖的情况时，要用固定定位A、固定定位元素不占位，宽度变为自适应B(窗口)的四个角为原点进行定位C、固定定位不会随页面的下拉而滚动相对定位relative:相对于本身（该出现的位置）进行定位A（参照物）依然占位，只是作为参照标准B、绝对定位盒就是以相对定位盒为参照测量数据的C、相对定位盒需要有固定尺绝对定位absolute：默认以文档的左上角为原点定通过left丨right，topbottom进行定位①把要定位的盒子放到参照盒内②对参照盒设置 ③对定位盒设置：position：absolute；用left丨right，topbottom进行精确定 透明颜色rgba（0,0,0,0.5）---a指 css3样 opacity：0~1----把盒子本身设置----css3样式 A、只对定位元素有 设置了position的元B、Z-index的值越大，叠放次序越 优先显CZ-index的数值为自然数，无单位 box-shadow：abcdcolor；5个参边边框>内阴影>背 >背景颜色 此样式为css3样式---兼容ie9以上浏览 盒圆角border-radius：20px；---css3样 精灵技术：用一代替多的显示效果 display：none隐藏丨block显示 overflow溢出内容的显示方hidden隐藏丨visible显示（默认）丨scroll deg度数单位web交互技术一、web标准网页制作技术

jQuery类 二、jQuery将jQuery类库拷贝到下的js文件夹在</head>之前应用：<scripttype=”text/javascript”src=”jq文件路径”></script>二、JS的运行机制 小图点击 三、js的书写位置 JS代四、jQuery函数功能解释---.隔$(‘选择器’)---找到选择器对应的Function(){js代码} }选择ID名为box Attr()-----属性控制函数attr(‘属性名’,’值 关于jQuery类库插件的应用步1、先引入jQuery类库，再引入第插2插件对DOM结构的要求搭3插件对CSS的要求并执行，可以补充但不能遗4调 Stop()----停止正在运行的所有动画$(‘选择

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论