Question

这是我第一次尝试创建网页。我将不胜感激。

所以这就是我所拥有的：

my poor attemp

这就是我想要实现的目标：

the cool designe i want to achive

以下是html和css代码

HTML：

<html>
<head>
 <link href="/js.css" rel="stylesheet">    </head>


    <body>
    <div class="jokearea">

      <span id="prevbtn"><img class="arr"       src="http://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/arrow-next- 3-icon.png" ></span>  


   <span class ="thejoke"><p> some text here"</p>


<p>and a little bit of text here two</p>
        </span>  



  <span id="nxtbtn"><img class="arr" src="http://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/arrow-next-3-icon.png" ></span>           


             </div>


       </body>
   </html>

的CSS：

body {
 background-color:#f6f6f6}


.jokearea {
border: 10px solid #d3d3d3;
width: auto;
border-radius: 12px; 
}

 .jokearea #prevbtn{
  max-width: 70px;
  width: 10%;
  float: left;   
  }

  .jokearea #nxtbtn{
  max-width: 70px;
  width: 10%;
  float: right;
  }

 .jokearea p {
 color: black;
 font-family:sans-serif;
 -weight:600;
padding-left: 8%;
padding-left: 8%;
padding-top: 5%;

}

 .arr{
 max-width: 100%;

  }

ps：只要它让我达到我的目标，就可以随意改变你想要的代码

Answer 1

以下是解决问题的完整代码，您应该使用div来划分屏幕的各个部分，然后根据需要浮动它们......

＆＃13;

body {
 background-color:#f6f6f6}


.jokearea {
border: 10px solid #d3d3d3;
width: auto;
border-radius: 12px; 
height:200px;
}

 .jokearea #prevbtn{
  max-width: 70px;
  width: 10%;
  float: left;  
padding-top:70px;  
padding-left:15px; 
width:10%;
  }

  .jokearea #nxtbtn{
  max-width: 70px;
  width: 10%;
  float: right;
  padding-top:70px;
padding-right:15px; 
width:10%; 
  }

 .jokearea p {
 color: black;
 font-family:sans-serif;
 -weight:600;
padding-left: 8%;
padding-left: 8%;
padding-top: 5%;
font-weight:bold;

}
.thejoke{
	float:left;
	width:60%;
}
 .arr{
 max-width: 100%;

  }

＆＃13;

<body>
    <div class="jokearea">
	<div id="prevbtn">

      <span ><img class="arr" src="http://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/arrow-next- 3-icon.png" ></span>  

</div>
<div class ="thejoke">
   <span ><p> some text here"</p>


<p>and a little bit of text here two</p>
        </span>  

</div>
<div  id="nxtbtn">
  <span><img class="arr" src="http://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/arrow-next-3-icon.png" ></span>           

<div>
             </div>


       </body>

＆＃13;

如何用css实现这个目标

1 个答案: