博客列表 >交作业3:CSS简介与盒模型(2019-7-3)

交作业3:CSS简介与盒模型(2019-7-3)

强风工作室
强风工作室原创
2019年07月08日 09:40:51642浏览
作业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使用浮动之后,不知道为什么,语义化标签部分并没有使用浮动的情况下也跟着浮动了,希望老师指导。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议