C1-3 web基础与布局

最新推荐文章于 2024-07-17 09:43:10 发布

Vip_8888888

最新推荐文章于 2024-07-17 09:43:10 发布

阅读量171

点赞数

分类专栏： C1见习工程师认证文章标签： html 程序人生经验分享

本文链接：https://blog.csdn.net/weixin_55110841/article/details/117392475

版权

C1见习工程师认证专栏收录该内容

3 篇文章 0 订阅

订阅专栏

任务大纲

一、基本任务
要求：使用开源富文本编辑器完成一个表格（有表格标题、换行变色、添加：按钮点击事件）

二、基本（拓展任务）
要求：在https://studio.code.org上注册账号，完成HTML和CSS的系列⽹⻚开发任务。

三、高级（拓展任务）
   要求：
       1、理解CSS盒⼦模型的多层含义（边框边距、标准⽂档流、浮动与定位、布局模式）
2、完成下图的CSS盒⼦模型布局

四、自测

任务一：完成一个表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSDN能力认证</title>
    <style>
        h2{
            font-family: 宋体;size: 50px;color: rgba(255, 255, 255, 1);
            background-color: rgb(0, 0, 0);
            width: 200px;
            line-height: 50px;
        }

    </style>
</head>
<body>
<!--2号标题-->
<h2>CSDN能力认证中心</h2>
<!--表格   表格线  表格宽度  高度-->
<table border="" width="200px" height="50px">
   <tbody>
   <tr style="background-color: #ffe545">
       <td >C1</td>
       <td>见习工程师</td>
   </tr>
   <tr style="background-color: #ff1cd5">
       <td>C4</td>
       <td>专项工程师</td>
   </tr>
   <tr style="background-color: #ffe545">
       <td>C5</td>
       <td>全栈工程师</td>
   </tr>
   </tbody>
</table>
<!--按钮点击事件——跳转认证网页-->
<input type="button" value="我要认证" onclick="window.location.href='https://ac.csdn.net/reserve'">
</body>
</html>

任务二：所见所得式开发

要求：在https://studio.code.org上注册账号，完成HTML和CSS的系列⽹⻚开发任务。

知识点：HTML标签，CSS标签

任务三：完成下图的CSS盒⼦模型布局

首先，我们可以分为两类：1-6 为一类，7-9为另一类

我们先分析第一类：其摆放位置如图所示：

其次，是7-9，我们可以用相对定位或者绝对定位解决。

这是我的完成样子以及源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS盒子练习</title>
    <style>
        *{
            margin: 0;      /*清除外边距*/
            padding: 0;     /*清除内边距*/
        }

        div{
            text-align: center; /*所有div文字：居中*/
        }

        /*父div*/
        #box{
            width: 568px;
            height: 350px;
            border: 1px solid #000000;
            border-radius: 3px;
            padding: 10px;
            position: relative;
            margin: auto;
            top: 50px;
            background-color: #ab9d4e;
        }

        /*左边（孩子）div*/
        #left{
            margin: 0;
            width: 180px;
            height:350px;
            /*border: 4px solid red;*/
            margin-right: 10px;
            float: left;
        }

        /*右边（孩子）div*/
        #right{
            width: 378px;
            height:350px;
            /*border: 4px solid #8EC5FC;*/
            float: left;
        }



        /*1号：样式设置*/
        #one{
            width: 176px;
            height:80px;
            line-height: 80px;
            margin-bottom: 10px;
            border-radius: 3px;
            border: 1px solid #000000;
            /*background-color: #ffffbf;*/
            background-color: #a1ec73;


        }

        /*2号：样式设置*/
        #two{
            width: 176px;
            height:256px;
            line-height: 256px;
            border-radius: 3px;
            border: 1px solid #000000;
            /*background-color: #ffffbf;*/
            background-color: #a1ec73;


        }

        /*3号：样式设置*/
        #three{
            width: 377px;
            height:150px;
            line-height: 150px;
            /*border: 1px solid black;*/
            float: left;
            margin-bottom: 10px;
            border: 1px solid #000000;
            border-radius: 3px;
            background-color: #a1ec73;

        }

        /*右边：控制（4、5、6）下面孩子*/
        #button{
            width: 379px;
            height:187px;
            float: left;

        }

        /*4号：样式设置*/
        #four{
            width: 180px;
            height:186px;
            line-height: 186px;
            border: 1px solid #000000;
            display: inline-block;
            margin-right: 10px;
            border-radius: 3px;
            background-color: #a1ec73;
            float: left;

        }

        /*控制5、6：样式设置*/
        #button-right{
            width: 180px;
            height:187px;
            /*border: 2px solid lightcoral;*/
            float:left;
        }

        /*5号：样式设置*/
        #five{
            width: 180px;
            height:87px;
            line-height: 87px;
            margin-bottom: 10px;
            border: 1px solid #000000;
            border-radius: 3px;
            background-color: #a1ec73;

        }

        /*6号：样式设置*/
        #six{
            width: 180px;
            height:87px;
            line-height: 87px;
            border: 1px solid #000000;
            border-radius: 3px;
            background-color: #a1ec73;
        }
        /*7、8、9号：样式设置*/
        .l2{
            width: 150px;
            height:100px;
            border: 1px solid #000000;
            border-radius: 3px;
            background-color: #ec8c19;
            line-height: 87px;
            margin: auto;
        }


    </style>
</head>
<body>
<!--父div-->
<div id="box">
    <!--左边div-->
    <div id="left">
        <div id="one">1</div>
        <div id="two">2</div>
    </div>
    <!--右边div-->
    <div id="right">
        <div id="three">3</div>
        <!--下边：控制（4、5、6）下面孩子-->
        <div id="button">
            <div id="four">4</div>
            <!--右下 控制5、6-->
            <div id="button-right">
                <div id="five">5</div>
                <div id="six">6</div>
            </div>
        </div>
    </div>
    <!-- 7.8的相对位置   -->
    <div class="l2"style="top: 50px;left:210px ;position: absolute">7</div>
    <div class="l2"style="top: -20px;left:400px ;position: absolute">8</div>
</div>
<!--9号居中即可，因为不在box里面-->
<div class="l2">9</div>
</body>
</html>

自测

问题1：HTML5为了使img元素可拖放，需要增加什么属性?

在img标签内加入draggable=”true”

问题2：HTML5哪一个input类型可以选择一个无时区的日期选择器?

type=”date”

问题3：CSS盒子模型中的Margin、Border、Padding都是什么意思？

外边距:、边框、内边距

问题4：说出至少五种常见的HTML事件

1、点击事件: onclick
	<button onclick="copyText()">复制文本</button>		

2、获取焦点事件：onfocus
	<input type="text" id="fname" onfocus="setStyle(this.id)">

3、失去焦点事件：onblur
	<input type="text" name="fname" id="fname" onblur="upperCase()">
        
4、表单提交事件：onsubmit
	<form action="demo_form.html" onsubmit="checkForm()">
        
5、当文档加载完成后运行事件：onload
	<body onload="load()">

问题5：HTML的onblur和onfocus是哪种类型的属性？

事件属性

问题6：怎么设置display属性的值使容器成为弹性容器？

display: flex;

问题7：JavaScript中有多少种不同类型的循环？

3种 while、dowhile、for循环

问题8：用户搜索某个单词后，JavaScript高亮显示搜索到的单词，使用哪个语义化标签最合适？

mark

Vip_8888888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
4
评论
C1-3 web基础与布局

一、基本任务要求：完成一个表格（有表格标题、换行变色、添加：按钮点击事件）二、基本（拓展任务）要求：在https://studio.code.org上注册账号，完成HTML和CSS的系列⽹⻚开发任务。三、高级（拓展任务）要求： 1、理解CSS盒⼦模型的多层含义（边框边距、标准⽂档流、浮动与定位、布局模式） 2、完成下图的CSS盒⼦模型布局四、自测 1、HTML5为了使img元素可拖放，需要增加什么属性？...
复制链接

扫一扫