直播平臺軟體開發，flex佈局例項
直播平臺軟體開發，flex佈局例項
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue3</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta http-equiv="cleartype" content="on">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="renderer" content="webkit">
<style>
:root{
--color1:var(--color1)
}
*{
margin: 0%;
padding: 0%;
}
html{
font-size: 16px;
}
#app{
/* display: grid;
place-content: center; */
height: 100vh;
width: 100vw;
}
.wrap-main{
}
.plate{
padding: 3rem;
border: .3rem solid #999595;
font-size: 1rem;
background-size: 100% 100%;
background-clip: border-box;
}
.plate-1{
padding: 3rem;
border: .3rem solid #999595;
font-size: 2rem;
background-size: 100% 100%;
background-clip: border-box;
height: 5rem;
width: 50rem;
display: flex;
}
.plate-1-item-1{
flex:1 1;
display: grid;
place-content: center;
background-color: aquamarine;
margin: .2rem;
}
.plate-1-item-2{
background-color: bisque;
width: 100%;
margin: .2rem;
display: grid;
place-content: center;
}
.plate-2{
padding: 3rem;
border: .3rem solid #999595;
font-size: 2rem;
background-size: 100% 100%;
background-clip: border-box;
height: 5rem;
width: 50rem;
display: flex;
align-items: center;
}
.plate-2-item-1{
flex:1 1;
display: grid;
place-content: center;
background-color: aquamarine;
margin: .2rem;
font-size: .8rem;
}
.plate-2-item-2{
background-color: bisque;
flex: 2;
margin: .2rem;
display: grid;
place-content: center;
font-size: .8rem;
}
.plate-2-self{
align-self: stretch;
}
/* 等高佈局table */
.plate-3{
padding: 3rem;
border: .3rem solid #999595;
font-size: 2rem;
background-size: 100% 100%;
background-clip: border-box;
height: 5rem;
width: 50rem;
display: table;
}
.plate-3-item-1{
width: 30%;
font-size: .8rem;
display: table-cell;
border: .1rem solid #999595;
}
/* 等高佈局grid */
.plate-4{
padding: 3rem;
border: .3rem solid #999595;
font-size: 2rem;
background-size: 100% 100%;
background-clip: border-box;
width: 50rem;
display: grid;
grid-auto-flow: column;
}
.plate-4-item-1{
font-size: .8rem;
}
.plate-4-item-1:nth-child(1){
background-color: aqua;
}
.plate-4-item-1:nth-child(2){
background-color: rgb(95, 228, 90);
}
.plate-4-item-1:nth-child(3){
background-color: rgb(228, 90, 125);
}
/* 等高佈局，相容最強 */
.plate-5{
padding: 3rem;
border: .3rem solid #999595;
font-size: 2rem;
background-size: 100% 100%;
background-clip: border-box;
width: 50rem;
font-size: .8rem;
color: white;
}
.plate-5-main{
overflow: hidden;
}
.plate-5-left{
float: left;
display: inline-block;
width: 30%;
background-color: rgb(228, 90, 125);
padding-bottom: 999999rem;
margin-bottom: -999999rem;
}
.plate-5-right{
display: inline-block;
width: 50%;
background-color: rgb(95, 228, 90);
}
/* 導航欄 */
.plate-6{
background-color: blueviolet;
color: white;
display: flex;
}
.plate-6-right{
display: flex;
margin-left: auto;
cursor: pointer;
background-color: #999595;
}
.plate-6-right div{
margin: 0 2rem;
}
.plate-6 nav ul{
display: flex;
list-style: none;
background-color: #999595;
}
.plate-6 nav ul li{
margin: 0 2rem;
cursor: pointer;
}
.plate-6 nav ul li:hover,.plate-6-right div:hover{
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
-ms-transform:scale(1.2);
color: rgb(123, 255, 0);
}
/* flex自適應 */
.plate-7{
display: flex;
flex-wrap: wrap;
}
.plate-7-left{
flex: 0 0 15rem;
/* width: 15rem; */
}
.plate-7-right{
flex: 1 0 0;
}
/* flex效果搜尋框 */
.plate-8{
display: flex;
flex-wrap: nowrap;
}
.search-left{
padding: 1rem 2rem;
background-color: rgb(0, 153, 255);
border-radius: 30%;
color: white;
font-weight: 600;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
text-align: center;
}
.search-right{
flex-grow: 1;
display: flex;
}
.search-right input[type='text']{
border-top: none;
border-right: none;
border-left: none;
}
.search-right input[type='text']:focus{
border-top: none;
border-right: none;
border-left: none;
flex-grow: 1;
}
/* 聖盃佈局 */
.plate-9{
/* width: 50rem; */
/* height: 25rem; */
display: flex;
flex-direction: column;
}
@media (max-width:789px) {
section{
flex-direction: column !important;
flex: 1;
}
.plate-9-center{
flex: 1;
}
.plate-9-left,.plate-9-right{
flex: 0 0 5rem !important;
}
}
.plate-9-header{
background-color: rebeccapurple;
}
.plate-9-footer{
background-color: aquamarine;
}
.plate-9 section{
display: flex;
flex: 1;
flex-direction: row;
}
.plate-9-left{
background-color: beige;
flex: 0 0 15rem;
order: -1;
}
.plate-9-center{
background-color: rgb(28, 123, 196);
flex: 1;
}
.plate-9-right{
background-color: rgb(150, 34, 125);
flex: 0 0 15rem;
}
</style>
</head>
<body>
<div id="app">
<div>
板塊1：Flex佈局
<div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
板塊2 align-items 和 align-self
<div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>2</div>
<div>2</div>
<div class="plate-2-item-1 plate-2-self">1</div>
<div>2</div>
</div>
板塊3 等高佈局實現方式一：table佈局
<div>
<div>素位於容器的基線上。 如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。</div>
<div>測試</div>
<div>素位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'center'。在其它情況下，各行會按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其他空間的一半。</div>
</div>
板塊4 等高佈局實現方式二：grid佈局
<div>
<div>素位於容器的基線上。 如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。</div>
<div>測試</div>
<div>素位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'center'。在其它情況下，各行會按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其他空間的一半。</div>
</div>
板塊5 等高佈局，相容最強
<div>
<div>
<div>位於容器的基線上。 如彈性盒子元素的行內軸與側軸為同一條，則該值與'f</div>
<div>素位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'center'。在其它情況下，各行會按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其他空間的一半</div>
</div>
</div>
板塊6 導航欄
<div class="plate-6 plate">
<nav>
<ul>
<li>
導航一
</li>
<li>
導航二
</li>
<li>
導航三
</li>
</ul>
</nav>
<div>
<div>登入</div>
<div>註冊</div>
</div>
</div>
板塊7 自適應flex
<div class="plate-7 plate">
<div>標題資訊</div>
<div>內容資訊位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈，兩端保留子元素與子元位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈，兩端保留子元素與子元位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈，兩端保留子元素與子元位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈，兩端保留子元素與子元位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈，兩端保留子元素與子元位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈，兩端保留子元素與子元位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈，兩端保留子元素與子元位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈，兩端保留子元素與子元位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈，兩端保留子元素與子元位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈，兩端保留子元素與子元</div>
</div>
板塊8 自適應flex下的搜尋框
<div class="plate-8 plate">
<div>搜尋</div>
<div>
<input type="text" name="" id="">
</div>
</div>
板塊9 聖盃佈局
<div class="plate-9 plate">
<div>頭部</div>
<section>
<div>中間</div>
<div>右側</div>
<div>左側</div>
</section>
<div>底部</div>
</div>
</div>
</div>
</body>
<script src="
<script src="./learnTs/02_baseType.js"></script>
<script>
const Counter = {
data:function(){
return {
num:0,
name:'張三'
}
}
}
let app =Vue.createApp(Counter).mount('#app')
console.log(app)
</script>
</html>
以上就是直播平臺軟體開發，flex佈局例項， 更多內容歡迎關注之後的文章
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69978258/viewspace-2929033/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- Flex常見佈局例項Flex
- flex佈局語法+例項Flex
- CSS例項詳解：Flex佈局CSSFlex
- flex居中佈局程式碼例項Flex
- CSS-Flex 佈局教程：例項篇CSSFlex
- flex彈性佈局程式碼例項Flex
- flex聖盃佈局程式碼例項Flex
- Flex佈局-子項Flex
- 直播平臺軟體開發，uni-app實現選項卡功能APP
- CSS3 Flex 彈性佈局例項程式碼詳解CSSS3Flex
- 寫給 Android 開發的小程式佈局指南，Flex 佈局！AndroidFlex
- flex佈局父項常見屬性flex-flowFlex
- flex 佈局Flex
- Flex佈局Flex
- 直播平臺軟體開發，Extjs Grid自動換行JS
- 浮動佈局 和 flex佈局Flex
- css flex佈局CSSFlex
- flex佈局原理Flex
- 如何開發直播平臺，直播平臺開發需要CDN嗎
- 直播平臺軟體開發，flutter Wrap 自動換行元件Flutter元件
- 直播平臺軟體開發，cocos lua --定時器的使用定時器
- 直播平臺軟體開發，Android 10 拍照和相簿選擇Android
- 直播平臺軟體開發，實現自定義標題欄
- 直播平臺軟體開發，Android 計時器，定時功能Android
- dispaly的Grid佈局與Flex佈局Flex
- flex佈局實戰Flex
- flex佈局筆記Flex筆記
- Flex佈局應用Flex
- html的flex佈局？HTMLFlex
- 重溫 Flex 佈局Flex
- flex佈局——轉載Flex
- flex佈局學習Flex
- 淺談Flex佈局Flex
- flex佈局屬性Flex
- flex 佈局：語法Flex
- CSS display: flex佈局CSSFlex
- 靜態頁面佈局例項
- 直播平臺開發，直播各個分類單例設計展示單例