这篇文章主要为大家展示了“如何使用css3制作登录框”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用CSS3制作登录框”这篇文章吧。 html代码如
这篇文章主要为大家展示了“如何使用css3制作登录框”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用CSS3制作登录框”这篇文章吧。
html代码如下:
<body>
<divclass="wrapper">
<divclass="header">Loginto<span>love.ly</span></div>
<ul>
<li>
<divclass="text">
<spanclass="yonghu"></span><inputtype="text"placeholder="IconDeposit">
</div>
</li>
<li>
<divclass="passWord">
<spanclass="mima"></span><inputtype="password"placeholder="••••••••••••••">
</div>
</li>
<liclass="remember">
<inputtype="checkbox">RememberMe</li>
<li>
<ahref="">ForGotusernameorpassword?</a>
</li>
<li>
<inputtype="button"value="Login">
</li>
</ul>
</fORM>
<divclass="footer">
<p>Love.lyPersonalBlog.PSDTemplate<ahref="">Copyright©2012MattGentile</a></p>
<p><ahref="">Love.lyHome</a>|<ahref="">Bolg</a>|<ahref="">Work</a>|<ahref="">TermsofUse</a>|<ahref="">ContactMe</a></p>
</div>
</div></body>
form{background:#cccccc;width:260px;height:260px;margin:35pxauto;padding:30px;box-shadow:0px1px2px1px#aaaaaa,
inset0px1px1pxrgba(255,255,255,0.7);border-radius:3px;
}
box-shadow语法:
E{box-shadow:<length><length><length>?<length>?||<color>}
也就是:E{box-shadow:insetx-offsety-offsetblur-radiusspread-radiuscolor}
换句说:
对象选择器{box-shadow:投影方式X轴偏移量Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}
以上是“如何使用CSS3制作登录框”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网JavaScript频道!
--结束END--
本文标题: 如何使用CSS3制作登录框
本文链接: https://lsjlt.com/news/89502.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0