常见布局样式

最新推荐文章于 2024-10-23 02:47:28 发布
最新推荐文章于 2024-10-23 02:47:28 发布
阅读量318 收藏
点赞数
分类专栏： 效果实现 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43972213/article/details/126729218
版权
本文介绍了如何实现内容区域无论高度如何都保持底部固定的布局，同时展示了一个自定义的自动完成组件的实现，以及如何通过按钮控制元素的隐藏和显示。还涉及了页面滚动监听和顶部/底部导航栏的互动效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 内容显示，无论高度是多少，底部信息都将显示在最下方

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			html {
				height: 100%;

			}

			body {
				height: 100%;
				margin: 0px;
				overflow: hidden;
			}

			.page {
				display: flex;
				flex-direction: column;
				height: 100%;
				overflow: auto;
			}

			.content {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				text-align: center;
				flex: 1;
				background-color: #2b85e4;
			}

			.content-sub {
				width: 100%;
				height: 2000px;
				background-color: #baffa4;
			}

			.foot {
				text-align: center;
				padding: 10px;
				background-color: #7ed321;
			}
		</style>
	</head>
	<body>
		<div class="page">
			<div class="content">
				内容显示，无论高度是多少，底部信息都将显示在最下方
				<div class="content-sub">
					填充块
				</div>
			</div>
			<div class="foot">底部信息</div>
		</div>

	</body>
</html>

2. 自定义 自动完成组件

在这里插入图片描述

<!doctype html>
<html>
	<style>
		body {
			margin-left: 0px;
			margin-top: 0px;
			margin-right: 0px;
			margin-bottom: 0px;
		}

		.auto_hidden {
			width: 204px;
			border-top: 1px solid #333;
			border-bottom: 1px solid #333;
			border-left: 1px solid #333;
			border-right: 1px solid #333;
			position: absolute;
			display: none;
		}

		.auto_show {
			width: 204px;
			border-top: 1px solid #333;
			border-bottom: 1px solid #333;
			border-left: 1px solid #333;
			border-right: 1px solid #333;
			position: absolute;
			z-index: 9999;
			/* 设置对象的层叠顺序 */
			display: block;
		}

		.auto_onmouseover {
			color: #ffffff;
			background-color: highlight;
			width: 100%;
		}

		.auto_onmouseout {
			color: #000000;
			width: 100%;
			background-color: #ffffff;
		}
	</style>
	<script language="javascript">
		<!--
		var $ = function(id) {
			return "string" == typeof id ? document.getElementById(id) : id;
		}
		var Bind = function(object, fun) {
			return function() {
				return fun.apply(object, arguments);
			}
		}

		function AutoComplete(obj, autoObj, arr) {
			this.obj = $(obj); //输入框
			this.autoObj = $(autoObj); //DIV的根节点
			this.value_arr = arr; //不要包含重复值
			this.index = -1; //当前选中的DIV的索引
			this.search_value = ""; //保存当前搜索的字符
		}
		AutoComplete.prototype = {
			//初始化DIV的位置
			init: function() {
				this.autoObj.style.left = this.obj.offsetLeft + "px";
				this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px";
				this.autoObj.style.width = this.obj.offsetWidth - 2 + "px"; //减去边框的长度2px  
			},
			//删除自动完成需要的所有DIV
			deleteDIV: function() {
				while (this.autoObj.hasChildNodes()) {
					this.autoObj.removeChild(this.autoObj.firstChild);
				}
				this.autoObj.className = "auto_hidden";
			},
			//设置值
			setValue: function(_this) {
				return function() {
					_this.obj.value = this.seq;
					_this.autoObj.className = "auto_hidden";
				}
			},
			//模拟鼠标移动至DIV时，DIV高亮
			autoOnmouseover: function(_this, _div_index) {
				return function() {
					_this.index = _div_index;
					var length = _this.autoObj.children.length;
					for (var j = 0; j < length; j++) {
						if (j != _this.index) {
							_this.autoObj.childNodes[j].className = 'auto_onmouseout';
						} else {
							_this.autoObj.childNodes[j].className = 'auto_onmouseover';
						}
					}
				}
			},
			//更改classname
			changeClassname: function(length) {
				for (var i = 0; i < length; i++) {
					if (i != this.index) {
						this.autoObj.childNodes[i].className = 'auto_onmouseout';
					} else {
						this.autoObj.childNodes[i].className = 'auto_onmouseover';
						this.obj.value = this.autoObj.childNodes[i].seq;
					}
				}
			},
			//响应键盘
			pressKey: function(event) {
				var length = this.autoObj.children.length;
				//光标键"↓"
				if (event.keyCode == 40) {
					++this.index;
					if (this.index > length) {
						this.index = 0;
					} else if (this.index == length) {
						this.obj.value = this.search_value;
					}
					this.changeClassname(length);
				}
				//光标键"↑"
				else if (event.keyCode == 38) {
					this.index--;
					if (this.index < -1) {
						this.index = length - 1;
					} else if (this.index == -1) {
						this.obj.value = this.search_value;
					}
					this.changeClassname(length);
				}
				//回车键
				else if (event.keyCode == 13) {
					this.autoObj.className = "auto_hidden";
					this.index = -1;
				} else {
					this.index = -1;
				}
			},
			//程序入口
			start: function(event) {
				if (event.keyCode != 13 && event.keyCode != 38 && event.keyCode != 40) {
					this.init();
					this.deleteDIV();
					this.search_value = this.obj.value;
					var valueArr = this.value_arr;
					valueArr.sort();
					if (this.obj.value.replace(/(^\s*)|(\s*$)/g, '') == "") {
						return;
					} //值为空，退出
					try {
						var reg = new RegExp("(" + this.obj.value + ")", "i");
					} catch (e) {
						return;
					}
					var div_index = 0; //记录创建的DIV的索引
					for (var i = 0; i < valueArr.length; i++) {
						if (reg.test(valueArr[i])) {
							var div = document.createElement("div");
							div.className = "auto_onmouseout";
							div.seq = valueArr[i];
							div.onclick = this.setValue(this);
							div.onmouseover = this.autoOnmouseover(this, div_index);
							div.innerHTML = valueArr[i].replace(reg, "<strong>$1</strong>"); //搜索到的字符粗体显示
							this.autoObj.appendChild(div);
							this.autoObj.className = "auto_show";
							div_index++;
						}
					}
				}
				this.pressKey(event);
				window.onresize = Bind(this, function() {
					this.init();
				});
			}
		}
		//
		-->
	</SCRIPT>
	<body>
		<h1 align="center">自动完成函数(Autocomplete Function)</h1>
		<div align="center"><input type="text" style="width:300px;height:20px;font-size:14pt;" id="o"
				onkeyup="autoComplete.start(event)"></div>
		<div class="auto_hidden" id="auto">
			<!--自动完成 DIV-->
		</div>
		<script>
			var autoComplete = new AutoComplete('o', 'auto', ['b0', 'b12', 'b22', 'b3', 'b4', 'b5', 'b6', 'b7', 'b8', 'b2',
				'abd', 'ab', 'acd', 'accd', 'b1', 'cd', 'ccd', 'cbcv', 'cxf'
			]);
		</SCRIPT>
	</body>
</html>

3. 按钮控制元素展开或者隐藏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="http://www.pipipi.net/" />
		<title></title>
		<style type="text/css">
			body {
				text-align: center
			}

			.box {
				width: 200px;
				height: 100px;
				background-color: green;
				margin: 0px auto;
			}
		</style>
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#hide").click(function() {
					$(".box").slideUp();
				});
				$("#show").click(function() {
					$(".box").slideDown();
				});
			})
		</script>
	</head>
	<body>
		<div class="box"></div>
		<input type="button" id="hide" value="点击隐藏" />
		<input type="button" id="show" value="点击展开" />
	</body>
</html>

4. 回到顶部

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<style>
			.box {
				position: fixed;
				right: 10px;
				bottom: 10px;
				height: 30px;
				width: 50px;
				text-align: center;
				padding-top: 20px;
				background-color: lightblue;
				border-radius: 20%;
				overflow: hidden;
			}

			.box:hover:before {
				top: 50%
			}

			.box:hover .box-in {
				visibility: hidden;
			}

			.box:before {
				position: absolute;
				top: -50%;
				left: 50%;
				transform: translate(-50%, -50%);
				content: '回到顶部';
				width: 40px;
				color: peru;
				font-weight: bold;
			}

			.box-in {
				visibility: visible;
				display: inline-block;
				height: 20px;
				width: 20px;
				border: 3px solid black;
				border-color: white transparent transparent white;
				transform: rotate(45deg);
			}
			
			
			
			.top {
				position: fixed;
				right: 10px;
				top: 10px;
				height: 30px;
				width: 50px;
				text-align: center;
				padding-top: 20px;
				background-color: lightblue;
				border-radius: 20%;
				overflow: hidden;
			}
			.top:hover:before {
				top: 50%
			}
			
			.top:hover .top-in {
				visibility: hidden;
			}
			.top:before {
				position: absolute;
				top: -50%;
				left: 50%;
				transform: translate(-50%, -50%);
				content: '查看标签';
				width: 40px;
				color: peru;
				font-weight: bold;
			}
			.top-in {
				visibility: visible;
				display: inline-block;
				height: 20px;
				width: 20px;
				border: 3px solid black;
				border-color: transparent white  white transparent ; 
				/* 下 左 */
				transform: rotate(45deg);
			}
		</style>
	</head>

	<body style="height:2000px;">
		<!-- <div id="top" class="top">
			<div class="top-in"></div>
		</div> -->
		<div id="box" class="box">
			<div class="box-in"></div>
		</div>
		
	</body>
	<script>
		var timer = null;
		box.onclick = function() {
			cancelAnimationFrame(timer);
			timer = requestAnimationFrame(function fn() {
				var oTop = document.body.scrollTop || document.documentElement.scrollTop;
				if (oTop > 0) {
					document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
					timer = requestAnimationFrame(fn);
				} else {
					cancelAnimationFrame(timer);
				}
			});
		}
	</script>

</html>

5. 可伸缩input

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>可伸缩搜索框demo</title>
	</head>
	<body>
		<style type="text/css">
			.search-input {
				background: #ededed url(http://webdesignerwall.com/demo/expandable-search-form/images/search-icon.png) no-repeat 9px;
				padding: 8px 5px 8px 32px;
				width: 0%;
				/* width: 100px; */
				border-radius: 18px;
				/* color: #ccc; */

				outline: none;
				overflow: hidden;
				border-radius: 18px;

				border: 1px solid #ddd;
				-moz-box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.1);
				-webkit-box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.1);
				box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.1);
				-webkit-transition: all .3s;
				-moz-transition: all .3s;
				-o-transition: all .3s;
			}

			.search-input:hover,
			.search-input:focus {
				border-color: #fff;
				color: #444;
				width: 10%;
			}
		</style>
		<div class="search-mb">
			<input class="search-input" type="text"/>
		</div>

	</body>
</html>
页面布局样式
chanzhiliao的博客
09-19 685
一、单列布局 电商网站常用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面布局</title> <style> .box{ width:800px; height: 600px;
布局相关的样式的简单总结
要输就输给追求吧！
07-04 379
本人这几天刚刚接触到这几种布局方式，现总结如下，总结有所欠缺，以后等我熟练掌握之后，会再一次修改增加此篇文章的内容。1、多栏布局多栏布局一般应用在创建多个列来对文本进行布局，一般都是对一篇文章进行多列，类似报纸那样。 （1）创建多个列将div中的元素分成3列，column-count IE9及以下不兼容，IE10和欧朋支持，火狐，谷歌，Safari要加前缀。div{ -moz-column-
布局相关的样式
uncle_Huang的博客
07-25 228
布局相关的样式 1. 多栏布局 column-count属性 将一个元素的内容分成多栏进行显示 用法： column-count:多栏数; column-width属性 指定栏目的宽度来生成分栏 column-gap属性‘ 指定栏目与栏目之间的距离’ column-rule属性 栏目与栏目之间的一条分割线 column-count: 3; column-width: 20p...
实践中常用样式布局总结
MiluDeer_Yoyo的博客
07-02 293
padding 和 margin 输入文字的文本框布局 2.文字-按钮等样式 .button { <!-- 立即购买 --> padding: 14rpx 20rpx; background: #0080FF; border-radius: 50rpx; font-size: 24rpx; color: #FFFFFF; } 遇到对文字周围进行修饰等（按钮）的，最常见的就是用padding属性用文字把盒子撑起来，而且padding修饰出的样式不会随着
布局与样式
qq_45984789的博客
10-31 252
关于布局的理论讲解 相对布局 RelativeLayout 线性布局LinearLayout 表格布局TableLayout 网格布局GridLayout 帧布局FrameLayout 布局组件Layout 线性布局LinearLayout 框架布局FrameLayout 相对布局 RelativeLayout 表格布局TableLayout 绝对布局AbsoluteLayout LinearLayout线性布局 <?xml version="1.0" encoding="utf-8"?>
常见布局方案
03-13
本篇文章将深入探讨几种常见的布局方案，包括上中下一栏式、左右两栏式以及它们的不同实现方法，以及左中右三栏布局。 1. 上中下一栏式布局： 这种布局是最基础的网页布局之一，通常用于展示网站头部信息、主要内容...
结合CSS3的布局新特征谈谈常见布局方法
12-13
4. **响应式设计**（Responsive Design）：CSS3引入了媒体查询（Media Queries），使开发者能够根据设备特性和视口大小来应用不同的样式，从而实现响应式布局。例如，`@media screen and (max-width: 600px)`可以为...
CSS网页布局实例 常见的12种网页布局
09-25
本文将详细介绍12种常见的CSS网页布局，这些布局都具有自适应屏幕分辨率的特性，能提供优秀的用户体验。 1. **一列全宽动态布局**：这种布局通常用于简单的单栏内容展示，如博客文章或新闻页面。内容宽度会根据...
各种常见布局CSS实现知名网站布局分析相关阅读推荐
08-10
在网页设计领域，CSS（Cascading Style Sheets）起着至关重要的作用，它负责定义页面的样式和布局。本文将深入探讨各种常见的CSS布局技术，并分析知名网站如何利用这些技术来构建他们的页面布局。同时，也会推荐一些...
布局样式属性
jyt婷的博客
01-05 690
一 flexbox 布局基础知识 1 . 什么是Flexbox Flexbox 是css3 里面引入的布局模型－弹性盒子模型，旨在通过弹性的方式来对齐河分布容器中的内容空间， 使其能够适应不同屏幕的宽度。react nativie中 的flexbox 是这个规范的一个子集 2 . Flexbox解决了什么问题？ 浮动布局 不同宽度屏幕的适 宽度自动分配 水平垂直居中
各种布局样式模板
weixin_30795127的博客
07-07 219
http://www.aa25.cn/layout/index.shtml 转载于:https://www.cnblogs.com/wangkang1/p/5649858.html
CSS常见布局样式
m0_50967270的博客
11-19 304
CSS常见布局样式1丶Flex布局自动换行均等布局(三个) 1丶Flex布局自动换行均等布局(三个) <div class="goods-content"> <div class="goods-list" v-if="!searchStatus"> <div class="goods-item" v-for="(item,index) in goodsList" :key="index"> <div class
网页布局、样式精简总结记录（一）
林飞的梦呓
12-15 2566
看了十多篇文章，做个简要记录 一、网页布局思想浅议-淘宝新版首页为实例 流动性（自适应）布局 自适应布局，是指页面主体部分的宽度随着浏览器宽度的大小而发生改变 优点： 1. 显示器宽度利用率高，固定宽度的布局上，宽屏显示器用户的宽屏优势没有体现出来，比较浪费。 2. 网页的生命周期更长。 影响网页寿命因素：功能，web流行趋势，显示器的分辨率等。宽屏显示器的分辨率用户增多，不
CSS常见网页布局样式、详解、流程、代码
atatsuki的博客
05-14 4386
开始写top： top是顶栏的，所以不用设宽度，默认的块级元素和浏览器一样宽 可以发现，banner上下有边距，代码调整为 box分成好几个盒子，所以用ul和li来表示 li是有小圆点的，但此时还看不到添加box的样式后可以看到 要去掉小圆点，这一步通常在使用ul和li时都会用到，需要记住，可以直接写li{}，不用前面加类再写，如.box li{} 现在就可以设置li的高度和宽度了，这个时候li前面要加类.box 出现这种情况，就是我们前面讲解的浮动float了添加： 还
精通CSS布局：探索经典的网页布局样式和技术
最新发布
2401_84309743的博客
10-23 1339
经典两列布局样式、经典三列布局样式、经典多行多列样式、百分比布局
CSS五种布局方式
Hello
02-19 4823
是CSS知识体系的重中之重 早期以table为主（简单） 后来以技巧性布局为主（难） 现在有flexbox/grid(偏简单) 响应式布局是必备知识 常用布局方法 table表格布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name...
css多种布局方式
博哥的二进制世界
05-14 4169
常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍文章引导1. 标准流布局2. 浮动布局3. 定位布局4. 弹性布局5. 网格布局6. 多列布局7. 响应式布局。
常见的几种内容样式布局
cloudday的专栏
05-31 677
几种相册图片布局方式
热门推荐
cithegod的博客
06-02 2万+
先上github地址：插件源码百度前端在几个月前发布了一个针对前端技术培训的任务：IFE（百度前端技术学院）。和几个小伙伴一起完成了部分任务，第四阶段是三个综合性的任务，博主先完成了其中的相册布局任务。写的并不是很完善，博主技术有限，大家就随便看看吧。瀑布流布局 布局方式顾名思义，瀑布流布局就是相册中图片像瀑布一样，从高到低按顺序插入到相册中。如下图，一直保证下一张图片会被插入到当前最短的一道图片流
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值