前端css弹性布局,响应式布局,多列布局
主页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
body{
background-color: aliceblue;
}
.shou
{
margin-top: 0px;
background-color: blue;
display: flex;
}
.shou>div{
flex:1;
text-align: center;
background:skyblue;
line-height: 100px;
}
@media screen and (max-width: 1000px){
.shou{
flex-direction: column;
}
}
.shou>div>a{
width:100%;
height: 100%;
text-decoration: none;
color: black;
font-size: 20px;
display: block;
}
.shou>div:hover{
background:lightblue;
}
.body{
display: flex;
}
.body>div{
float:left;
width: 500px;
height: 570px;
background-color: white;
text-align: center;
margin-left: auto;
margin-right:auto;
}
.body>.left>ul>li{
list-style: none;
float:left;
}
.body>.left>ul>li>img{
width:166px;
}
.body>.right>video{
width:100%;
}
</style>
</head>
<body>
<div class="shou">
<div><a href="首页.html">首页</a></div>
<div><a href="文字.html">文字</a></div>
<div><a href="图形.html">图形</a></div>
<div><a href="视频音频.html">视频音频</a></div>
</div>
<div class="body">
<div class="left">
<h1>最新商品</h1>
<ul>
<li><img src="./img/1.png" alt=""></li>
<li><img src="./img/1.png" alt=""></li>
<li><img src="./img/1.png" alt=""></li>
<li><img src="./img/1.png" alt=""></li>
<li><img src="./img/1.png" alt=""></li>
<li><img src="./img/1.png" alt=""></li>
<li><img src="./img/1.png" alt=""></li>
<li><img src="./img/1.png" alt=""></li>
<li><img src="./img/1.png" alt=""></li>
</ul>
</div>
<div class="right">
<h1>商品介绍</h1>
<video src="./img/m1.mp4" controls autoplay muted loop="loop"></video>
<p>这是你的第一台小米折叠屏手机</p>
<p>是首个小米智能工厂独立研发制造的手机</p>
<p>是首个使用澎湃C1专业影像芯片的手机</p>
<p>这就是 MIX FOLD</p>
</div>
</div>
</body>
</html>
音频视频
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
body{
background-color: aliceblue;
}
.shou
{
margin-top: 0px;
background-color: blue;
display: flex;
}
.shou>div{
flex:1;
text-align: center;
background:skyblue;
line-height: 100px;
}
@media screen and (max-width: 1000px){
.shou{
flex-direction: column;
}
}
.shou>div>a{
width:100%;
height: 100%;
text-decoration: none;
color: black;
font-size: 20px;
display: block;
}
.shou>div:hover{
background:lightblue;
}
.main{
display: flex;
justify-content: space-around;
margin-top: 100px;
}
.main>div{
width: 1000px;
height: 550px;
background-color: white;
text-align: center;
border-radius: 10px;
}
.main>div>audio{
width: 300px;
height: 50px;
}
.main>div>video{
width: 100%;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="shou">
<div><a href="首页.html">首页</a></div>
<div><a href="文字.html">文字</a></div>
<div><a href="图形.html">图形</a></div>
<div><a href="视频音频.html">视频音频</a></div>
</div>
<div class="main">
<div>
<audio src="./img/稻香-周杰伦-440613.mp3" controls="controls"></audio>
<video src="img/m1.mp4" autoplay="autoplay" loop="loop"></video>
</div>
</div>
</body>
</html>
图形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
body{
background-color: aliceblue;
}
.shou
{
margin-top: 0px;
background-color: blue;
display: flex;
}
.shou>div{
flex:1;
text-align: center;
background:skyblue;
line-height: 100px;
}
@media screen and (max-width: 1000px){
.shou{
flex-direction: column;
}
}
.shou>div>a{
width:100%;
height: 100%;
text-decoration: none;
color: black;
font-size: 20px;
display: block;
}
.shou>div:hover{
background:lightblue;
}
.main>.one{
width: 200px;
height: 200px;
background:red;
margin: 100px auto;
text-align: center;
line-height: 200px;
color: white;
}
.main>.one:hover{
border-radius: 100px;
transition: 1s;
}
.main>.two{
width: 200px;
height: 200px;
background:blue;
margin: 0 auto;
text-align: center;
line-height: 200px;
color: white;
}
.main>.two:hover{
transform: rotate(360deg);
transition: 1s;
width: 100px;
height: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<div class="shou">
<div><a href="首页.html">首页</a></div>
<div><a href="文字.html">文字</a></div>
<div><a href="图形.html">图形</a></div>
<div><a href="视频音频.html">视频音频</a></div>
</div>
<div class="main">
<div class="one">移鼠标进来</div>
<div class="two">移鼠标进来</div>
</div>
</body>
</html>
文字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
body{
background-color: aliceblue;
}
.shou
{
margin-top: 0px;
background-color: blue;
display: flex;
}
.shou>div{
flex:1;
text-align: center;
background:skyblue;
line-height: 100px;
}
@media screen and (max-width: 1000px){
.shou{
flex-direction: column;
}
}
.shou>div>a{
width:100%;
height: 100%;
text-decoration: none;
color: black;
font-size: 20px;
display: block;
}
.shou>div:hover{
background:lightblue;
}
.main{
display: flex;
}
.main>p{
column-count: 3;
margin: 10px 100px;
column-rule:darkblue outset 10px;
}
.main2{
display: flex;
justify-content: space-around;
margin-top: 100px;
}
.main2>img{
width: 500px;
align-items: center;
}
</style>
</head>
<body>
<div class="shou">
<div><a href="首页.html">首页</a></div>
<div><a href="文字.html">文字</a></div>
<div><a href="图形.html">图形</a></div>
<div><a href="视频音频.html">视频音频</a></div>
</div>
<div class="main">
<p>内屏:8.01″ 2K+折叠屏,外屏:6.52″90Hz 柔性屏,哈曼卡顿立体声四扬声器,108MP主摄 + 液态镜头 + 超广角镜头,
首发澎湃C1自研专业影像芯片,高通骁龙™888,WiFi 6 增强版 + LPDDR5满血版 + UFS3.1,5020mAh电池,67W快充,
大屏高效交互,隐私保护,内屏:8.01″ 2K+折叠屏,外屏:6.52″90Hz 柔性屏,哈曼卡顿立体声四扬声器,108MP主摄 + 液态镜头 + 超广角镜头,
首发澎湃C1自研专业影像芯片,高通骁龙™888,WiFi 6 增强版 + LPDDR5满血版 + UFS3.1,5020mAh电池,67W快充,大屏高效交互,隐私保护,
内屏:8.01″ 2K+折叠屏,外屏:6.52″90Hz 柔性屏,哈曼卡顿立体声四扬声器,108MP主摄 + 液态镜头 + 超广角镜头,首发澎湃C1自研专业影像芯片,
高通骁龙™888,WiFi 6 增强版 + LPDDR5满血版 + UFS3.1,5020mAh电池,67W快充,大屏高效交互,隐私保护,内屏:8.01″ 2K+折叠屏,
外屏:6.52″90Hz 柔性屏,哈曼卡顿立体声四扬声器,108MP主摄 + 液态镜头 + 超广角镜头,首发澎湃C1自研专业影像芯片,高通骁龙™888,
WiFi 6 增强版 + LPDDR5满血版 + UFS3.1,5020mAh电池,67W快充,大屏高效交互,隐私保护
</p>
</div>
<div class="main2">
<img src="./img/lei.jpg" alt="">
</div>
</body>
</html>