CSS格式控制实现出错

xiaomaguohe2014 2017-11-13 05:28:05





<!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">



.loginbox {

	width:350px;

	height:320px;

	background: rgba(255,255,255,0.5);

	filter: alpha(opacity=50);

	box-shadow: 0 0 30px black;

	border-radius: 10px;

}

.title {

	height:50px;

	border-bottom:1px solid #cccccc;

	background: rgba(245,245,245,0.9);

	border-top-left-radius:10px;

	border-top-right-radius:10px;

	/*

	top:40px;

	position:relative;

	*/

}

.dl {

	float:left;

	line-height:50px;

	text-indent:10px;

}

.gb {

	float:right;

	font-size:16px;

	font-weight:bold;

	color: #ffffff;

	margin-right:10px;

}



.gb:hover{

	color: #000000;

	cursor: pointer;

}



/*

以下设置格式就好像不行了

*/

.logininfo inputname {

	width:65px;

	height:34px;

}



.logininfo inputvalue {

	width:220px;

	height:34px;

}



#btn {

	height:40px;

	border-radius: 5px;

	background: green;

	border: none;

	color: white;

	font-size: 25px;

	font-weight:400;

	text-align: center;

}



</style>



</head>



<body>

<div class="loginbox" id="loginbox">

	<div class="title" id="title">

    	<span><div class="dl" id="dl">用户登录</div></span>

        <span><div class="gb" id="gb">x</div></span>

    </div>

	

    <div class="logininfo" id="logininfo">

    	<form action="" method="post">

    	<p>

    	<span class="inputname" id="yhmname">用户名</span>

        <span class="inputvalue" id="yhm"><input type="text" placeholder="请输入用户名"/> </span>

        </p>

    	<p>

    	<span class="inputname" id="pwdname">密码</span>

        <span class="inputvalue" id="pwd"><input type="password" placeholder="请输入密码"/> </span>

        </p>        

     	<p>

    	<span class="inputname" id="yzmname">验证码</span>

        <span class="inputvalue" id="yzm"><input type="text" placeholder="请输入验证码" maxlength="4"/> </span>

        <span id="jsyzm"><input type="text" placeholder="JS生成验证码"/> </span>

        </p>

        <p><span id="btn"><input type="button" value="登录" /></span></p> 

        </form>      

    </div>    



</div>



</body>

</html>

<p><span id="btn"><input type="button" value="登录" style="height:40px;border-radius:5px;"/></span></p>
以btn为例，我把style写在input里面，就能实现对btn格式的调整，#btn{}这样写格式就不能调整，求大神指点，本人小白。

...全文

192 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

xiaomaguohe2014 2017-11-14

打赏
举报

引用 5 楼 jslang 的回复:

[quote=引用 2 楼 xiaomaguohe2014 的回复:] [quote=引用 1 楼 qq_29594393 的回复:] #btn{} --> #btn input[type=button]{}

@qq_29594393 ,按照你的改写的确能调整过来，但是我不是很懂这个逻辑那其他的.logininfo inputname {} 和 .logininfo inputvalue {}怎么写？ #btn input[type=button]{} 明明只有一个id=btn，那就应该#btn能定位到span的格式设置，为嘛还要这样写，#btn input[type=button]{}。最初我写的是class=btn，后来才改id=btn，就是因为只有一个btn的ID应该可以直接用#btn{}的，请解释一下逻辑。我是小白君，刚入门。 <div class="logininfo" id="logininfo"></dv> logininfo区域我想实现的效果如下：

[/quote] 你#btn{}设置的是span的样式。不是input的样式。相当于 <p><span id="btn" style="。。。。。。。。。。。。。"><input type="button" value="登录" /></span></p> #btn input {}的意思才是设置id等于btn的元素内部的input的样式 [/quote] 我不想再input 里面写style的原因就是这样写要重复写很多次，我直接把“用户名，密码，验证码”这几个汉字定义成一个类，input的几个框框定义成一个类，这样我只需要写一次style就好了，不用写很多次。

xiaomaguohe2014 2017-11-14

打赏
举报

引用 4 楼 jslang 的回复:

.logininfo .inputname {} inputname 是class前面要是加点（.）

我当时这样写的想法是logininfo这个大类下的类inputname 设置格式，类的名称可以重复，那我通过{ 元素,空格,元素}这种方式来控制指定的类格式。实际上我的想法错了。

xiaomaguohe2014 2017-11-14

打赏
举报

引用 5 楼 jslang 的回复:

[quote=引用 2 楼 xiaomaguohe2014 的回复:] [quote=引用 1 楼 qq_29594393 的回复:] #btn{} --> #btn input[type=button]{}

天际的海浪 2017-11-13

打赏
举报

引用 2 楼 xiaomaguohe2014 的回复:

[quote=引用 1 楼 qq_29594393 的回复:] #btn{} --> #btn input[type=button]{}

天际的海浪 2017-11-13

打赏
举报

.logininfo .inputname {} inputname 是class前面要是加点（.）

当作看不见 2017-11-13

打赏
举报

这个就没办法说了，实际是你的选择器选择的问题，如果你不能理解这个的话，建议查看选择器教程 http://www.runoob.com/cssref/css-selectors.html

xiaomaguohe2014 2017-11-13

打赏
举报

引用 1 楼 qq_29594393 的回复:

#btn{} --> #btn input[type=button]{}

@qq_29594393 ,按照你的改写的确能调整过来，但是我不是很懂这个逻辑
那其他的.logininfo inputname {} 和 .logininfo inputvalue {}怎么写？
#btn input[type=button]{} 明明只有一个id=btn，那就应该#btn能定位到span的格式设置，为嘛还要这样写，#btn input[type=button]{}。
最初我写的是class=btn，后来才改id=btn，就是因为只有一个btn的ID应该可以直接用#btn{}的，请解释一下逻辑。
我是小白君，刚入门。

<div class="logininfo" id="logininfo"></dv>
logininfo区域我想实现的效果如下：

当作看不见 2017-11-13