我在很多页面中看到缩小窗口时,即使它最大1024px宽,页面内容也会根据窗口大小缩小,我尝试使用媒体查询但我不太了解如何使用它,我是 CSS 新手,我把代码留给你
格拉斯.css
*{
margin:0px;
padding:0px;
}
body {
/* background-image: url("../rock.jpg");*/
margin: auto;
width: 100%;
}
main {
width:70%;
float:left;
background-color: #fff;
height: auto;
}
aside{
width: 30%;
float:right;
background-color: #fff;
height: auto;
}
.glyphicon {
font-size: 25px;
}
.icon-size
{
font-size: 87px;
}
.container{
float:left;
padding-right: 0px;
padding-left: 0px;
}
/* NavBar gral*/
.navbar {
border-bottom:2px solid #F49D51;
margin-bottom: 0px;
}
/* NavBar login de usuario*/
.navbar-login
{
width: 20%;
padding: 10px;
padding-bottom: 0px;
}
.navbar-login-session
{
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
}
/* Manejo de Tabs Gral*/
.tabss{
background-color: #444444;
margin: 0px;
padding-top: 5px;
border-bottom-color: #666666;
}
.nav-tabs {
margin-left: 5px;
border: 0px solid transparent;
}
.nav-tabs > li > a,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
color: #FFF;
}
.nav-tabs > .open > a,
.nav-tabs > .open > a:hover,
.nav-tabs > .open > a:focus,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
color: #fff;
background-color: #666666;
border-color: transparent;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #fff;
font-weight: bold;
background-color: #666666;
border-color: #444444;
border-bottom-color: transparent;
}
.panel-primary {
border-bottom-color: #fff;
border-left-color: #fff;
border-right-color: #fff;
border-top-color: #666666;
float:left;
width:95.8%;
}
.panel-primary > .panel-heading {
color: #fff;
background-color: #666666;
border-color: #666666;
}
.panel {
border: 0px solid transparent;
}
.panel-heading {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
width: 100%
}
.panel-body {
padding: 15px;
float:left;
}
/* Fin Panel Tabs Gral*/
.top-aside{
float:right;
background-color: #444444;
margin: 0px;
padding-top: 5px;
border-bottom-color: #666666;
border-left-color: black;
box-shadow: 1px 0 0 #3a3a3a inset;
height: 46px;
width:100%;
}
/* Mesas Restaurant */
.table-mesas {
float:left;
width: 95.8%;
}
.table-mesas tr td{
padding:15px;
}
.butt-mesas {
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
text-shadow: 1px 1px 15px #666666;
font-family: Arial;
color: #ffffff;
font-size: 30px;
padding: 30px 40px;
background: #88dd77;
border: solid #000000 1px;
text-decoration: none;
width: 100%;
}
.butt-mesas:hover {
background: #9ae288;
text-shadow: 1px 1px 15px #666666;
text-decoration: none;
}
/* Fin Mesas Restaurant */
<html lang="es">
<head>
<title>Trabajo Cuatrimestral OO2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/gral.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="../logo.jpg" width="150" height="35"></a>
</div>
<ul class="nav navbar-nav">
<li class="active" id="restaurant"><a href="../restaurant/salon.html" title="Restaurant"><span class="glyphicon glyphicon-cutlery"></span></a></li>
<li id="ventas"><a href="#productos/" title="Ventas"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>
<li id="productos"><a href="../productos/productos.html" title="Productos"><span class="glyphicon glyphicon-apple"></span></a></li>
<li id="client"><a href="#productos/" title="Clientes"><span class="glyphicon glyphicon-user"></span></a></li>
<li id="report"><a href="#productos/" title="Reportes"><span class="glyphicon glyphicon-stats"></span></a></li>
<li id="config"><a href="#productos/" title="Configuración"><span class="glyphicon glyphicon-cog"></span></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>
<strong>Nombre</strong>
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
<ul class="dropdown-menu">
<li>
<div class="navbar-login">
<div class="row">
<div class="col-lg-4">
<p class="text-center">
<img src="../foto-carnet.jpg" width="100" height="100">
</p>
</div>
<div class="col-lg-8">
<p class="text-left"><strong>Nombre Apellido</strong></p>
<p class="text-left small">[email protected]</p>
<p class="text-left">
<a href="#" class="btn btn-primary btn-block btn-sm">Actualizar Datos</a>
</p>
</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="navbar-login navbar-login-session">
<div class="row">
<div class="col-lg-12">
<p>
<a href="#" class="btn btn-danger btn-block">Cerrar Sesion</a>
</p>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</nav>
<main>
<div class="container">
<div class="tabss">
<ul class="nav nav-tabs">
<li class="active"><a href="../restaurant/salon.html">Salon</a></li>
<li><a href="#">Salon 1</a></li>
</ul>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<span class="panel-title">MESAS</span>
</div>
<div class="panel-body">
<table class="table-mesas">
<tr>
<td><button class="butt-mesas">1</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
<tr>
<td><button class="butt-mesas">1</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
<tr>
<td><button class="butt-mesas">1</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
<tr>
<td><button class="butt-mesas">1</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
<tr>
<td><button class="butt-mesas">1</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
</table>
</div>
</div>
</div>
</main>
<aside>
<section class="top-aside">
</section>
</aside>
</body>
</html>
如果你想好好看看设计,我把 bootstrap.css 留给你,因为我在不知情的情况下更改了其中的一部分,否则设计不会被欣赏
bootstrap.css https://mega.nz/#!Fj5GWLBL!4wNXxG65pFD9IOr9rum6UTUCKWrv9eN-TpXt8QDVHSw
bootstrap.css.map https://mega.nz/#!1vZQWCxY!AArlqs4Eyngz0HrXi2AC0gSWphzcPhwIe18E7Hm2ilQ
谢谢,这正是我要找的,你能向我解释一下这些css行是做什么的吗?
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
es lo unico que no entiendo lo voy a googlear igual pero si me podes explicar mejor.
Muchas gracias!!