2-9作业题
老师请问一下我这个透明度应该怎么搞，然后又如何居中呢？
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>作业题</title>
<style>
*{
margin: 0;/*清除页面外边距*/
padding: 0;/*清除页面内边距*/
}
.header{
width: 100%;/*设置头部区域宽度为自适应*/
height: 60px;/*设置头部区域高度为60px*/
background: #07cbc9;/*头部背景颜色*/
}
.header .logo{
position: absolute;/*logo绝对定位*/
float: left;/*logo左浮动*/
top: 6px;/*logo偏移量*/
margin-left: 60px;/*logo左边距*/
}
.header .nav{
float: right;/*导航右浮动*/
}
.header .nav ul li{
font-family: "微软雅黑";/*导航字体*/
font-size: 20px;/*导航字体大小*/
font-weight: bolder;/*导航字体样式*/
color: #FFFFFF;/*导航字体颜色*/
list-style: none;/*去除列表默认样式*/
float: left;/*导航文字左浮动*/
margin-right: 20px;/*导航文字右边距*/
line-height: 60px;/*导航文字垂直居中*/
}
.content-banner .banner{
width: 100%;
height: 457px;
position: absolute;
float: left;
}
.content-banner .banner img{
width: 100%;
height: 457px;
}
.content-banner .banner-topic{
position: absolute;
top:60px;
left: 0px;
background: #000;
width: 100%;
height: 457px;
opacity: 0.5;
}
.content-banner .banner-form{
width: 600px;
height: 300px;
/* background: #C8494B;*/
position: absolute;
top:289px;
margin-top: -150px;
z-index: 10;
right: 50%;
}
.content-banner .banner-form .ynpe{
width: 507px;
height: 41px;
opacity: 0.3;
border: 3px solid #FFF;
}
.content-banner .banner-form .netbook{
width: 507px;
height: 115px;
opacity: 0.4;
}
</style>
</head>
<body>
<!--头部区域-->
<div class="header">
<!--logo-->
<div class="logo">
<img src="images/logo.png" alt=""/>
</div>
<!--导航栏-->
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<!--内容区域-->
<div class="content">
<!--banner区-->
<div class="content-banner">
<div class="banner">
<img src="images/banner3.jpg" alt="" />
</div>
<div class="banner-topic"></div>
<div class="banner-form">
<form action="">
<input type="text" name="username" placeholder="Your Name" class="ynpe"/><br/><br/>
<input type="text" name="username" placeholder="Your Phone" class="ynpe"/>
<br/><br/>
<input type="text" name="username" placeholder="Your Email" class="ynpe"/>
<br/><br/>
<input type="text" name="username" placeholder="write your Comment here" class="netbook"/>
</form>
</div>
</div>
<!--ABOUT区-->
<div class="content-about"></div>
<!--GALLERY区-->
<div class="content-gallery"></div>
</div>
<!--底部区域-->
<div class="footer"></div>
</body>
</html>75
收起
正在回答 回答被采纳积分+1
3回答
Miss路
2017-08-30 12:00:08
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>作业题</title>
<style>
*{
margin: 0;/*清除页面外边距*/
padding: 0;/*清除页面内边距*/
}
.header{
width: 100%;/*设置头部区域宽度为自适应*/
height: 60px;/*设置头部区域高度为60px*/
background: #07cbc9;/*头部背景颜色*/
}
.header .logo{
position: absolute;/*logo绝对定位*/
float: left;/*logo左浮动*/
top: 6px;/*logo偏移量*/
margin-left: 60px;/*logo左边距*/
}
.header .nav{
float: right;/*导航右浮动*/
}
.header .nav ul li{
font-family: "微软雅黑";/*导航字体*/
font-size: 20px;/*导航字体大小*/
font-weight: bolder;/*导航字体样式*/
color: #FFFFFF;/*导航字体颜色*/
list-style: none;/*去除列表默认样式*/
float: left;/*导航文字左浮动*/
margin-right: 20px;/*导航文字右边距*/
line-height: 60px;/*导航文字垂直居中*/
}
.content-banner{
position: relative;
}
.content-banner .banner{
width: 100%;
height: 457px;
}
.content-banner .banner img{
width: 100%;
height: 457px;
}
.content-banner .banner-topic{
position: absolute;
top:0px;
left: 0px;
background: #000;
width: 100%;
height: 457px;
opacity: 0.5;
}
.content-banner .banner-form{
text-align: center;
width: 600px;
height: 300px;
position: absolute;
left: 50%;
margin-left: -300px;
top: 50%;
margin-top: -150px;
z-index: 10;
}
.content-banner .banner-form .ynpe{
width: 507px;
height: 41px;
border: 1px solid #ccc;
background-color: transparent;
padding-left: 5px;
}
.content-banner .banner-form .netbook{
width: 507px;
height: 115px;
border: 1px solid #ccc;
background-color: transparent;
padding-left: 5px;
}
</style>
</head>
<body>
<!--头部区域-->
<div class="header">
<!--logo-->
<div class="logo">
<img src="images/logo.png" alt=""/>
</div>
<!--导航栏-->
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<!--内容区域-->
<div class="content">
<!--banner区-->
<div class="content-banner">
<div class="banner">
<img src="images/banner3.jpg" alt="" />
</div>
<div class="banner-topic"></div>
<div class="banner-form">
<form action="">
<input type="text" name="username" placeholder="Your Name" class="ynpe"/><br/><br/>
<input type="text" name="username" placeholder="Your Phone" class="ynpe"/><br/><br/>
<input type="text" name="username" placeholder="Your Email" class="ynpe"/><br/><br/>
<input type="text" name="username" placeholder="write your Comment here" class="netbook"/>
</form>
</div>
</div>
<!--ABOUT区-->
<div class="content-about"></div>
<!--GALLERY区-->
<div class="content-gallery"></div>
</div>
<!--底部区域-->
<div class="footer"></div>
</body>
</html>参考上面的代码，我对你的代码进行了详细的修改，借鉴一下。input框透明一般用 background-color: transparent; 不用透明度。
另外你定位的时候要找对相对的元素。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星