1. Toy模板网首页
  2. > Toy博客

html + css 实现淘宝首页（静态页面）

9月前 作者：王大傻0928 分类：Toy博客 阅读(45) 违法举报

这篇具有很好参考价值的文章主要介绍了html + css 实现淘宝首页（静态页面）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

html + css 实现淘宝首页（静态页面）
待续。。。
效果图：
html + css 实现淘宝首页（静态页面）

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/index.css">
	<link rel="icon" href="favicon.ico">
	<base target="_blank">
</head>
<body>
	<!-- 头部信息 -->
	<div id="headMessage" class="clearfix layer">
		<!-- 左边 -->
		<ul class="fl">
			<li>
				<span>中国大陆</span>
				<span></span>
			</li>
			<li class="mr7">
				<a href="#" class="login mr7">亲，请登录</a>
				<a href="#">免费注册</a>
			</li>
			<li class="mr7">
				<a href="#">手机逛淘宝</a>
			</li>
			<li>
				<a href="#">网页无障碍</a>
			</li>
		</ul>
		<!-- 右边 -->
		<ul class="fr">
			<li>
				<a href="#">我的淘宝</a>
				<span></span>
			</li>
			<li>
				<span class="mr5 c4"></span>
				<a href="#">购物车</a>
				<strong class="c4">0</strong>
				<span></span>
			</li>
			<li>
				<a href="#"><span></span>收藏夹</a>
				<span></span>
			</li>
			<li>
				<a href="#">商品分类</a>
				<a href="#">免费开店</a>
			</li>
			<li class="line">|</li>
			<li>
				<a href="#">千牛卖家中心</a>
				<span></span>
			</li>
			<li>
				<a href="#">联系客服</a>
				<span></span>
			</li>
		</ul>
	</div>


	<!-- 头部搜索 -->
	<div id="headSearch">
		<div class="clearfix layer">
			<!-- <h1><a href="#"><img src="images/logo.jpg" alt="淘宝网"></a></h1> -->
			<h1 class="fl"><a href="#">淘宝网</a></h1>

			<div class="fr code">
				<span class="inonfont close"></span>
				<span class="c5">手机淘宝</span>
				<img src="images/code.jpg">
			</div>
			
			<div class="search">
				<!-- 上边 -->
				<ul class="searchTab clearfix">
					<li class="active">宝贝</li>
					<li class="active">天猫</li>
					<li class="active">店铺</li>
				</ul>
				<!-- 中间 -->
				<div class="searchContent clearfix">
					<form action="#">
						<div class="searchBox fl">
							<input type="text" name="">
							<div class="placeholder">
								<i class="inonfont imgSearch"></i>
								<span>毛绒玩具</span>
							</div>
							<span class="inonfont"></span>
						</div>
						<div class="searchButton fl">
							<button type="submit">搜索</button>
						</div>
					</form>	
				</div>
				<!-- 下边 -->
				<div class="hotKey">
					<a href="#">新款连衣裙</a>
					<a href="#">四件套</a>
					<a href="#">潮流T恤</a>
					<a href="#">时尚女鞋</a>
					<a href="#">短裤</a>
					<a href="#">半身裙</a>
					<a href="#">男士外套</a>
					<a href="#">墙纸</a>
					<a href="#">行车记录仪</a>
					<a href="#">新款男鞋</a>
				</div>

			</div>
		</div>
	</div>

	<!-- 导航 -->
	<div id="nav" class="layer clearfix">
		<!-- 左边 -->
		<h2 class="fl">主题市场</h2>
		<!-- 右边 -->
		<ul class="fl">
			<li class="size"><a href="#">天猫</a></li>
			<li class="size"><a href="#">聚划算</a></li>
			<li class="size"><a href="#">天猫超市</a></li>
			<li class="line"><a href="#">|</a></li>
			<li><a href="#">司法拍卖</a></li>
			<li><a href="#">飞猪旅行</a></li>
			<li><a href="#">天天特卖</a></li>
			<li class="line"><a href="#">|</a></li>
			<li><a href="#">造点新货</a></li>
			<li><a href="#">苏宁易购</a></li>
			<li><a href="#">淘宝心选</a></li>
			<li><a href="#">智能生活</a></li>
			<li><a href="#">淘宝直播</a></li>
		</ul>
		
	</div>

	<!-- 首屏内容 -->
	<div id="firstScreen" class="layer clearfix">
		<!-- 左边的内容 -->
		<div class="firstLeft fl">
			<!-- 侧边导航 -->
			<div class="sideNav fl">
				<ul>
					<li>
						<a href="#">女装</a> / <a href="#">内衣</a> / <a href="#">家居</a> <span class="inonfont fr">></span>
					</li>
					<li>
						<a href="#">女鞋</a> / <a href="#">男鞋</a> / <a href="#">箱包</a> <span class="inonfont fr">></span>
					</li>
					<li>
						<a href="#">母婴</a> / <a href="#">童装</a> / <a href="#">玩具</a> <span class="inonfont fr">></span>
					</li>
					<li>
						<a href="#">男装</a> / <a href="#">运动户外</a> <span class="inonfont fr">></span>
					</li>
					<li>
						<a href="#">美妆</a> / <a href="#">彩妆</a> / <a href="#">个护</a> <span class="inonfont fr">></span>
					</li>
					<li>
						<a href="#">手机</a> / <a href="#">数码</a> / <a href="#">企业礼品</a> <span class="inonfont fr">></span>
					</li>
					<li>
						<a href="#">大家电</a> / <a href="#">生活电器</a> <span class="inonfont fr">></span>
					</li>
					<li>
						<a href="#">零食</a> / <a href="#">生鲜</a> / <a href="#">茶酒</a> <span class="inonfont fr">></span>
					</li>
					<li>
						<a href="#">厨具</a> / <a href="#">收纳</a> / <a href="#">清洁</a> <span class="inonfont fr">></span>
					</li>
					<li>
						<a href="#">家纺</a> / <a href="#">家饰</a> / <a href="#">鲜花</a> <span class="inonfont fr">></span>
					</li>
					<li>
						<a href="#">图书音像</a> / <a href="#">文具</a> <span class="inonfont fr">></span>
					</li>
					<li>
						<a href="#">医药保健</a> / <a href="#">进口</a> <span class="inonfont fr">></span>
					</li>
					<li>
						<a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a> <span class="inonfont fr">></span>
					</li>
					<li>
						<a href="#">房产</a> / <a href="#">装修家具</a> / <a href="#">建材</a> <span class="inonfont fr">></span>
					</li>
					<li>
						<a href="#">手表</a> / <a href="#">眼镜</a> / <a href="#">珠宝饰品</a> <span class="inonfont fr">></span>
					</li>
				</ul>
			</div>

			<!-- 图片1容器 -->
			<div class="img1Box fr">
				<div class="pic fl">
					<div class="img">
						<a href="#"><img src="images/pic_01.jpg"></a>
					</div>
					<button class="leftBtn"><</button>
					<button class="rightBtn">></button>
					<div class="circle">
						<span class="active">。</span><span>。</span><span>。</span><span>。</span><span>。</span>
					</div>

				</div>
				<div class="ad fr">
					<a href="#"><img src="images/ad_02.jpg"></a>
				</div>
			</div>

			<!-- 图片2容器 -->
			<div class="img2Box fr">
				<div class="pic fl">
					<div class="picTitle">
						<div class="text">
							<span class="fl bg">理想生活上天猫</span>
							<span class="fr"><i>1</i>/6</span>
						</div>
						<div class="line">
							<span></span>
						</div>
					</div>

					<div class="img">
						<a href="#"><img src="images/pic_03.jpg"></a>
						<a href="#"><img src="images/pic_04.jpg"></a>
					</div>
					<button class="leftBtn"><</button>
					<button class="rightBtn">></button>
				</div>
				<div class="ad fr">
					<p class="title">今日特卖</p>
					<a href="#"><img src="images/ad_03.jpg"></a>
				</div>
			</div>

		</div>

		!-- 右边的内容 -->
		<div class="firstRight fr">
			<!-- 用户 -->
			<div class="user">
				<a href="#" class="avatar"><img src="images/avatar.jpg"></a>
				<p class="username">Hi! 你好</p>
				<p class="members">
					<a href="#" class="gold">领淘金币抵钱</a>
					<a href="#" class="club">会员俱乐部</a>
				</p>
				<div class="btn">
					<button class="login">登录</button>
					<button class="register">注册</button>
					<button class="shop">开店</button>
				</div>
			</div>
			<!-- 举报 -->
			<a href="#" class="tipOff">
				<span>网上有害信息举报专区</span>
				<i class="inonfont"></i>
			</a>

			<!-- 公告区 -->
			<div class="notice">
				<ul class="title">
					<li class="active"><a href="#">公告</a></li>
					<li><a href="#">规则</a></li>
					<li><a href="#">论坛</a></li>
					<li><a href="#">安全</a></li>
					<li><a href="#">公益</a></li>
				</ul>
				<ul class="content clearfix">
					<li class="item1"><a href="#">规则 淘宝网疫情影响地区发货时间要求调整公告</a></li>
					<li><a href="#">热点 疫情场景淘宝卖家指导手册</a></li>
					<li><a href="#">热点 淘宝平台打击流量造假、黑公关、网络水军公告</a></li>
				</ul>
			</div>

			<!-- 图标区域 -->
			<table class="inco">
				
			</table>

			<!-- APP -->
			<div class="app">
				
			</div>
		</div>
	</div>
	</div>

	<!-- 右侧固定定位导航 -->
	<div id="tool">
		
	</div>
</body>
</html>

css代码如下：文章来源地址https://www.toymoban.com/news/detail-507627.html

@import 'reset.css';


/*头部信息*/
#headMessage li{
	float: left;
	line-height: 35px;
	padding: 0 6px;
}

#headMessage li a{
	color: #6c6c6c;
}

#headMessage li a.login{
	color: #f22e00;
}

#headMessage span{
	font-size: 12px;
}

#headMessage li.line{
	font-size: 12px;
	color: #ddd;
	padding: 0 5px;
}



/*头部搜索*/
#headSearch{
	background-color: #fff;
	padding: 24px 0 10px 0;
}

#headSearch h1 a{
	display: block;
	width: 190px;
	height: 58px;
	background: url(../images/logo.jpg) no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	margin-top: 8px;
}

#headSearch .code{
	width: 72px;
	height: 86px;
	border: 1px solid #eee;
	position: relative;
	margin-right: 110px;
	text-align: center;
}

#headSearch .code img{
	width: 62px;
	height: 62px;
}

#headSearch .close{
	position: absolute;
	left: -16px;
	top: -1px;
	width: 14px;
	height: 14px;
	line-height: 14px;
	font-size: 14px;
	border: 1px solid #eee;
	color: #ddd;
	cursor: pointer;
}

#headSearch .search{
	width: 630px;
	margin: 0 auto;
}

#headSearch .searchTab{
	height: 22px;
	padding-left: 17px;
}

#headSearch .searchTab li{
	float: left;
	width: 36px;
	line-height: 22px;
	margin-right: 4px;
	text-align: center;
	color: #f40;
	cursor: pointer;
}

#headSearch .searchTab li:hover{
	background-color: #ffeee5;
}

#headSearch .searchTab li.active{
	color: #fff;
	font-weight: bold;

	background-image: linear-gradient(to right, #ff9000, #ff5000);

	border-radius: 6px 6px 0 0;
}

#headSearch .searchContent{
	height: 40px;
}

#headSearch .searchBox{
	width: 554px;
	height: 40px;
	box-sizing: border-box;
	border: 2px solid #ff5000;
	border-right: none;
	border-radius: 20px 0 0 20px;
	overflow: hidden;
	position: relative;

}

#headSearch .searchBox input{
	width: 490px;
	height: 36px;
	line-height: 36px;
	outline: none;
	border: none;
	text-indent: 10px;

	position: absolute;
	z-index: 1;
	background-color: transparent; /*透明，为了能看到后面的文字*/
}

#headSearch .searchBox .placeholder{
	position: absolute;
	top: 6px;
	left: 14px;
}

#headSearch .placeholder span{
	color: #9c9c9c;
	vertical-align: 1px;
}

#headSearch .imgSearch{
	font-size: 28px;
	position: absolute;
	right: 20px;
	color: #9c9c9c;
	top: -2px;
	cursor: pointer;
}

#headSearch button{
	width: 74px;
	height: 40px;
	text-align: center;
	font-size: 18px;
	line-height: 40px;
	color: #fff;
	border: none;
	background-image: linear-gradient(to right, #ff9000, #ff5000);
	border-radius: 0 20px 20px 0;
}

#headSearch .hotKey{
	height: 25px;
	line-height: 25px;
	margin-bottom: 5px;
}

#headSearch .hotKey a:hover{
	color: #f50;
}


/*导航*/
#nav h2{
	width: 190px;
	height: 30px;
	line-height: 30px;
	font-size: 16px;
	color: #fff;
	text-align: center;
	background-color: #f50;
}

#nav ul{
/*	margin-left: 190px;
	overflow: hidden;*/
	width: 1000px;
	width: calc(100% - 190px); /*支持情况：IE9+*/
	background-image: linear-gradient(to right, #ff9000, #ff5000);
}

#nav ul li{
	float: left;
	line-height: 30px;
	margin: 0 7px;
	font-size: 14px;
	color: #fff;
	padding: 0 5px;

}

#nav ul li.size{
	font-size: 16px;
}

#nav ul li a{
	color: #fff;
	font-weight: bold;
}

#nav ul li.line{
	margin: 0;
	padding: 0;
}


/*首屏内容*/
.firstLeft{
	width: 890px;
}

/*侧边导航*/
.sideNav{
	width: 190px;
	height: 522px;
	background: #fff;
	border: 1px solid #ff5000;
	box-sizing: border-box;
	border-top: none;
	padding-top: 5px;
}

.sideNav li{
	height: 32px;
	line-height: 32px;
	padding-left: 25px;
	color: #999;
	font-size: 14px;

	transition: background-color 0.3s;
}

.sideNav li a{
	font-size: 14px;
	color: #666;
}

.sideNav li span{
	font-size: 12px;
	
}

.sideNav li:hover{
	background: #ffe4dc;
	color: #f50;
}

.sideNav li:hover a{
	color: #f50;
}

.sideNav a:hover{
	text-decoration: underline;
}


/*图片1容器*/
.img1Box{
	width: 690px;
	height: 282px;
	background: #eee;
	margin-top: 10px;
}

.firstLeft .pic{
	width: 520px;
	position: relative;
}

.firstLeft .pic button{
	width: 20px;
	height: 30px;
	line-height: 30px;
	color: #fff;
	cursor: pointer;
	border: none;
	background-color: rgba(0, 0, 0, 0.3); /*支持情况：IE9+*/

	position: absolute;
	top: 50%;
	margin-top: -15px;

	display: none;
}


.firstLeft .pic button.leftBtn{
	left: 0;
	/*border-radius: 0 15x 15px 0;*/
	border-radius: 15px 0 0 15px;
}

.firstLeft .pic button.rightBtn{
	right: 0;
	border-radius: 15px 0 0 15px;
}

.firstLeft .pic:hover button{
	display: block;
}

.firstLeft .pic .circle{
	position: absolute;
	bottom: 15px;
	left: 50%;
	margin-left: -35px;
	border-radius: 10px;
	padding: 3px 0;
	font-size: 0;

	background-color: rgba(255, 255, 255, 0.3);
}

.firstLeft .pic .circle span{
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #fff;
	margin: 0 3px 3px 0;
	cursor: pointer;
}

.firstLeft .pic .circle span.active{
	background-color: #f00;
}

.firstLeft .ad{
	width: 160px;
}

.firstLeft .ad img{
	width: 160px;
}

/*图片2容器*/
.firstLeft .img2Box{
	width: 690px;
	height: 220px;
	margin-top: 10px;
}

.firstLeft .img2Box .picTitle{
	height: 20px
}

.firstLeft .img2Box .picTitle .text{
	height: 17px;
	line-height: 17px;

}

.firstLeft .img2Box .picTitle .text .bg{
	background: url(../images/TMAll.jpg) no-repeat left;
	padding-left: 136px;
	columns: #666;
}

.firstLeft .img2Box .picTitle .text i{
	color: #ff1648;
}


.firstLeft .img2Box .picTitle .line{
	height: 3px;
	background-color: #ff1648;
	position: relative;
}


.firstLeft .img2Box .picTitle .line span{
	width: 87px;
	height: 3px;
	background-color: #000;
	position: absolute;
	left: 0;
}

.firstLeft .img2Box .img{
	background-color: #fff;
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
}


.firstLeft .img2Box .img img{
	margin: 0 10px;
}

.firstLeft .img2Box .ad .title{
	height: 20px;
	line-height: 20px;
}


.firstRight{
	width: 290px;
	margin-top: 10px;
}


/*用户*/
.firstRight .user{
	height: 140px;
	padding-top: 5px;
}

.firstRight .user .avatar{
	display: block;
	width: 50px;
	height: 50px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}

.firstRight .user .avatar img{
	width: 50px;
	height: 50px;
}

.firstRight .user .username{
	text-align: center;
	line-height: 16px;
}

.firstRight .user .members{
	text-align: center;
	font-size: 0;
}

.firstRight .user .members a{
	display: inline-block;
	font-size: 12px;
	border-radius: 9px;
	padding: 0 10px 0 20px;
	margin: 0 2px;
}

.firstRight .user .members a .gold{
	background: #ffe4dc url(../images/icon.jpg) 0 -572 no-repeat; 
}

.firstRight .user .members a .club{
	background: #ffe4dc url(../images/icon.jpg) 0 -528 no-repeat; 
}


.firstRight .user .btn{
	text-align: center;
}


.firstRight .user .btn button{
	width: 75px;
	height: 25px;
	line-height: 25px;
	margin: 12px 2px 0 2px;
	color: #fff;
	font-weight: bold;
	border-radius: 4px;
	border: none;
	background-image: linear-gradient(to right, #ff5000, #ff6f06);
}


.firstRight .user .btn button .login{
	width: 92px;
}


/*举报*/
.firstRight .tipOff{
	display: block;
	height: 26px;
	line-height: 26px;
	color: #f40;
	background: #ffe4dc;
	text-align: center;
}

.firstRight .tipOff i{
	font-size: 12px;
	vertical-align: 1px;
	position: relative;
	left: 30px;
}

/*公告区*/
.firstRight .notice{
	height: 108px;
	background-color: #fff;
}

.firstRight .notice .title{
	text-align: center;
	font-size: 0;
	padding-top: 10px;
}

.firstRight .notice .title li{
	display: inline-block;
	font-size: 12px;
	line-height: 20px;
	padding: 0 4px;
	margin: 0 10px;
}

.firstRight .notice .title li.active{
	font-weight: bold;
	border-bottom: 2px solid #f40;
}

.firstRight .notice .title li a:hover{
	color: #f40;
}

.firstRight .notice .content{
	margin: 0 12px;
	padding-top: 10px;
}

.firstRight .notice .content li{
	font-size: 12px;
	color: #666;
	margin-left: 8px;
	float: left;
	width: 295px;
	overflow: hidden;
}

.firstRight .notice .content li a:hover{
	color: #ff5000;
}

到了这里，关于html + css 实现淘宝首页（静态页面）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 【前端客栈】基于HTML、CSS、JavaScript的羊了个羊静态仿写页面小游戏

    【前端客栈】基于HTML、CSS、JavaScript的羊了个羊静态仿写页面小游戏

    🏜哈喽，大家好，我是小浪。前段时间羊了个羊火遍了大江南北，大家是否都通过第二关了呢？哈哈，没关系，既然通不过，那咋们不如自己来做一个这样的羊了个羊的仿写页面，学会了赶紧拿去在同学面前展示展示；OK，接下来，我们开始仿写这种游戏规则模式，写一个我

    2024年02月04日
    浏览(57)
  • 用html实现一个静态登陆页面-可根据需求更改样式

    用html实现一个静态登陆页面-可根据需求更改样式

    一、创建html文件，vscode下载相关插件 我们先选择一个文件夹创建login.html，.之前的文件命无所谓，.之后就必须为html或者htm。 在编辑改文件输入!且出现提示后按回车或按tab快捷生成基础代码。 然后我们下载一个可以方便我们开发的插件。 搜索之后点击一下然后下载即可。

    2024年02月04日
    浏览(60)
  • HTML+CSS实现视频背景页面

    HTML+CSS实现视频背景页面

    HTML: CSS:  效果图：  video资源网站:https://mazwai.com/  参考自B站教程：12-视频背景页面_哔哩哔哩_bilibili

    2024年02月04日
    浏览(46)

  • HTML/CSS实现3D翻转页面效果

    下面是一个基本的例子，展示了如何使用CSS和HTML实现一个3D页面翻转效果： HTML部分： CSS部分： 在这个例子中，我们使用一个包含两个面（正面和背面）的容器div。通过CSS的 transform 属性和 rotateY 函数，我们实现了容器在鼠标悬停时的旋转效果。 你可以根据自己的需求调整容

    2024年01月24日
    浏览(43)
  • html+css简单仿制淘宝商品界面

    html+css简单仿制淘宝商品界面

    目录 一.主要思路 二.完整代码  三.最终效果 1.写一个大盒子，将内部分为如图几个部分，分别写对应的内容 2.首先给整个盒子宽高，传进图片后调整图片宽高 3.重点在于“找同款”和“买家秀”的隐藏效果写法 4.需要考虑到图片与“找同款”“买家秀”的相对绝对位置关系

    2024年02月09日
    浏览(43)

  • wordpress静态化首页及去除url中的index.html

    使用wordpass博客程序的朋友都知道他的默认首页是index.php，然而地球人都知道index.html的太首页能够提高网站首页的访问速度。原因的话。地球人都知道的。 其实呢cms主题嘛，首页的文章展示模块太多了，所以产生的sql查询也就多了，自然而然的加载速度也就很慢咯尤其是数据

    2023年04月23日
    浏览(42)

  • B048-cms03-前端首页文章列表展示 页面静态化

    抽取公共资源 抽取导航条和侧边栏 1.新建/WEB-INF/views/common文件夹 2.新建header.jsp和leftMenu.jsp 3.引入Index.jsp和Article.jsp 抽取静态资源 新建topStatic.jsp文件 引入Index.jsp和Article.jsp 新建buttomStatic.jsp 引入Index.jsp和Article.jsp 抽取js文件 在WEB-INF外部/WebContent/static/system/js下新建article文件夹

    2024年02月11日
    浏览(47)
  • 【Vue+Element-plus】记录后台首页多echart图静态页面

    【Vue+Element-plus】记录后台首页多echart图静态页面

     Index.vue  DataComparison.vue DateTime.vue HealPatient.vue PeopleNumber.vur TrackPatients.vue VisitsNumber.vue

    2024年02月13日
    浏览(40)
  • web前端综合案例——小兔鲜首页（html+css）

    web前端综合案例——小兔鲜首页（html+css）

    前言：我这里只使用了html和css，js没有使用 项目源代码：https://pan.baidu.com/s/1alnekYEu5F9XwHTW7dO5RA?pwd=qjhd 页面效果：   1.准备项目相应的图片素材，设计稿。 2.创建项目: 2.1 项目名字为：xtx-pc-client 2.2 css里面创建了三个分别为         base.css 这个是全局设置的元素       

    2024年02月07日
    浏览(47)

  • CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程

    !DOCTYPE html !-- 这是HTML的注释 -- html lang=\\\"en\\\" id=\\\"myHtml\\\"     head         !-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 --         meta charset=\\\"UTF-8\\\"         meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"         titleHtmlAll/title         

    2024年02月05日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包