学习之旅5------JavaScript中常用页面布局

最新推荐文章于 2024-09-23 15:34:46 发布
最新推荐文章于 2024-09-23 15:34:46 发布
阅读量519 收藏
点赞数 1
分类专栏： Javascript总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41780234/article/details/87621522
版权

一、整体布局

1.页面左侧菜单与右侧内容固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面布局1</title>
    <style>
        body{
            margin:0 auto;
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }
        .pg-header{
            height:48px;
            background-color:#2459a2;
            color:white;
        }
        .pg-content .menu{
            position:fixed;
            top:48px;
            left:0;
            bottom: 0;
            width:200px;
            background-color:red;
        }
        .pg-content .content{
            position:fixed;
            top:48px;
            right:0;
            bottom:0;
            left:200px;
            background-color: green;
            overflow: auto;
        }
    </style>
</head>
<body>

<div class="pg-header"></div>
<div class="pg-content">
    <div class="menu left">aa</div>
    <div class="content left">
        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
    </div>
</div>
<div class="pg-footer"></div>
</body>
</html>

2.左侧菜单跟随右侧内容滑动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面布局2</title>
    <style>
        body{
            margin:0 auto;
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }
        .pg-header{
            height:48px;
            background-color:#2459a2;
            color:white;
        }
        .pg-content .menu{
            position:absolute;
            top:48px;
            left:0;
            bottom: 0;
            width:200px;
            background-color:red;
        }
        .pg-content .content{
            position:absolute;
            top:48px;
            right:0;
            bottom:0;
            left:200px;
            min-width: 800px;
            background: #f1c500;
            /*overflow: auto;*/
        }
    </style>
</head>
<body>

<div class="pg-header"></div>
<div class="pg-content">
    <div class="menu left">aa</div>
    <div class="content left">
        <!--<div style="background-color: #f1c500">-->
        <p style="margin: 0">ff</p><p>ff</p><p>ff</p><p>ff</p><p>ff</p>
        <p>ff</p><p>ff</p><p>ff</p><p>ff</p><p>ff</p>
        <p>ff</p><p>ff</p><p>ff</p><p>ff</p><p>ff</p>
        <p>ff</p><p>ff</p><p>ff</p><p>ff</p><p>ff</p>
        <p>ff</p><p>ff</p><p>ff</p><p>ff</p><p>ff</p>
        <p>ff</p><p>ff</p><p>ff</p><p>ff</p><p>ff</p>
        <p>ff</p><p>ff</p><p>ff</p><p>ff</p><p>ff</p>
        <p>ff</p><p>ff</p><p>ff</p><p>ff</p><p>ff</p>
        <p>ff</p><p>ff</p><p>ff</p><p>ff</p><p>ff</p>
        <p>ff</p><p>ff</p><p>ff</p><p>ff</p><p>ff</p>
            <!--</div>-->
    </div>
</div>
<div class="pg-footer"></div>
</body>
</html>

强调：通过增加overflow：auto 就可以实现两种方式的转换。

二、详细布局

页面的具体展示效果，如下图所示：

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面布局2</title>
    <!--将需要用的图标文件导入进来，在这里使用压缩版-->
    <link rel="stylesheet" href="fontawesome-free-5.7.2-web/css/all.min.css"/>
    <style>
        body {
            margin: 0 auto;
            z-index: 1;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .pg-header {
            height: 48px;
            background-color: #2459a2;
            color: white;
            line-height: 48px;
        }

        .pg-header .logo {
            width: 200px;
            background-color: cadetblue;
            text-align: center;
        }

        .pg-header .icons {
            padding: 0 20px;
        }

        .pg-header .icons:hover {
            background-color: #204982;
        }

        .pg-header .icons span {
            /*将图标变为圆形，并有数字提醒，line-height会有超出范围现象，这里设置1px；通过调整padding让圆形变圆*/
            border-radius: 50%;
            line-height: 1px;
            display: inline-block;
            padding: 10px 7px;
            background-color: red
        }

        .pg-header .user {
            position: relative;
            width: 60px;
            padding: 0 20px;
            color: white;
            height: 48px;
            margin-right: 160px;
        }

        .pg-header .user:hover {
            background-color: #204982;
        }

        .pg-header .user:hover .b {
            /*鼠标点到的时候，将标签内的内容显示出来*/
            display: block;
        }

        .pg-header .user .a img {
            height: 40px;
            width: 40px;
            margin-top: 4px;
            border-radius: 50%;
        }

        .pg-header .user .b {
            /*固定显示出来的位置，并设置好显示内容的格式信息*/
            position: absolute;
            width: 80px;
            top: 48px;
            right: 10px;
            overflow: auto;
            z-index: 2;
            background-color: red;
            display: none
        }

        .pg-header .user .b a {
            display: block;
        }

        .pg-content .menu {
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: red;
        }

        .pg-content .content {
            position: absolute;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            min-width: 800px;
            background: #f1c500;
            /*overflow: auto;*/
        }
    </style>
</head>
<body>

<div class="pg-header">
    <div class="logo left">五朵香花</div>
    <div class="user right">
        <a class="a" href="">
            <img src="dingxiang.jpg"/>
        </a>
        <div class="b">
            <a>我的资料</a>
            <a>注销</a>
        </div>
    </div>
    <div class="right icons"><i class="fas fa-bullhorn"></i>
        <span>5</span>
    </div>
    <div class="right icons"><i class="far fa-envelope"></i></div>
</div>
<div class="pg-content">
    <div class="menu left">aa</div>
    <div class="content left">
        <!--<div style="background: #f1c500">-->
        <p style="margin: 0">ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <p>ff</p>
        <!--</div>-->
    </div>
</div>
<div class="pg-footer"></div>
</body>
</html>

该实例将相应的布局整理出来，可以进行参考。里面有图标的设置等信息，图标网址：https://fontawesome.com/

theskylife
关注
专栏目录
Bootstrap学习笔记（三）表单
前端产品工程师
02-05 1195
基础表单 表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同，而且不同的浏览器对表单控件渲染的风格都各有不同。 同样，表单也是Bootstrap框架中的核心内容，下面向大家介绍Bootstrap框架中表单的制作。 表单
微信小程序学习指南
weixin_30446197的博客
12-13 3459
作者：初雪链接：https://www.zhihu.com/question/50907897/answer/128494332来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 微信小程序正式公测， 张小龙全面阐述小程序，定档1月9日上线（附90分钟演讲全文） ... 前言：新人第一坑，跳坑指南：修改后，必须保存；ctrl+S； 1：官方工具：http...
JavaScript 页面布局
07-12
一个完整的布局小项目，显示项目的布局结构，适合初学者
JavaScript：布局
dinghuangshu4837的博客
11-11 597
2017年08月10日 15:53:16 LadyZhong 阅读数：727 标签： CSS圣杯布局 三栏布局 圣杯布局是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。三栏全部float:left浮动，并配合left和right属性。 原理（1.浮动2.负边距）： 浮动元素有脱离文档流的特性，负值使得自身向...
使用js写一个简单的【瀑布流】布局效果
最新发布
我们好像在哪见过 私
09-23 799
使用js写一个简单的【瀑布流】布局效果
javascript布局
u011674177的专栏
12-17 902
段落一般用定义，用表示换行。 布局方式，div与table，使用frameset可以同一页面中显示不同网页。 iframe用于在网页内显示网页。 布局样式 div#container{width:500px} div#header {background-color:#99bbbb;} div#menu {background-color:#ffff99;height
JavaScript02-页面布局
Carl_Homer
10-15 646
页面布局基础问题假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应。 浮动 绝对定位 flexbox display:table-ceil grid布局 延伸问题 每个方案的优缺点float，比较好的兼容性需要清除浮动，处理好与周边元素的关系 absolute，方便快捷，布局脱离文档流，导致方案的可使用性较差 flex布局，解决上述两个的缺点，移动端使用flex更多，ie8不
javascript学习笔记---页面布局1
time
02-17 362
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; body{ margin:0
St-patrick-s-day-tour
03-06
在给定的信息中，我们可以推测这是一个关于“圣帕特里克节之旅”的网站项目，主要涉及HTML技术。HTML，全称HyperText Markup Language，是用于创建网页的标准标记语言。在这个项目中，"St-patrick-s-day-tour-master...
大气旅游企业网站模板设计 - 蓝色主题
与之配合使用的还有CSS（层叠样式表）和JavaScript（一种脚本语言），通常在描述中也提及了“js css”，这暗示着模板可能已经包含了用于美化和增强用户交互的CSS样式以及JavaScript代码。 从文件名中还无法直接提取...
《ArcGIS API 4教程 高级 下》
undealablebug的博客
12-27 884
实时数据处理是GIS应用中不可或缺的一部分，尤其在需要及时响应地理位置变化的场景中。在本章中，我们将深入研究ArcGIS API 4中实时数据处理的高级技术，包括实时传感器数据和位置跟踪。通过本章的学习，您将能够构建具有实时感知能力的GIS应用，实时更新地理数据并提供更智能的用户体验。自定义符号与渲染是构建个性化和富有创意的GIS应用的重要手段。在本章中，我们将深入研究ArcGIS API 4中如何实现自定义符号和渲染效果，包括图标、线条、填充等各种图形的定制。
网站页面简单布局
03-21
简单的网站布局 用于新手使用 网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读
layout.js布局插件
03-17
可实现网页快速布局
40种网页布局js源代码
04-14
40种国外网站的布局例子，对网页布局设计有很好的参考价值
用javascript编写网页：1.2css实践：页面布局
a123456789qqo的博客
10-06 449
将css和HTML和图片放在同一个文件夹中： 1.html <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> @import url("1.2.6.css") </style> </head> <body> <div id="header"><b><i>header<
JavaScript-页面布局-div布局-盒子模型
插件开发
03-27 4086
文章目录1.盒子模型2.定位方式3.排列属性-float和clear4.块和内联属性5.作者答疑   在使用Html构建界面时，最关键的标签是div，这是一个有着各种属性的块状标签，能够以绝对定位和相对定位的方式构建各种界面模型。 1.盒子模型   div标签在界面排版时，使用的是盒子模型，如下图所示，主要有3大属性来标识相对关系，padding标识内部内容距离border的距离，border边框的宽度，margin是border距离外部元素的距离。使用这三大距离，可以有效控制该元素与周边元素的相对距离。如
通过js实现页面布局
_陌默
04-21 2907
（1）请实现上图所示的布局 （2）有以下已知条件： center 区域高度必然大于 left、right 区域 left、right 区域溢出后与 center 区域共用同一滚动条 当 left、right 区域内容溢出后，请实现以下功能： left、right 区域跟随滚动条滚动到底部就固定住，center 区域继续滚动 滚动条向上滚动，当 center 区域滚动到和 left、right 相同高度时，left、right 跟随滚 动，滚动到顶部时，left、right ...
布局js
qq_25480309的博客
07-26 411
/*!  * TouchSlide v1.1  * javascript触屏滑动特效插件，移动端滑动特效，触屏焦点图，触屏Tab切换，触屏多图切换等  * 详尽信息请看官网：http://www.SuperSlide2.com/TouchSlide/  *  * Copyright 2013 大话主席  *  * 请尊重原创，保留头部版权  * 在保留版权的前提下可应用于个人或商业
十个JavaScript页面布局技巧
weixin_30731305的博客
04-21 289
SEO有没有未来？ 　“页面滑动门”,“隐藏的内容”,“图片和内容滑动门”,“动画幻灯片”,“传送带”,“Tab内容选项卡”，结合各种拖拽、滑动、灯箱等特效，这就是下面将为你呈现的。 　　1.jQuerypageSlide 　　jQuerypageSlide是一个jQuery插件，它可以控制一个隐藏页面的显示和关闭。具体来说，就是当前页占一个完整页面，隐藏页是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

theskylife

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值