个人中心
gpt4 book ai didi

html - 响应式网站 - 在 CSS 中定义移动

转载 作者：太空宇宙 更新时间：2023-11-04 10:45:45 25 4
gpt4 key购买 nike

基本上，白色背景样式适用于台式机和平板电脑尺寸，但不适用于移动设备。随着页面变小，我们最终会失去“欢迎”后面的白色背景和下面的段落。如何调整我的 CSS 以便背景适用于所有尺寸？ enter image description here

enter image description here

enter image description here

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Knights Basketball Academy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles3.css" type="text/css" rel="stylesheet">
<script type="text/javascript">

var slideimages = new Array(); // create new array to preload images
slideimages[0] = new Image(); // create new instance of image object
slideimages[0].src = "images/slider1.png"; // set image src property 
to image path, preloading image in the process

slideimages[1] = new Image();
slideimages[1].src = "images/slider2.png";
slideimages[2] = new Image();
slideimages[2].src = "images/slider3.png";
slideimages[3] = new Image();
slideimages[3].src = "images/slider4.png";

</script>
</head>

<body>

<header id="header-wrap">
<div id="fixed">
<div class="row"><!--first row-->
    <div id="images">


            <a href="index.html">
            <img id="logo" src="images/logo2.png" alt="logo"
 height="250" width="250">
            </a>



            <img id="text" src="images/header.png" alt="header"
 height="250" width="880">



    <div id="socialIcons">

        <div  class="social">
        <a href="#"><img src="images/twitter.png"></a>
        </div>

        <div class="social">
        <a href="#"><img src="images/facebook.png"></a>
        </div>

        <div class="social">
        <a href="#"><img src="images/youtube.png"></a>
        </div>

        <div class="social">
        <a href="#"><img src="images/instagram.png"></a>
        </div>
    </div>
    </div>
 </div><!--ends first row-->
</div>
</header>


<div class="navigation">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="roster.html">Roster</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Calendar</a></li>
</ul>
</nav>
</div>

<div id="background"><!--background image-->
<div class="row"><!--second row-->

<div style="text-align:center"><!--image slider-->

<img src="images/slider1.png" id="slide" width="713" height="250" />

<script type="text/javascript">

//variable that increments through the images
var step=0;

function slideit(){
 //if browser does not support the image object, exit.
 if (!document.images)
 return
 document.getElementById('slide').src = slideimages[step].src;
 if (step<3)
 step++;
 else
 step=0;
 //call function "slideit()" every 5 seconds
 setTimeout("slideit()",5000);
}

slideit();
</script>
</div>
</div>

<div class="row"><!--third row-->

<div class="col-3 col-m-3">
<img src="images/image5.jpg" alt="Team Photo">
</div>

<div class="col-6 col-m-9">
<h1>Welcome</h1>
<p>Knights Basketball Academy is a non-profit 
amateur basketball club focused on individual player development 
and team concepts.  With our elite coaching staff,  we are 
confident that all players can achieve their own maximum potential 
while maintaining excellent character and integrity. 
<br>
<br>
Contact us at info@knightsbasketballacademy.com to learn how to 
become a Knight today.</p>    

</div>

<div class="col-3 col-m-12">
<aside>
<h2>What?</h2>
<p>This is information about the website</p>
<h2>Where?</h2>
<p>This website was created in St. Louis, MO.</p>
<h2>How?</h2>
<p>Visit our contact page for more information.</p>
</aside>
</div>

</div><!--ends third row-->

<footer>
<p>&copy;2016 KNIGHTS BASKETBALL ACADEMY</p>
</footer>
</div><!--ends background-->
</body>
</html>

CSS:

*{box-sizing:border-box;}

.row:after{content:"";
       clear:both;
       display:block;}

[class*="col-"]{float:left;
            padding:10px;}

/*global styles*/   
#header-wrap {position:relative;
              top:0;
              width:100%;
              min-height:260px;
              height:100%;
              z-index:9999;
              background:#fff;}

#fixed {position:fixed;
        width:100%;
        top:0;
        background-color:#fff;}

.knights {margin-top:0px}

.logo img {max-width:100%;
           height:auto;}

img#logo {width:250px;
          height: 250px;
          float:left;
          margin-left:30px;}

img#text {margin-top:50px;
          float:left;
          margin-left:125px;
          width:650px;}

#images {width:1400px;}

#socialIcons {padding-top:10px;
              margin-left:1264px;}

.fixed{position:fixed;
       width:100%;
       top:0;
       background-color;}  

.social {float:left;
        margin-left:2px;
        margin-right:2px;}

.banner {display: inline-block;
         margin-left:auto;
         margin-right:auto;}

.navigation {text-align:center;
             background-color:#000000;
             padding:0px;}

#banner {text-align:center;
         margin-bottom: 0px;}

#background {background-image: url("images/background.jpg");}

a{text-decoration:none;
  color:white;}

a:visited {color:white;}

nav{margin:auto;
    height:auto;}

nav ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     font-family:Arial;}

nav li {
     padding: 10px;
     margin-bottom: 7px;
     background-color :#000000;
     color: #ffffff;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px
rgba(0,0,0,0.24);
     display:block;
     margin-left:30px;
     margin-right:30px;}


nav li:hover {
     background-color: #8E8E8E;}

aside{background-color:#C5202A;
      padding:15px;
      color:#fff;
      text-align:center;
      font-size:1.1em;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12),
        0 1px 2px rgba(0,0,0,0.24);}

footer{background-color:#000000;
      color:#fff;
      text-align:center;
      font-size:0.9em;
      padding:15px;}

img{max-width:100%;
    height:auto;
}

/*mobile phones first*/
[class*="col-"]{
width:100%;
}

/*tablet*/
@media only screen and (min-width:600px)
{

/*12 column grid*/

.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%; background-color:white;margin-top:10px;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}

nav {height:auto;}

nav li {display:inline-block;}

}   

@media only screen and (min-width:768px)
{   

/*12 column grid*/

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%; background-color:white;margin-top:10px;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}  

nav {height:auto;}

nav li {display:inline-block;
        text-align:center;}  

}


div.clear { clear:both;}

我没有在 CSS 中创建这个 12 列的网格系统，它只是我们在类里面使用的指南，所以我不得不说我不太理解。首先，这是做什么的？

[clas*="col-"]{
width:100%;
}

看起来前 12 列应该适用于平板电脑尺寸，而后 12 列应该适用于桌面尺寸。那么这是否意味着我需要为“/mobile phones first/”部分创建一组新的 12 列类？谢谢!

最佳答案

这是您的“欢迎...”文本所在的 DIV:

<div class="col-6 col-m-9">

您的 CSS 仅在媒体查询中包含白色背景定义:首先为 .col-m-9 提供最小宽度为 600px 的所有视口(viewport)尺寸，然后为 .col-m -9 适用于最小宽度为 768 像素的所有尺寸。但是没有适用于宽度低于 600 像素的屏幕/窗口上的该 DIV 的 CSS 规则...

所以在上面的DIV中再增加一个类，例如

<div class="col-6 col-m-9 col-sm-12">

并为 .col-sm-12 添加一个定义白色背景的 CSS 规则，在宽度低于 600 像素的媒体查询中或在其他规则上方的常规部分中。

关于html - 响应式网站 - 在 CSS 中定义移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35416893/

25 4 0
文章推荐： Java 更改了 Arraylist 中的元素 - 需要保留先前的元素并修改其余元素
文章推荐： python - 当以追加模式打开时，文件在 python 中被覆盖
文章推荐： c - Linux C Shell，子进程抛出段错误
文章推荐： java - Activity 上的两个 onclick 转换为 fragment
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com