交互式网站定义,藁城专业网站建设,哪个网站有做形象墙,做网站 什么语言通过divcss和部分布局的作用#xff0c;实现了#xff0c;如下效果的计算器展示页面![C%]R$IGDK4J(%3LJXD3]SY.png#xff0c;废话不多说#xff0c;最主要的还是分享代码#xff1a;html#xff1a;Title.计算器-口 X编辑(E)查看(V)帮助(H)BackspaceCECMC789/sqrtMR456*…通过divcss和部分布局的作用实现了如下效果的计算器展示页面![C%]R$IGDK4J(%3LJXD3]SY.png废话不多说最主要的还是分享代码htmlTitle.计算器-口 X编辑(E)查看(V)帮助(H)BackspaceCECMC789/sqrtMR456*%MS123-1/xM0/-.css样式表body{margin: 0 auto;}.counter-body{position: absolute;top: 200px;left: 200px;border: 2px solid #3335e5;width: 245px;height: 210px;border-radius: 5px;background: rgba(217, 217, 217, 0.49);}.counter-title{line-height: 26px;width: 100%;background: #3335e5;color:#fff;}.counter-title div{display: inline-block;}.counter-title div:first-child{margin-right: 70px;}.counter-title div:nth-child(4){background: red;}.counter-title div:nth-child(2){font-size: 18px;}.counter-title div:nth-child(2),.counter-title div:nth-child(4){padding-left: 9px;padding-right: 9px;}.counter-title div:nth-child(2),.counter-title div:nth-child(3),.counter-title div:nth-child(4){border-radius: 2px;height: 22px;border: 1px solid #FFFFFF;}.counter-title div{padding: 0 6px 2px 6px;}.content-title {display: table;}.content-title div{padding-left: 10px;text-align: center;line-height: 22px;display: table-cell;font-size: 12px;}.counter-content-input{padding-left: 10px;}.counter-content-input input{height: 15px;text-align: right;width: 220px;}.counter-content-btn-row{vertical-align: middle;margin-top: -15px;padding: 25px 10px;}.counter-content-btn-col1 div:first-child{background: rgba(247, 247, 247, 0.87);text-shadow: 5px 5px 3px #bfbfbf ;color: #fff;width: 16px;line-height: 15px;}.counter-content-btn-col1 div:nth-child(2){background: rgba(247, 247, 247, 0.87);width: 65px;padding: 1px 1px;}.counter-content-btn-col1 div{color: red;background: rgba(247, 247, 247, 0.87);padding: 1px 1px;height: 15px;border-radius: 2px;text-align: center;display: inline-block;font-size: 10px;margin: 0 1.5px;border: 1px solid #858585;width: 46px;}.counter-content-btn-row div:nth-child(2),.counter-content-btn-row div:nth-child(3),.counter-content-btn-row div:nth-child(4){color: blue;}.counter-content-btn-row div:nth-child(4n1){color: red;}.counter-content-btn-col div:first-child{background: rgba(247, 247, 247, 0.87);margin-right: 4px;}.counter-content-btn-col div{background: rgba(247, 247, 247, 0.87);display: inline-block;border-radius: 2px;text-align: center;display: inline-block;font-size: 10px;margin: 0 2px;border: 1px solid #858585;width: 24.38px;height: 15px;}.counter-content-btn-col1,.counter-content-btn-col{color: red;line-height: 15px;margin: 1.5px 0 ;}.counter-content-btn-col div:last-child{width: 25px;}其中Paste_Image.png在这个部分实现的时候出现一个小问题就是有个前边儿的无字小方框本来是一个空格就可以搞定但是由于空格撑不起来所以在div相应的部分加入了空格nbsp这个应该是或是这次实现过程中出现的一个小问题吧另外说一点在这次实现的过程中用到了很多伪类选择器也相当于是对伪类选择器的一次练手吧加油吧~~~fighting^-^
