整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

HTML和CSS中的几何图形

TML和CSS中的几何图形案例

HTML代码

<div class="container"></div>
<div class="container2"></div>
<div class="container3"></div>
<div class="container4"></div>
<div class="star"></div>
<div class="star2"></div>
<div class="star3"></div>
<div class="star4"></div>
<div class="star5"></div>
<div class="star6"></div>
<div class="center"></div>
<div class="center2"></div>
<div class="center3"></div>
<div class="center4"></div>
<div class="center5"></div>
<div class="center6"></div>

css代码

html,body,div {width:100%;height:100%;}
body {background:#2f2933;overflow:hidden;}
div {
 position:absolute;
 left:0;
 right:0;
 top:0;
 bottom:0;
 margin-right:auto;
 margin-left:auto;
 margin-top:auto;
 margin-bottom:auto;
}
.container,.center6 {
 background-color:#ffffa6;
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffa6),color-stop(1, #bdf271));
 background-image: -o-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%);
 background-image: -moz-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%);
 background-image: -webkit-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%);
 background-image: -ms-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%);
 background-image: linear-gradient(to bottom, #ffffa6 0%, #bdf271 100%);
}
.container2,.center5 {
 background-color:#bdf271;
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #bdf271),color-stop(1, #29d9c2));
 background-image: -o-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%);
 background-image: -moz-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%);
 background-image: -webkit-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%);
 background-image: -ms-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%);
 background-image: linear-gradient(to bottom, #bdf271 0%, #29d9c2 100%);
 -webkit-animation-delay:200ms;
 -moz-animation-delay:200ms;
 -o-animation-delay:200ms;
 animation-delay:200ms;
}
.container3,.center4 {
 background-color:#29d9c2;
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #29d9c2),color-stop(1, #01a2a6));
 background-image: -o-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%);
 background-image: -moz-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%);
 background-image: -webkit-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%);
 background-image: -ms-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%);
 background-image: linear-gradient(to bottom, #29d9c2 0%, #01a2a6 100%);
 -webkit-animation-delay:400ms;
 -moz-animation-delay:400ms;
 -o-animation-delay:400ms;
 animation-delay:400ms;
}
.container4,.center {
 background-color:#f4f4f4;
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f4f4f4),color-stop(1, #2f2933));
 background-image: -o-linear-gradient(bottom, #f4f4f4 0%, #2f2933 100%);
 background-image: -moz-linear-gradient(bottom, #f4f4f4 0%, #2f2933 100%);
 background-image: -webkit-linear-gradient(bottom, #f4f4f4 0%, #2f2933 100%);
 background-image: -ms-linear-gradient(bottom,#f4f4f4 0%, #2f2933 100%);
 background-image: linear-gradient(to bottom, #f4f4f4 0%, #2f2933 100%);
 -webkit-animation-delay:600ms;
 -moz-animation-delay:600ms;
 -o-animation-delay:600ms;
 animation-delay:600ms;
}
.container,.container2,.container3,.container4 {
 -webkit-animation:container 1s infinite linear;
 -moz-animation:container 1s infinite linear;
 -o-animation:container 1s infinite linear;
 animation:container 1s infinite linear;
 opacity:0.5;
}
.container{
 width:400px;
 height:400px;
 border-radius:200px;
 z-index:6;
}
.container2 {
 width:500px;
 height:500px;
 border-radius:250px;
 z-index:5;
}
.container3 {
 width:600px;
 height:600px;
 border-radius:300px;
 z-index:4;
}
.container4 {
 width:700px;
 height:700px;
 border-radius:350px;
 z-index:3;
}
.star,.star:after,.star2,.star2:after,.star3,.star3:after,.star4,.star4:after,.star5,.star5:after,.star6,.star6:after {
 width: 0;
 height: 0;
 border-left: 130px solid transparent;
 border-right: 130px solid transparent;
}
.star,.star2,.star3,.star4,.star5,.star6 {top:-5%;}
.star:after,.star2:after,.star3:after,.star4:after,.star5:after,.star6:after {
 position: absolute;
 content: "";
 top: 60px;
 left: -130px;
}
.star {border-bottom: 250px solid #ff4669;z-index:12;}
.star:after {border-top: 250px solid #ff4669;}
.star2 {
 border-bottom: 250px solid #ff86c1;
 z-index:11;
 -webkit-transform: rotate(-30deg) translateX(-15px) translateY(0px);
 -moz-transform: rotate(-30deg) translateX(-15px) translateY(0px);
 -o-transform: rotate(-30deg) translateX(-15px) translateY(0px);
 transform: rotate(-30deg) translateX(-15px) translateY(0px);
}
.star2:after {border-top: 250px solid #ff86c1;}
.star3{
 border-bottom: 250px solid #ff4691;
 z-index:10;
 -webkit-transform: rotate(-35deg) translateX(-15px) translateY(0px);
 -moz-transform: rotate(-35deg) translateX(-15px) translateY(0px);
 -o-transform: rotate(-35deg) translateX(-15px) translateY(0px);
 transform: rotate(-35deg) translateX(-15px) translateY(0px);
}
.star3:after {border-top: 250px solid #ff4691;}
.star4{
 border-bottom: 250px solid #ff4691;
 z-index:9;
 -webkit-transform: rotate(-40deg) translateX(-15px) translateY(0px);
 -moz-transform: rotate(-40deg) translateX(-15px) translateY(0px);
 -o-transform: rotate(-40deg) translateX(-15px) translateY(0px);
 transform: rotate(-40deg) translateX(-15px) translateY(0px);
}
.star4:after {border-top: 250px solid #ff4669;}
.star5{
 border-bottom: 250px solid #ff4669;
 z-index:8;
 -webkit-transform: rotate(-45deg) translateX(-15px) translateY(0px);
 -moz-transform: rotate(-45deg) translateX(-15px) translateY(0px);
 -o-transform: rotate(-45deg) translateX(-15px) translateY(0px);
 transform: rotate(-45deg) translateX(-15px) translateY(0px);
}
.star5:after {border-top: 250px solid #ff4669;}
.star6{
 border-bottom: 250px solid #ff4669;
 z-index:7;
 -webkit-transform: rotate(-50deg) translateX(-15px) translateY(0px);
 -moz-transform: rotate(-50deg) translateX(-15px) translateY(0px);
 -o-transform: rotate(-50deg) translateX(-15px) translateY(0px);
 transform: rotate(-50deg) translateX(-15px) translateY(0px);
}
.star6:after {border-top: 250px solid #ff4669;}
.center,.center2,.center3,.center4,.center5,.center6 {
 -webkit-animation:container 1s infinite linear;
 -moz-animation:container 1s infinite linear;
 -o-animation:container 1s infinite linear;
 animation:container 1s infinite linear;
 opacity:0.5;
}
.center {
 width:60px;
 height:60px;
 border-radius:30px;
 z-index:13;
}
.center2 {
 width:50px;
 height:50px;
 border-radius:25px;
 background:#2f2933;
 z-index:14;
}
.center3 {
 width:40px;
 height:40px;
 border-radius:20px;
 background:#2f2933;
 z-index:15;
}
.center4 {
 width:30px;
 height:30px;
 border-radius:15px;
 z-index:16;
}
.center5 {
 width:20px;
 height:20px;
 border-radius:10px;
 z-index:17;
}
.center6 {
 width:10px;
 height:10px;
 border-radius:5px;
 z-index:18;
}
/*animation container*/
@-webkit-keyframes container {
 0% {-webkit-transform:rotate(0deg);transform:rotate(0deg);}
 100% {-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@-moz-keyframes container {
 0% {-moz-transform:rotate(0deg);transform:rotate(0deg);}
 100% {-moz-transform:rotate(360deg);transform:rotate(360deg);}
}
@-o-keyframes container {
 0% {-o-transform:rotate(0deg);transform:rotate(0deg);}
 100% {-o-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes container {
 0% {transform:rotate(0deg);}
 100% {transform:rotate(360deg);}
}

本文来源于codepad

（本文如有侵权，请联系作者，必删）

kinter（也叫Tk接⼝）是Tk图形⽤户界⾯⼯具包标准的Python接⼝。Tk是⼀个轻量级的跨平台图形⽤户界⾯（GUI）开发⼯具。

Tkinter是Python自带的官方标准库，安装Python之后直接导入就可以使用，我们常见的python IDLE就是使用TKinter实现的。

在Win10命令行窗口输入python、import tkinter、dir(tkinter)、help(tkinter)，可获得tkinter的相关帮助信息。

help(tkinter)命令的执行结果，列出了模块帮助文档的链接： https://docs.python.org/3.10/library/tkinter.html

实现打开并显示图片的源代码如下：


import tkinter as tk

import tkinter.filedialog

from PIL import Image,ImageTk

#选择并显示图片

def choosepic():

path_ = tkinter.filedialog.askopenfilename()

path.set(path_)

print(path)

img_open = Image.open(entry.get())

#img = ImageTk.PhotoImage(img_open.resize((200,200)))

img = ImageTk.PhotoImage(img_open)

lableShowImage.config(image=img)

lableShowImage.image = img

if __name__ == '__main__':

#生成tk界面 app即主窗口

app = tk.Tk()

#修改窗口titile

app.title("显示图片")

#设置主窗口的大小和位置

app.geometry("800x400+200+200")

#Entry widget which allows displaying simple text.

path = tk.StringVar()

entry = tk.Entry(app, state='readonly', text=path,width = 100)

entry.pack()

#使用Label显示图片

lableShowImage = tk.Label(app)

lableShowImage.pack()

#选择图片的按钮

buttonSelImage = tk.Button(app, text='选择图片', command=choosepic)

buttonSelImage.pack()

#buttonSelImage.pack(side=tk.BOTTOM)

#Call the mainloop of Tk.

app.mainloop()


假设将源代码保存在文件“d:\temp\MyShowImage.py”。在命令行执行命令

python d:\temp\MyShowImage.py

程序运行，界面如下图所示

Tkinter（也叫Tk接⼝）是Tk图形⽤户界⾯⼯具包标准的Python接⼝。Tk是⼀个轻量级的跨平台图形⽤户界⾯（GUI）开发⼯具。

Tkinter是Python自带的官方标准库，安装Python之后直接导入就可以使用，我们常见的python IDLE就是使用TKinter实现的。

在Win10命令行窗口输入python、import tkinter、dir(tkinter)、help(tkinter)，可获得tkinter的相关帮助信息。

help(tkinter)命令的执行结果，列出了模块帮助文档的链接： https://docs.python.org/3.10/library/tkinter.html

实现打开并显示图片的源代码如下：

import tkinter as tk

import tkinter.filedialog

from PIL import Image,ImageTk

#选择并显示图片

def choosepic():

path_ = tkinter.filedialog.askopenfilename()

path.set(path_)

print(path)

img_open = Image.open(entry.get())

#img = ImageTk.PhotoImage(img_open.resize((200,200)))

img = ImageTk.PhotoImage(img_open)

lableShowImage.config(image=img)

lableShowImage.image = img

if __name__ == '__main__':

#生成tk界面 app即主窗口

app = tk.Tk()

#修改窗口titile

app.title("显示图片")

#设置主窗口的大小和位置

app.geometry("800x400+200+200")

#Entry widget which allows displaying simple text.

path = tk.StringVar()

entry = tk.Entry(app, state='readonly', text=path,width = 100)

entry.pack()

#使用Label显示图片

lableShowImage = tk.Label(app)

lableShowImage.pack()

#选择图片的按钮

buttonSelImage = tk.Button(app, text='选择图片', command=choosepic)

buttonSelImage.pack()

#buttonSelImage.pack(side=tk.BOTTOM)

#Call the mainloop of Tk.

app.mainloop()


假设将源代码保存在文件“d:\temp\MyShowImage.py”。在命令行执行命令

python d:\temp\MyShowImage.py

程序运行，界面如下图所示


点击“选择图片”按钮，弹出打开文件对话框，

选择要打开的图片文件，点击“打开”按钮，图片就会显示在图形界面上了，如下图所示：



上述代码实现了图片的选择和显示功能，但也有不足之处，比如“没有滚动条，无法完全显示比屏幕大的图片”。

相关参考网页

（1）https://blog.csdn.net/xyzhan/article/details/113856833 （2021年开发Python图形用户界面（GUI）的6种最佳Python GUI框架）

（2）https://wenku.baidu.com/view/8f03733bf9d6195f312b3169a45177232e60e44d.html （推荐8款常⽤的PythonGUI图形界⾯开发框架）

（3）https://github.com/honghaier-game/TKinterDesigner （honghaier-game/TKinterDesigner）

（4）https://blog.csdn.net/HG0724/article/details/112248635 （Python之Tkinter进行GUI开发）

（5）https://blog.csdn.net/wj0807/article/details/120890111 （在tkinter中显示图片和图片名）

（6）https://www.cnpython.com/qa/58793 （如何在gui中使用tkinter显示图像）

（7）https://m.php.cn/article/419452.html （python idle是什么）

（8）https://docs.python.org/3.10/library/tkinter.html （tkinter — Python interface to Tcl/Tk）

（9）https://blog.csdn.net/tyler880/article/details/106862322?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-106862322-blog-112248635.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-106862322-blog-112248635.pc_relevant_aa&utm_relevant_index=2 （python GUI编程(Tkinter)）

（10）https://www.cnpython.com/qa/308976 （用滚动条在Tkinter中显示多个图像）

维网和其它网络类型最大的区别就是它在网页上可呈现丰富多彩的色彩和图像，还可以播放音频、视频，及把图像作为链接使用。

一、图片格式

网络上流行的图片格式主要有jpg、jpeg、png、gif等，以下是这几种格式的介绍。

1、gif格式

gif采用LZW压缩，是以压缩相同颜色色块来减少图像大小。由于LZW压缩不会造成任何品质的损失，且压缩率高，支持动画效果，很适合互联网平台，但是它只支持256种颜色。

2、jpg或jpeg格式

以JPEG有损压缩图片，通常用来保存超过256色的图片格式。JPEG压缩过程会对一些图像数据造成损失，这部分损失不影响图片显示，一般人眼是看不出来差异的。损失数据越多，图片就越不清晰。

3、png格式

png是一种非破坏性的网页图像文件格式，它以最小的方式压缩图片且不造成图片数据损失。它不仅支持像gif大部分优点，还支持48 bit的色彩，跨平台的图像亮度控制，更多层的透明度设置。

二、使用图片

网页中通过<img>标签插入图片，语法如下：

<img src="图片路径" alt="替换文本" />

具体示例：

<!DOCTYPE HTML>
<html>
<body>
<p>
一幅图像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅动画图像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p>
</body>
</html>

效果如下：

替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。

<img src="boat.gif" alt="Big Boat">

当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好地显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

图像宽度和高度属性

如下代码，在网页中插入一个宽度和高度都是300像素的图片。

<img src="/i/ct_netscape.jpg" width="300px" height="300px" />

图片超链接

如下代码，在网页中对一个图片进行超链接设置，点击这张图片就会跳转到其它页面。

<a href="页面路径"><img src="/i/ct_netscape.jpg" /></a>

创建图像热区链接

除了对整个图片进行超链接设置外，还可以将图像划分成不同区域进行链接设置，比如一张地图中给每个省份图形进行超链接。

图像热区链接，使用usemap 属性通过#name指定到名叫name的map元素上，map定义了每个热区点击区域形状、大小、坐标等。
area标签的 shape 属性有三种，rect 方形，circle 圆形，poly 多边形。coords 属性定义坐标点位置，相对于图片左上角位置。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<p>点击太阳或其他行星，注意变化：</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
</body>
</html>

效果可参考 https://www.w3cschool.cn/html5/html5-img.html 这里。

可以看到鼠标在图片上点击小行星会打开对应的图片。

到此网页中使用图片已经大体介绍了，自己亲手写下，会加深印象，感谢关注。

上篇：前端入门——html 超链接

下篇：前端入门——html 如何在网页中使用视频音频


在线咨询
上一篇：你不可不知的HTML优化技巧，还不抓紧时间收藏
下一篇：十天学会html+css第九天 悬浮窗口固定定位 #网站

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 高碑店市 阳原县 北市区 建湖县 潮阳区 龙湾区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服