购物网站HTML（首页）

已于 2022-10-11 11:33:33 修改
阅读量1w 收藏 157
点赞数 6
文章标签： 原型模式 html
于 2022-02-11 15:19:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56078449/article/details/122881213
版权

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<script src="js/Untitled-4.js"></script>
<link href="CSS/首页.css" rel="stylesheet" type="text/css">
<link href="CSS/whole.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--header begin-->
<div class="header">
<div class="header_logo"> <img src="images/huawei_logo.png" /></div>
<div class="header_text"> <a href= "HTML/登录.html">登录</a>|<a href="HTML/登录.html">注册</a> </div>
</div>
<!--header end-->

<!--nav begin-->
<div class="nav">
	<ul class="nav_in">
		<li><a href="首页.html">首页</a></li>
        <li><a href="HTML/华为专区.html">华为专区</a></li>
		<li><a href="HTML/鸿蒙智选.html">鸿蒙智联</a></li>
		<li><a href="HTML/华为智选.html">华为智选</a></li>
		<li><a href="HTML/HarmonyOS.html">HarmonyOS</a></li>
		<li><a href= "HTML/购物车.html">我的购物车</a></li>
	</ul>
	</div>
<!--nav end-->
<!--banner begin-->
<div class="main">
			<!-- 左按钮 -->
			<a href="javascript:;" class="left">&lt;</a>
			<!-- 右按钮 -->
			<a href="javascript:;" class="right">&gt;</a>
			<!-- 滚动区 -->
			<ul>
			<li><img src="images/ban1.jpg"></li>
			<li><img src= "images/ban2.jpg"></li>
			</ul>
			<!-- 小圆 -->
			<ol class="circle">
			</ol>
		</div>

CSS代码

@charset "utf-8";
/* CSS Document */
ul,ol{
	list-style: none;
}
a{
	text-decoration: none;
}
.main{
	width:100%; 
	height:455px; 
	position:relative; 
	overflow:hidden;
	margin: auto;

}
.left,.right{
	display: none;
	position: absolute;
	top: 50%;
	margin-top: -20px;
	width: 24px;
	height: 40px;
	background: rgba(0, 0, 0, .3);
	text-align: center;
	line-height: 40px;
	color: #fff;
	font-size: 18px;
	z-index: 2;
}
.right{
	right: 0;
}
.circle {
	position: absolute;
	bottom: 10px;
	left: 50px;
}
.main ul{
	position: absolute;
	left: 0;
	top: 0;
	width: 1000%;
}
.main ul li{
	float:left;
}

.circle li {
	float: left;
	width: 8px;
	height: 8px;
	border: 2px solid orange;
	margin: 0 3px;
	border-radius: 50%;
	/*鼠标经过显示小手*/
	cursor: pointer;
}
.current {
    background-color: orange;
}

.content_text{
	text-align: center;
	margin-top: 20px;
	
}
.content{
	width:1250px;
	height:1200px;
	margin: auto;
	margin-top:100px;
}
.content_box1{
	float:left;
	width:60%;
	height:500px;
	background:url("../images/pic1.jpg");
	background-size:cover;
}

.content_box2{
	float:right;
	background:url("../images/pic2.jpg");
	width:35%;
	height:500px;
	background-size:cover;
}

.content_box3{
	float:left;
	background:url( "../images/pic3.jpg");
	width:30%;
	height:550px;
	background-size:cover;
	margin-top:50px;
}

.content_box4{
	float:right;
	background:url(  "../images/pic4.jpg");
	width:60%;
	height:550px;
	background-size:cover;
	margin-top:50px;
}

.content_box1:hover,.content_box2:hover,.content_box3:hover,.content_box4:hover{
	transform:scale(1.15);
}

.footer{
width:100%;
height:80px;
background:#8E8E8E;
text-align: center;
padding-top: 30px;
color:#ccc;
}
.footer p{
line-height: 30px;
font-size: 14px;
 }

@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;border:0;list-style:none;}
body{font-family:"微软雅黑";font-size:16px;color:#404042;}/** CSS Document */
a{text-decoration:none;color:#fff;}
.header{
    width:1000px;
	margin:0 auto;
	padding-top:20px;
	overflow:hidden;
}
.header_logo{
	float:left;
}
.header_text{
	float:right;
	}
.header a{ color:#404042;}
.header a:hover{color:#da5454;}
.nav{width:100%;
    height:40px;
    background:#999;
	margin-top: 15px
}
.nav_in{
	width:980px;
	margin:0 auto;
}
.nav_in li{
	float:left;
}
.nav_in li a{
	display:block;
	line-height: 40px;
	padding:0 36px;
	
}
.nav_in li .current{
	background: #da5454;
}
.nav_in a:hover{background: #da5454;}
.banner{
	width:100%; 
	height:580px; 
	position:relative; 
	overflow:hidden;
}
.gouwuche{
	position: absolute;
	float:right;
}
.footer{
width:100%;
height:80px;
background:#8E8E8E;
text-align: center;
padding-top:25px;
color:#ccc;
	margin-top: 15px;
}
.footer p{
line-height: 30px;
font-size: 14px;
 }

JavaScript
 

// JavaScript Document


function animate(obj, target, callback) {
    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            if (callback) {
                // 调用函数
                callback();
            }
        }
        // 把每次加 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

window.addEventListener('load',function(){
	//1.获取元素
	var left = document.querySelector('.left');
	var right = document.querySelector('.right');
	var main = document.querySelector('.main');
	var mainWidth = main.offsetWidth;
	//2.鼠标经过显示左右按钮
	main.addEventListener('mouseenter',function(){
		left.style.display = 'block';
		right.style.display = 'block';
		clearInterval(timer);
		timer = null; // 清除定时器变量
	})
	//3.鼠标离开隐藏左右按钮
	main.addEventListener('mouseleave',function(){
		left.style.display = 'none';
		right.style.display = 'none';
		timer = setInterval(function() {
			//手动调用点击事件
			right.click();
		}, 2000);
	})
	//4.动态生成圆圈
	var ul = main.querySelector('ul')
	var ol = main.querySelector('.circle')
	for (var i = 0; i < ul.children.length; i++) {
		//创建一个li
		var li = document.createElement('li'); 
		// 记录当前小圆圈的索引号 通过自定义属性来做 
		li.setAttribute('index', i);
		//插入ol
		ol.appendChild(li);
		//排他思想
		li.addEventListener('click', function() {
			//所有li清除类名
			for (var i = 0; i < ol.children.length; i++) {
				ol.children[i].className = '';
			}
			//当前li设置current类名
			this.className = 'current';
			var index = this.getAttribute('index');
			num = index;
			circle = index; 
			animate(ul, -index * mainWidth);
		})
	}
	//第一个小li设置为current
	ol.children[0].className = 'current';
	// 克隆第一张图片(li)放到ul 最后面
	var first = ul.children[0].cloneNode(true);
	ul.appendChild(first);
	// 6.点击右按钮，图片滚动一张
	var num = 0;
	var circle = 0;
	var flag = true;
	// 7.右侧按钮
	right.addEventListener('click',function(){
	if(flag){
		//关闭节流阀
			flag = false;
			if(num == ul.children.length-1){
				ul.style.left = 0;
				num = 0;
			}
			num++;
			animate(ul, -num*mainWidth,function(){
	
				flag = true;
			});
			circle++;
			if (circle == ol.children.length) {
				circle = 0;
			}
			// 调用函数
			circleChange();
		}
	});
	// 8.左侧按钮
	left.addEventListener('click',function(){
	if(flag){
			flag = false;
			if(num == 0){
				num = ul.children.length - 1;
				ul.style.left = -num * mainWidth + 'px';
			}
			num--;
			animate(ul, -num*mainWidth, function(){
				flag = true;
			});
			circle--;
			if (circle < 0) {
				circle = ol.children.length - 1;
			}
			// 调用函数
			circleChange();
		}
	});
	function circleChange() {
		// 先清除其余小圆圈的current类名
		for (var i = 0; i < ol.children.length; i++) {
			ol.children[i].className = '';
		}
		// 留下当前的小圆圈的current类名
		ol.children[circle].className = 'current';
	}
	// 自动播放轮播图
	var timer = setInterval(function() {
		//手动调用点击事件
		right.click();
	}, 2000);
})

二、内容页

第一张 HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="../CSS/hwzq.css" rel="stylesheet" type="text/css">
<link href="../CSS/whole.css" rel="stylesheet" type="text/css">
<title>华为专区</title>
</head>
<body>
<!--header begin-->
<div class="header">
	<div class="header_logo"> <img src="../images/huawei_logo.png" /></div>
	<div class="header_text"> <a href="登录.html">登录</a>|<a href="登录.html">注册</a></div>
</div>
<!--header end-->
 
<!--nav begin-->
<div class="nav">
	<ul class="nav_in">
		<li><a href="../首页.html">首页</a></li>
        <li><a href="华为专区.html">华为专区</a></li>
		<li><a href="鸿蒙智选.html">鸿蒙智联</a></li>
		<li><a href="华为智选.html">华为智选</a></li>
		<li><a href="HarmonyOS.html">HarmonyOS</a></li>
		<li><a href= "购物车.html">我的购物车</a></li>
	</ul>
</div>
<!--nav end-->
<!--banner degin-->
<div class="banner"> <img src="../images/nav2.jpg"></div>
<!--banner end-->
	
<!--content begin-->
<h1 class="content_text">产品分类</h1>
<div class="content">
	<div class="content_box1">
	  <div class="conntent_box_text"><p><a href="#">手机</a></p></div>
	</div>
    <div class="content_box2">
		<div class="conntent_box_text"><p><a href="#">笔记本</a></p></div>
	</div>
	<div class="content_box3">
		<div class="conntent_box_text"><p><a href="#">平板</a></p></div>
	</div>
	<div class="content_box4">
		<div class="conntent_box_text"><p><a href="#">智慧屏</a></p></div>
	</div>
	<div class="content_box5">
		<div class="conntent_box_text"><p><a href="#">智能手表</a></p></div>
	</div>
	<div class="content_box6">
		<div class="conntent_box_text"> <p><a href="#">耳机</a></p></div>
	</div>
</div>
<!--content end-->
	
<!--footer begin-->
<div class="footer">
</div>
<!--footer end-->
</body>
</html>

因为有一些板块的样式是一样的，为了减少重复的编写，建一个css用来编写相同的样式

@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;border:0;list-style:none;}
body{font-family:"微软雅黑";font-size:16px;color:#404042;}/** CSS Document */
a{text-decoration:none;color:#fff;}
.header{
    width:1000px;
	margin:0 auto;
	padding-top:20px;
	overflow:hidden;
}
.header_logo{
	float:left;
}
.header_text{
	float:right;
	}
.header a{ color:#404042;}
.header a:hover{color:#da5454;}
.nav{width:100%;
    height:40px;
    background:#999;
	margin-top: 15px
}
.nav_in{
	width:980px;
	margin:0 auto;
}
.nav_in li{
	float:left;
}
.nav_in li a{
	display:block;
	line-height: 40px;
	padding:0 36px;
	
}
.nav_in li .current{
	background: #da5454;
}
.nav_in a:hover{background: #da5454;}
.banner{
	width:100%; 
	height:580px; 
	position:relative; 
	overflow:hidden;
}
.gouwuche{
	position: absolute;
	float:right;
}
.footer{
width:100%;
height:80px;
background:#8E8E8E;
text-align: center;
padding-top:25px;
color:#ccc;
	margin-top: 15px;
}
.footer p{
line-height: 30px;
font-size: 14px;
 }

再根据不同的点编写一个专门的css样式

@charset "utf-8";
/* CSS Document */
.banner{
	width:100%; 
	height:580px; 
	position:relative; 
	overflow:hidden;
}
.content{
	width:80%;
	height:800px;
	margin: 0 auto;
}
.content_text{
	text-align: center;
	margin-top: 20px;
	
}
 
.content_box1{
	float:left;
	width:20%;
	height:250px;
	background:url( "../images/content1.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 25px;
}
 
.conntent_box_text {
	text-align:center;
	float:left;
	width:100%;
	height:15px;
	margin-top:220px;
 
}
 
.conntent_box_text a{
	font-size: 20px;
	
	color: #000000;
}
.content_box2{
	
	float:left;
	width:20%;
	height:250px;
	background:url("  ../images/content2.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 25px;
}
 
.content_box3{
	float:left;
	width:20%;
	height:250px;
	background:url( "../images/content3.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 25px;
}
 
.content_box4{
	
	float:left;
	width:20%;
	height:250px;
	background:url( "../images/content4.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 100px;
	
}
 
.content_box5{
	
	float:left;
	width:20%;
	height:250px;
	background:url(  "../images/content5.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 100px;
	
}
 
.content_box6{
	
	float:left;
	width:20%;
	height:250px;
	background:url(  "../images/content6.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 100px;
	
}
.content_box1:hover,.content_box2:hover,.content_box3:hover,.content_box4:hover,.content_box5:hover,.content_box6:hover{
	transform:scale(1.15);
}

第二张HTML

HTML部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鸿蒙智联</title>
<link href="../CSS/hmzx.css" rel="stylesheet" type="text/css">
<link href="../CSS/whole.css" rel="stylesheet" type="text/css">
</head>
<!--header begin-->
<div class="header">
<div class="header_logo"> <img src="../images/huawei_logo.png" /></div>
<div class="header_text"> <a href="登录.html">登录</a>|<a href="登录.html">注册</a> </div>
</div>
<!--header end-->
 
<!--nav begin-->
<div class="nav">
	<ul class="nav_in">
		<li><a href="../首页.html">首页</a></li>
        <li><a href="华为专区.html">华为专区</a></li>
		<li><a href="鸿蒙智选.html">鸿蒙智联</a></li>
		<li><a href="华为智选.html">华为智选</a></li>
		<li><a href="HarmonyOS.html">HarmonyOS</a></li>
		<li><a href= "购物车.html">我的购物车</a></li>
	</ul>
	</div>
<!--nav end-->
<!--banner degin-->
<div class="banner"> <img src="../images/2.webp"></div>
<!--banner end-->
<!--banner end-->
<!--content BEGIN-->
<h1 class="content_text">热门推荐</h1>
<div class="content">
	<a href="#"><div class="content_box1"></div></a>
	<a href="#"><div class="content_box2"></div></a>
	<a href="#"><div class="content_box3"></div></a>
	<a href="#"><div class="content_box4"></div></a>
	<a href="#"><div class="content_box5"></div></a>
	<a href="#"><div class="content_box6"></div></a>
	
</div>
<!--content end-->
	
<!--footer begin-->
<div class="footer">
   
</div>
<!--footer end-->
<body>
</body>
</html>

css部分

@charset "utf-8";
/* CSS Document */
.content{
	width:80%;
	height:800px;
	margin: 0 auto;
}
.content_text{
	text-align: center;
	margin-top: 20px;
}
.content_box1{
	float:left;
	width:20%;
	height:330px;
	background:url(  "../images/2.1.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 25px;
}
.content_box2{
	float:left;
	width:20%;
	height:330px;
	background:url( "../images/2.2.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 25px;
}
.content_box3{
	float:left;
	width:20%;
	height:330px;
	background:url(  "../images/2.3.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 25px;
}
.content_box4{
	float:left;
	width:20%;
	height:330px;
	background:url(  "../images/2.4.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 25px;
}
.content_box5{
	float:left;
	width:20%;
	height:330px;
	background:url(  "../images/2.5.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 25px;
}
.content_box6{
	float:left;
	width:20%;
	height:330px;
	background:url(  "../images/2.6.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 25px;
}
 
.content_box1:hover,.content_box2:hover,.content_box3:hover,.content_box4:hover,.content_box5:hover,.content_box6:hover{
	transform:scale(1.15);
}

效果图

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASHViZXJ04piF,size_20,color_FFFFFF,t_70,g_se,x_16

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASHViZXJ04piF,size_20,color_FFFFFF,t_70,g_se,x_16

可以根据需要更换图片

图片来源于华为商城网站

购物网站（内容页面）_Hubert★的博客-CSDN博客icon-default.png?t=M85Bhttps://blog.csdn.net/m0_56078449/article/details/122881619

︱Harvey︱
关注
  • 6
    点赞
  • 踩
  • 157
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
仿购物网站-HTML手写代码(仅提供参考，不要擅用否则侵权)
欢乐打代码！
08-09 5020
前端练习作,好的代码可以多打几遍,这篇文章只是分享一个购物商城的案例,对于交作业的朋友应该有所帮助,免费提取,点点关注就好!
HTML+CSS简单应用实例——购物网站的制作（一）
weixin_46343805的博客
12-17 3万+
HTML+CSS简单应用实例——购物网站的制作（一） 这是一个用CSS、HTML、JS制作的简单的购物网站，这篇文章是主页，在后面文章中依次有登录页、商品页、客服页面等。有很多不足之处，希望大家能给我指出来。 先看一下效果图。 （所有图片都是从淘宝、京东、唯品会搜的） 分析：最上方是DIV+列表，注册可以点进去进入注册页面。下面服饰区、美妆区部分是列表，其中又嵌套了列表。今日推荐部分是一个大表格，导航栏部分是一个小表格，位置设为固定。最下方是一个脚本，用DIV做成。 下面是具体代码： <!DO
购物网站首页设计（HTML CSS JS layui ）
m0_51204608的博客
08-15 4204
购物网站首页设计（品优购） 界面预览 文件预览 源码 1 首页.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA
HTML + CSS 连载 | 63 - 京东首页商品布局（上）
JingnanJia的博客
03-07 1010
刷新页面，所有的 item 全部在一行中显示了：如果有更多 item：</</</</</</</</</</</刷新页面，由于宽度的限制，每一行都会只有四个；这样也可以全部排满：但是使用伪元素的方式有可能对一些其他版本的浏览器存在兼容性的问题。我们可以给每一行的第五个元素加入一个特殊的 class</</</</</</</</</</</刷新浏览器：这样就可以实现需求的同时解决兼容性的问题。除了上面对每行最后一个元素添加特殊的 class 这种方式外，还有另一种解决方案；我们可以增加。
用HTML写一个简单的静态购物网站
捉只树袋熊的博客
07-27 2362
用HTML写一个简单的静态购物网站
html简单网页代码：于品优购电商购物网站网页设计与实现共计3个页面 html+css+javascript网页设计实例 企业网站制作
12-17 1757
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
购物网站 html
04-12
购物网站 html
HTML实现淘宝图书购物车管理
qq_48516121的博客
11-28 2626
1.HTML程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>结算清单</title> <script src="js.js"></script> <link rel="stylesheet" href="qd.css"> </head> <body> <ta
html+css+简单的js制作的超市页面
qq_57049935的博客
09-12 1411
css部分：此部分先将全体对象的间距设置为0，字体设置为微软雅黑，设置所有a标签的颜色并且取消a标签的下划线。然后设计版心的宽度，注意每个部分都会使用版心，因此不设计版心的高度，由具体部分具体给指定的高度。根据上图成果，此部分是在版心之中分为左右两部分进行设计，使用div将其分为两块，然后进行css的样式设计。分为三部分进行设计，左边一个logo，中间搜索框以及下面的文字，右边设计扫描的二维码。这里注意设计给的是具体的位置，所以给宽度和高度时要使用工具确定具体的px值。
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
热门推荐
HTML网页设计 专注大学生网页设计
09-18 5万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
商品购物网页设计（HTML）
weixin_65314914的博客
08-05 3484
HTML网页设计是计算机科学领域中的一个重要分支，它涉及到网页的布局、设计、交互等方面。随着互联网的发展，HTML网页设计已成为了一个必备的技能，无论是企业还是个人都需要掌握这一技能。本教程将介绍HTML的基础知识，包括HTML标签、CSS样式、JavaScript脚本等内容，帮助读者快速入门HTML网页设计，并能够创建出美观、实用、交互性强的网页。同时，我们也将介绍一些实用的工具和技巧，帮助读者更加高效地完成网页设计工作。希望本教程能够对广大网页设计爱好者有所帮助！
手机购物商城网站HTML源码
12-04
手机购物商城网站HTML源码
html5购物网站带登录
07-11
html5 css js jquery 轮播图 登录注册 购物车页面 三级菜单
购物网站网页
05-09
php基础网站设计，适合初学者，代码可能有些bug，但对于初学者来说还可以
HTML+CSS购物网站——小米有品
03-23
HTML+CSS购物网站——小米有品（含首页，购物车，个人信息，登录，商品详细信息，注册页面）
手机购物网站网页模板html
11-26
手机购物网站网页模板html，高水准设计效果。chrome浏览器中打开，按F12，选择手机模式 ，可以看到手机上的显示效果。很不错
23种设计模式之原型模式
m0_63137850的博客
04-22 473
可以理解为克隆 浅克隆 发现改变v1日期，v2日期也变，v1 v2指向同一个date 深克隆 改造clone方法，克隆属性 发现改变v1日期，v2日期不变 原型模式适用场景 23种设计模式
java泛型
weixin_42349568的博客
04-24 441
这不就重复书写代码了吗?为了复用代码,我们就想着有一个字符来指代这个类型.于是就有了泛型,顾名思义,就是广义上的类型的别称.这里ArrayList就是说明这是使用泛型定义的类,其中T就是这个类型代号.具体使用的时候,把这个T用具体的类型去赋值即可.
原型链prototype、__proto、constructor的那些问题整理
最新发布
qq_33039355的博客
04-26 706
从上面结构我们能看的出来,函数有两种原型,一种是作为函数特有的原型:prototype,另一种是作为对象的__proto__类型(就是上图那个[[Prototype]],__proto__是浏览器自己填充的,新浏览器都能看到,我的浏览器版本低,还看不到哈,先这么写)没有问题,和预期一样,这么看,我们现在就可以把上面写法精简一下,因为对象上的属性和方法,自己上面没有,就会去它的原型链上面去找,也就是对象会有原型的继承。我们再来看函数的另外一个原型__proto__,我们展开它。
移动端html首页
05-27
移动端HTML首页通常需要考虑以下几个方面： 1. 布局与设计：移动设备屏幕较小，需要精简内容并优化布局设计，使得用户可以快速找到所需内容，同时要保持美观和易用性。 2. 响应式设计：针对不同尺寸的移动设备，要做出相应的响应式设计，保证页面在不同设备上均能正常展示。 3. 快速加载：移动设备的网络环境和性能有限，需要尽量减少页面大小和资源请求次数，以确保页面快速加载。 4. SEO优化：为了提高网站的搜索引擎排名，需要针对移动设备进行SEO优化，包括网站结构、关键词、页面标题、描述等。 以下是一个简单的移动端HTML首页示例，包括一个顶部导航栏和多个内容块： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>移动端HTML首页</title> <style> /* 顶部导航栏 */ .nav { background-color: #fff; height: 50px; line-height: 50px; text-align: center; font-size: 16px; color: #333; box-shadow: 0 2px 2px #eee; } .nav a { display: inline-block; width: 20%; } /* 内容块 */ .content { padding: 10px; margin: 10px; background-color: #fff; box-shadow: 0 2px 2px #eee; } .content h2 { font-size: 14px; color: #333; margin: 5px 0; } .content p { font-size: 12px; color: #999; margin: 5px 0; } </style> </head> <body> <div class="nav"> <a href="#">首页</a> <a href="#">分类</a> <a href="#">购物车</a> <a href="#">我的</a> </div> <div class="content"> <h2>优惠活动</h2> <p>2021年春节大促销，全场商品低至五折！</p> </div> <div class="content"> <h2>新品上架</h2> <p>2021年春季新品上市，尽情体验美好时光！</p> </div> <div class="content"> <h2>推荐商品</h2> <p>热门商品推荐，每周更新，敬请期待！</p> </div> </body> </html> ``` 以上示例中，通过CSS设置了顶部导航栏和内容块的样式，使得页面简洁美观。在`<meta>`标签中，使用`viewport`属性设置了页面的视口，以确保页面在不同设备上正常显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值