富文本编辑与CSS布局实战-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_52283848/article/details/118330380

任务1富文本编辑器使用

打开富文本编辑器，随意输入内容
选择源代码模式打开
可以看到，这里直接显示了源代码，是一个p标签
接着写一些html代码，看下效果
加入一些按钮实现一些简单的功能，下面是用HBuilder X写的代码实现和效果图

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">

		</script>


		<style>
			#mydiv {
				color: red;
				font-size: 50px;
				margin-bottom: 25px;
				text-align: center;
			}

			.myclass {
				color: #0000FF;
				font-size: 20px;
				margin-bottom: 25px;
				background-image: linear-gradient(180deg, blue, yellow, red);
			}

			table {
				margin: auto;
				margin-bottom: 50px;
				border: #0000FF solid 1px;
				width: 80%;
			}

			table,
			td {
				border-collapse: collapse;
				border: #0000FF solid 1px;

			}

			tr {
				text-align: center;
			}

			.my_body {
				width: 650px;
				margin: auto;
				margin-top: 10%;
				text-align: center;
			}

			input {
				width: 100px;
				height: 50px;
				font-size: 20px;
				margin-left: 200px;
				align-items: center;

			}
		</style>

	</head>

	<body>
		<script>
			onclick = function() {
				var tab_name = document.getElementById("mytable");
				var my_button = document.getElementById("mybutton");
				var tab_tr = document.getElementsByTagName("tr");
				for (var i = 0; i < tab_tr.length; i++) {
					if (i == 1) {
						tab_tr[i].style.backgroundColor = "darkcyan";
					}
				}

			}
		</script>



		<div id="mydiv">优快云能力认证中心</div>
		<div>
			<table id="mytable">
				<tr class="myclass">
					<td>认证等级</td>
					<td>认证名称</td>
				</tr>
				<tr>
					<td>C1</td>
					<td>见习工程师认证</td>
				</tr>
				<tr>
					<td>C4</td>
					<td>专项工程师认证</td>
				</tr>
				<tr>
					<td>C5</td>
					<td>全栈工程师认证</td>
				</tr>
			</table>
			<input id="mybutton" value="我要认证" type="button" />
		</div>
	</body>


</html>

在这里插入图片描述

任务2按要求完成CSS盒子模型

任务要求图：

使用Hbuild x实现的代码如下：

<html>
	<head>
		<meta charset="utf-8">
		<title>eee</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;

			}

			.mydiv {
				position: relative;
				width: 1020px;
				height: 800px;
				font-size: 20px;
				color: white;
				border: 5px solid gray;
				margin: 100px auto;
				background-color: #fcdd9c;
			}

			.mydiv>div {

				text-align: center;
			}

			#div1,
			#div2,
			#div3,
			#div4,
			#div5,
			#div6 {
				background-color: #c4cf8d;
			}

			#div1 {
				width: 320px;
				/*将块元素变为行内块元素，使文字居中*/
				line-height: 170px;
				margin: 20px;
			}

			#div2 {
				width: 320px;
				line-height: 570px;
				margin: 20px;
			}

			#div3 {
				/* 采用绝对布局，对照其父元素 */
				position: absolute;
				width: 640px;
				line-height: 250px;
				/* 左侧相对于父元素的距离 */
				left: 360px;
				/* 顶部相对于父元素的距离 */
				top: 20px;
			}

			#div4 {
				position: absolute;
				width: 365px;
				line-height: 490px;
				left: 360px;
				top: 290px;
				z-index: 1;
			}

			#div5 {
				position: absolute;
				width: 255px;
				line-height: 235px;
				left: 745px;
				top: 290px;
			}

			#div6 {
				position: absolute;
				width: 255px;
				line-height: 235px;
				left: 745px;
				top: 545px;
			}

			#div7 {
				position: absolute;
				width: 250px;
				line-height: 200px;
				left: 385px;
				top: 45px;
				background-color: #F2A263;
				z-index: 2;
			}

			#div8 {
				position: absolute;
				width: 250px;
				line-height: 200px;
				left: 725px;
				/* 负号表示反向 */
				top: -100px;
				background-color: #F2A263;
				z-index: 2;
			}

			#div9 {
				position: absolute;
				width: 250px;
				line-height: 200px;
				left: 425px;
				top: 700px;
				background-color: #F7CC9F;
				z-index: 0;
				
			}
		</style>
	</head>
	<body>


		<div class="mydiv">
			<div id="div1">1</div>
			<div id="div2">2</div>
			<div id="div3">3</div>
			<div id="div4">4</div>
			<div id="div5">5</div>
			<div id="div6">6</div>
			<div id="div7">7</div>
			<div id="div8">8</div>
			<div id="div9">9</div>
		</div>
	</body>
</html>

效果图如下：因为不知道总的边距，我根据自己的比列来的，感觉差的好多啊!哈哈哈
在这里插入图片描述

最后加上这句


			.mydiv {
				position: relative;
				width: 1020px;
				height: 800px;
				font-size: 20px;
				color: white;
				border: 5px solid gray;
				margin: 100px auto;
				background-color: #fcdd9c;
				/*这句就是超出浏览器部分隐藏*/
				overflow: hidden;
			}

大功告成，溜了溜了，这一下浪费了2小时，有点拉胯；