关于banner区文本框的问题
这文本框内部怎么设置透明呢？还有在这种Li或者Input标签上面用类选择器还可以生效吗？不知道我的这种设计输入框的思路是不是可行呢
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="CSS/common.css"> </head> <body> <div class="header"> <div class="logo"> <img src="images/logo.png" /> </div> <div class="menu"> <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"> <div class="banner"> <div class="beijin"> <div class="form"> <ul> <li><input type="text" value="your name"/></li> <li><input type="text" value="your email"/></li> <li><input type="text" value="your phone"/></li> <li><input type="text" value="write you comment here"/> </li> </ul> </div> </div> <div class="form"> </div> </div> <div class="about"> <div class="bg1"> <div class="top"> <div class="h3" id=""> <h3>ABOUT</h3> </div> <p>Xi Jinping, general secretary of the Central Committee of the Communist Party of China (CPC), presided over the 10th meeting of the central committee for deepening overall reform Monday.</p> <img src="images/bb3.jpg" /> </div> <div class="left"> <div class="p1"> <p> A WORD <br>ABOUT US </p> </div> <div class="p2"> <p> Xi Jinping, general secretary of the Central Committee of the Communist Party of China (CPC), presided over the 10th meeting of the central committee for deepening overall reform Monday. </p> <div class="btn"> <a href="#" class="btn-a"> <p>EXPLORE</p> </a> </div> </div> </div> <div class="right"> <div class="right-up"> <p>70000</p> <span>Student</span> </div> <div class="right-down"> <p>600</p> <span>Faculty</span> </div> </div> </div> </div> <div class="about2"> <div class="bg2"> <ul> <li> <div class="1"> <img src="images/b1.jpg"> </div> </li> <li> <div class="2"> <a href="#"><span>EXPLORE</span></a> </div> </li> <li> <div class="3"> <img src="images/b2.jpg"> </div> </li> <li> <div class="4"> <a href="#"><span>EXPLORE</span></a> </div> </li> <li> <div class="5"> <a href="#"><span>EXPLORE</span></a> </div> </li> <li> <div class="6"> <img src="images/b3.jpg"> </div> </li> <li> <div class="7"> <a href="#"><span>EXPLORE</span></a> </div> </li> <li> <div class="8"> <img src="images/b4.jpg"> </div> </li> </ul> </div> </div> <div class="gallery"> <div class="gallery-top"> <div class="h3" id=""> <h3>ABOUT</h3> </div> <p>Xi Jinping, general secretary of the Central Committee of the Communist Party of China (CPC), presided over the 10th meeting of the central committee for deepening overall reform Monday.</p> </div> <div class="middle"> <ul> <li> <img src="images/03-01.jpg" /> <div class="li-b"> <p>TESTTESTTEST</p> </div> </li> <li> <img src="images/03-02.jpg" /> <div class="li-b"> <p>TESTTESTTEST</p> </div> </li> <li> <img src="images/03-03.jpg" /> <div class="li-b"> <p>TESTTESTTEST</p> </div> </li> <li> <img src="images/03-04.jpg" /> <div class="li-b"> <p>TESTTESTTEST</p> </div> </li> <li> <img src="images/03-05.jpg" /> <div class="li-b"> <p>TESTTESTTEST</p> </div> </li> <li> <img src="images/03-06.jpg" /> <div class="li-b"> <p>TESTTESTTEST</p> </div> </li> </ul> </div> </div> </div> <div class="footer"> <div class="footer-b"> <p>@2016 imooc.com 京ICP备123456</p> </div> </div> </body> </html>
*{
padding: 0px;
margin: 0px;
}
a{
text-decoration: none;
}
.header{
width: 1910px;
height: 80px;
line-height: 80px;
background-color: #07cbc9;
position: fixed;
}
.header .logo img{
margin-left: 90px;
float: left;
margin-top: 15px;
}
.header .menu{
height: 80px;
line-height: 80px;
float: right;
color: white;
}
.header .menu li{
float: left;
line-height: 80px;
margin-right: 10px;
list-style: none;
}
.content{
width: 1910px;
height: auto;
overflow: hidden;
}
.content .banner{
margin-top: 80px;
}
.content .banner .beijin{
background-image: url(../images/banner3.jpg);
width: 1910px;
height: 600px;
background-repeat: no-repeat;
background-size:1910px 600px;
}
.content .banner .beijin input{
}
/* banner区表格设计 */
.content .banner .form{
/* float: left; */
/* position: absolute; */
}
.content .banner .form input{
/* color: white; */
border: ;
}
.about{
/* overflow: hidden; */
}
.content .about .bg1{
width: 1910px;
height: 800px;
}
.content .about .bg1 img{
margin: 300px 580px;
}
.content .about .bg1 H3{
float: left;
position: absolute;
font-size: 50px;
margin: 60px 800px ;
}
.content .about .bg1 .top p{
margin: 140px 740px;
width: 300px;
height: 100px;
word-wrap: break-word;
text-align: center;
position: absolute;
}
.about .bg1 .left .p1 p{
position: absolute;
font-size: 35px;
text-align: center;
margin: -650px 320px;
}
.about .bg1 .left .p2{
position: absolute;
width: 350px;
height: 200px;
border: darkgray 1px solid;
margin: -500px 320px;
font-size: 20px;
background: rgba(255,255,255,0.4);
padding: 10px;
}
.about .bg1 .left .p2 .btn .btn-a{
width: 50px;
}
.about .bg1 .left .p2 .btn .btn-a p{
font-size: 20px;
background-color: black;
padding: 10px 15px;
color: white;
border: black 2px solid;
margin: 8px 0;
display: inline-block;
}
.about .bg1 .right-up{
float: right;
width:200px;
height: 120px;
margin: -740px 400px;
border: #07CBC9 2px solid;
}
.about .bg1 .right-up p{
font-size: 35px;
line-height: 35px;
margin: 15px 55px;
}
.about .bg1 .right-up span{
font-size: 25px;
line-height: 25px;
margin: 0px 59px;
}
.about .bg1 .right-down{
float: right;
width:200px;
height: 120px;
margin: -560px 400px;
border: #07CBC9 2px solid;
}
.about .bg1 .right-down p{
font-size: 35px;
line-height: 35px;
margin: 15px 55px;
}
.about .bg1 .right-down span{
font-size: 25px;
line-height: 25px;
margin: 0px 59px;
}
.about2{
overflow: hidden;
}
.about2 .bg2 ul{
width: 1950px;
height: 950px;
}
.about2 .bg2 ul li{
list-style: none;
float: left;
border:black 1px solid;
width: 480px;
height: 400px;
background-color: #07CBC9;
border: #07CBC9;
}
.about2 .bg2 ul li img{
width: 480px;
height: 400px;
}
.about2 .bg2 li a{
background: #000000;
color: #FFFFFF;
/* height: 40px; */
display: inline-block;
margin: 300px 150px;
}
.about2 .bg2 li span{
padding: 35px;
font-size: 24px;
line-height: 50px;
}
.gallery {
width: 1920px;
/* height: 800px; */
overflow: hidden;
}
.gallery .gallery-top h3{
float: left;
position: absolute;
font-size: 50px;
margin: 60px 850px ;
}
.gallery .gallery-top p{
margin: 140px 740px;
width: 400px;
height: 100px;
word-wrap: break-word;
text-align: center;
position: absolute;
}
.gallery .middle{
margin-top: 288px;
margin-left: 260px;
width: 1500px;
}
.gallery .middle ul{
list-style: none;
}
.gallery .middle ul li{
float: left;
margin: 50px;
margin-bottom: 90px;
}
/* .gallery .middle .li-b{
width: 360px;
height: 70px;
background: #000000;
} */
/* 列表图片底部元素 */
.gallery .middle img{
display: block;
}
.gallery .middle .li-b p{
color: white;
background-color: black;
padding: 16px;
text-align: center;
}
.footer .footer-b p{
color: white;
background-color: #07cbc9;
font-size: 20px;
text-align: center;
padding: 25px;
}6
收起
正在回答 回答被采纳积分+1
3回答
芝芝兰兰
2019-09-12 17:06:13
同学你好。
1、遮罩层就像在图片上蒙上一层砂一样，具体实现就是使用一个背景颜色为半透明的div，大小和图片保持一致，使用定位将其定位在与图片相同的位置。这个在作业的评分标准中有提到呢
2、如果只有背景图和表单的情况下，同学那么实现也是可以的。但是这样就做不到遮罩层的效果了。也起不到我们题目的设计初衷，综合锻炼CSS定位的目的了呢
3、textarea在 HTML课程中 4-5节 html表单-3中有介绍~果使用<textarea></textarea>，文字可以自动在左上角显示，写满一行就可以自动换行，或者按enter键手动换行。如果是<input type="text">，只是单行文本无法换行。
祝学习愉快~
芝芝兰兰
2019-09-12 14:47:09
同学你好。
1、背景色变为透明可以使用 background-color: transparent; 来做到
2、在<body>之间的任何标签上都可以使用class属性，并通过类选择器选择
3、表格的思路有以下建议：
1）不建议使用ul li 的方式，同学可以试一下将ul和li都去掉，只用input。不仅没有li前的小黑点 · 而且还能显示为一纵列：
2）建议同学不要将这个form放在背景图片这个div中，而是和背景图并列，建议是这样的结构，保证表格能显示在遮罩层的上面：
3）至于表格的居中问题，可以给装表格的div设置定位。然后设置 right: 50%，使其右边缘距浏览器右边距离为整个页面的一半。然后给表格设置宽度例如500px，再使用margin-right设为负数-250px，比如将右边“往左拉”宽度的一半。使其对其到正中间。而top可以根据背景图片的高度进行设置。
如果解答了同学的疑问，望采纳~
祝学习愉快~
相似问题
关于banner盖住menu-box的问题
0
0
11
关于文本框和按钮的边框
5
0
2
banner区的文本框一直放不在图片上面
25
0
3
banner区中的文本css怎么写呀
11
0
1
关于文本框不等于空
11
0
3
登录后可查看更多问答，登录/注册
2. 从网页搭建入门JavaWeb
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星