本帖最后由 clearwater 于 2019-12-29 15:44 编辑
如果有几个input的表单，那么我在CSS中写样式是不是用name来区别？
以下代码，约 在html 18-23行。
<div class="search">
<input type="text" value="输入关键词" nanme="text">
<input type="button" name ="button">
</div>
那我在css中是不是要写：
. search input text,
. search input button
不过text, button并不是标签，能用吗？
怎么区别几个input?
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学而成－2</title>
<link rel="stylesheet" href="style-1.css">
</head>
<body>
<div class="header w">
<div class="logo"><img src="images/logo.png" alt=""></div>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规化</a></li>
</ul>
</div>
<div class="search">
<input type="text" value="输入关键词" nanme="text">
<!-- <img src="images/btn.png" alt=""> -->
<!-- <button></button> -->
<input type="button" name ="button">
</div>
</div>
</body>
</html>
[CSS] 纯文本查看 复制代码 * {
margin: 0;
padding: 0;
}
.w {
width: 1200px;
margin: auto;
}
li {
list-style: none;
}
button {
border: none;
}
body {
background-color: #f3f5f7;
}
.header {
width: 1200px;
height: 42px;
background-color: pink;
margin: 30px auto;
}
.logo {
float: left;
margin-right: 60px;
}
.nav {
float: left;
}
.nav ul li {
float: left;
}
.nav ul li a {
display: block;
height: 40px;
line-height: 40px;
padding: 0 10px;
margin-right: 20px;
font-size: 18px;
color: #050505;
text-decoration: none;
}
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
}
.search {
float: left;
margin-left: 70px;
}
.search input text {
float: left;
width: 340px;
height: 40px;
padding-left: 20px;
border: 1px solid #00a4ff;
border-right: none;
color: #ccc;
}
/*.search input button {
float: left;
width: 50px;
height: 42px;
background-color: purple;
background: url(images/btn.png) repeat;
}*/
你们没有图片，我截个图让你们看看，我按老师的方法抄写的代码，正确的结果。
| 
发表于 2019-12-29 15:30
|
发表于 2019-12-29 15:43
