2-9ABOUT区

2-9ABOUT区

ABOUT下左半部分那个白色背景边框怎么是黑色的怎么设置图中的白色的,另外我的方框里的内容被图片压住了是怎么回事

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{margin:0;padding:0;}

.header{width:100%;height:60px;background:#07cbc9}

.header img{float:left;padding-left:100px;}

.left{float:left;color:#ffffff;list-style:none;width:50px;line-height:60px;}

.xiao{float:right;}

.xiao ul{padding-right:50px; cursor:pointer;}

.clear{clear:both;}

.song{width:100%;}

.song img{width:100%;height:500px;}

.toplaype{position:absolute;left:0;top:60px;width:100%;height:500px;background:#000;opacity:0.5;}

.zhuo input{width:300px;height:20px;margin-bottom:10px;background-color:transparent;}

.yang{position:absolute;left:50%;top:250px;margin-left:-150px;margin-top:-30px; }

.sad{text-align:center;}

.weibo{ width: 60px; height:20px; margin:0 auto; }

.weibo input{width:60px;height:20px;cursor:pointer;}

h3{text-align:center;margin-bottom:10px;margin-top:20px;} 

.xian{ width:30px;border-bottom:#07cbc9 2px solid;margin:0 auto;margin-bottom:10px;}

 .div{font-size:10px;text-align:center; }

 .pian{width:100%;margin-top:20px;}

 .pian img{width:500px;height:300px;position:absolute;left:50%;margin-left:-250px;}

 .aodi{width:100%;margin:0 auto;}  

 .wan {width: 250px;height: 150px;background:rgba(255,255,255,0.8);border:#000 2px solid;}

 .zaoshang{padding:5px 20px;}

   

 .xiezi{font-size:10px;text-align:left;

 }

 .black{width:60px;height:30px;background:#000;color:#fff;margin-top:10px;cursor:pointer;}

.jian{line-height:30px;text-align:center;}

.zouni{margin-left:300px;}

h2{text-indent:0.5em;}

.pani{width:120px;height:42px;border:#07cbc9 2px solid;padding-top:20px;margin:10px;}

.dorder{ width:30px;border-bottom:#07cbc9 2px solid;margin:0 auto;}

.budui{text-align:center;font-size:13px;}

.qiwan{text-align:center;}

.wanshi{width:500px;height:300px;position:absolute;left:50%;margin-left:250px;margin-top:-210px}

.wanju{width:100%;height:auto;}

</style>


</head>



<body>

<div class="header">

  <img src="images/logo.png" >

 <div class="xiao">

 <ul >

 <li class="left">home</li>

 <li class="left">home</li>

 <li class="left">home</li>

 <li class="left">home</li>

 <li class="left">home</li>

 <li class="left">home</li>

 </ul>

 </div> 

</div>

<div>

<div class="song">


<img src="images/banner3.jpg"> 


</div>

<div class="toplaype"></div>

<div class="yang">

<form >

<div class="zhuo"><input tyle="text" name="username" size="35" maxlength="6" placeholder="yang name" /></div>


<div class="zhuo"><input tyle="text" name="username" size="35" maxlength="6" placeholder="yang name"/></div>


<div class="zhuo" ><input tyle="text" name="username" size="35" maxlength="6" placeholder="yang name"/></div>

<div class="zhuo weibo "><input type="submit" name="submit" value="登录" /></div>

</form>

</div>

</div>

<div class="wanju">

<div class="sad">

<h3>ABOUT</h3>

<div class="xian"></div>

<div class="div">input tyle="text" name="username" size="35" maxlength="6" placeholder="yangs

<br />input tyle="text" name="username" size="35" maxlength="6" placeholder="yang<br />

size="35" maxlength="6" placeholder="yan{width:250px;height:150px;background:(255,255,0.8);opacity:0.4;border:#000 2px solid;z-index:1;}

</div>

</div>

<div class="pian">

<img src="images/bb3.jpg" />

</div>

<div class="aodi">

<div class="zouni">

<h2>A WORD <br />

ABOUT US

</h2>


<div class="wan">

<div class="zaoshang">

<div class="xiezi">

<P> name="username" size="35" maxlength="6" 

me="username" size="35"height:30px;background:

</P>

<P> name="username" size="35" maxlength="6"n

ame="username" size="35" maxlength="6"height:30px;backgr </P>

</div>

<div class="black">

<div class="jian">

EXPLORE

</div>

</div>

</div>

</div>

</div>

</div>

<div class="wanshi">

<div class="pani">

<div class="wancheng">

<div class="qiwan"> <h4>70000</h4></div>

<div class="dorder"></div>

<div class="budui">students</div>

</div>

</div>

<div class="pani">

<div class="wancheng">

<div class="qiwan"> <h4>70000</h4></div>

<div class="dorder"></div>

<div class="budui">students</div>

</div>

</div>

</div>

</div>

<div>

<div><img src="images/b1.jpg" /> </div>

<div><div></div></div>

<div><img src="images/b2.jpg"><</div>

<div></div>

<div><img src="images/b3.jpg" /></div>

<div></div>

<div><img src="images/b4.jpg" /></div>

<div></div>



</div>



</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

1、你把左侧框的边框设置成浅灰色就行,你设置了黑色的边框,那它显示就是黑色的。

2、给它设置定位,就可以让其显示在图片上了。

祝学习愉快!

  • 晓松aa 提问者 #1
    定位怎么设置啊
    2017-09-02 21:21:46
小丸子爱吃菜 2017-09-02 21:41:46

再去将CSS步骤定位这一课学习一下!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

登录后可查看更多问答,登录/注册

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师