DIV+CSS页面布局

news2024/12/24 2:43:43

1.页面布局设计

现在所有的主流的、大型的 IT 企业的网站布局几乎都采用 DIV、CSS技术，有些甚至采用 DIV、CSS、表格混合进行页面布局。此类页面布局能够实现页面内容与表现的分离，提高网站访问速度、节省宽带、改善用户的体验。DIV+CSS组合技术完全有别于传统的表格排版习惯。通过DIV+CSS实现页面元素精确控制，网站风格、代码维护与更新变得卡分容易，甚至是页面的布局结构都可以通过修改CSS属性来重新定位。DIV+CSS布局的步骤大致为: 首先整体上对页面进行分块，接着按照分块设计使用div标记，并理清 div 标记的嵌套和层叠关系，然后对各div 标记进行 CSS 定位，最后在各个分块中添加相应的内容。
下面重点介绍常用的页面布局案例。

1.1.“三行模式"或"三列模式”

此模式特点是把整个页面水平、垂直分成三个区域，其中“三行模式”将页面分成头部、主体及页脚三部分;“三列模式”将页面分成左、中、右三个部分。

根据页面布局写出div结构

<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>

相应的css文件

1.三行模式

#header{width: 100%;height: 120px;background: #223344;}
#main{width: 100%;height: 300px;background: #553344;}
#footer{width: 100%;height: 40px;background: #993344;}

在这里插入图片描述

2.三列模式

#header{width: 30%;height: 700px;background: #223344; float: left;}
#main{width: 50%;height: 700px;background: #553344; float: left;}
#footer{width: 20%;height: 700px;background: #993344; float: left;}

在这里插入图片描述

1.2.“三行二列” "三行三列"模式

此模式的特点是先将整个页面水平分成三个区域，再将中间区域分成两列或三列。

三行二列模式的div结构

		<div id="header" class="">header</div>
		<div id="main" class="">
			<div id="left" class="">left</div>
			<!-- <div id="center" class="">center</div> -->
			<div id="right" class="">right</div>
		</div>
		<div id="footer" class="">footer</div>

三行二列模式的css结构

#header{width: 100%;height: 120px;background: #223344;}
#main{width: 100%;height: 400px;background: #99ff99; }
#left{width: 30%;height: 100%;float: left;background: #999999;}
#right{width: 70%;height: 100%;float: left;background: #553344;}
#footer{width: 100%;height: 100px;background: #993344;}

样式：
在这里插入图片描述

三行三列的div结构

		<div id="header" class="">header</div>
		<div id="main" class="">
			<div id="left" class="">left</div>
			<div id="center" class="">center</div>
			<div id="right" class="">right</div>
		</div>
		<div id="footer" class="">footer</div>

三行三列模式的css定义

#header{width: 100%;height: 120px;background: #223344;}
#main{width: 100%;height: 400px;background: #99ff99; }
#left{width: 30%;height: 100%;float: left;background: #999999;}
#center{width: 40%;height: 100%;float: left;background: #FF3344;}
#right{width: 30%;height: 100%;float: left;background: #553344;}
#footer{width: 100%;height: 100px;background: #993344;}

样式
在这里插入图片描述

1.3.多行多列复杂模式

可以使用上述的方式改进成多行多列的复杂模式。还有另一种方法就是使用 CSS 布局设计一个多行多列复杂模式的页面时，你可以使用 Flexbox 或者 CSS Grid。Flexbox 可以用于创建一维布局（行或列），而 CSS Grid 是用来创建二维布局（行和列同时）的更强大的工具。

以下是一个简单的 CSS Grid 示例，用于创建多行多列布局：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多行多列布局</title>
<style>
  .container {
    display: grid; /* 指定容器使用 grid 布局 */
    grid-template-columns: repeat(3, 1fr); /* 创建三列，每列大小相同 */
    grid-auto-rows: 100px; /* 自动行高 */
    gap: 10px; /* 行和列之间的间隙 */
  }

  .container > div {
    background-color: #f0f0f0; /* 设置子元素的背景色 */
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc; /* 设置子元素边框 */
  }

  .header {
    grid-column: 1 / -1; /* 跨越所有的列 */
    height: 150px; /* 设置高度 */
  }

  .sidebar {
    grid-row: 2 / 4; /* 跨越第二行到第三行 */
  }

  .content {
    grid-column: 2 / 4; /* 从第二列开始，跨越两列 */
  }

  .footer {
    grid-column: 1 / -1; /* 跨越所有的列 */
    height: 50px; /* 设置高度 */
  }
</style>
</head>
<body>
<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
  <div class="footer">Footer</div>
</div>
</body>
</html>

在上面的例子中，.container 定义了一个 grid 布局容器，grid-template-columns 定义了有三列，且每列的大小相等，并且使用 1fr 单位（fraction of the available space）。grid-auto-rows 设置了自动行的高度。

.header、.sidebar、.content 和 .footer 类指定了不同的布局区域。例如，.header 区域跨越了所有的列，.sidebar 区域从第二行开始，跨越到第三行等等。

CSS Grid 可以创建非常复杂的布局，以上示例仅为入门级教程。如果你需要一个更复杂的布局，可以通过添加更多的行和列，调整grid-template-areas属性，或融合Flexbox与CSS Grid来实现更多高级的布局效果。

样式展示
在这里插入图片描述

2.导航菜单设计

导航菜单是网站重要的组成部分。导航菜单的设计关系着网站的可用性和用户体有吸引力的导航能够吸引用户去浏览更多的网站内容。设计一个优秀的页面导航菜单会给网站增色不少。作为一名 Web前端开发工程师必须握传统的网站导航菜单设计技巧时也需要学习响应式导航菜单的设计方法。
网站菜单表现形式丰富多样。从菜单层次上看，可以分为一级、二级和多级菜单排列方式上看，可分为水平导航、垂直导航菜单。从技术实现角度上看，导航菜单通常用无序列表、表格、超链接和样式表相结合的方法来实现,也可以使用如 CSS3 Menu 、jQuery。等第三方插件技术来实现。

2.1.一级水平导航菜单


1.采用"表格+超链接"来设计

使用表格布局设计一级导航菜单非常容易而且布局均匀，根据导航栏目数量确定寿的列数。采用1行10列表格，第 1、第 10 单元格插入空格，留出左右边空白，其余单元格内插入超链接即可实现。

		<table>
			<tr>
				<td>&nbsp;</td>
				<td><a href="#">首页</a></td>
				<td><a href="#">期刊介绍</a></td>
				<td><a href="#">编委会/董事长</a></td>
				<td><a href="#">常见问题及解答</a></td>
				<td><a href="#">常用文档下载</a></td>
				<td><a href="#">订阅</a></td>
				<td><a href="#">过刊浏览</a></td>
				<td><a href="#">优先出版</a></td>
				<td>&nbsp;</td>
			</tr>
		</table>

对超链接和表格定义样式如下：

table{width: 100%;height: 40px;text-align: center;background:url("img/123.png") ;}
a:link,a:visited,a:hover,a:active{text-decoration: none;color: blueviolet;}
a:hover{color: red;border-bottom: 5px solid #FF0000}

样式展示：

在这里插入图片描述


2.采用"无序列表+超链接"来设计

采用无序列表设计“一级水平导航菜单”需要做两件事:一是要去掉列表项前面的符号;二是将垂直显示的列表项转换成水平显示。

		<div id="nav" class="">
			<div class="navwrap">
				<ul>
					<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>
					<li><a href="#">订阅</a></li>
					<li><a href="#">过刊浏览</a></li>
					<li><a href="#">优先出版</a></li>
				</ul>
			</div>
		</div>

对无序列表、列表项分别定义如下的 CSS 样式后，导航菜单已由默认垂直排列状态改为水平排列方式，列表项前面没有符号。

#nav{width: 100%;font-size: 12px;background: #004183;url("img/123.png") top centere repeat-x;}
.navwrap{width: 978px;height: 40px;margin: 0 auto;background: url("img/123.png") top center repeat-x;/*设置图片背景*/}
ul{width: 898px;height: 40px;margin: 0;padding: 0 0 0 130px;list-style: none;}/*去除列表项前符号*/
li{float: left;}
a{line-height: 40px;font-weight: bold;margin: 0 10px;color: black;text-decoration: none;}
a:hover{color: #ff3d3d;}

样式展示

在这里插入图片描述
垂直一级菜单实现起来比较容易。因为列表项默认就是以垂直方式显示的，所以不再考虑如何控制列表项，整体控制起来比较容易，采用表格和超链接、无序列表和超链接的方式均可以实现，此处不再赘述.

2.2.二级水平导航菜单

商业网站上导航菜单一般有多种表现形式，分别是一级导航菜单、二级导航菜单、多种形式并存的导航菜单。例如"淘宝论坛”(http:/bbs.taobao.com/)和京东网上商(http://www.jd.com/)主页就是采用多种形式并存的单的网站案例。

1.下拉导航菜单

借助于JavaScript 设计网站下拉菜单的案例比较多见，而采用纯CSS 设计网站下拉单需要对样式进行详细定义才能实现。不过要考虑到不同浏览器之间的兼容性。下面列个仅仅采用<ul/ul>、<li/li>、<a/a>等标记和 CSS样式定义来实现简单的二级下拉菜单的设计过程。

首先编写下拉菜单的 HTML 代码，外部链接样式表。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉导航栏菜单</title>
		<link rel="stylesheet" href="css/drap.css" type="text/css"/>
	</head>
	<body>
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">jQurey特效</a>
			<ul>
				<li><a href="#">jQurey图片特效</a></li>
				<li><a href="#">jQuery导航特效</a></li>
				<li><a href="#">jQuery选项卡特效</a></li>
				<li><a href="#">jQuery文字特效</a></li>
			</ul>
			</li>
			<li><a href="#">JavaScript特效</a></li>
			<li><a href="#">Flash特效</a>
			<ul>
				<li><a href="#">Flash图片特效</a></li>
				<li><a href="#">Flash导航特效</a></li>
				<li><a href="#">Flash选项卡特效</a></li>
				<li><a href="#">Flash文字特效</a></li>
			</ul>
			</li>
			<li><a href="#">div+css教程</a></li>
			<li><a href="#">HTML5教程</a></li>
		</ul>
	</body>
</html>

在不设置任何css类的情况下，下拉菜单的页面效果如图。
在这里插入图片描述

逐步设置样式，让菜单越来越好看。

  • 定义ul的样式，设置编剧和填充均为0px。
    ul{ margin: 0px; padding: 0px;}/*考虑到不同浏览器的兼容性*/
  • 定义列表样式，由垂直排列改为水平排列。
    ul li{ height: 30px; width: 140px;list-style: nono;float: left;
display: inline; font: 0.9em Arial, Helvetica,sans-serif;}
    样式如下在这里插入图片描述
  • 定义超链接的样式。
    ul li a{color: #FFF;width: 138px;margin: 0px;padding: 0px 0px 0px 8 px;
text-decoration: none; display: block; background: #808080;text-align: center;
line-height: 29px; border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;}
    这条规则的作用就是加上背景和菜单间的隔离线，把默认有下划线蓝色的文字变成白色无下划线。
    在这里插入图片描述
  • 定义嵌套列表项和子菜单超链接的规则。
    ul li ul li{ height: 25px; }
ul li ul li a{background: #666; line-height: 24px; }
    此处第一条是设置子菜单的列表项目高度为 25px，以区别主菜单列表项；第 2 条规则是子菜单项中的超链接的背景改为 #666,并将行高调整为 24px。应用样式后的页面效果如下。
    在这里插入图片描述
  • 定义鼠标滑过某个菜单项时的样式。
    ul li a:hover{background: #666; border-bottom: 1px dashed #FF0000;}
    此处定义了鼠标滑过时背景颜色和子菜单的背景颜色一样，定义底边框为1px、点划线、红色，页面效果如下。
    在这里插入图片描述
  • 定义子菜单项初始状态为隐藏。
    ul li ul{visibility:hidden}/*也可以设置 display none*/
    应用后效果如下。在这里插入图片描述
  • 定义鼠标滑过时下拉菜单显示样式，页面效果如下。
    ul li:hover ul{visibility: visible;}/*也可以设置 display:block*/
ul li ul li a:hover{background: #333;}
    应用后效果如下。在这里插入图片描述

2.3.横向二级导航栏菜单

所谓横向二级导航菜单，就是一层主莱单是水平排列、二层子菜单也是水平排列，各占一行，其中二层子菜单可能会占多行，取决于子菜单的数量。例如“携程旅行网官网(http://www.ctrip.com)。
采用纯 CSS 打造横向二级导航菜单，需要对 HTML 中的div、ul、li、a 等标记进行样式定义，并应用样式。在设计下拉菜单的基础上，很容易实现横向二级导航菜单。

具体设计步骤如下

1.设计HTML代码，与下拉菜单基本相似，代码如下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>横向二级导航栏菜单</title>
		<link rel="stylesheet" href="css/drap.css" type="text/css" />
	</head>
	<body>
		<div id="menu" class="">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">jQurey特效</a>
					<div id="" class="submenu">
						<ul>
							<li><a href="#">jQurey图片特效</a></li>
							<li><a href="#">jQuery导航特效</a></li>
							<li><a href="#">jQuery选项卡特效</a></li>
							<li><a href="#">jQuery文字特效</a></li>
						</ul>
					</div>
				</li>
				<li><a href="#">JavaScript特效</a></li>
				<li><a href="#">Flash特效</a>
					<div id="" class="submenu">
						<ul>
							<li><a href="#">Flash图片特效</a></li>
							<li><a href="#">Flash导航特效</a></li>
							<li><a href="#">Flash选项卡特效</a></li>
							<li><a href="#">Flash文字特效</a></li>
						</ul>
					</div>
				</li>
				<li><a href="#">div+css教程</a></li>
				<li><a href="#">HTML5教程</a></li>
			</ul>
		</div>
	</body>
</html>

与下拉菜单不同之处在于二级导航是放在div中的，id为submenu,需要定义子菜单图层div的样式。

2.定义HTML中相关标记的样式

#menu {
	padding-left: 100px;
	/*定义外图层样式*/
	margin: 0 auto;
	text-align: center;
	width: 100%;
	height: 60px;
	background: #55AAEE;
	border: 1px solid #333;
}

#menu ul {
	/*考虑到不同浏览器的兼容性*/
	margin: 0px;
	padding: 0px;
}

.submenu {
	/*定义存放子菜单的图层样式*/
	width: 900px;
	height: 28px;
	text-align: center;
}

/*考虑到不同浏览器的兼容性*/
#menu ul li {
	/*定义主菜单样式*/
	height: 30px;
	width: 115px;
	list-style: nono;
	float: left;
	display: inline;
	font: 0.9em Arial, Helvetica, sans-serif;
	text-align: center;
}

ul li a {
	/*定义主菜单中超链接样式*/
	color: #FFF;
	width: 138px;
	margin: 0px;
	padding: 0px 0px 0px 8 px;
	text-decoration: none;
	display: block;
	/*超链接以块形式展示*/
	background: #55A0FF;
	line-height: 29px;
	border-bottom: 1px solid #ccc;
}

ul li .submenu ul li {
	/*定义子菜单中超链接样式*/
	height: 25px;
}

ul li .submenu ul li a {
	background: #55AAEE;
	line-height: 24px;
}

ul li a:hover {
	/*定义主菜单滑过时的样式*/
	background: #666;
	border-bottom: 1px dashed #FF0000;
}

ul li .submenu {
	/*定义子菜单初始状态为不显示*/
	visibility: hidden
}

.submenu ul li {
	height: 24px;
	width: 113px;
	list-style: none;
	float: left;
	display: inline;
	font: 0.8em Arial, Helvetica, sans-serif;
	text-align: center;
}

/*也可以设置 display none*/
ul li:hover .submenu {
	/*主菜单滑过时显示子菜单*/
	visibility: visible;
}

/*也可以设置 display:block*/
ul li .submenu ul li a:hover {
	/*子菜单滑过时指定新的背景颜色*/
	background: #333;
}

样式展示
在这里插入图片描述

参照下拉菜单中 CSS规则的定义，很容易写出横向二级导航菜单的样式文件。目前商业网站中的导航菜单大多数是采用DIV+CSS+JavaScript技术或采用DIV+CSS+jQuery 技术来设计响应式导航菜单，设计效果令人兴奋、令人满意。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1327289.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Docker】基于华为 openEuler 应用 Docker 镜像体积压缩

【Docker】基于华为 openEuler 应用 Docker 镜像体积压缩

书接 openEuler 系列文章&#xff08;可以翻看测试系列&#xff09;&#xff0c;本次跟大家说说如何将 Java 包轻量化地构建到 openEuler 镜像中且保持镜像内操作系统是全补丁状态。 之前我们都是使用现成的 jdk 镜像进行构建的&#xff0c;如下图&#xff1a; FROM ibm-seme…
阅读更多...
力扣每日一题day36[112.路径总和]

力扣每日一题day36[112.路径总和]

给你二叉树的根节点 root 和一个表示目标和的整数 targetSum 。判断该树中是否存在 根节点到叶子节点 的路径&#xff0c;这条路径上所有节点值相加等于目标和 targetSum 。如果存在&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 叶子节点 是指没有子节点…
阅读更多...
云原生系列3-Kubernetes

云原生系列3-Kubernetes

1、Kubernetes概述 k8s缩写是因为k和s之间有八个字符。k8s是基于容器技术的分布式架构方案。官网&#xff1a;https://kubernetes.io/zh-cn/ Google在 2014年开源了Kubernetes项目&#xff0c;Kubernetes是一个用于自动化部署、扩展和管理容器化应用程序的开源系统。同样类似的…
阅读更多...
three.js实战模拟VR全景视图

three.js实战模拟VR全景视图

文章中使用到的案例图片都来源于&#xff1a;Humus - Textures 里面有很多免费的资源&#xff0c;可以直接下载&#xff0c;每个资源里面都提供6个不同方位的图片&#xff0c;我们通过threejs稍微处理一下&#xff0c;就能实现以下3D效果的场景了。 <template><div …
阅读更多...
aws-waf-cdn 基于规则组的永黑解决方案

aws-waf-cdn 基于规则组的永黑解决方案

1. 新建waf 规则组 2. 为规则组添加规则 根据需求创建不同的规则 3. waf中附加规则组 &#xff08;此时规则组所有规则都会附加到waf中&#xff0c;但是不会永黑&#xff09; 此刻&#xff0c;可以选择测试下规则是否生效&#xff0c;测试前确认保护资源绑定无误 4. 创建堆…
阅读更多...
【Docker-5】镜像编排

【Docker-5】镜像编排

Dockerfile语法 制作apache镜像 httpd.service 文件路径&#xff1a;/lib/systemd/system/httpd.service [rootdocker-0002 ~]# mkdir apache [rootdocker-0002 ~]# cd apache拷贝动态页面到docker-0002的/root/apache/ [rootecs-proxy ~]# scp /root/5/public/info.php 192.…
阅读更多...
智慧工地一体化云平台APP源码：监管端、工地端、危大工程、智慧大屏、物联网、塔机、吊钩、升降机

智慧工地一体化云平台APP源码：监管端、工地端、危大工程、智慧大屏、物联网、塔机、吊钩、升降机

智慧工地管理平台是依托物联网、互联网建立的大数据管理平台&#xff0c;是一种全新的管理模式&#xff0c;能够实现劳务管理、安全施工、绿色施工的智能化和互联网化。 智慧工地源码技术说明 1.微服务架构JavaSpring Cloud UniApp MySql 2.支持多端展示&#xff08;PC端、手…
阅读更多...
网络爬虫 动态数据采集

网络爬虫 动态数据采集

动态数据采集 规则 有时候我们在用 requests 抓取页面的时候&#xff0c;得到的结果可能和在浏览器中看到的不一样&#xff0c;在浏览器中可以看到正常显示的页面教据&#xff0c;但是使用 requests 得到的结果并没有&#xff0c;这是因为requests 获取的都是原始的 HTML 文档…
阅读更多...
C#合并多个Word文档（微软官方免费openxml接口）

C#合并多个Word文档（微软官方免费openxml接口）

g /// <summary>/// 合并多个word文档&#xff08;合并到第一文件&#xff09;/// </summary>/// <param name"as_word_paths">word文档完整路径</param>/// <param name"breakNewPage">true(默认值)&#xff0c;合并下一个…
阅读更多...
CSS3过渡与动画，2D与3D

CSS3过渡与动画，2D与3D

背景和边框 1. border-image 该属性用于定义元素边框的背景图像 语法&#xff1a;border-image:none | url(img) imagesection [/imagewidth] imaghandling 其中imagesection定义用于边框不同部分的图像部分。imagesection值可以由图像上的4条分隔线组成&#xff0c;每条线以…
阅读更多...
华为配置BGP的基本示例

华为配置BGP的基本示例

组网需求 如图1所示&#xff0c;需要在所有Switch间运行BGP协议&#xff0c;SwitchA、SwitchB之间建立EBGP连接&#xff0c;SwitchB、SwitchC和SwitchD之间建立IBGP全连接。 说明 请确保该场景下互联接口的STP处于未使能状态。因为在使能STP的环形网络中&#xff0c;如果用交…
阅读更多...
Docker部署 flowable-ui 进行流程建模

Docker部署 flowable-ui 进行流程建模

Docker部署 flowable-ui 进行流程建模 简介 安装Docker Desktop,本篇无安装步骤安装正常打开运行后&#xff0c;正式开始部署flowable-uicmd执行拉取镜像操作docker pull flowable/flowable-uicmd启动镜像docker run -d --name flowable -p 8081:8080 flowable/flowable-ui修…
阅读更多...
最新国内可用使用GPT4.0，GPT语音对话，Midjourney绘画，DALL-E3文生图

最新国内可用使用GPT4.0，GPT语音对话，Midjourney绘画，DALL-E3文生图

一、前言 ChatGPT3.5、GPT4.0、GPT语音对话、Midjourney绘画&#xff0c;相信对大家应该不感到陌生吧&#xff1f;简单来说&#xff0c;GPT-4技术比之前的GPT-3.5相对来说更加智能&#xff0c;会根据用户的要求生成多种内容甚至也可以和用户进行创作交流。 然而&#xff0c;GP…
阅读更多...
2023 年最佳物联网应用开发平台

2023 年最佳物联网应用开发平台

您是否知道物联网应用程序开发平台是一个令人惊叹的概念&#xff0c;它改变了我们的做事方式&#xff1f;这一切都是为了连接事物&#xff0c;比如你的智能手机和你的房子。所以&#xff0c;想象一下&#xff1a;您正在房间里放松&#xff0c;您想让房间变得舒适。 您无需起身…
阅读更多...
大数据知识图谱解码：从核心概念到技术实战

大数据知识图谱解码：从核心概念到技术实战

文章目录 大数据知识图谱解码&#xff1a;从核心概念到技术实战1. 概述什么是知识图谱知识图谱与自然语言处理的关系 2. 发展历程语义网络本体论大数据时代的知识图谱知识图谱与深度学习的融合 3. 研究内容知识图谱的建模与表示知识抽取知识图谱的融合与对齐知识图谱的推理知识…
阅读更多...
[XR806开发板试用] XR806——基于FreeRTOS下部署竞技机器人先进模糊控制器

[XR806开发板试用] XR806——基于FreeRTOS下部署竞技机器人先进模糊控制器

前言 很荣幸参与到由“极术社区和全志在线联合组织”举办的XR806开发板试用活动。本人热衷于各种的开发板的开发&#xff0c;同时更愿意将其实现到具体项目中。秉承以上原则&#xff0c;发现大家的重心都放在开发中的环境构建过程&#xff0c;缺少了不少实际应用场景的运用&am…
阅读更多...
安卓好用的python编辑器,安卓平台python编辑器

安卓好用的python编辑器,安卓平台python编辑器

本篇文章给大家谈谈安卓上好用的python编辑软件有哪些&#xff0c;以及安卓上好用的python编辑软件推荐&#xff0c;希望对各位有所帮助&#xff0c;不要忘了收藏本站喔。 1. 简介 Thonny是基于python内置图形库tkinter开发出来的支持多平台(windows,Mac,Linux)的python IDE&am…
阅读更多...
Dubbo的学习笔记

Dubbo的学习笔记

目录 架构 zookeeper的简单介绍 简单案例 Dubbo-admin的简单使用 Dubbo高级特性 序列化 地址缓存 超时与重试 多版本 负载均衡 集群容错 服务降级 Dubbo是阿里巴巴开源的一个高性能、轻量级RPC框架 架构 provider&#xff1a;暴露服务的服务提供方container&#x…
阅读更多...
React学习计划-React16--React基础（三）收集表单数据、高阶函数柯里化、类的复习

React学习计划-React16--React基础（三）收集表单数据、高阶函数柯里化、类的复习

1. 收集表单数据 包含表单的组件分类 受控组件——页面中所有输入类的DOM,随着输入&#xff0c;把值存维护在状态里&#xff0c;需要用的时候去状态里取值&#xff08;推荐&#xff0c;避免了过渡使用ref&#xff09;非受控组件——页面中所有输入类的DOM&#xff0c;现用现取…
阅读更多...
【Vulnhub 靶场】【ContainMe: 1】【简单-中等】【20210729】

【Vulnhub 靶场】【ContainMe: 1】【简单-中等】【20210729】

1、环境介绍 靶场介绍&#xff1a;https://www.vulnhub.com/entry/containme-1,729/ 靶场下载&#xff1a;https://download.vulnhub.com/containme/THM-ContainMe-v4.ova 靶场难度&#xff1a;简单 - 中等 发布日期&#xff1a;2021年07月29日 文件大小&#xff1a;2.2 GB 靶…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023