html5 图灵完备,css图灵完备

浏览器需支持css3

对格子点击，格子的内容会在点和圈之间切换

如果有任意三个格子内容是圈，下方p标签的内容为connected

如果没有三个格子内容是圈，下方p标签的内容为not_connected

css-connect-three

body {

-webkit-animation: bugfix infinite 1s;

margin: 0.5em 1em;

}

@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

input {

-webkit-appearance: none;

display: block;

float: left;

border-right: 2px solid #ddd;

border-bottom: 2px solid #ddd;

padding: 0px 8px;

margin: 0;

font-family: Consolas, "Courier New", monospace;

font-size: 30pt;

}

input:nth-of-type(-n+7) {

border-top: 2px solid #ddd;

}

input:nth-of-type(7n+1) {

border-left: 2px solid #ddd;

}

input:before {

content: "·";

}

input:checked:before {

content: "○";

}

label {

display: none;

display: block;

clear: both;

}

p {

clear: both;

}

p:after {

content: "not_connected";

}

/*这下面是你要提交的CSS*/

/*input:checked ~ input:checked ~ input:checked ~ p:after {

content: "connected";

}*/

/*横*/

input:checked+input:checked+input:checked ~ p:after {

content: "connected";

}

/*竖*/

input:checked+*+*+*+*+*+*+*+input:checked+*+*+*+*+*+*+*+input:checked ~ p:after {

content: "connected";

}

/*右斜*/

input:checked+*+*+*+*+*+*+*+*+input:checked+*+*+*+*+*+*+*+*+input:checked ~ p:after {

content: "connected";

}

input:checked+*+*+*+*+*+*+*+*+input:checked+*+*+*+*+*+*+*+*+input:checked ~ input:checked ~ p:after {

content: "not_connected";

}

/*左斜*/

input:checked+*+*+*+*+*+*+input:checked+*+*+*+*+*+*+input:checked ~ p:after {

content: "connected";

}

/*这上面是你要提交的CSS*/

html5 图灵完备,css图灵完备相关推荐

Web开发：HTML5、CSS、JavaScript必备教程
2019独角兽企业重金招聘Python工程师标准>>> Web开发:HTML5.CSS.JavaScript必备教程想开启Web开发的智慧之门吗?想DIY炫酷的网页特效设计吗?想通 ...
how to learn html5,HTML5与CSS基础
你将学到什么 How to write a Web page Concepts of a markup language Basics of HTML5 and CSS Web design and ...
伪元素在父元素中居中_web前端Html5开发CSS之元素五大居中方式，实用又简单！...
大家是不是对元素居中的知识点很是模糊?是不是苦于找不到一个总结的通俗易懂的说明?是不是自己懒得去总结?今天小编在前端的学习与实践中总结出的元素的五大居中方式,黏贴了代码并对代码做了解释,希望对迷茫的有 ...
HTML5 JavaScript CSS 表单实现购物优惠打折
HTML5 JavaScript CSS 表单实现购物优惠打折文章目录 HTML5 JavaScript CSS 表单实现购物优惠打折前言一.CSS代码如下,通过外链接实现交互. 二.HTML5 ...
慕课学习史上最全零基础入门HTML5和CSS笔记
慕课学习史上最全零基础入门HTML5和CSS笔记 Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的 ...
css 修改文字基准线_HTML4/HTML5 用CSS或style属性修改 hr 实线虚线点线双实线样式 ... ......
HTML4/HTML5 用CSS或style属性修改实线虚线点线双实线样式 HTML 是 Hyper Text Markup Language 的英文缩写,中文称为超文本标记语言.HTML 是 ...
微信小程序为什么不用HTML5、CSS，自己搞了个WXML、WXSS，很多框架用不了，好处一点不知道？
转 https://www.zhihu.com/question/51809406 微信小程序为什么不用HTML5.CSS,自己搞了个WXML.WXSS,很多框架用不了,好处一点不知道,以前项目根本没 ...
HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白
HTML5纯css实现爱心动画效果DW来自程序员的浪漫表白一.拉面版 css部分 *{/* 初始化页面元素内外边距*/margin:0;padding: 0;}body{/* 弹性布局元素垂直水平居 ...
使用html5+javascript+css实现单机版五子棋---跟电脑打没赢过
Html5+JavaScript+CSS实现单机版五子棋: 运行环境-除了老版的IE浏览器,其他都行: 源码需要请:请点赞留言邮箱: 需要录屏软件:请点赞留言邮箱: html5实现五子棋

html5 图灵完备,css图灵完备

html5 图灵完备,css图灵完备相关推荐

最新文章

热门文章