CSS如何绘制一个半圆

thbcm阅读(347)

前几天 W3Cschool 小编教大家用CSS绘制基本图形。那么我们现在开启新的篇章,学习一些特殊图形的画法。那么这篇文章,小编教大家用CSS如何绘制一个半圆。

先来看看最终效果:

源码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>W3Cschool-编程狮</title>
	<style type="text/css">
		#semi-circle{
			width: 200px;
			height: 100px;
			background-color: red;
			border-radius:100px 100px 0 0;/* 左上、右上、右下、左下 */
		}
	</style>
</head>
<body>
	<div id="semi-circle"></div>
</body>
</html>

上面的例子是绘制了一个上半圆,如果要绘制其他方向的半圆只需要修改​border-radius​的代码即可。

  • 上半圆:border-radius:100px 100px 0 0;
  • 下半圆:border-radius:0 0 100px 100px;
  • 左半圆:border-radius:100px 0 0 100px;
  • 右半圆:border-radius:0 100px 100px 0;

以上就是CSS如何绘制半圆的全部内容,是不是超级简单呢。

怎么看Python的安装路径?安装路径快速查找方法分享

thbcm阅读(303)

在使用 Python 开发的过程中,偶尔也会需要用到 Python 的安装路径,我相信很多小伙伴也会和我一样,经常会遇到忘记具体路径这样尴尬的情况。今天W3Cschool小编就和大家分享几种常用的, Python 安装路径查找方法。

第一种:

如果电脑是新配置的,盘中数据不多的情况下,直接使用搜索 Python ,是最简单的方法。

第二种:

win + R 键运行输入 CMD ,输入 ​Python​ 回车, ​import sys​ 回车, ​print(sys.path)​  回车,Python 的安装路径就会展示在结果中,可以直接复制出来使用。

第三种:

win + R 键运行输入 CMD ,输入 ​where python​ 。

怎么看 Python 的安装路径就为大家介绍到这里了,希望能对各位有所帮助。

JS如何实现输入框文字剩余字数提醒?(附源码)

thbcm阅读(355)

当我们开发一个网页时,经常会涉及到输入框的开发。由于数据库字符字段的限制,往往会对文字数量有所限制。如果在输入框旁边加上剩余字符的提醒,可以增强用户体验感。那么 JS 如何实现输入框文字剩余字数提醒呢?这篇文章告诉你。

先来看下实现效果:

源码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>W3Cschool-编程狮</title>
	<script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<script type="text/javascript">
$().ready(function(){
var ty = document.getElementById("cty");
var sentence=document.getElementById("sentence");
var minLen=document.getElementById("minLen");
var maxLen=document.getElementById("maxLen");
var leftLen=document.getElementById("leftLen");
sentence.onkeyup= function () {
maxLength = parseInt(maxLen.firstChild.nodeValue);
this.value = this.value.substr(0,maxLength);
var len = this.value.length;
minLen.firstChild.nodeValue = len;
leftLen.firstChild.nodeValue = maxLength-len;
};
});
</script>
<body>
<label>
<textarea name="sentence" id="sentence"></textarea>
<br/>
<em>
<span id="minLen">0</span>/<span id="maxLen">100</span>字,还能输入<span id="leftLen">100</span>字!
</em>
</label>
</body>
</html>

以上就是 JS 如何实现输入框文字剩余字数的全部内容。

HTML如何在图片上添加文字

thbcm阅读(331)

当我们开发一个页面,插入图片时,需要有一组文字对图片进行描述。那么HTML中如何在图片上添加文字呢?这篇文章告诉你。

先让我们来看下效果图:

句子“这是一张夜空图片”被放置在了图片的左下角。

那么这个是如何设置的呢。

首先我们要设计一个 div,将图片的和文字放置在 div 里面,设置文字的样式。随后需要用到“定位”,将 div 设置为父级,为相对定位,​position:relative​;将h1设置为绝对定位,​position:absolute​。在调整合适的位置即可。源代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>W3Cschool</title>
	<style>
		div{
			position: relative;
		}
		h1{font-size: 32px;
			color: white;
			position:absolute;
			top:250px;
			left:10px;}
	</style>
</head>
<body>
	<div>
		<img src="./image/night.png" alt="">
		<h1>这是一张夜空的图片</h1>
	</div>
</body>
</html>

图片素材:

以上就是 HTML 中如何在图片上添加文字问题的全部解答。同学们可以自行保存素材进行练习巩固。

CSS怎么让图片居中?如何让图片居中显示

thbcm阅读(307)

众所周知,HTMLCSS 结合后功能强大,可以做出千变万化的样式,那么你知道如何用 CSS 让图片居中显示吗?本篇文章告诉你

一、display:table-cell

HTML 代码如下:

<div class="img_wrap">
      <img src="../images/w3cschool.png">
</div>

CSS 代码如下

.img_wrap{
    width:700px;
    height:350px;
    border:1px dashed #ccc;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    }

效果图:

二、采用背景法

html 代码:

<div class="img_wrap"></div>

CSS 代码:

.img_wrap{
    width:700px;
    height:350px;
    border:1px dashed #ccc;
    background: url("../images/w3cschool.png") no-repeat center center;
    }

效果图:

三、line-height

此方法是在图片外用 p 标签,通过设置 line-height 使图片垂直居中:

HTML 代码:

<div class="img_wrap">
        <p><img src="../images/ss.png" alt=""></p>
</div>

CSS 代码:

.img_wrap{
    width:700px;
    height:350px;
    border:1px dashed #ccc;
    text-align: center;
}
.img_wrap p{
     width: 700px;
     height:350px;
     line-height: 350px;
}
.img_wrap p img{
     vertical-align: middle;
}

效果图:

以上就是三种使用 CSS 让图片居中的详细方法,想要学习更多 CSS 相关教程可点击:CSS微课HTML+CSS基础实战

Linux怎么安装Python?Ubuntu上安装Python建立编程环境流程

thbcm阅读(329)

今天 W3Cschool 小编为各位带来的是 Linux 怎么安装 Python ,很多 Linux 上默认都有安装只是版本可能会偏老一些,所以先要用命令检查一下系统中 Python 的版本号。

$ python3 --version

用户使用的如果是 Ubuntu 16.10或更高版本,建议直接使用命令:

$ sudo apt-get update
$ sudo apt-get install python3.92

用户使用的是其他 Ubuntu 版本的系统,建议使用 deadsnakes PPA 来安装 Python 3.92

$ sudo apt-get install software-properties-common
$ sudo add-apt-repository ppa:deadsnakes/ppa
$ sudo apt-get update
$ sudo apt-get install python3.92

也有用户使用的是有预装 Python 3的 Linux 发行版,如果没有预装可以使用发行版内置的包管理工具,例如使用 Fedora 中的 dnf :

$ sudo dnf install python3

Linux 怎么安装 Python 就为大家介绍到这里了,希望能对各位有所帮助,更多问题可以到我们的 Python 栏目进行查阅。

HTML怎么引入JS?

thbcm阅读(354)

JavaScript 是现如今最受程序员喜爱的前端编程语言之一,它的功能强大,能为网页添加动态交互功能,本篇文章告诉你如何将 JavaScript 导入 HTML 中。

一、使用​<script>​标签

我们可以使用​<script>​标签把 JavaScript 代码引入到 HTML 文档中。

代码如下:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS - 编程狮(w3cschool.cn)</title>
</head>
<body>
    <script>
        console.log("使用JavaScript")
    </script>
</body>
</html>

你的浏览器在运行此代码时,会自动识别其 JavaScript 脚本代码中的<script>……</script>。并执行​<script>​中的代码,接着将此结果返回至 HTML,然后在浏览器页面中显示。

在浏览器页面中通过​<script>​标签引入 javaScript 代码,其中​<script>​标签的位置可以在​<head>​标签内和​<body>​标签内任何地方都是可行的,但还是建议大家将​<script>​标签放在​<body>​标签内。这样做的好处是 javaScript 代码可以在整个页面加载完成之后读取。

二、嵌入外部的 JS 文件

嵌入外部的 JS 文件,指的是把 JavaScript 写入一个 JS 文件内,它是以 .js 为后缀保存文件,接着再通过​<script>​标签的 src 语法嵌入到 HTML 中

代码如下:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS - 编程狮(w3cschool.cn)</title>
</head>
<body>
    <script src="w3cschool.js"></script>
</body>
</html>

代码中的 w3cshool.js 就是我们写 JavaScript 的外部文件名,src 属性指的是引入外部的 JavaScript 文件路径,它通常都是相对路径。

三、JavaScript 伪url引入

在大部分支持使用 JavaScript 脚本的浏览器中,我们可以通过 JavaScript 的伪 URL 地址去调用语句从而嵌入 JavaScript 脚本代码。伪 URL 地址的一般格式:JavaScript:alert(“点击按钮跳出 “)。这里我们可以看出,伪 URL 地址语句一般以 JavaScript 开始,已我们的需求结尾。

代码如下:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS - 编程狮(w3cschool.cn)</title>
</head>
<body>
    <button value="点击" onclick="JavaScript:console.log('点击此按钮')"></button>
</body>
</html>

以上就是小编总结的 HTML怎样引入JS 的全部内容了,喜欢 JavaScript 的同学还可以进入以下教程学习:JavaScript微课JavaScript基础实战

Python怎么拼接字符串?

thbcm阅读(338)

使用 Python 过程中偶尔会遇到需要拼接字符的情况,今天小编就来和大家分享五种常用的方法,相信看完后能解决大家 Python 怎么拼接字符串的疑问。

第一种使用​+​号来实现:

print('Love'+'Python')

输出结果为:LovePython

第二种使用​,​号来实现:

print('Love','Python')

输出结果为:Love Python

第三种为第一种的变形,字符之间有无空格不影响输出结果:

print('Love''Python')

输出结果为:LovePython

第四种方式格式化:

print('%s %s' % ('Love', 'Python'))

输出结果为:Love Python

第五种方式可以使用​join​来拼接。

str_list = ['Love', 'Python']
print(''.join(str_list))

输出结果为:LovePython

Python怎么拼接字符串?就为大家介绍到这里了,如果还存在其他疑问可以移步 W3Cschool 官网进行学习。

HTML如何设置字体样式?

thbcm阅读(385)

我们开发一个页面时,会经常涉及到文字部分。HTML 默认的字体样式为宋体,12px。如果我们不想设置字体为宋体的话,需要为它更改样式。HTML 字体样式的更改需要用到 CSS。

CSS 常用的字体属性有五种:​font-style​、​font-weight​、​font-size​、​font-family​、​font​。

  • font-style:设置斜体。​normal​是正常字体,​italic​设置斜体。
p{font-style:italic}

  • font-weight:设置字体粗细。​normal​是正常,​bold​是字体加粗,​100-900​是粗细程度。
p{font-weight:bold;}
p{font-weight:400;}

  • font-size:设置字体大小。
p{font-size:24px;}

  • font-family:设置字体风格,如微软雅黑,楷体,宋体······
p{font-family:"楷体";}

  • font:同时给字体设置斜体,加粗,大小,字体,每一个值之间用空格隔开,且必须严格按照顺序执行。
p{font:italic bold 24px "楷体";}

以上就是 HTML 如何设置样式的全部内容。更多 HTML 的学习请浏览 HTML 教程

HTML5怎么样?

thbcm阅读(313)

HTML 相信没学过编程的都会认识,它的知名度不可谓不高,那么你知道它的新版本 HTML5 嘛?HTML5的功能在又上了一个档次,本篇文章小编为你介绍 HTML5。

HTML5介绍

2014年10月29日,万维网联盟正式宣布了 HTML5规范,HTML 是万维网最核心的超文本标记语言。万维网不等同于互联网,但它是依靠互联网运行的服务之一,万维网又简写为 www,它可以实现在互联网的帮助下,访问由许多互相链接的超文本组成的系统。

从1999年发布了 HTML4.01之后,到2014年经历十五年才推行 HTML,中间还出现了 WHATWG 和 XHTML2.0 两种规范,最后双方合并成全新的 HTML5 版本。

传言 HTML5 手机应用上运行缓慢并且漏洞百出,目前还不适合进行大规模推广,但这些问题都是可以优化的,并且 HTML5 手机应用有着可以在网页上直接调试和修改的优点,不需要再重复地编码和调试,相信未来 HTML5 手机应用的普及率只会越来越高。

HTML5新版本特性

1、HTML5淘汰了较为过时或冗余的 HTML 属性

2、增加了 Indexed DB 的本地存储功能

3、直接在浏览器中显示图形或动画,脱离 Flash 和 Silverlight

4、增加了 HTML5 文档到另一个文档间的拖放功能

5、提供外部应用与浏览器内部数据间的开放接口

HTML5的缺点

欧洲网络信息安全机构已经发出警告,HTML5 可能并不够安全。

HTML5 还没有被各大浏览器所支持

HTML5 要求技术必须全部开放,而这可能触及到一些大公司的利益

HTML5未来展望

随着移动化的进程,HTML5 终将成为主流。

毕竟,它更为简单、更为规范、相对于初学者而言更加友好。

HTML5新特性

用于绘画的 canvas 元素

标签 描述
<canvas> 标签定义图像,比如图表和其它图像。该标签基于 Javascript 的绘图 API

用于媒介回放的 video 和 audio 新多媒体元素

标签 描述
<audio> 定义音频内容
<video> 定义视频(video 或者 movie)
<source> 定义多媒体资源<video>和<audio>
<embed> 定义嵌入的内容,比如插件。
<track> 为诸如<video>和<audio>元素之类的媒介规定外部文本轨道

用于表单的 datalist 新表单元素

标签 描述
<datalist> 定义选项列表。请于 input 元素配合使用该元素,来定义 input 可能的值
<keygen> 规定用于表单的密钥对生成器字段
<output> 定义不同类型的输出,比如脚本的输出

用于新的语义和结构的新元素

标签 描述
<article> 定义页面独立的内容区域
<aside> 定义页面的侧边栏内容
<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置
<command> 定义命令按钮,比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框,比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption> 定义<figure>元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分。
<progress> 定义任何类型的任务的进度。
<rudy> 定义 ruby 注释(中文注音或字符)。
<rt> 定义字符(中文注音或字符)的解释或发音。
<rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节(section、区段)。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。

HTML5 已移除的元素

以下的 HTML 4.01 元素在 HTML5 中已经被删除:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

以上就是关于 HTML5介绍和应用的全部内容了,想要学习更多 HTML5知识可以进入:HTML5基础入门HTML5新特性实战

联系我们