首页 > 其他分享 >一对一直播系统开发，页面布局设计有很多可选项

一对一直播系统开发，页面布局设计有很多可选项

时间：2024-05-11 09:22:37浏览次数：22  
标签：right 可选项 一对一 height width background 页面 children left

居中布局

水平居中

1、text-align:center

<style>
  .container {
    text-align: center;
  }
  .children {
    display: inline-block;
    background: blue;
  }
</style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>

 

2、margin: 0 auto

<style>
  .children {
    width: 100px;
    margin: 0 auto;
    background: blue;
  }
</style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>

 

3、flex

<style>
  .container {
    display: flex;
    justify-content: center;
  }
  .children {
    width: 100px;
    background: blue;
  }
</style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>

 

4、absolute+transform

<style>
  .children {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100px;
    background: blue;
  }
</style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>

 

垂直居中

1、line-height

<style>
  .container {
    height: 500px;
    line-height: 500px;
    background: green;
  }
  .children {
    display: inline;
    height: 100px;
    background: blue;
  }
</style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>

 

2、flex

<style>
  .container {
    display: flex;
    align-items: center;
    height: 500px;
    background:green;
  }
  .children {
    height: 100px;
    background: blue;
  }
</style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>

 

3、absolute+transform

<style>
  .container {
    position: relative;
    height: 500px;
    background:green;
  }
  .children {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    height: 100px;
    background: blue;
  }
</style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>

 

4、table cell

<style>
  .container {
    display: table-cell;
    vertical-align: middle;
    height: 500px;
    background:green;
  }
  .children {
    height: 100px;
    background: blue;
  }
</style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>

 

5、margin

<style>
  .container {
    position: relative;
    height: 500px;
    background:green;
  }
  .children {
    position: absolute;
    top:0;
    bottom: 0;
    margin: auto 0;
    height: 100px;
    background: blue;
  }
</style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>

 

水平垂直居中

1、absolute+transform

<style>
  .container {
    position: relative;
    width: 100%;
    height: 500px;
    background:green;
  }
  .children {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: blue;
  }
</style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>

 

2、flex

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 500px;
    background:green;
  }
  .children {
    width: 100px;
    height: 100px;
    background: blue;
  }
</style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>

 

3、margin

<style>
  .container {
    position: relative;
    width: 100%;
    height: 500px;
    background:green;
  }
  .children {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background: blue;
  }
</style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>

 

4、table-cell

<style>
  .container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 100vw;
    height: 500px;
    background:green;
  }
  .children {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: blue;
  }
</style>
<body>
  <div class="container">
    <div class="children">children</div>
  </div>
</body>

 

多列布局

一列定宽，一列自适应

1、float+margin

<style>
  .left {
    float: left;
    width: 100px;
    background:green;
  }
  .right {
    margin-left: 100px;
    background: blue;
  }
</style>
<body>
  <div class="left">
    left
  </div>
  <div class="right">right</div>
</body>

 

2、float+overflow

<style>
  .left {
    float: left;
    width: 100px;
    background:green;
  }
  .right {
    overflow: hidden;
    background: blue;
  }
</style>
<body>
  <div class="left">
    left
  </div>
  <div class="right">right</div>
</body>

 

3、table

<style>
  .parent {
    display: table;
    width: 100%;
  }
  .left {
    display: table-cell;
    width: 100px;
    background:green;
  }
  .right {
    display: table-cell;
    background: blue;
  }
</style>
<body>
  <div class="parent">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>

 

4、flex

<style>
  .parent {
    display: flex;
    width: 100%;
  }
  .left {
    width: 100px;
    background:green;
  }
  .right {
    flex: 1;
    background: blue;
  }
</style>
<body>
  <div class="parent">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>

 

多列定宽，一列自适应

1、float+overflow

<style>
  .parent {
    width: 100%;
  }
  .left-one, .left-two {
    float: left;
    width: 100px;
  }
  .left-one {
    background: green;
  }
  .left-two {
    background: yellow;
  }
  .right {
    overflow: hidden;
    background: blue;
  }
</style>
<body>
  <div class="parent">
    <div class="left-one">left-one</div>
    <div class="left-two">left-two</div>
    <div class="right">right</div>
  </div>
</body>

 

2、table

<style>
  .parent {
    display: table;
    width: 100%;
  }
  .left-one, .left-two {
    display: table-cell;
    width: 100px;
  }
  .left-one {
    background: green;
  }
  .left-two {
    background: yellow;
  }
  .right {
    display: table-cell;
    background: blue;
  }
</style>
<body>
  <div class="parent">
    <div class="left-one">left-one</div>
    <div class="left-two">left-two</div>
    <div class="right">right</div>
  </div>
</body>

 

3、flex

<style>
  .parent {
    display: flex;
    width: 100%;
  }
  .left-one, .left-two {
    width: 100px;
  }
  .left-one {
    background: green;
  }
  .left-two {
    background: yellow;
  }
  .right {
    flex: 1;
    background: blue;
  }
</style>
<body>
  <div class="parent">
    <div class="left-one">left-one</div>
    <div class="left-two">left-two</div>
    <div class="right">right</div>
  </div>
</body>

 

三栏(左右栏固定宽度中间自适应)

1、绝对定位

<style>
  .container div {
    position: absolute;
    min-height: 200px;
  }
  .left {
    left: 0;
    width: 300px;
    background: yellow;
  }
  .center {
    left: 300px;
    right: 300px;
    background: gray;
  }
  .right {
    right: 0;
    width: 300px;
    background: green;
  }
</style>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
</body>

 

2、float

<style>
  .container div {
    min-height: 200px;
  }
  .left {
    float: left;
    width: 300px;
    background: yellow;
  }
  .center {
    background: gray;
  }
  .right {
    float: right;
    width: 300px;
    background: green;
  }
</style>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
    
    <!--<div class="left">left</div>-->
    <!--<div class="center">center</div>-->
    <!--<div class="right">right</div>-->
    
  </div>
</body>

 

3、flex

<style>
  .container {
    display: flex;
    min-height: 200px;
  }
  .left {
    width: 300px;
    background: yellow;
  }
  .center {
    flex: 1;
    background: gray;
  }
  .right {
    width: 300px;
    background: green;
  }
</style>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
</body>

 

4、表格布局

<style>
  .container {
    width:100%;
    display: table;
    min-height: 200px;
  }
  .container div {
    display: table-cell;
  }
  .left {
    width: 300px;
    background: yellow;
  }
  .center {
    background: gray;
  }
  .right {
    width: 300px;
    background: green;
  }
</style>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
</body>

 

5、网格布局

<style>
  .container {
    width:100%;
    display: grid;
    grid-template-rows: 200px;
    grid-template-columns: 300px auto 300px;
  }
  .left {
    background: yellow;
  }
  .center {
    background: gray;
  }
  .right {
    background: green;
  }
</style>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
</body>

 

等分

1、float

<style>
  .parent {
    width: 100%;
  }
  .one, .two, .three, .four{
    float: left;
    width: 25%;
  }
  .one {
    background: green;
  }
  .two {
    background: yellow;
  }
  .three {
    background: blue;
  }
  .four {
    background: red;
  }
</style>
<body>
  <div class="parent">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div class="four">four</div>
  </div>
</body>

 

2、table

<style>
  .parent {
    display: table;
    width: 100%;
  }
  .one, .two, .three, .four{
    width: 25%;
    display: table-cell;
  }
  .one {
    background: green;
  }
  .two {
    background: yellow;
  }
  .three {
    background: blue;
  }
  .four {
    background: red;
  }
</style>
<body>
  <div class="parent">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div class="four">four</div>
  </div>
</body>

 

3、flex

<style>
  .parent {
    display: flex;
    width: 100%;
  }
  .one, .two, .three, .four{
    flex: 1;
  }
  .one {
    background: green;
  }
  .two {
    background: yellow;
  }
  .three {
    background: blue;
  }
  .four {
    background: red;
  }
</style>
<body>
  <div class="parent">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div class="four">four</div>
  </div>
</body>

 

圣杯布局

<style>
  .header {
    background: green;
    height: 50px;
  }
  .wrapper {
    height: 200px;
    display: flex;
  }
  .wrapper .left {
    width: 100px;
    background: yellow;
  }
  .wrapper .main {
    flex: 1;
    background: blue;
  }
  .wrapper .right {
    width: 100px;
    background: red;
  }
  .footer {
    height: 50px;
    background: gray;
  }
</style>
<body>
  <div class="container">
    <div class="header">header</div>
    <div class="wrapper">
      <div class="left">left</div>
      <div class="main">main</div>
      <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
  </div>
</body>

 

以上就是一对一直播系统开发，页面布局设计有很多可选项， 更多内容欢迎关注之后的文章

 

标签：right,可选项,一对一,height,width,background,页面,children,left
From： https://www.cnblogs.com/yunbaomengnan/p/18185712

相关文章

  • 一对一直播软件开发，瀑布流式布局更受欢迎
    一对一直播软件开发，瀑布流式布局更受欢迎代码实现HTML：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="vie......
  • vue3 vite项目H5页面 ios13进入页面出现白屏问题
    项目中碰见IOS系统进入页面出现白屏问题，记录一下问题排查过程一、页面可能报错进入页面是白屏，页面的 vconsole 也没有显示，首先想到的是页面是不是有什么报错，然后查看了别的机型，都没有问题，定位到只有IOS13有问题，想着会不会是什么语法在IOS13不兼容（这个问题之前出现过一个......
  • vue3中vue页面向组件传值(组件的引入)
    1//vue页面的操作2//vue页面中引入组件；组件放入components文件夹中3importpensionfrom"@/components/CarWenShidu/echart.vue";4importpensionshidufrom"@/components/CarWenShidu/echartshidu.vue";56//向组件中传值handleMethod通过datecode......
  • vue3 页面 自适应 高度 分页固定
    <template><divclass="app_box"><divclass="app_box_title"ref="refTile"><el-form:inline="true":model="formInline"class="demo-form-inline"label-......
  • python教程8-页面爬虫
    python爬虫常用requests和beautifulSoup这2个第三方模块。需要先进行手动安装。requests负责下载页面数据，beautifulSoup负责解析页面标签。关于beautifulSoup的api使用，详见api页面：https://beautifulsoup.readthedocs.io/zh-cn/v4.4.0/#find-all豆瓣评论中邮箱数据爬取案例：imp......
  • vue-router单页面应用的多标签页使用问题
    正常的思维做多vue页面应用，我们的第一反应是配置多个入口点，多个vue应用，编译成多个HTML文件，由服务器来决定路由。这是正常的思维。但谁知道单页面应用也能做到类似的效果呢。单页面不过是服务器路由变成了客户端路由，但通过一些技巧，也能实现类似服务器多页面路由的效果。客户端路......
  • 批量删除WordPress文章和页面的数据库命令和从后台直接删除
    批量删除wordpress的方法有两种：1.从wp后台可以调整展示：最多999条2.选择“Bulk”--“Apply”  通过批量删除wordpress文章和页面的数据库命令的步骤：备份数据库：在执行任何数据库操作之前，务必备份您的数据库以防万一。进入数据库：使用您的数据库管理工具（例如phpMyAdmin）登......
  • 页面布局
    页面布局常见单位绝对实验性元素cap盒子模型：四个边界：content,padding,border,margincontentarea控制属性：height,width,min-height,max-height,min-width,max-widthpaddingarea控制属性：padding-top,padding-right,padding-bottom,padding-left和简写属性pad......
  • uniapp+vue H5页面实现微信公众号授权登录
    <template><viewclass="my-userinfo-container"><!--头像和昵称区域--><viewclass="top-box"><image:src="form.headimgurl"class="avatar"></image>......
  • 为javaweb项目中的所有jsp页面设置相同字符集
    配置web.xml文件<?xmlversion="1.0"encoding="UTF-8"?><web-appxmlns="https://jakarta.ee/xml/ns/jakartaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="https://jakarta.ee/......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99