Web基础与布局

最新推荐文章于 2022-11-09 11:38:52 发布

butucode

最新推荐文章于 2022-11-09 11:38:52 发布

阅读量138

点赞数

分类专栏：菜鸟笔记文章标签： css3 html html5

本文链接：https://blog.csdn.net/qq_41753866/article/details/117309451

版权

菜鸟笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

任务一：使用富文本编辑器

实现编辑器没有的功能，例如让表格隔行换色、加入JavaScript按钮。
工具：开源富文本编辑器（https://summernote.org/）

<style>
    /*
    table 中的 class 为编辑器自动添加，使用的是它内置的样式
    这里主要讲表格隔行换色
    */

    /*奇数行*/
    table tr:nth-child(odd) {
        background-color: gray;
    }
    /*偶数行*/
    table tr:nth-child(even) {
        background-color: red;
    }
</style>

<p>Hello world!</p>

<table class="table table-bordered">
    <tbody>
        <tr>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
    </tbody>
</table>

<input type="button" onclick="alert('确定')" value="确定">
<button id="btn" onclick="alert('确定')">OK</button>

编写好表格代码后，在css代码中，使用 nth-child 方法区别表格中每一行的奇偶数（奇数行：odd，偶数行：even），给奇数和偶数列分别赋予不同的颜色

在按钮的 onclick 属性中添加需要执行的操作，点击按钮即可做出响应。

最终实现效果如下：

拓展：CSS盒子模型

完成下图的CSS盒子模型布局

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" href="new 1.css">
	</head>
	<body>
		<div id = "main">
			<div class = "big-box1">
				<div class = "box1 color-green"> 1 </div>
				<div class = "box2 color-green"> 2 </div>
			</div>
			<div class = "big-box2">
				<div class = "box3 color-green"> 3 </div>
				<div class = "box7 color-orange"> 7 </div>
				<div class = "box8 color-orange"> 8 </div>
			</div>
			<div class = "big-box3">
				<div class = "box49">
					<div class = "box4 color-green"> 4 </div>
					<div class = "box9 color-orange"> 9 </div>
				</div>
				<div class = "box56">
					<div class = "box5 color-green"> 5 </div>
					<div class = "box6 color-green"> 6 </div>
				</div>
			</div>
		</div>
	</body>
</html>

CSS代码：

* {
	margin: 0;
	padding: 0;
}

#main {
	width: 900px;
	height: 600px;
    color: #FFF;
	font-size: 28px;
	background-color: rgb(252, 221, 156);
	border: solid 5px rgb(170, 170, 170);
	margin:200px auto;
	position:relative;
}

	#main div {
		text-align: center;
	}

.color-orange {
	background-color: rgb(243, 164, 100);
	/*border: solid 1px rgb(170, 170, 170);*/
}
.color-green {
	background-color: rgb(197, 208, 142);
	/*border: solid 2px rgb(170, 170, 170);*/
}

.big-box1 {
	width: 260px;
	height: 580px;
	padding: 10px;
	float: left;
}

	.box1 {
		width: 260px;
		height: 130px;
		line-height: 130px;
	}
	.box2 {
		width: 260px;
		height: 430px;
		line-height: 420px;
		margin-top: 20px;
	}

.big-box2 {
	width: 600px;
	height: 220px;
	padding: 10px;
	float: right;
	position: relative;
}
	
	.box3 {
		position: absolute;
		width: 600px;
		height: 220px;
		line-height: 220px;
	}
	.box7 {
		width: 180px;
		height: 140px;
		line-height: 140px;
		position: absolute;
		left: 30px;
		top: 50px;
	}
	.box8 {
		width: 180px;
		height: 140px;
		line-height: 140px;
		position: absolute;
		right: 30px;
		top: -100px;
	}
	
.big-box3 {
	width: 600px;
	height: 340px;
	padding: 10px;
	float: right;
}

	.box49 {
		width: 290px;
		height: 340px;
		float: left;
		position: relative;
	}
	
		.box4 {
			width: 290px;
			height: 340px;
			line-height: 340px;
			position: relative;
			z-index: 2;	/*z-index的值越大，越在最上层。*/
		}
		
		.box9 {
			width: 180px;
			height: 160px;
			line-height: 140px;
			position: absolute;
			left: 30px;
			bottom: -120px;
			z-index: 1;
		}
	
	.box56 {
		width: 290px;
		height: 340px;
		float: right;
	}
	
		.box5 {
			width: 290px;
			height: 160px;
			line-height: 160px;
		}
		.box6 {
			width: 290px;
			height: 160px;
			line-height: 160px;
			margin-top: 20px;
		}

完成效果如下

自测

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

在 img 标签内加入 draggable 属性，并将其设为 true ;

不过这仅仅是将它设置为可拖放，真正要实现拖放这样好像还不够，等研究好之后再更新。

HTML5 哪一个 input 类型可以选择一个无时区的日期选择器？

HTML5 拥有多个可供选取日期和时间的新输入类型：

date：选取日、月、年
month：选取月、年
week：选取周和年
time：选取时间（小时和分钟）
datetime-local：选取时间、日、月、年（本地时间）
datetime：选取时间、日、月、年（在有些浏览器内失效，选用datetime-local）

例：

※ datatime调不出日历控件是因为有些浏览器不支持datetime这种日历控件 ※

※ Internet Explorer、Firefox 和 Chrome 不支持 datetime 类型的 input；Safari 中部分支持；Opera 12 以及更早的版本中完全支持 ※

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

Margin：外边距

Border：边框

Padding：内边距

说出至少五中常见的 HTML 事件

onfocus：当元素获得焦点时触发
onblur：当元素失去焦点时触发
onload：当文档加载时触发
onkeydown：当按下按键时触发
onclick：当单击鼠标时触发
ondblclick：当双击鼠标时触发

HTML 的 onblur 和 onfocus 是哪种类型的属性？

都是 HTML 的事件属性。

onblur：当元素失去焦点时触发

onfocus：当元素获得焦点时触发

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

将 display 属性设为 flex

JavaScript 中有多少中不同类型的循环？

看到有大佬说有15种，但是我只知道这三种：for 循环、do...while 循环和 while 循环。（菜鸡本鸡）

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

语义化标签可以使用

参考资料

butucode

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Web基础与布局

记得加目录任务一：使用富文本编辑器实现编辑器没有的功能，例如让表格隔行换色、加入JavaScript按钮。工具：富文本编辑器<style> /*奇数行*/ table tr:nth-child(odd) { background-color: gray; } /*偶数行*/ table tr:nth-child(even) { background-color: red; }</style&g
复制链接

扫一扫