作业1:写一案例,要求用到<a href="" target="">与<iframe>理解target属性与name属性之间的关联是如何实现的。 作业2:写一个案例, 演示css中的内联样式,内部样式,外部样式的应用场景,理解style属性, style标签, 以及外部样式表的使用方式。 实例 <!DOCTYPE html> <html lang="en"> 实例 .waibu { color : blueviolet ; font-size: 50px; } .floatleft { float: left; } 运行实例 » 点击 "运行实例" 按钮查看在线实例 <head> <meta charset="UTF-8"> <title>7月3日直播课作业</title> <style> .neibu{ color: coral; text-align: right; font-size: 60px; } </style> <link rel="stylesheet" href="static/css/0703.css" /> </head> <body> <!--作业1:写一案例,要求用到<a href="" target="">与<iframe>理解target属性与name属性之间的关联是如何实现的--> <p>作业1:写一案例,要求用到a标签与框架,理解target属性与name属性之间的关联是如何实现的</p> <h2>网站列表</h2> <ul style="float: left"> <li><a href="http://www.baidu.com/" target="win">百度</a></li> <li><a href="http://www.qq.com/" target="win">腾讯</a></li> <li><a href="http://www.sina.com.cn/" target="win">新浪</a></li> <li><a href="http://www.sohu.com/" target="win">搜狐</a></li> </ul> <iframe srcdoc="<h3>网站列表</h3>" frameborder="0" width="80%" height="400" name="win" style="float: left"></iframe> <!-- 总结: 1、a标签集合iframe框架可用于网站后台建立,左边菜单、右边内容的模式。 2、a标签主要属性: hrf:链接的地址,注意需要带http target:窗口打开的方式。_blank:在新窗口中打开;_self:默认值,在自身窗口中打开;_parent:在父窗口中打开;_top:在整个窗口中打开被链接文档; 如果与iframe框架结合,命名一个名称,与iframe的name属性值相同时,即可在该命名的窗口中打开页面,实现菜单与内容显示的关联。 3、iframe标签主要属性: src:外链地址,需要带http; srcdoc:默认显示内容,使用html标签书写; frameborder:边框大小,值为数字,0表示不显示边框; width、height:框架宽高值,可以用px,也可以用百分比%; --> <!--语义化标签结构开始--> <!--网页头部--> <header> <nav>导航</nav> </header> <!--网页主体--> <main> <!--主体内的文章内容部分--> <article> <!--标题--> <h2>XXXX</h2> <!--区块--> <section>区块内容:段落、图片等</section> </article> </main> <!--页脚部分--> <footer>页脚</footer> <!--语义化标签结构结束-> <!--作业2:写一个案例, 演示css中的内联样式,内部样式,外部样式的应用场景,理解style属性, style标签, 以及外部样式表的使用方式--> <p>作业2:写一个案例, 演示css中的内联样式,内部样式,外部样式的应用场景,理解style属性, style标签, 以及外部样式表的使用方式</p> <!-- 1、内联样式--> <div> <p>1、内联样式</p> <p style="color: darkgreen;font-size: 30px"> ***:巩固党和国家机构改革成果 推进国家治理体系和治理能力现代化 </p> <p style="color:red;"> 央视网消息:(新闻联播)深化党和国家机构改革总结会议5日在北京召开。 </p> <p>2、内部样式</p> <p class="neibu"> 他强调,深化党和国家机构改革是对党和国家组织结构和管理体 </p> <p>3、外部样式</p> <p class="waibu"> 我们整体性推进中央和地方各级各类机构改革,重构性健全党的领导体系 </p> </div> <!--作业3:对于盒 模型中的内外边距, 边框的样式设置有什么不同, 写出你的理解--> <p>作业3:对于盒 模型中的内外边距, 边框的样式设置有什么不同, 写出你的理解</p> <p> 答:盒模型包括4各部分从内到外分别为:内容、内边距、边框、外边距。内容及边框是不透明的,具有颜色、大小、宽度、类型等属性;内边距和外边距是透明的,不可见,只有宽度属性。 </p> <p> 盒模型是web页面中最重要的概念,一切皆盒子,任何元素都可以看做是盒子,只需要按照盒子的排列和布局,即可设计出想要的页面布局。 </p> <!--作业4:盒模型的每个要素的排列方式是什么?要求背下来--> <p>作业4:盒模型的每个要素的排列方式是什么?</p> <p> 答:盒模型的内边距、边框、外边距局可分为:上、右、下、左四个方向,从上开始,按照顺时针方向排列。 </p> <P> 疑问:本次作业1使用浮动之后,不知道为什么,语义化标签部分并没有使用浮动的情况下也跟着浮动了,希望老师指导。 </P> </body> </html> 运行实例 » 点击 "运行实例" 按钮查看在线实例 作业3:对于盒 模型中的内外边距, 边框的样式设置有什么不同, 写出你的理解。 答:盒模型包括4各部分从内到外分别为:内容、内边距、边框、外边距。内容及边框是不透明的,具有颜色、大小、宽度、类型等属性;内边距和外边距是透明的,不可见,只有宽度属性。盒模型是web页面中最重要的概念,一切皆盒子,任何元素都可以看做是盒子,只需要按照盒子的排列和布局,即可设计出想要的页面布局。 作业4:盒模型的每个要素的排列方式是什么?要求背下来。 答:盒模型的内边距、边框、外边距局可分为:上、右、下、左四个方向,从上开始,按照顺时针方向排列。 总结: 1、a标签集合iframe框架可用于网站后台建立,左边菜单、右边内容的模式。 2、a标签主要属性: hrf:链接的地址,注意需要带http target:窗口打开的方式。_blank:在新窗口中打开;_self:默认值,在自身窗口中打开;_parent:在父窗口中打开;_top:在整个窗口中打开被链接文档; 如果与iframe框架结合,命名一个名称,与iframe的name属性值相同时,即可在该命名的窗口中打开页面,实现菜单与内容显示的关联。 3、iframe标签主要属性: src:外链地址,需要带http; srcdoc:默认显示内容,使用html标签书写; frameborder:边框大小,值为数字,0表示不显示边框; width、height:框架宽高值,可以用px,也可以用百分比%; 疑问:本次作业1使用浮动之后,不知道为什么,语义化标签部分并没有使用浮动的情况下也跟着浮动了,希望老师指导。