独宠卿一人
独宠卿一人

html+css 微信界面（续一之html）

现在开始贴代码了

html–index


<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
	head>
	<body>
		
		<div class="frame">
			
			<div class="frame_top">
				
				<div class="top">
					
					<div class="topl">8:27div>
					
					<div class="topr">
						<p class="fa fa-headphones">p>
						<p class="fa fa-tachometer">p>
						<p class="fa fa-microchip">p>
						<p class="fa fa-signal">p>
						<p class="fa fa-signal">p>
						<p class="fa fa-battery-3">80p>
					
					div>
				div>
				
				<div class="head">
					<div class="headl">微信div>
					<div class="headr">
						<p class="fa fa-search">p>
						<p class="fa fa-plus-circle">p>
					div>
				div>
			div>
			
			<div class="frame_topti">div>
			
			<div class="main">
				
				<div class="chat">
					
					<div class="chatphoto">
						<img src="img/Vicious%20.jpeg" alt="">
					div>
					
					<div class="newchat">
						
						<div class="chatrt">
							<p>Viciousp><p>昨天p>
						div>
						<p>[语音通话]p>
					div>
				div>
			    
				
				<div class="chat">
					
					<div class="chatphoto">
						<img src="img/苏烟.jpeg" alt="">
					div>
					
					<div class="newchat">
						
						<div class="chatrt">
							<p>苏烟p><p>昨天p>
						div>
						<p>[图片]p>
					div>
				div>
				
				
				<div class="chat">
					
					<div class="chatphoto">
						<img src="img/Lovexo.jpeg" alt="">
					div>
					
					<div class="newchat">
						
						<div class="chatrt">
							<p>Lovexop><p>昨天p>
						div>
						<p>哈哈，所以你就帮忙消灭了p>
					div>
				div>
				
				
				<div class="chat">
					
					<div class="chatphoto">
						<img src="img/一只小恐龙.jpeg" alt="">
					div>
					
					<div class="newchat">
						
						<div class="chatrt">
							<p>一只小恐龙p><p>昨天p>
						div>
						<p>哈哈，不会是扯着蛋了吧！p>
					div>
				div>
				
				
				<div class="chat">
					
					<div class="chatphoto">
						<img src="img/Alone.jpeg" alt="">
					div>
					
					<div class="newchat">
						
						<div class="chatrt">
							<p>Alonep><p>昨天p>
						div>
						<p>[语音]p>
					div>
				div>
				
				
				<div class="chat">
					
					<div class="chatphoto">
						<img src="img/玖.jpeg" alt="">
					div>
					
					<div class="newchat">
						
						<div class="chatrt">
							<p>玖p><p>昨天p>
						div>
						<p>你快做一个欠扁的表情!p>
					div>
				div>
				
				
				<div class="chat">
					
					<div class="chatphoto">
						<img src="img/sunshine.jpeg" alt="">
					div>
					
					<div class="newchat">
						
						<div class="chatrt">
							<p>sunshinep><p>昨天p>
						div>
						<p>你的小可爱已上线，天干物燥，小心她闹p>
					div>
				div>
				
				
				<div class="chat">
					
					<div class="chatphoto">
						<img src="img/小新小新.jpeg" alt="">
					div>
					
					<div class="newchat">
						
						<div class="chatrt">
							<p>小新小新p><p>昨天p>
						div>
						<p>当幸福来敲门的时候，我却踌躇着向左还是右p>
					div>
				div>
				
				
				<div class="chat">
					
					<div class="chatphoto">
						<img src="img/Superficial.jpeg" alt="">
					div>
					
					<div class="newchat">
						
						<div class="chatrt">
							<p>Superficialp><p>昨天p>
						div>
						<p>开始工作就瞌睡，群众意见齐反对p>
					div>
				div>
				
				
				<div class="chat">
					
					<div class="chatphoto">
						<img src="img/卿久久.jpeg" alt="">
					div>
					
					<div class="newchat">
						
						<div class="chatrt">
							<p>卿久久p><p>昨天p>
						div>
						<p>"问你个问题p>
					div>
				div>
				
				
				<div class="chat">
					
					<div class="chatphoto">
						<img src="img/画卿颜.jpeg" alt="">
					div>
					
					<div class="newchat">
						
						<div class="chatrt">
							<p>画卿颜p><p>昨天p>
						div>
						<p>你想清楚再跟我说话p>
					div>
				div>
			div>
			
			<div class="menu">
				<div><a href="index.html" style="color: green;"><span class="fa fa-comment">span><span>微信span>a>div>
				<div><a href="friend.html" ><span class="fa fa-vcard-o">span><span>通讯录span>a>div>
			    <div><a href="find.html" ><span class="fa fa-compass">span><span>发现span>a>div>
				<div><a href="me.html" ><span class="fa fa-user">span><span>我span>a>div>
			div>
		div>
	body>
html>

html—friend


<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/friend.css">
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
	head>
	<body>
		
		<div class="frame">
			
			<div class="frame_top">
				
				<div class="top">
					
					<div class="topl">8:27div>
					
					<div class="topr">
						<p class="fa fa-headphones">p>
						<p class="fa fa-tachometer">p>
						<p class="fa fa-microchip">p>
						<p class="fa fa-signal">p>
						<p class="fa fa-signal">p>
						<p class="fa fa-battery-3">80p>

					div>
				div>
				
				<div class="head">
					<div class="headl">通讯录div>
					<div class="headr">
						<p class="fa fa-search">p>
						<p class="fa fa-plus-circle">p>
					div>
				div>
			div>
			
			<div class="frame_topti">div>
			
			<div class="main" id="friendmain">
				<div class="mainml">

					<div class="contact">
						
						<img src="img/添加新朋友.png" alt="">
						<p>新的朋友p>
					div>

					<div class="contact">
					
						<img src="img/群聊.png" alt="">
						<p>群聊p>
					div>

					<div class="contact">
					
						<img src="img/标签.png" alt="">
						<p>标签p>
					div>

					<div class="contact">
					
						<img src="img/公众号图标.png" alt="">
						<p>公众号p>
					div>
					
					
					<p style="font-size: 2vmin;">Ap>
					
					<div class="contact">
						<img src="img/Alone.jpeg" alt="">
						<p>Alonep>
					div>
						<p style="font-size: 2vmin;">Bp>
					<div class="contact">
						<img src="img/boby.jpg" alt="">
						<p>bobyp>
					div>
					<div class="contact">
						<img src="img/big.jpg" alt="">
						<p>bigp>
					div>
					
					
					<p style="font-size: 2vmin;">Cp>
					
					
					<div class="contact">
						<img src="img/Corrupt.jpeg" alt="">
						<p>Corruptp>
					div>
					<p style="font-size: 2vmin;">Ep>
			
					<div class="contact">
						<img src="img/Empress.jpeg" alt="">
						<p>Empressp>
					div>
					<p style="font-size: 2vmin;">Hp>
					<div class="contact">
						<img src="img/画卿颜.jpeg" alt="">
						<p>画卿颜p>
					div>
					<p style="font-size: 2vmin;">Jp>
					<div class="contact">
						<img src="img/玖.jpeg" alt="">
						<p>玖p>
					div>
					
					<p style="font-size: 2vmin;">Lp>
					<div class="contact">
						<img src="img/Lovexo.jpeg" alt="">
						<p>Lovexop>
					div>
					<p style="font-size: 2vmin;">Mp>
					<div class="contact">
						<img src="img/Monologue.jpeg" alt="">
						<p>Monologuep>
					div>
					<div class="contact">
						<img src="img/Mine.jpg" alt="">
						<p>Mineminep>
					div>
					
					<p style="font-size: 2vmin;">Qp>
					<div class="contact">
						<img src="img/卿久久.jpeg" alt="">
						<p>卿久久p>
					div>
					<p style="font-size: 2vmin;">Sp>
					<div class="contact">
						<img src="img/Superficial.jpeg" alt="">
						<p>Superficialp>
					div>
					<div class="contact">
						<img src="img/sunshine.jpeg" alt="">
						<p>sunshinep>
					div>
					<div class="contact">
						<img src="img/苏烟.jpeg" alt="">
						<p>苏烟p>
					div>
					<p style="font-size: 2vmin;">Vp>
					<div class="contact">
						<img src="img/Vicious%20.jpeg" alt="">
						<p>Viciousp>
					div>
					<p style="font-size: 2vmin;">Xp>
					<div class="contact">
						<img src="img/小新小新.jpeg" alt="">
						<p>小新小新p>
					div>
					<p style="font-size: 2vmin;">Yp>
					<div class="contact">
						<img src="img/一只小恐龙.jpeg" alt="">
						<p>一只小恐龙p>
					div>
					
				div>
				
				<div class="mainmr">
					<ul>
						<li>↑li>
						<li>Ali>
						<li>Bli>
						<li>Cli>
						<li>Dli>
						<li>Eli>
						<li>Fli>
						<li>Gli>
						<li>Hli>
						<li>Ili>
						<li>Jli>
						<li>Kli>
						<li>Lli>
						<li>Mli>
						<li>Nli>
						<li>Oli>
						<li>Pli>
						<li>Qli>
						<li>Rli>
						<li>Sli>
						<li>Tli>
						<li>Uli>
						<li>Vli>
						<li>Wli>
						<li>Xli>
						<li>Yli>
						<li>Zli>
						<li>#li>
					ul>
				div>
				
			div>
			
			<div class="menu">
				<div><a href="index.html"><span class="fa fa-comment">span><span>微信span>a>div>
				<div><a href="friend.html" style="color: green;"><span class="fa fa-vcard-o">span><span>通讯录span>a>div>
				<div><a href="find.html"><span class="fa fa-compass">span><span>发现span>a>div>
				<div><a href="me.html"><span class="fa fa-user">span><span>我span>a>div>
			div>
		div>
	body>
html>

html–find


<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/find.css">
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
	head>
	<body>
		
		<div class="frame">
			
			<div class="frame_top">
				
				<div class="top">
					
					<div class="topl">8:27div>
					
					<div class="topr">
						<p class="fa fa-headphones">p>
						<p class="fa fa-tachometer">p>
						<p class="fa fa-microchip">p>
						<p class="fa fa-signal">p>
						<p class="fa fa-signal">p>
						<p class="fa fa-battery-3">80p>
					div>
				div>
				
				<div class="head">
					<div class="headl">发现div>
					<div class="headr">
						<p class="fa fa-search">p>
						<p class="fa fa-plus-circle">p>
					div>
				div>
			div>
			
			<div class="frame_topti">div>
			
			<div class="main" id="main">
				
				<div class="find" style="margin-bottom: 1.5vh;">
					<a href="pengyouquan.html">
						
						<img src="img/朋友圈.png" alt="">
						
						<div class="prompt">
							<p class="promptl">朋友圈p><p class="fa fa-angle-right">p>
						div>
					a>
				div>
				
					
				<div class="find" >
					<a href=" ">
						
						<img src="img/扫一扫.png" alt="">
						
						<div class="prompt" style="border-bottom: 0.1vh solid #EDEDED;padding-bottom: 1.5vh;">
							<p class="promptl">扫一扫p><p class="fa fa-angle-right">p>
						div>
					a>
				div>
				
					
				<div class="find" style="margin-bottom: 1.5vh;">
					<a href="">
						
						<img src="img/摇一摇.png" alt="">
						
						<div class="prompt">
							<p class="promptl">摇一摇p><p class="fa fa-angle-right">p>
						div>
					a>
				div>
				
					
				<div class="find" style="margin-bottom: 1.5vh;">
					<a href="">
						
						<img src="img/搜一搜.png" alt="">
						
						<div class="prompt">
							<p class="promptl">搜一搜p><p class="fa fa-angle-right">p>
						div>
					a>
				div>
				
					
				<div class="find" style="margin-bottom: 1.5vh;">
					<a href="">
						
						<img src="img/附近的人icon.png" alt="">
						
						<div class="prompt">
							<p class="promptl">附近的人p><p class="fa fa-angle-right">p>
						div>
					a>
				div>
				
					
				<div class="find" style="margin-bottom: 1.5vh;">
					<a href="">
						
						<img src="img/游戏.png" alt="">
						
						<div class="prompt">
							<p class="promptl">游戏p><p class="fa fa-angle-right">p>
						div>
					a>
				div>
				
					
				<div class="find">
					<a href="">
						
						<img src="img/小程序.png" alt="">
						
						<div class="prompt" >
							<p class="promptl">小程序p><p class="fa fa-angle-right">p>
						div>
					a>
				div>
				
				
			
			div>
			
			<div class="menu">
				<div><a href="index.html" ><span class="fa fa-comment">span><span>微信span>a>div>
				<div><a href="friend.html" ><span class="fa fa-vcard-o">span><span>通讯录span>a>div>
			    <div><a href="find.html" style="color: green;"><span class="fa fa-compass">span><span>发现span>a>div>
				<div><a href="me.html" ><span class="fa fa-user">span><span>我span>a>div>
			div>
		div>
	body>
html>

html–me


<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/me.css">
		<link rel="stylesheet" href="css/find.css">
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
	head>
	<body>
		
		<div class="frame">
			
			<div class="frame_top">
				
				<div class="top">
					
					<div class="topl">8:27div>
					
					<div class="topr">
						<p class="fa fa-headphones">p>
						<p class="fa fa-tachometer">p>
						<p class="fa fa-microchip">p>
						<p class="fa fa-signal">p>
						<p class="fa fa-signal">p>
						<p class="fa fa-battery-3">80p>
					
					div>
				div>
				
				<div class="head">
					<div class="headl">div>
					<div class="headr">
						<p class="">p>
						<p class="	fa fa-camera">p>
					div>
				div>
			div>
			
			<div class="frame_topti">div>
			
			<div class="main" style="background-color: #EDEDED">
				
			  <div class="mainnews">
				  
				  <img src="img/Mine.jpg" alt="">
				  
				  
				  <div class="headnew">
					  
					  <div id="name">Mineminediv>
					  
					  <div class="number">
						  
						  <div class="num ">
							 微信号：XXXXXXXX
							  div>
						  
						  <div class="erwei">
							<img src="img/二维码.png" alt="">
							<p class="fa fa-angle-right" style="font-size: 2vmin;">p>
						  div>
						 
					  div>
				  div>
			  div>
			  
			  <div class="find" style="	margin-top: 2vh;margin-bottom: 2vh;">
			  	<a href="">
			  		
			  		<img src="img/支付.png" alt="">
			  		
			  		<div class="prompt">
			  			<p class="promptl">支付p><p class="fa fa-angle-right" style="font-size:2vmin">p>
			  		div>
			  	a>
			  div>
			  
			  <div class="find" >
			  	<a href="">
			  		
			  		<img src="img/微信收藏.png" alt="">
			  		
			  		<div class="prompt" style="border-bottom:1px solid #ededed;">
			  			<p class="promptl">收藏p><p class="fa fa-angle-right" style="font-size:2vmin">p>
			  		div>
			  	a>
			  div>
			  
			  <div class="find" >
			  	<a href="">
			  		
			  		<img src="img/相册.png" alt="">
			  		
			  		<div class="prompt" style="border-bottom:1px solid #ededed;">
			  			<p class="promptl">相册p><p class="fa fa-angle-right" style="font-size:2vmin">p>
			  		div>
			  	a>
			  div>
			  
			  <div class="find" >
			  	<a href="">
			  		
			  		<img src="img/卡包.png" alt="">
			  		
			  		<div class="prompt" style="border-bottom:1px solid #ededed;">
			  			<p class="promptl">卡包p><p class="fa fa-angle-right" style="font-size:2vmin">p>
			  		div>
			  	a>
			  div>
			  
			  <div class="find" >
			  	<a href="">
			  		
			  		<img src="img/icon表情.png" alt="">
			  		
			  		<div class="prompt" >
			  			<p class="promptl">表情p><p class="fa fa-angle-right" style="font-size:2vmin">p>
			  		div>
			  	a>
			  div>
			  
			   <div class="find" style="	margin-top: 2vh;margin-bottom: 2vh;">
			  	<a href="">
			  		
			  		<img src="img/设置.png" alt="">
			  		
			  		<div class="prompt">
			  			<p class="promptl">设置p>	<p class="fa fa-angle-right" style="font-size:2vmin">p>
			  		div>
			  	a>
			  div>
			  
			  
			  
			div>
			
			<div class="menu">
				<div><a href="index.html" ><span class="fa fa-comment">span><span>微信span>a>div>
				<div><a href="friend.html" ><span class="fa fa-vcard-o">span><span>通讯录span>a>div>
			    <div><a href="find.html" ><span class="fa fa-compass">span><span>发现span>a>div>
				<div><a href="me.html" style="color: green;"><span class="fa fa-user">span><span>我span>a>div>
			div>
		div>
	body>
html>

html–pengyouquan


<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/pengyouquan.css">
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
		<script language="JavaScript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js">script>
	head>
	<body>
		
		<div class="frame">
			
			<div class="frame_top">
				
				<div class="top" style="background-color: transparent;">
					
					<div class="topl">8:27div>
					
					<div class="topr">
						<p class="fa fa-headphones">p>
						<p class="fa fa-tachometer">p>
						<p class="fa fa-microchip">p>
						<p class="fa fa-signal">p>
						<p class="fa fa-signal">p>
						<p class="fa fa-battery-3">80p>

					div>
				div>
				
				<div class="head" style="background-color: transparent;">
					<div class="headl"><a href="find.html"><i class="fa fa-angle-left" style="font-size: 3vmin;">i>a>div>
					<div class="headr">
						<p class="">p>
						<p class="fa fa-camera">p>
					div>
				div>
			div>
			
			<div class="mainpyq">
				<div class="maintou">
				<img src="img/bc.jpg" alt="" style="width: 20vw;height: 25vh;">	
				div>
				
				
				<div class="topphoto">
					<div id="topphoto">
						<p>Mineminep>
						<img src="img/Mine.jpg" alt="">
					div>
				div>
				
				
				
				
				
				<div class="pyqnews">
					
					<div class="pyqtou" >
						<img src="img/li.jpg" alt="">
					div>
					
					<div class="new">
						<p>李云龙p>
						<p>二营长，你他娘的给老子滚过来！p>
						
						<div class="newtime">
							
							<p>19:52p>
							<p id="11" onclick="myonclick" style="margin-left: 2vw;">· ·p>
							<div id="22" style="width: 3vw;height: 3vh; 
							background-color: #0000FF;margin-left: -14vw;display: none;	
							clip-path: polygon(80% 0, 0 0, 0 100%, 78% 100%, 100% 26%);display: flex;justify-content: space-between;">
							<p style="font-size: 0.5vmin;">❤点赞p><p style="font-size: 0.5vmin;margin-right: 2vw;">评论p>
							div>
							
						div>
					div>
				div>


			div>





		div>


		div>
	body>
	<script type="text/javascript">
		$("#11").click(function(e){
		  	e.stopPropagation();
			$("#22").toggle();
		  	if($("#22").is(":visible")){
		       $(document).one("click",function(){
		       	$("#22").hide();
		       });
			}
		});
		$("#btncon").on("click",function(e){
			e.stopPropagation();
		})
	script>
html>

你可能感兴趣的:(前端)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
    1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
  • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
    1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
  • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
    数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
  • 分布式锁和spring事务管理 暴躁的鱼 锁及事务分布式springjava
    最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • 【前端】vue 报错:The template root requires exactly one element 程序员-张师傅 前端前端vue.jsjavascript
    【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
  • 从单体到微服务：FastAPI ‘挂载’子应用程序的转变 黑金IT fastapi微服务fastapi架构
    在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 前端three.js的Sprite模拟下雪动画效果 qq_35430208 three.js前端javascript三维场景中下雪效果threejs实现下雪效果
    一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add
  • 系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机 rabbit_it qiankun学习前端框架前端阿里云
    一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性
  • ODOO不同版本与平台选择 chouchengyin2080 c#操作系统运维
    1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架
  • Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数 qcidyu 好用的工具集合代码效率前端技巧Vue开发组合式函数模块管理自动导入NuxtKit
    title:NuxtKit自动导入功能：高效管理你的模块和组合式函数date:2024/9/14updated:2024/9/14author:cmdragonexcerpt:通过使用NuxtKit的自动导入功能，您可以更高效地管理和使用公共函数、组合式函数和VueAPI。无论是单个导入、目录导入还是从第三方模块导入，您都可以通过简单的API调用轻松实现。categories:前端开发tags:N
  • VMware Workstation 11 或者 VMware Player 7安装MAC OS X 10.10 Yosemite iwindyforest vmwaremac os10.10workstationplayer
    最近尝试了下VMware下安装MacOS 系统， 安装过程中发现网上可供参考的文章都是VMware Workstation 10以下， MacOS X 10.9以下的文章， 只能提供大概的思路， 但是实际安装起来由于版本问题， 走了不少弯路， 所以我尝试写以下总结， 希望能给有兴趣安装OSX的人提供一点帮助。     写在前面的话： 其实安装好后发现， 由于我的th
  • 关于《基于模型驱动的B/S在线开发平台》源代码开源的疑虑？ deathwknight JavaScriptjava框架
    本人从学习Java开发到现在已有10年整，从一个要自学 java买成javascript的小菜鸟，成长为只会java和javascript语言的老菜鸟（个人邮箱：[email protected]） 一路走来，跌跌撞撞。用自己的三年多业余时间，瞎搞一个小东西（基于模型驱动的B/S在线开发平台，非MVC框架、非代码生成）。希望与大家一起分享，同时有许些疑虑，希望有人可以交流下 平台
  • 如何把maven项目转成web项目 Kai_Ge mavenMyEclipse
    创建Web工程，使用eclipse ee创建maven web工程 1.右键项目,选择Project Facets,点击Convert to faceted from 2.更改Dynamic Web Module的Version为2.5.(3.0为Java7的,Tomcat6不支持). 如果提示错误,可能需要在Java Compiler设置Compiler compl
  • 主管？？？ Array_06 工作
    转载：http://www.blogjava.net/fastzch/archive/2010/11/25/339054.html 很久以前跟同事参加的培训，同事整理得很详细，必须得转！ 前段时间，公司有组织中高阶主管及其培养干部进行了为期三天的管理训练培训。三天的课程下来，虽然内容较多，因对老师三天来的课程内容深有感触，故借着整理学习心得的机会，将三天来的培训课程做了一个
  • python内置函数大全 2002wmj python
    最近一直在看python的document，打算在基础方面重点看一下python的keyword、Build-in Function、Build-in Constants、Build-in Types、Build-in Exception这四个方面，其实在看的时候发现整个《The Python Standard Library》章节都是很不错的，其中描述了很多不错的主题。先把Build-in Fu
  • JSP页面通过JQUERY合并行 357029540 JavaScriptjquery
    在写程序的过程中我们难免会遇到在页面上合并单元行的情况，如图所示 如果对于会的同学可能很简单，但是对没有思路的同学来说还是比较麻烦的，提供一下用JQUERY实现的参考代码 function mergeCell(){         var trs = $("#table tr"); &nb
  • Java基础 冰天百华 java基础
    学习函数式编程 package base; import java.text.DecimalFormat; public class Main { public static void main(String[] args) { // Integer a = 4; // Double aa = (double)a / 100000; // Decimal
  • unix时间戳相互转换 adminjun 转换unix时间戳
    如何在不同编程语言中获取现在的Unix时间戳(Unix timestamp)？ Java time JavaScript Math.round(new Date().getTime()/1000) getTime()返回数值的单位是毫秒 Microsoft .NET / C# epoch = (DateTime.Now.ToUniversalTime().Ticks - 62135
  • 作为一个合格程序员该做的事 aijuans 程序员
    作为一个合格程序员每天该做的事 1、总结自己一天任务的完成情况 最好的方式是写工作日志，把自己今天完成了什么事情，遇见了什么问题都记录下来，日后翻看好处多多 2、考虑自己明天应该做的主要工作 把明天要做的事情列出来，并按照优先级排列，第二天应该把自己效率最高的时间分配给最重要的工作 3、考虑自己一天工作中失误的地方，并想出避免下一次再犯的方法 出错不要紧，最重
  • 由html5视频播放引发的总结 ayaoxinchao html5视频video
    前言   项目中存在视频播放的功能，前期设计是以flash播放器播放视频的。但是现在由于需要兼容苹果的设备，必须采用html5的方式来播放视频。我就出于兴趣对html5播放视频做了简单的了解，不了解不知道，水真是很深。本文所记录的知识一些浅尝辄止的知识，说起来很惭愧。   视频结构   本该直接介绍html5的<video>的，但鉴于本人对视频
  • 解决httpclient访问自签名https报javax.net.ssl.SSLHandshakeException: sun.security.validat bewithme httpclient
         如果你构建了一个https协议的站点，而此站点的安全证书并不是合法的第三方证书颁发机构所签发，那么你用httpclient去访问此站点会报如下错误   javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path bu
  • Jedis连接池的入门级使用 bijian1013 redisredis数据库jedis
    Jedis连接池操作步骤如下：         a.获取Jedis实例需要从JedisPool中获取；         b.用完Jedis实例需要返还给JedisPool；         c.如果Jedis在使用过程中出错，则也需要还给JedisPool； packag
  • 变与不变 bingyingao 不变变亲情永恒
    变与不变    周末骑车转到了五年前租住的小区，曾经最爱吃的西北面馆、江西水饺、手工拉面早已不在，    各种店铺都换了好几茬，这些是变的。    三年前还很流行的一款手机在今天看起来已经落后的不像样子。    三年前还运行的好好的一家公司，今天也已经不复存在。    一座座高楼拔地而起，
  • 【Scala十】Scala核心四：集合框架之List bit1129 scala
    Spark的RDD作为一个分布式不可变的数据集合，它提供的转换操作，很多是借鉴于Scala的集合框架提供的一些函数，因此，有必要对Scala的集合进行详细的了解   1. 泛型集合都是协变的，对于List而言，如果B是A的子类，那么List[B]也是List[A]的子类，即可以把List[B]的实例赋值给List[A]变量   2. 给变量赋值(注意val关键字，a，b
  • Nested Functions in C bookjovi cclosure
      Nested Functions 又称closure，属于functional language中的概念，一直以为C中是不支持closure的，现在看来我错了，不过C标准中是不支持的，而GCC支持。   既然GCC支持了closure，那么 lexical scoping自然也支持了，同时在C中label也是可以在nested functions中自由跳转的
  • Java-Collections Framework学习与总结-WeakHashMap BrokenDreams Collections
            总结这个类之前，首先看一下Java引用的相关知识。Java的引用分为四种：强引用、软引用、弱引用和虚引用。         强引用：就是常见的代码中的引用，如Object o = new Object();存在强引用的对象不会被垃圾收集
  • 读《研磨设计模式》-代码笔记-解释器模式-Interpret bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 解释器（Interpreter）模式的意图是可以按照自己定义的组合规则集合来组合可执行对象 * * 代码示例实现XML里面1.读取单个元素的值 2.读取单个属性的值 * 多
  • After Effects操作&快捷键 cherishLC After Effects
    1、快捷键官方文档 中文版：https://helpx.adobe.com/cn/after-effects/using/keyboard-shortcuts-reference.html 英文版：https://helpx.adobe.com/after-effects/using/keyboard-shortcuts-reference.html 2、常用快捷键
  • Maven 常用命令 crabdave maven
    Maven 常用命令   mvn archetype:generate mvn install mvn clean mvn clean complie mvn clean test mvn clean install mvn clean package mvn test mvn package mvn site   mvn dependency:res
  • shell bad substitution daizj shell脚本
    #!/bin/sh /data/script/common/run_cmd.exp 192.168.13.168 "impala-shell -islave4 -q 'insert OVERWRITE table imeis.${tableName} select ${selectFields}, ds, fnv_hash(concat(cast(ds as string), im
  • Java SE 第二讲（原生数据类型 Primitive Data Type） dcj3sjt126com java
    Java SE  第二讲： 1.   Windows: notepad, editplus, ultraedit, gvim Linux: vi, vim, gedit 2.   Java 中的数据类型分为两大类： 1）原生数据类型  （Primitive Data Type） 2）引用类型（对象类型）  （R
  • CGridView中实现批量删除 dcj3sjt126com PHPyii
    1，CGridView中的columns添加 array( 'selectableRows' => 2, 'footer' => '<button type="button" onclick="GetCheckbox();" style=&
  • Java中泛型的各种使用 dyy_gusi java泛型
    Java中的泛型的使用：1.普通的泛型使用 在使用类的时候后面的<>中的类型就是我们确定的类型。 public class MyClass1<T> {//此处定义的泛型是T private T var; public T getVar() { return var; } public void setVa
  • Web开发技术十年发展历程 gcq511120594 Web浏览器数据挖掘
    回顾web开发技术这十年发展历程： Ajax 03年的时候我上六年级，那时候网吧刚在小县城的角落萌生。传奇，大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩，然后接下来的一个小时我一直在，注，册，账，号。 彼时网吧用的512k的带宽，注册的时候，填了一堆信息，提交，页面跳转，嘣，”您填写的信息有误，请重填”。然后跳转回注册页面，以此循环。我现在时常想，如果当时a
  • openSession()与getCurrentSession()区别： hetongfei javaDAOHibernate
    来自 http://blog.csdn.net/dy511/article/details/6166134 1.getCurrentSession创建的session会和绑定到当前线程,而openSession不会。 2. getCurrentSession创建的线程会在事务回滚或事物提交后自动关闭,而openSession必须手动关闭。 这里getCurrentSession本地事务(本地
  • 第一章 安装Nginx+Lua开发环境 jinnianshilongnian nginxluaopenresty
    首先我们选择使用OpenResty，其是由Nginx核心加很多第三方模块组成，其最大的亮点是默认集成了Lua开发环境，使得Nginx可以作为一个Web Server使用。借助于Nginx的事件驱动模型和非阻塞IO，可以实现高性能的Web应用程序。而且OpenResty提供了大量组件如Mysql、Redis、Memcached等等，使在Nginx上开发Web应用更方便更简单。目前在京东如实时价格、秒
  • HSQLDB In-Process方式访问内存数据库 liyonghui160com
        HSQLDB一大特色就是能够在内存中建立数据库，当然它也能将这些内存数据库保存到文件中以便实现真正的持久化。   先睹为快！   下面是一个In-Process方式访问内存数据库的代码示例：     下面代码需要引入hsqldb.jar包 （hsqldb-2.2.8）   import java.s
  • Java线程的5个使用技巧 pda158 java数据结构
    Java线程有哪些不太为人所知的技巧与用法？ 　　萝卜白菜各有所爱。像我就喜欢Java。学无止境，这也是我喜欢它的一个原因。日常 工作中你所用到的工具，通常都有些你从来没有了解过的东西，比方说某个方法或者是一些有趣的用法。比如说线程。没错，就是线程。或者确切说是Thread这个类。当我们在构建高可扩展性系统的时候，通常会面临各种各样的并发编程的问题，不过我们现在所要讲的可能会略有不同。
  • 开发资源大整合：编程语言篇——JavaScript（1） shoothao JavaScript
    概述：本系列的资源整合来自于github中各个领域的大牛，来收藏你感兴趣的东西吧。     程序包管理器   管理javascript库并提供对这些库的快速使用与打包的服务。 Bower - 用于web的程序包管理。 component - 用于客户端的程序包管理，构建更好的web应用程序。 spm - 全新的静态的文件包管
  • 避免使用终结函数 vahoa.ma javajvmC++
    终结函数（finalizer）通常是不可预测的，常常也是很危险的，一般情况下不是必要的。使用终结函数会导致不稳定的行为、更差的性能，以及带来移植性问题。不要把终结函数当做C++中的析构函数（destructors）的对应物。       我自己总结了一下这一条的综合性结论是这样的： 1）在涉及使用资源，使用完毕后要释放资源的情形下，首先要用一个显示的方
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他