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,前端)

  • 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：做与用户的交互行为文章目录前端学习路线
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • 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
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
    1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
  • 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
  • css2中的透明 琪33
    .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 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
    最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
  • Python精选200Tips：121-125 AnFany Python200+Tipspython开发语言
    Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
    爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
  • 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其他