静态网页布局练习项目开发

最新推荐文章于 2024-09-09 23:43:17 发布
最新推荐文章于 2024-09-09 23:43:17 发布
阅读量147 收藏
点赞数
文章标签： javascript css html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57479246/article/details/125124090
版权

效果图

 

 

html代码 

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>学成在线</title>
	<link rel="stylesheet" type="text/css" href="学成在线.css">
</head>

<body>
	<!-- 顶部 -->
	<div class="top">
		<div class="top_one">
			<div class="top_one_one"></div>
			<div class="top_one_two">
				<div class="top_one_two_one">
					<a href="#">首页</a>
					<a href="#">课程</a>
					<a href="#" class="a_right">职业规划</a>
				</div>
				<div class="top_one_two_two">
					<input type="text" value="输入关键词">
					<button></button>
				</div>
				<div class="top_one_two_three"></div>
			</div>
		</div>
	</div>
	<!-- 上半部 -->
	<div class="upper">
		<div class="upper_one">
			<div class="upper_one_one">
				<ul class="upper_one_one_one">
					<li><a href="#"><span>前端开发</span><span class="upper_right">></span></a></li>
					<li><a href="#"><span>后端开发</span><span class="upper_right">></span></a></li>
					<li><a href="#"><span>移动开发</span><span class="upper_right">></span></a></li>
					<li><a href="#"><span>人工智能</span><span class="upper_right">></span></a></li>
					<li><a href="#"><span>商业预测</span><span class="upper_right">></span></a></li>
					<li><a href="#"><span>云计算&大数据</span><span class="upper_right">></span></a></li>
					<li><a href="#"><span>运维&从测试</span><span class="upper_right">></span></a></li>
					<li><a href="#"><span>UI设计</span><span class="upper_right">></span></a></li>
					<li><a href="#"><span>产品</span><span class="upper_right">></span></a></li>
				</ul>
			</div>
			<div class="upper_one_two">
				<div class="upper_one_two_one">我的课程表</div>
				<div class="upper_one_two_two">
					<a href="#" class="B">
						<div>继续学习 程序语言设计</div>
						<div class="A">正在学习-使用对象</div>
					</a>
					<a href="#">
						<div>继续学习 程序语言设计</div>
						<div class="A">正在学习-使用对象</div>
					</a>
					<a href="#">
						<div>继续学习 程序语言设计</div>
						<div class="A">正在学习-使用对象</div>
					</a>
					<a href="#">
						<div class="blue_border">全部课程</div>
					</a>
				</div>
			</div>
		</div>
	</div>
	<!-- body -->
	<div class="body">
		<div class="body_interest">
			<a href="#" class="A">精品推荐</a>
			<div>|</div>
			<a href="#">JQuery</a>
			<div>|</div>
			<a href="#">Spark</a>
			<div>|</div>
			<a href="#">MySQL</a>
			<div>|</div>
			<a href="#">JavaWeb</a>
			<div>|</div>
			<a href="#">MySQL</a>
			<div>|</div>
			<a href="#">JavaWeb</a>
			<a href="#" class="a">修改兴趣</a>
		</div>
		<div class="tui_jian">
			<div>精品推荐</div>
			<a href="#">查看全部</a>
		</div>
		<div class="jing_pin clearfix">
			<ul>
				<li>
					<a href="#">
						<h4>Android Hybrid APP开发实战H5+原生 !</h4>
						<div>
							<span class="color">高级</span>
							<span class="text-color"> · </span>
							<span class="text-color">1125人学习</span>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<h4>Android Hybrid APP开发实战H5+原生 !</h4>
						<div>
							<span class="color">高级</span>
							<span class="text-color"> · </span>
							<span class="text-color">1125人学习</span>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<h4>Android Hybrid APP开发实战H5+原生 !</h4>
						<div>
							<span class="color">高级</span>
							<span class="text-color"> · </span>
							<span class="text-color">1125人学习</span>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<h4>Android Hybrid APP开发实战H5+原生 !</h4>
						<div>
							<span class="color">高级</span>
							<span class="text-color"> · </span>
							<span class="text-color">1125人学习</span>
						</div>
					</a>
				</li>
				<li class="jian_ge">
					<a href="#">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div>
							<span class="color">高级</span>
							<span class="text-color"> · </span>
							<span class="text-color">1125人学习</span>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<h4>Android Hybrid APP开发实战H5+原生 !</h4>
						<div>
							<span class="color">高级</span>
							<span class="text-color"> · </span>
							<span class="text-color">1125人学习</span>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<h4>Android Hybrid APP开发实战H5+原生 !</h4>
						<div>
							<span class="color">高级</span>
							<span class="text-color"> · </span>
							<span class="text-color">1125人学习</span>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<h4>Android Hybrid APP开发实战H5+原生 !</h4>
						<div>
							<span class="color">高级</span>
							<span class="text-color"> · </span>
							<span class="text-color">1125人学习</span>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<h4>Android Hybrid APP开发实战H5+原生 !</h4>
						<div>
							<span class="color">高级</span>
							<span class="text-color"> · </span>
							<span class="text-color">1125人学习</span>
						</div>
					</a>
				</li>
				<li class="jian_ge">
					<a href="#">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div>
							<span class="color">高级</span>
							<span class="text-color"> · </span>
							<span class="text-color">1125人学习</span>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="tui_jian">
			<div>编程入门</div>
			<div class="N">
				<a href="#" class="M">热门</a>
				<a href="#" class="M">初级</a>
				<a href="#" class="M">中级</a>
				<a href="#" class="M">高级</a>
			</div>
			<a href="#">查看全部</a>
		</div>
		<div class="bian_cheng">
			<div class="a"></div>
			<div class="b">
				<div class="c"></div>
				<ul>
					<li class="jian_ge">
						<a href="#">
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div>
								<span class="color">高级</span>
								<span class="text-color"> · </span>
								<span class="text-color">1125人学习</span>
							</div>
						</a>
					</li>
					<li class="jian_ge">
						<a href="#">
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div>
								<span class="color">高级</span>
								<span class="text-color"> · </span>
								<span class="text-color">1125人学习</span>
							</div>
						</a>
					</li>
					<li class="jian_ge">
						<a href="#">
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div>
								<span class="color">高级</span>
								<span class="text-color"> · </span>
								<span class="text-color">1125人学习</span>
							</div>
						</a>
					</li>
					<li class="jian_ge jiange">
						<a href="#">
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div>
								<span class="color">高级</span>
								<span class="text-color"> · </span>
								<span class="text-color">1125人学习</span>
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="tui_jian">
			<div>编程入门</div>
			<div class="N">
				<a href="#" class="M">热门</a>
				<a href="#" class="M">初级</a>
				<a href="#" class="M">中级</a>
				<a href="#" class="M">高级</a>
			</div>
			<a href="#">查看全部</a>
		</div>
		<div class="bian_cheng">
			<div class="a"></div>
			<div class="b">
				<div class="c"></div>
				<ul>
					<li class="jian_ge">
						<a href="#">
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div>
								<span class="color">高级</span>
								<span class="text-color"> · </span>
								<span class="text-color">1125人学习</span>
							</div>
						</a>
					</li>
					<li class="jian_ge">
						<a href="#">
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div>
								<span class="color">高级</span>
								<span class="text-color"> · </span>
								<span class="text-color">1125人学习</span>
							</div>
						</a>
					</li>
					<li class="jian_ge">
						<a href="#">
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div>
								<span class="color">高级</span>
								<span class="text-color"> · </span>
								<span class="text-color">1125人学习</span>
							</div>
						</a>
					</li>
					<li class="jian_ge jiange">
						<a href="#">
							<h4>Think PHP 5.0 博客系统实战项目演练</h4>
							<div>
								<span class="color">高级</span>
								<span class="text-color"> · </span>
								<span class="text-color">1125人学习</span>
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!-- bottom -->
	<div class="bottom">
		<div class="bottom_one">
			<div class="bottom_one_one">
				<div class="top_one_one"></div>
				<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。 © 2017年XTCG Inc.保留所有权利。-沪I
					CP备-15025210号
				</p>
				<div class="a">下载APP</div>
			</div>
			<div class="bottom_one_two">
				<table>
					<tr>
						<th>关于学成网</th>
					</tr>
					<tr>
						<td>关于</td>
					</tr>
					<tr>
						<td>管理团队</td>
					</tr>
					<tr>
						<td>工作机会</td>
					</tr>
					<tr>
						<td>客户服务</td>
					</tr>
					<tr>
						<td>帮助</td>
					</tr>
				</table>
				<table>
					<tr>
						<th>新手指南</th>
					</tr>
					<tr>
						<td>如何注册</td>
					</tr>
					<tr>
						<td>如何选课</td>
					</tr>
					<tr>
						<td>如何拿到毕业证</td>
					</tr>
					<tr>
						<td>学分是什么</td>
					</tr>
					<tr>
						<td>考试未通过怎么办</td>
					</tr>
				</table>
				<table class="A">
					<tr>
						<th>合作伙伴</th>
					</tr>
					<tr>
						<td>合作机构</td>
					</tr>
					<tr>
						<td>合作导师</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</body>

</html>

                                                                                css代码

* {
	padding: 0;
	margin: 0;
}

.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}

a {
	text-decoration: none;
	color: black;
}

body {
	background-color: #f3f5f7;
}

.top {
	height: 100px;
	width: 1919px;
	margin-left: auto;
	margin-right: auto;
	background-color: #f3f5f7;
}

.top_one {
	height: 100px;
	width: 1202px;
	margin-right: auto;
	margin-left: auto;
	background-color: #f3f5f7;
}

.top_one_one {
	height: 100px;
	width: 229px;
	float: left;
	background-color: #f3f5f7;
	background-image: url(images/logo.jpg);
	background-repeat: no-repeat;
}

.top_one_two {
	height: 100px;
	width: 973px;
	float: left;
	background-color: #f3f5f7;
}

.top_one_two_one {
	height: 100px;
	width: 378px;
	float: left;
	background-color: #f3f5f7;
}

.top_one_two_one a {
	line-height: 100px;
	margin-left: 37px;
	font-size: 17px;
}

.top_one_two_one a:active {
	border-bottom: #00a4ff 2px solid;
}

.a_right {
	margin-right: 95px;
}

.top_one_two_two {
	height: 100px;
	width: 411px;
	float: left;
	background-color: #f3f5f7;
}

.top_one_two_two button {
	height: 40px;
	width: 49px;
	background-image: url(images/搜索.png);
	background-repeat: no-repeat;
	float: left;
	margin-top: 30px;
	margin-bottom: 30px;
	border: 1px solid #00a4ff;
}

.top_one_two_two input {
	height: 38px;
	width: 360px;
	font-size: 14px;
	text-indent: 2em;
	line-height: 38px;
	border: 1px solid #00a4ff;
	color: #c6c7c7;
	margin-top: 30px;
	margin-bottom: 30px;
	float: left;
}

.top_one_two_two input:hover {
	border: 1px solid #00a4ff;
}

.top_one_two_three {
	height: 100px;
	width: 184px;
	float: left;
	background-color: #f3f5f7;
	background-image: url(images/登录状态.png);
	background-repeat: no-repeat;
	background-position: center;
}

.upper {
	height: 420px;
	width: 1919px;
	margin-left: auto;
	margin-right: auto;
	background-color: #1c036c;
}

.upper_one {
	height: 420px;
	width: 1202px;
	margin-left: auto;
	margin-right: auto;
	background-color: #1c036c;
	background-image: url(images/banner2.png);
	background-repeat: no-repeat;
}

.upper_one_one {
	height: 420px;
	width: 190px;
	float: left;
	background-color: rgba(19, 1, 75, 0.5);
}

.upper_one_one_one {
	list-style: none;
}

.upper_one_one_one li {
	margin-top: 15px;
	padding-left: 20px;
}

.upper_one_one_one li span {
	line-height: 30px;
	font-size: 12px;
	color: #d4d2da;
}

.upper_right {
	float: right;
	margin-right: 20px;
}

.upper_one_two {
	height: 300px;
	width: 229px;
	float: right;
	margin-top: 60px;
	margin-bottom: 60px;
}

.upper_one_two_one {
	color: #ffffff;
	width: 229px;
	height: 58px;
	background-color: #9bceea;
	line-height: 58px;
	text-align: center;
	letter-spacing: 3px;
}

.upper_one_two_two {
	width: 229px;
	height: 242px;
	background-color: #ffffff;
	color: #5a5a5a;
}

.upper_one_two_two div {
	color: #5a5a5a;
}

.upper_one_two_two a {
	display: block;
	height: 48px;
	width: 229px;
	text-align: center;
	padding-top: 10px;
}

.upper_one_two_two .B {
	height: 55px;
}

.upper_one_two_two .blue_border {
	width: 200px;
	height: 40px;
	border: #58b8ff solid 1px;
	color: #58b8ff;
	line-height: 40px;
	margin-left: 13.5px;
	margin-right: 13.5px;
}

.body {
	width: 1919px;
	height: 2383px;
	margin-left: auto;
	margin-right: auto;
	background-color: #f3f5f7;
}

.body_interest {
	height: 60px;
	width: 1202px;
	background-color: #ffffff;
	margin-left: auto;
	margin-right: auto;
	margin-top: 9px;

}

.body_interest a {
	height: 60px;
	width: 120px;
	float: left;
	text-align: center;
	line-height: 60px;
}

.body_interest div {
	height: 60px;
	width: 10px;
	float: left;
	text-align: center;
	line-height: 60px;
}

.body_interest .A {
	margin-left: 20px;
}

.body_interest .a {
	width: 100px;
	height: 60px;
	color: #00a4ff;
	font-size: 14px;
	float: right;
}

.tui_jian {
	height: 47px;
	width: 1202px;
	margin-left: auto;
	margin-right: auto;
	color: #707070;
	margin-top: 30px;
}

.tui_jian div {
	height: 47px;
	font-size: 19px;
	float: left;
}

.tui_jian a {
	height: 47px;
	font-size: 10px;
	float: right;
	color: #707070;
}

.tui_jian .M {
	font-size: 18px;
	float: none;
	margin-right: 50px;

}

.tui_jian .N {
	width: 500px;
	height: 47px;
	margin-left: 430px;
}

.jing_pin {
	width: 1202px;
	margin-left: auto;
	margin-right: auto;
}

.jing_pin ul li {
	list-style: none;
	width: 228px;
	height: 270px;
	background-color: #ffffff;
	background-image: url(images/andro.png);
	background-repeat: no-repeat;
	margin-right: 15.5px;
	margin-bottom: 15.5px;
	float: left;

}

.jing_pin .jian_ge {
	margin-right: 0;
	background-image: url(images/PHPTHINK.png);
}

.jing_pin ul li a h4 {
	height: 50px;
	width: 200px;
	text-align: center;
	margin-top: 180px;
	margin-left: 14px;
	margin-right: 14px;
}

.jing_pin ul li a div {
	height: 50px;
	width: 228px;
	text-align: center;
}

.color {
	color: #ff7c2d;
}

.text-color {
	color: #999999;
}

.bian_cheng {
	height: 393px;
	width: 1202px;
	margin-left: auto;
	margin-right: auto;
}

.bian_cheng .a {
	height: 393px;
	width: 229px;
	float: left;
	background-image: url(images/php\ .png);
	background-repeat: no-repeat;
}

.bian_cheng .b {
	height: 393px;
	width: 957px;
	float: right;
}

.bian_cheng li {
	list-style: none;
	width: 228px;
	height: 270px;
	background-color: #ffffff;
	background-image: url(images/andro.png);
	background-repeat: no-repeat;
	margin-right: 13px;
	margin-bottom: 15.5px;
	float: left;
}

.bian_cheng h4 {
	height: 50px;
	width: 200px;
	text-align: center;
	margin-top: 180px;
	margin-left: 14px;
	margin-right: 14px;
}

.bian_cheng div {
	height: 50px;
	width: 228px;
	text-align: center;
}

.bian_cheng .c {
	height: 100px;
	width: 957px;
	background-image: url(images/图层\ 155.png);
	background-repeat: no-repeat;
}

.bian_cheng ul {
	margin-top: 22px;
}

.bian_cheng .jiange {
	margin-right: 0px;
}

.bottom {
	height: 417px;
	width: 1919px;
	background-color: #ffffff;
	margin-left: auto;
	margin-right: auto;
}

.bottom_one {
	height: 417px;
	width: 1202px;
	background-color: #ffffff;
	margin-left: auto;
	margin-right: auto;
}
.bottom_one_one {
	height: 200px;
	width: 513px;
	float: left;
	
}
.bottom_one_two {
	height: 200px;
	width: 569px;
	float: right;
	
}
.bottom .top_one_one {
	height: 50px;
	width: 229px;
	float: left;
	margin-top: 50px;
	background-color: #ffffff;
	background-image: url(images/学成在线.png);
	background-repeat: no-repeat;
}
.bottom .bottom_one_one p {
	height: 60px;
	width: 513px;
	float: left;
}
.bottom .bottom_one_one .a {
	height: 40px;
	width: 120px;
	float: left;
	border: #00a4ff solid;
	font-size: 19px;
	color: #00a4ff;
	text-align: center;
	line-height: 40px;
}
.bottom_one_two table {
	height: 150px;
	width: 150px;
	text-align: left;
	margin-top: 50px;
	float: left;
}
.bottom_one_two .A {
	height: 67px;
}

vinchenaaacc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ccss案例：学成在线网站，浮动和定位的运用
qq_44324230的博客
08-03 671
效果图 。 。 。 。 css * { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; } .w { width: 1200px; margin: auto; } body { background-color: #f3f5f7; } .clearfix:after { content: ""; display: block;
网页布局综合练习
Lucivita的博客
01-21 990
目录 1.练习：分别用两种模型按图中标注的参数设置以下两个元素。 盒子一： ​ 盒子二： 2.综合练习 一.HTML代码 二.CSS代码 三.效果图 1.练习：分别用两种模型按图中标注的参数设置以下两个元素。 分析：ie盒子和标准盒子的区别在于ie盒子的height和width包括border和padding 盒子一： html代码 <body> <div class="one">标准盒子</div> <di...
2021/3/23--前端布局练习
A444477的博客
03-23 389
2021/3/23–前端布局练习 要求： 解题代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1
下拉菜单
小白小白从不日别的博客
05-08 239
关于下拉菜单这里就不去过多的阐述了，实现的方法呢其实也有很多，这里就主要给出两种吧，一种是纯css实现，一种是利用js实现 公共部分： <div class="nav-site"> <div class="container"> <!-- 右侧导航 --> <ul class="fr"> <li class="dropdown fl">
静态网页制作（html+css）、css浮动,练习（网页布局），清除浮动
m0_69034993的博客
06-24 4532
常用元素： div, hr, p, h1~h6, ul, ol, dl, form, table。float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟元素也应该浮动，以防止引起问题。网页布局第一准则：多个块元素纵向排列找标准流，多个块元素横向排列找浮动。先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
毕设&课设&项目&实训-根据网页设计图练习静态布局.zip
02-05
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
Web入门初学者纯静态页面练习 HTML+CSS 布局、浮动练习
11-23
在描述中提到的“布局练习”，很可能是让你通过CSS的`display`属性，比如`block`、`inline`、`flexbox`或`grid`，来实现不同类型的布局。浮动（float）是早期常用的布局方法，通过设置`float:left`或`float:right`，...
品优购静态网页练习（HTML+CSS）
08-22
在本实践项目“品优购静态网页练习”中，我们将深入学习和应用HTML与CSS的基础知识，这包括HTML5和CSS3的最新特性。这个练习旨在帮助初学者或有一定基础的开发者巩固前端开发技能，通过实际操作理解网页结构与样式...
淘宝首屏静态页面（HTML+CSS）布局练习.zip
05-07
在本实践项目“淘宝首屏静态页面（HTML+CSS）布局练习”中，你将有机会深化对前端基础知识的理解，特别是HTML和CSS的应用。这个练习专为初学者设计，旨在帮助你提升网页样式布局的能力，而不涉及复杂的交互或逻辑...
京东静态网页项目(静态)
06-24
京东静态网页项目是一个适合初学者的实践练习，主要聚焦在HTML这一前端基础技术上。HTML，全称为HyperText Markup Language，是构建网页内容的核心语言。它通过一系列的标记（tags）来描述页面的结构和内容，使...
JS都有哪些操作数组的方法
ggq53219的博客
09-04 563
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 1078
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
基于JavaWeb开发的JavaSpringboot+Vue实现前后端分离房屋租赁系统
央顺科技官方博客
09-05 509
2021年处于信息科技高速发展的大背景之下。在今天，缺少手机和电脑几乎已经成为不可能的事情，人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大商家非常有必要建立自己的网上房屋租赁平台系统，这既可以让更多的人体验到网络所带来的方便，也有助于提高房屋的租赁。在经过几十年的高速发展后，互联网已成为最流行、最普及的媒体，每天的信息流量甚至能比得上过去十年。其以便捷的信息交换、快速的沟通速度，悄然地改变着会员的消费方式。
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 958
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
hiprint打印/jsPDF使用/html2canvas
song854601134的博客
09-05 1316
hiprint
【ShuQiHere】初识 Node.js：服务器端 JavaScript 的强大之处
ShuQIHere的博客
09-09 870
对于初学者来说，Node.js 的最大吸引力在于它使用了大家熟悉的 JavaScript，且能够在服务器端高效运行。它简化了前后端开发的衔接，提供了一个统一的编程环境。无论是开发 Web 应用、实时应用，还是创建命令行工具，Node.js 都能为你提供一个强大且灵活的平台。如果你刚刚开始学习编程，不妨试着用 Node.js 创建一些简单的项目。通过实践，你会发现 Node.js 的世界是如此丰富多彩，充满了无限的可能。
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1003
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
常见文档工具对比和选择
最新发布
qq_41765777的博客
09-09 594
文档工具的本质，其实都是将我们的文档内容标准化，在互联网环境上的文档，一般目前比较主流的是生成文档的 html 网页内容，而文档内容的作者都比较倾向于使用纯文本的 Markdown 进行书写，所以文档工具的核心内容主要就是将 Markdown 转换为一个 html 的网站内容。
【前端】读取csv文件，将数据转换为对象。spilce与slice的区别
weixin_43872912的博客
09-05 288
解决思路：将csv文件的第一行作为key，后续的每一行作为value存入对象数组。
"2022静态网页设计软件开发技术项目实践：XHTML与CSS布局精要
静态网页设计软件开发技术项目实践是学员在学习和掌握XHTML语言和CSS样式表基础知识的基础上，通过实际项目实践案例进行练习和应用。通过该项目实践，学员可以加深对网页设计原理和方法的理解，提高对XHTML语言和CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值