duration～
duration～

DIV+CSS页面布局

目录

  • 1.页面布局设计
    • 1.1."三行模式"或"三列模式"
    • 1.2."三行二列" "三行三列"模式
    • 1.3.多行多列复杂模式
  • 2.导航菜单设计
    • 2.1.一级水平导航菜单
    • 2.2.二级水平导航菜单
    • 2.3.横向二级导航栏菜单

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;}

DIV+CSS页面布局_第1张图片

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;}

DIV+CSS页面布局_第2张图片

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

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

三行二列模式的div结构

		<div id="header" class="">headerdiv>
		<div id="main" class="">
			<div id="left" class="">leftdiv>
			
			<div id="right" class="">rightdiv>
		div>
		<div id="footer" class="">footerdiv>

三行二列模式的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+CSS页面布局_第3张图片

三行三列的div结构

		<div id="header" class="">headerdiv>
		<div id="main" class="">
			<div id="left" class="">leftdiv>
			<div id="center" class="">centerdiv>
			<div id="right" class="">rightdiv>
		div>
		<div id="footer" class="">footerdiv>

三行三列模式的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;}

样式
DIV+CSS页面布局_第4张图片

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">Headerdiv>
  <div class="sidebar">Sidebardiv>
  <div class="content">Contentdiv>
  <div>Box 1div>
  <div>Box 2div>
  <div>Box 3div>
  <div class="footer">Footerdiv>
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来实现更多高级的布局效果。

样式展示
DIV+CSS页面布局_第5张图片

2.导航菜单设计

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

2.1.一级水平导航菜单


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

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

		<table>
			<tr>
				<td> 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> 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 设计网站下拉单需要对样式进行详细定义才能实现。不过要考虑到不同浏览器之间的兼容性。下面列个仅仅采用

    、
  • 、等标记和 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类的情况下，下拉菜单的页面效果如图。
    DIV+CSS页面布局_第6张图片

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

    • 定义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;}
      样式如下DIV+CSS页面布局_第7张图片
    • 定义超链接的样式。
      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;}
      这条规则的作用就是加上背景和菜单间的隔离线，把默认有下划线蓝色的文字变成白色无下划线。
      DIV+CSS页面布局_第8张图片
    • 定义嵌套列表项和子菜单超链接的规则。
      ul li ul li{ height: 25px; }
ul li ul li a{background: #666; line-height: 24px; }
      此处第一条是设置子菜单的列表项目高度为 25px，以区别主菜单列表项；第 2 条规则是子菜单项中的超链接的背景改为 #666,并将行高调整为 24px。应用样式后的页面效果如下。
      DIV+CSS页面布局_第9张图片
    • 定义鼠标滑过某个菜单项时的样式。
      ul li a:hover{background: #666; border-bottom: 1px dashed #FF0000;}
      此处定义了鼠标滑过时背景颜色和子菜单的背景颜色一样，定义底边框为1px、点划线、红色，页面效果如下。
      DIV+CSS页面布局_第10张图片
    • 定义子菜单项初始状态为隐藏。
      ul li ul{visibility:hidden}/*也可以设置 display none*/
      应用后效果如下。在这里插入图片描述
    • 定义鼠标滑过时下拉菜单显示样式，页面效果如下。
      ul li:hover ul{visibility: visible;}/*也可以设置 display:block*/
ul li ul li a:hover{background: #333;}
      应用后效果如下。DIV+CSS页面布局_第11张图片

    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 技术来设计响应式导航菜单，设计效果令人兴奋、令人满意。

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

  • android 自定义曲线图,Android自定义View——贝赛尔曲线 weixin_39767513 android自定义曲线图
    个人博客：haichenyi.com。感谢关注本文针对有一定自定义View的童鞋，最好对贝赛尔曲线有辣么一丢丢了解，不了解也没关系。花5分钟看一下GcsSloop的安卓自定义View进阶-Path之贝塞尔曲线。本文的最终效果图：最终效果图.gif思路首先他是一个只有上半部分的正弦形状的水波纹，很规则。其次，他这个正弦图左右在移动。然后，就是它这个自定义View，上下也在移动，是慢慢增加的最后，优化
  • 大前端-postcss安装使用指南 黑夜照亮前行的路 postcss
    PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把
  • 谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程 pigerr杨 Pythonpythonchromedrivers
    ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
  • 虚拟 DOM 的优缺点有哪些 咕噜签名分发 前端javascript开发语言
    虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优
  • 3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb前端ajaxelementuijava前端框架
    P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
  • java实体中返回前端的double类型四舍五入（格式化） 婲落ヽ紅顏誶 java
    根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f
  • Django forms组件 在飞行-米龙 Djangodjangopython后端
    【一】引入【1】实现登陆验证功能（1）需求分析登陆验证需要前后端交互，采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容（2）后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict
  • Web前端Html的表单 任家伟 前端html
    表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单
  • Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程） 王佳斌 +Thinkphpmysql前端数据库
    前言登录功能，是我们几乎开发每个系统都必须的模块。登录功能设计思路，主要包括几个方面。用户输入网址展示登录页面用户输入用户名，密码等点击登录进行信息校验校验通过之后，记录用户登录信息，跳转指定页面用户校验失败，提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面，我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。
  • react native 总结 一切顺势而行 reactnativereact.jsjavascript
    reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su
  • 程序员开发技术整理 laizhixue 学习前端框架
    前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工
  • 【前端学习——js篇】7.函数缓存 笔下无竹墨下有鱼 前端学习前端学习javascript
    具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的
  • Websocket服务监听收发消息 beiback Java服务器问题websocket网络协议网络
    目录1.pom依赖坐标2.项目配置端口和项目包名2.创建处理器3.注册处理器4.前端页面1.pom依赖坐标org.springframework.bootspring-boot-starter-websocket2.项目配置端口和项目包名application.propertiesserver.port=8088//路径规范：为应用的所有servlet提供一个统一的前缀，使URL结构更加清晰和一致
  • Netty服务器结合WebSocke协议监听和接收数据 beiback 服务器问题Java服务器运维netty
    目录1.pom依赖2.配置属性3.创建netty服务器4.建立监听和响应5.创建启动器6.前端static下页面7.前端js8.注意异常问题9.创建netty服务器--使用守护线程1.pom依赖io.nettynetty-all4.1.86.Final2.配置属性application.properties#启动端口server.port=8088server.servlet.context-pa
  • 基于SSM+Vue企业销售培训系统 企业人才培训系统 企业课程培训管理系统 企业文化培训班系统Java 计算机程序老哥
    作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆.png前端页面功能：首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个
  • javascript实现SM2加密解密 人生在勤，不索何获 javascript前端jquery
    前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu
  • 前端埋点解决方案 zhu_zhu_xia 前端
    一、前言：基于神策数据的前端埋点解决方案JavaScript快速使用·神策分析使用手册[预览版]二、sdkgitlab下载地址https://github.com/sensorsdata/sa-sdk-javascript/releases或者npm安装npmisa-sdk-javascript三、入门3.1接入sdk以及配置(version1.17.2)，入口文件接入sdk以及添加配置(func
  • webpack快速基础 风漫漫雨歇歇 webpackwebpack前端前端框架
    文章目录webpack快速基础1.概念1.1入口1.2输出(output)1.3loader1.4插件（plugin)2.建立项目，用于测试功能2.1安装webpack，2.2创建webpack配置文件,2.3配置package.json，运行项目3.配置mode开发环境4.配置entry编译入口5.配置output编译出口6.配置加载csswebpack快速基础1.概念webpack是现代Jav
  • 如何提出令人爱回答的好问题？ 兮若耶
    我们经常会遇到这样的问题，如我适合做什么？这个名词怎么解释？大部分人面对这样的问题时，要么答非所问，要么无从下手。现在的很多事物都是速成的，只是好的问题并没有那么容易被提出来。而提不好的问题，可能会拿不到想要的信息等等。所以提出一个好问题很重要。01提问的功能我们参加各种聚会、会议时，能听到很多的比喻和新观点，而这些是在书上和网上找不到的。这些新的有用的东西，都在前端被实践着，暂时来不及把知识系统
  • 谈谈对前端性能监控的理解和实践 Layla_c webjavepython前端
    一、谈谈对前端性能监控的理解和实践前端性能监控是确保网页或应用高效、稳定运行的关键环节，它涉及对前端页面加载速度、资源消耗、错误率等指标的实时监控和预警。通过前端性能监控，开发者和运维团队能够及时发现并解决性能瓶颈，从而提升用户体验和系统稳定性。理解前端性能监控，首先要明确其重要性。在移动互联网时代，用户对网页和应用的响应速度有着极高的要求。如果页面加载缓慢或出现卡顿，用户可能会选择离开，这对企业
  • mineadmin使用docker启动方式 qq_38812523 dockerphp容器
    找个目录,git下来mineadmin代码,在根目录,创建文件名docker-compose.yml然后复制下面代码version:'3'services:#首先下载前端，https://gitee.com/mineadmin/mineadmin-vue#在后端根目录建立mine-ui目录，把前端文件复制过来。#容器内访问宿主机的地址用：host.docker.internal#宿主机也可以在ho
  • 为什么需要使用版本控制工具（如Git）？它如何帮助管理前端开发项目？ 智伴科技 git
    版本控制工具（如Git）在前端开发项目中扮演着重要的角色，主要有以下几方面的作用：1.**版本管理**：版本控制工具可以帮助开发团队管理项目的不同版本，记录每次代码变动的历史记录，方便追踪和回溯。开发人员可以通过版本控制工具轻松地查看、对比和恢复以前的版本。2.**协同合作**：多人开发同一个项目时，版本控制工具可以协助团队成员协同工作，避免代码冲突、重复工作和混乱。开发人员可以通过版本控制工具共
  • 低代码与前端开发架构：重塑软件开发的未来 快乐非自愿 低代码架构前端
    随着技术的不断进步和数字化转型的深入，软件开发领域正经历着一场革命性的变革。在这场变革中，低代码开发平台和前端开发架构扮演着越来越重要的角色。本文将探讨低代码与前端开发架构之间的关系，并分析它们如何共同推动软件开发的创新与发展。低代码开发平台的崛起低代码开发平台（Low-CodeDevelopmentPlatform,LCDP）是一种新型的软件开发方式，它允许开发者通过图形化界面、预构建的模块和模
  • CSS color-mix() 函数 蚂蚁上的大象 前端的那些事CSScss前端
    CSScolor-mix()函数是近年来CSS色彩模块新增的一项强大功能，允许开发者在样式表中直接混合两种或多种颜色。这一特性为设计师和开发者带来了更多创作空间，让网页的颜色设计变得更加生动和丰富。本文将带你了解color-mix()函数的使用方法及其在实际项目中的应用。什么是CSScolor-mix()函数？color-mix()是一个即将推出的CSS颜色函数，它能够根据指定的颜色模型（如RGB
  • DIV + CSS 布局：盒子内容超出宽度时，不换行，以滚动条形式水平滑动 01空间 常见场景解决方案csshtml
    滚动条水平滚动展示溢出内容htmlcss（less）思路html11112222333344445555666677778888css（less）.outer{background-color:#39a9ed;overflow-x:auto;&::-webkit-scrollbar{display:none;}white-space:nowrap;.item{display:inline-bloc
  • 接口测试之测试原则、测试用例、测试流程...... 程序员老鹰 测试工具功能测试测试用例测试覆盖率系统安全
    一、接口的介绍软件测试中，常说的接口有两种：图形用户接口（GUI，人与程序的接口）、应用程序编程接口（API）。接口（API）是系统与系统之间，模块与模块之间或者服务与服务之间相互调用的入口。它的本质：其实就是一种约定，在开发前期，我们约定接口会接收什么数据；在处理完成后，它又会返回什么数据。开发岗位分为前端和后端，他们相互配合完成工作，会协商接口的定义方法。一般后端定义接口，前端调用接口。前后端
  • 【前端】CommonJS和ES Module Lucky小维 前端前端
    区别语法差异：CommonJS：使用require()导入模块，使用module.exports或exports导出模块。ESModule：使用import导入模块，使用export导出模块。编译时vs运行时：CommonJS是在运行时加载模块，模块代码是动态执行的。ESModule是在编译时静态解析模块依赖关系，以便更好地进行优化和静态分析。异步加载：CommonJS不支持异步加载模块，只能同步
  • 基于python+vue高校毕业生离校管理系统flask-django-php-nodejs QQ511008285 pythonvue.jsflaskdjangonode.jsphp
    课题主要采用Uni-weixin、django架构技术，前端以小程序页面呈现给用户，结合后台java语言使页面更加完善，后台使用MySQL数据库进行数据存储。微信小程序主要包括学生、教务人员、宿管员、图书管理员、财务人员、离校申请、物流信息、钥匙归还、图片归还、欠费信息、催缴信息等功能，从而实现智能化的管理方式，提高工作效率。关键字：高校毕业生离校管理系统；django框架；MySQL数据库语言：
  • Vue项目使用process.env关键字及Vue.config.js配置解决前端跨域问题 百思不得小李 JS实战记录vue2实战记录javascript前端vue.js
    1.process.env是Node.js中的一个环境1.打开命令行查看环境：2.process.env与VueCLI项目VueCli有以下三种运行模式development模式用于vue-cli-serviceservetest模式用于vue-cli-servicetest:unitproduction模式用于vue-cli-servicebuild和vue-cli-servicetest:e2
  • 浅谈前端路由history和hash的理解 怂怂敲代码 前端哈希算法算法
    hash和history在前端面试中是很常考的一道题目，可能很多人对于history和hash的理解差异性就是，他们两者的url字段一个没有#号一个有#号，但是有没有想过为什么这样呢，有无#号又有什么差异呢，这篇文章谈一谈我对前端路由history和hash的理解。hash和history都可以用于前后端分离项目，且两者有各自的特点和各自的使用场景。一、前端路由原理1、SPASPA，即单页面应用(
  • Dom 周华华 JavaScripthtml
    <!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&q
  • 【Spark九十六】RDD API之combineByKey bit1129 spark
    1. combineByKey函数的运行机制   RDD提供了很多针对元素类型为(K,V)的API，这些API封装在PairRDDFunctions类中，通过Scala隐式转换使用。这些API实现上是借助于combineByKey实现的。combineByKey函数本身也是RDD开放给Spark开发人员使用的API之一   首先看一下combineByKey的方法说明：
  • msyql设置密码报错：ERROR 1372 (HY000): 解决方法详解 daizj mysql设置密码
    MySql给用户设置权限同时指定访问密码时，会提示如下错误： ERROR 1372 (HY000): Password hash should be a 41-digit hexadecimal number；   问题原因：你输入的密码是明文。不允许这么输入。   解决办法：用select password('你想输入的密码');查询出你的密码对应的字符串， 然后
  • 路漫漫其修远兮 吾将上下而求索 周凡杨 学习 思索
    王国维在他的《人间词话》中曾经概括了为学的三种境界古今之成大事业、大学问者，罔不经过三种之境界。“昨夜西风凋碧树。独上高楼，望尽天涯路。”此第一境界也。“衣带渐宽终不悔，为伊消得人憔悴。”此第二境界也。“众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”此第三境界也。学习技术，这也是你必须经历的三种境界。第一层境界是说，学习的路是漫漫的，你必须做好充分的思想准备，如果半途而废还不如不要开始。这里，注
  • Hadoop(二)对话单的操作 朱辉辉33 hadoop
    Debug： 1、 A = LOAD '/user/hue/task.txt' USING PigStorage(' ') AS (col1,col2,col3); DUMP A; //输出结果前几行示例： (>ggsnPDPRecord(21),,) (-->recordType(0),,) (-->networkInitiation(1),,)
  • web报表工具FineReport常用函数的用法总结（日期和时间函数） 老A不折腾 finereport报表工具web开发
    web报表工具FineReport常用函数的用法总结（日期和时间函数）   说明：凡函数中以日期作为参数因子的，其中日期的形式都必须是yy/mm/dd。而且必须用英文环境下双引号(" ")引用。   DATE DATE(year,month,day):返回一个表示某一特定日期的系列数。 Year:代表年，可为一到四位数。 Month:代表月份。
  • c++ 宏定义中的##操作符 墙头上一根草 C++
    #与##在宏定义中的--宏展开 #include <stdio.h> #define f(a,b) a##b #define g(a)   #a #define h(a) g(a) int main() {       &nbs
  • 分析Spring源代码之，DI的实现 aijuans springDI现源代码
    (转) 分析Spring源代码之，DI的实现 2012/1/3 by tony                 接着上次的讲，以下这个sample [java]  view plain copy print
  • for循环的进化 alxw4616 JavaScript
    // for循环的进化 // 菜鸟 for (var i = 0; i < Things.length ; i++) { // Things[i] } // 老鸟 for (var i = 0, len = Things.length; i < len; i++) { // Things[i] } // 大师 for (var i = Things.le
  • 网络编程Socket和ServerSocket简单的使用 百合不是茶 网络编程基础IP地址端口
      网络编程;TCP/IP协议   网络:实现计算机之间的信息共享,数据资源的交换   协议:数据交换需要遵守的一种协议,按照约定的数据格式等写出去   端口:用于计算机之间的通信      每运行一个程序，系统会分配一个编号给该程序，作为和外界交换数据的唯一标识 0~65535   查看被使用的
  • JDK1.5 生产消费者 bijian1013 javathread生产消费者java多线程
    ArrayBlockingQueue：        一个由数组支持的有界阻塞队列。此队列按 FIFO（先进先出）原则对元素进行排序。队列的头部 是在队列中存在时间最长的元素。队列的尾部 是在队列中存在时间最短的元素。新元素插入到队列的尾部，队列检索操作则是从队列头部开始获得元素。 ArrayBlockingQueue的常用方法：
  • JAVA版身份证获取性别、出生日期及年龄 bijian1013 java性别出生日期年龄
            工作中需要根据身份证获取性别、出生日期及年龄，且要还要支持15位长度的身份证号码，网上搜索了一下，经过测试好像多少存在点问题，干脆自已写一个。 CertificateNo.java package com.bijian.study; import java.util.Calendar; import
  • 【Java范型六】范型与枚举 bit1129 java
    首先，枚举类型的定义不能带有类型参数，所以，不能把枚举类型定义为范型枚举类，例如下面的枚举类定义是有编译错的   public enum EnumGenerics<T> { //编译错，提示枚举不能带有范型参数 OK, ERROR; public <T> T get(T type) { return null;
  • 【Nginx五】Nginx常用日志格式含义 bit1129 nginx
    1. log_format 1.1 log_format指令用于指定日志的格式，格式：   log_format name(格式名称) type(格式样式)   1.2 如下是一个常用的Nginx日志格式：   log_format main '[$time_local]|$request_time|$status|$body_bytes
  • Lua 语言 15 分钟快速入门 ronin47 lua 基础
    - - 单行注释 - - [[      [多行注释] - - ]]   - - - - - - - - - - - 1. 变量 & 控制流 - - - - - - - - - - num = 23 - - 数字都是双精度 str = 'aspythonstring'
  • java-35.求一个矩阵中最大的二维矩阵 ( 元素和最大 ) bylijinnan java
    the idea is from: http://blog.csdn.net/zhanxinhang/article/details/6731134 public class MaxSubMatrix { /**see http://blog.csdn.net/zhanxinhang/article/details/6731134 * Q35 求一个矩阵中最大的二维
  • mongoDB文档型数据库特点 开窍的石头 mongoDB文档型数据库特点
    MongoDD: 文档型数据库存储的是Bson文档-->json的二进制 特点：内部是执行引擎是js解释器，把文档转成Bson结构，在查询时转换成js对象。 mongoDB传统型数据库对比    传统类型数据库：结构化数据，定好了表结构后每一个内容符合表结构的。也就是说每一行每一列的数据都是一样的    文档型数据库：不用定好数据结构，
  • [毕业季节]欢迎广大毕业生加入JAVA程序员的行列 comsci java
        一年一度的毕业季来临了。。。。。。。。      正在投简历的学弟学妹们。。。如果觉得学校推荐的单位和公司不适合自己的兴趣和专业，可以考虑来我们软件行业，做一名职业程序员。。。      软件行业的开发工具中，对初学者最友好的就是JAVA语言了，网络上不仅仅有大量的
  • PHP操作Excel – PHPExcel 基本用法详解 cuiyadll PHPExcel
    导出excel属性设置//Include classrequire_once('Classes/PHPExcel.php');require_once('Classes/PHPExcel/Writer/Excel2007.php');$objPHPExcel = new PHPExcel();//Set properties 设置文件属性$objPHPExcel->getProperties
  • IBM Webshpere MQ Client User Issue (MCAUSER) darrenzhu IBMjmsuserMQMCAUSER
    IBM MQ JMS Client去连接远端MQ Server的时候，需要提供User和Password吗？ 答案是根据情况而定，取决于所定义的Channel里面的属性Message channel agent user identifier (MCAUSER)的设置。 http://stackoverflow.com/questions/20209429/how-mca-user-i
  • 网线的接法 dcj3sjt126com
    一、PC连HUB (直连线)A端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 B端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 二、PC连PC （交叉线）A端：(568A)： 白绿，绿，白橙，蓝，白蓝，橙，白棕，棕； B端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 三、HUB连HUB&nb
  • Vimium插件让键盘党像操作Vim一样操作Chrome dcj3sjt126com chromevim
    什么是键盘党？ 键盘党是指尽可能将所有电脑操作用键盘来完成，而不去动鼠标的人。鼠标应该说是新手们的最爱，很直观，指哪点哪，很听话！不过常常使用电脑的人，如果一直使用鼠标的话，手会发酸，因为操作鼠标的时候，手臂不是在一个自然的状态，臂肌会处于绷紧状态。而使用键盘则双手是放松状态，只有手指在动。而且尽量少的从鼠标移动到键盘来回操作，也省不少事。 在chrome里安装 vimium 插件
  • MongoDB查询（2）——数组查询[六] eksliang mongodbMongoDB查询数组
    MongoDB查询数组 转载请出自出处：http://eksliang.iteye.com/blog/2177292 一、概述  MongoDB查询数组与查询标量值是一样的，例如，有一个水果列表，如下所示： > db.food.find() { "_id" : "001", "fruits" : [ "苹
  • cordova读写文件（1） gundumw100 JavaScriptCordova
    使用cordova可以很方便的在手机sdcard中读写文件。 首先需要安装cordova插件：file 命令为： cordova plugin add org.apache.cordova.file 然后就可以读写文件了，这里我先是写入一个文件，具体的JS代码为： var datas=null;//datas need write var directory=&
  • HTML5 FormData 进行文件jquery ajax 上传 到又拍云 ileson jqueryAjaxhtml5FormData
    html5 新东西：FormData  可以提交二进制数据。 页面test.html <!DOCTYPE> <html> <head> <title> formdata file jquery ajax upload</title> </head> <body> <
  • swift appearanceWhenContainedIn:(version1.2 xcode6.4) 啸笑天 version
      swift1.2中没有oc中对应的方法： + (instancetype)appearanceWhenContainedIn:(Class <UIAppearanceContainer>)ContainerClass, ... NS_REQUIRES_NIL_TERMINATION;  解决方法： 在swift项目中新建oc类如下： #import &
  • java实现SMTP邮件服务器 macroli java编程
    电子邮件传递可以由多种协议来实现。目前，在Internet 网上最流行的三种电子邮件协议是SMTP、POP3 和 IMAP，下面分别简单介绍。 　　◆ SMTP 协议 　　简单邮件传输协议(Simple Mail Transfer Protocol,SMTP)是一个运行在TCP/IP之上的协议，用它发送和接收电子邮件。SMTP 服务器在默认端口25上监听。SMTP客户使用一组简单的、基于文本的
  • mongodb group by having where 查询sql qiaolevip 每天进步一点点学习永无止境mongo纵观千象
    SELECT cust_id, SUM(price) as total FROM orders WHERE status = 'A' GROUP BY cust_id HAVING total > 250 db.orders.aggregate( [ { $match: { status: 'A' } }, { $group: {
  • Struts2 Pojo（六） Luob. POJOstrust2
    注意：附件中有完整案例 1.采用POJO对象的方法进行赋值和传值 2.web配置 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee&q
  • struts2步骤 wuai struts
    1、添加jar包 2、在web.xml中配置过滤器 <filter>        <filter-name>struts2</filter-name>        <filter-class>org.apache.st
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他