纯CSS换肤


30行代码实现纯CSS—3种换肤

老规矩,先把代码给大家,拿去粘贴直接用,无需引用,不好用评论底下随便喷,我一条一条看。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{background-color: #eee}
input{display: none;}
label{position: relative;display: block;width: 70px;height: 30px;text-align: center;line-height: 30px;margin:10px;cursor: pointer;border: 1px #000 solid;z-index: 3;}
#int1+label{background-color: red}
#int2+label{background-color: pink}
#int3+label{background-color: orange}
div{width: 100%;height: 100%;position:absolute;top:0px;left:0px;}
#int1:checked+label+div{background-color: red}
#int2:checked+label+div{background-color: pink}
#int3:checked+label+div{background-color: orange}
</style>
</head>
<body>
<input type="radio" name="only" id="int1">
<label for="int1"></label>
<div></div>
<input type="radio" name="only" id="int2" checked>
<label for="int2"></label>
<div></div>
<input type="radio" name="only" id="int3">
<label for="int3"></label>
<div></div>
</body>
</html>

结构说一下,用途说一下,咱们下次再见

首先在html中搭建好input、label、div,最好是紧贴着的,比如input1、label1、div1、input2、label2、div2。。。这种,因为取名字太麻烦,这样简单省事
我把方法教给大家,添加上自己的类或id就可以随意更改使用了。

具体的样式都写在style中了,大家去看的话也是一目了然,详细的样式规则和中文释义都在上一篇博客中,链接在这里

html界面换肤

点击蓝色字体就可以跳转至上一篇博客,大致略读就可完全了解其中内容。

强调一点,input是这样写的:

<input type="radio" name="only" id="int1">

input是单标记标签,type是类型,radio意味着单选按钮,但如何实现单选是一个重点。
规定input[type=radio]的name必须相同,否则无法实现单选。所以三个input的name都是only意为 “ 唯一 ” ;

id值用于跟label连接,实现点击label就等同于点击input的效果,为了好看,后期我们是要让input消失的

<label for="int1"></label>

本章的难点在选择器上,如果放到大网页里,那种数千行的代码,我们不能再这样写选择器,容易起冲突。
最保险的写法就是:

body>input[type=“radio”]+label+div

这句话的意思是选中body下方的直接子元素,并且它的type值等于radio,等等
这里选中的并不是它,关键在“ + ”,这是兄弟选择器符号,意为选中该input下边的第一个lable,该label下边的第一个div,最终被选中的只有div,这是重点,被选中的只有div,鼠标点击只有div的颜色才会被切换。

checked意为“默认选中”,

我给int2添加了checked就是想页面刚打开的时候不是白色,有一个默认值。
CSS中的checked意义不同,意为此时被选中,那么我执行…



自我感觉挺详细的,如果某一处不是特别理解,请评论在下方,本人常在,祝大家学习愉快。

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

纯CSS换肤

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 纯CSS换肤
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏