7.3 css的介绍与导入，的运用，盒模型 </h1> <div class="wz_info"> <span class="wz_frome"> <a href="/" target="_blank" title="程序员文章站"> 程序员文章站 </a> </span> <span class="wz_time"> 2022-04-17 19:48:53 </span> </div> <div class="wz_smalltext"> ...</div> <div class="content"> <p><strong>课程内容：</strong><br>1 常用标签3</p> <p>2 CSS简介与导入</p> <p>3 样式规则与盒模型简介1</p> <p>4 样式规则与盒模型简介2<br><br><strong>课程作业</strong><br>1. 写一案例,要求用到<a href="" target="">与<iframe><br>用<iframe>标签可以制作网站的后台管理系统，使用方便。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"><pre class="brush:html;toolbar:false"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一切都是盒子</title> </head> <body> <video src="static/images/demo.mp4" width="500" height="280" controls poster="static/images/bg.jpg" ></video> <ul> <li class="item">1<a href="">最新产品1</a></li> <li class="item">2<a href="">最新产品2</a></li> <li class="item">3<a href="">最新产品3</a></li> <li class="item">4<a href="">最新产品4</a></li> </ul> <!--这样的标题其实也是一个盒子--> <h1>我爱编程</h1> </body> </html></pre></div> <br><a class="showbtn codebtn" href="#">运行实例 »</a><p>点击 "运行实例" 按钮查看在线实例</p> </div> <div class="example"><h2 class="example"><br></h2></div> <p>2. 写一个案例, 演示css中的内联样式,内部样式,外部样式的应用场景,理解style属性, style标签, 以及外部样式表的使用方式</p> <p>内联样式 > 内部样式 > 外部样式<br>css样式遵循下面的样式覆盖上面样式的原则，就像刷墙一样覆盖。</p> <div class="example"> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"><pre class="brush:html;toolbar:false"><!DOCTYPE html> <html lang="en"> <style> p { color: green; } </style> <link rel="stylesheet" href="static/css/style1.css" > <head> <meta charset="UTF-8"> <title>CSS简介与引入</title> </head> <body> <p style="font-size: 18px; color: blue;">我是所不能的背着吉他的蝙蝠女侠!</p> <p>华为Mate20X(5G)获中国首张5G终端电信设备进网许可证</p> <p>环球社评：蓬佩奥操盘美国外交令世界不安</p> <p>大丑闻!加拿大*都向中方承认了,加媒还在"带节奏"</p> </body> </html></pre></div> <br><a class="showbtn codebtn" href="#">运行实例 »</a><p>点击 "运行实例" 按钮查看在线实例</p> </div> <h2 class="example"></h2> </div> <p>3. 对于盒模型中的内外边距, 边框的样式设置有什么不同, 写出你的理解</p> <p>一切皆盒子。盒模型由内容区，内边框区，边框，外边框构成一个盒子。</p> <p><br>4. 盒模型的每个要素的排列方式是什么?<br>盒模型每个要素的排列方式：上-右-下-左</p> </div> <div class="info-pre-next"> <p> 上一篇： <a href="/article/633823.html"> 用css就可以实现累加效果的神器--counter </a> </p> <p> 下一篇： <a href="/article/633825.html"> 7.23 仿照课堂案例,写一个简单的企业站 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/633824.html" target="_blank" title="7.3 css的介绍与导入，<iframe>的运用，盒模型"> <h2> 7.3 css的介绍与导入，<iframe>的运用，盒模型 </h2> </a> </li> <li> <a href="/article/422627.html" target="_blank" title="CSS3中的盒模型与盒模型属性box-sizing的详细介绍"> <h2> CSS3中的盒模型与盒模型属性box-sizing的详细介绍 </h2> </a> </li> <li> <a href="/article/347465.html" target="_blank" title="7.3 css的介绍与导入，<iframe>的运用，盒模型"> <h2> 7.3 css的介绍与导入，<iframe>的运用，盒模型 </h2> </a> </li> <li> <a href="/article/179094.html" target="_blank" title="CSS3中的盒模型与盒模型属性box-sizing的详细介绍"> <h2> CSS3中的盒模型与盒模型属性box-sizing的详细介绍 </h2> </a> </li> <li> <a href="/article/146542.html" target="_blank" title="实例演示:<iframe>标签,css样式设置的优先级,css的id,class与标签选择器,演示盒模型的五大要素"> <h2> 实例演示:<iframe>标签,css样式设置的优先级,css的id,class与标签选择器,演示盒模型的五大要素 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>