页面发送信息01在网易搜寻里输出qq内部空间，找出官方网站步入。 02步入后，若是笔记本电脑发送信息有qq，会自动检测，弹出方便快捷发送信息，点选两个要发送信息的qq。 ......
2023-10-24 138
教你用html+css写出Uno牌
来源：互联网
2023-03-02 09:56:40 155
Uno是国外引进的一种适合多年龄段玩的纸牌游戏，因为它简单易学，玩家人数可多可少，迅速成为了老少皆宜的休闲游戏。Uno纸牌的样式十分好看，想练习css3的朋友可以看过来，看一看怎样使用html css3写出一张漂亮的Uno纸牌
工具/原料
- Uno纸牌图片
- notepad /Hbuilder/sublime等便于整理格式的编辑器
方法/步骤
首先我们需要分析一下整个牌的构造，以普通数字牌1为例。共可分为5个部分，分别是1、外框，2、颜色，3、上下角标数字，4、里面的白色椭圆，5、中间的大数字
对应不同的部分，我们将其分解为5部分的html代码并为其添加class
1、卡牌背景
2、卡牌颜色（由于布局相同只有颜色不同，故将颜色抽出成为单独的类）
3、上下角标数字
4、白色椭圆背景
5、大数字
以下均采用代码和效果图对比的方式展示效果
布好局之后，为其添加样式。首先新建css样式表，并将其关联至html文件
首先写背景的样式，按牌的比例写出宽高，留白使用padding来写，css3的新特性我们使用了如图的圆角和阴影，为牌制造立体的感觉
然后来写牌的背景颜色，Uno牌一共有黑红黄绿蓝5种颜色，因此我们只需要事先定义好这五种颜色，之后将其对应的类名添加进来就可以了。另外，因为上下角标的数字需要使用绝对定位，因此它们的父级元素就需要定义为相对定位
下面来写上下角标的数字，由于这里使用的是em行内元素标签，因此设置宽高的时候要记得display：inline-block。绝对定位到需要的位置，然后将右下角的数字使用css3的旋转函数180度旋转，就可以制造出倒过来的数字了
中间的白色椭圆要怎么画呢，我们知道border-radius的值与宽高相等可以画出圆形，那么当它的值为宽的一半比高的一半时，则可以画出椭圆形，这时我们再将它旋转到合适的角度，就可以得到想要的椭圆
最后就是中间的数字，由于它是椭圆形的子元素，因此椭圆形旋转的时候，它也跟着一起旋转，要想让它摆在一个比较正的位置，还应将它旋转回来。并为它挑选一个合适的字体
至此，我们的普通数字牌已经写好了，Uno还有几种功能牌的样式，也均可以用css3写出来，如果有朋友需要，我会陆续写经验出来。如果想要自己制作网页版Uno纸牌游戏，纯css3写出的纸牌可以比引入图片节省更多的空间，样式也比较灵活可控，很多纸牌样式也可以用相似方式写，希望对大家有所启发和帮助
注意事项
- 使用css3写样式的时候要注意浏览器版本，一些低版本浏览器不支持css3样式
- 这里的样式大部分只写了webkit内核浏览器，火狐等浏览器还需要额外为旋转、圆角、阴影等写兼容
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： 互联网
上一篇：电脑的好处和坏处 下一篇：如何利用互联网选购手机
相关文章
- 详细阅读
-
P站无法正常上岸进不去怎么办，怎样上岸Pixiv站-p站登录不上去详细阅读
很多讨厌ACG的小伙伴们大体上单厢采用P站，不过有天数是P站会难以恒定登入，这时如果什么样是好呢？接下去他们一起来看一看如果什么样登入Pixiv站操作方式01具体来说他们须......
2023-10-24 123
-
QQ浏览器怎样开启语音阅读？-qq浏览器怎么语音输入详细阅读
随著北欧国家中国经济和信息技术的产业发展，天数就显得至关重要以是当他们在QQ应用程序里看某一页面时我甘心优先选择听而并非去看那你晓得什么样才能在QQ应用程序迈入......
2023-10-24 118