响应式布局的复习
响应式布局的复习
<!DOCTYPE html> <html lang="en"> <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>Document</title> <style> .container { height: 150px; background-color: pink; margin: 0 auto; } /* 1.超小屏幕下 小于 768 布局容器的宽度 为100% */ @media screen and (max-width:767px) { .container { width: 100%; } } /* 2.小屏幕下 大于等于768 布局容器改为750px */ @media screen and (min-width:768) { .container { width: 750px; } } /* 3.中等屏幕下 992px布局容器修改为970px */ @media screen and (min-width:992px) { .container { width: 970px; } } /* 4.大屏幕下 大于等于1200px 布局容器修改为1170px */ @media screen and (min-width:1200px) { .container { width: 1170px; } } </style> </head> <body> <!-- 响应式开发里面，首先需要一个布局容器 --> <div class="container"> </div> </body> </html>
用响应式布局写导航模块
用响应式布局写导航模块
<!DOCTYPE html> <html lang="en"> <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>Document</title> <style> * { margin: 0; padding: 0; } li { list-style: none; } .container { width: 750px; margin: 0 auto; } .container li { float: left; width: 93.75px; height: 30px; background-color:green; } @media screen and (max-width:767px) { .container { width: 100%; } .container ul li { width: 33.33%; } } </style> </head> <body> <div class="container"> <ul> <li>导航栏</li> <li>导航栏</li> <li>导航栏</li> <li>导航栏</li> <li>导航栏</li> <li>导航栏</li> <li>导航栏</li> <li>导航栏</li> </ul> </div> </body> </html>
对bootstrap各个组件的学习及应用案例
对bootstrap各个组件的学习及应用案例
