首页 > 其他分享 >第七章 利用CSS和多媒体美化页面

第七章 利用CSS和多媒体美化页面

时间:2024-11-02 22:46:23浏览次数:3  
标签:style 多媒体 color 标签 list 页面 border CSS 属性

7.1 CSS链接美化

7.1.1.文字链接的美化

在HTML5中,<a></a >标签始终定义超链接,用于从一张页面链接到另一张页面,<a>元素最重要的属性是href 属性,它指示链接的目标,如果未设置 href属性,后续多个属性均无法使用,则只是超链接的占位符。

在谷歌浏览器中,鼠标悬停链接时无明显效果。设计者为了改变这种最基本的超链接样式,利用前面章节所讲的伪类选择器,按照"a: link→a: visited→a: hover→a: active→”的顺序,设置不同的链接访间状态效果,为文本超链接添加复杂而多样的样式。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>课堂练习</title>
		<style type="text/css">
			#menu{
				text-align: center;
			}
			a{
				margin: 10px;
			}
			a:link{
				font-size: 20px;
			}
			a:hover{
				font-size: 18px;
				color: red;
				text-decoration: overline underline;
			}
			a:active{
				font-size: 20px;
				color: green;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<h2>服务中心菜单栏</h2>
			<a href="index.html" target="_blank">加入我们</a>
			<a href="index.htm2" target="_blank">媒体报道</a>
			<a href="index.htm3" target="_blank">官方博客</a>
			<a href="index.htm4" target="_blank">帮助中心</a>
		</div>
	</body>
</html>

执行结果如下(包括链接未被访问,鼠标悬停链接,链接活动)

7.1.2按钮链接美化

为了让链接外观看起来像按钮特效,设计者会为链接加上不同的边框阴影和相同的背景颜色加以实现。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>课堂练习</title>
		<style type="text/css">
			#menu{
				text-align: center;
			}
			a{
				font-size: 20px;
				font-weight: 700;
				text-decoration: none;
				background-color: lightcyan;
				color: red;
				margin: 5px;
				padding: 10px 15px;
				border-radius: 30px;
			}
			a:link,a.visited{
				box-shadow: -5px -5px 10px black;
			}
			a:hover{
				font-size: 26px;
			}
			a:active{
				font-size: 20px;
				box-shadow: 6px 6px 10px black;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<h2>服务中心菜单栏</h2>
			加入我们
			媒体报道
			官方博客
			帮助中心
		</div>
	</body>
</html>

执行结果如下(包括链接未被访问,鼠标悬停链接,链接活动)

7.1.3背景链接的美化

除了文字链接和按钮链接,设计者还会为链接设置不同的背景颜色或背景图片,实现背景链接

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>课堂练习</title>
		<style type="text/css">
			#menu{
				text-align: center;
			}
			a{
				font-size: 20px;
				text-decoration: none;
				padding: 10px 15px;
				margin:-3px;
			}
			a:link,a.visited{
				background-color: lightgrey;
				color: red;
			}
			a:hover{
				background-color: brown;
				color: white;
			}
			a:active{
				font-weight: 700;
				color: lawngreen;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<h2>服务中心菜单栏</h2>
			<a href="#" target="_blank">加入我们</a>
			<a href="#" target="_blank">媒体报道</a>
			<a href="#" target="_blank">官方博客</a>
			<a href="#" target="_blank">帮助中心</a>
		</div>
	</body>
</html>

执行结果如下(包括链接未被访问,鼠标悬停链接,链接活动)

变式示例代码(背景颜色更换为背景图片)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>课堂练习</title>
		<style type="text/css">
			#menu{
				text-align: center;
			}
			a{
				font-size: 20px;
				text-decoration: none;
				padding: 10px 15px;
				margin:-3px;
			}
			a:link,a.visited{
				/*background-color: lightgrey;
				color: red;*/
				background-image: url(img/menu_1.jpg);
				color: red;
			}
			a:hover{
				/*background-color: brown;
				color: white;*/
				background-image: url(img/menu_2.jpg);
				color: white;
			}
			a:active{
				font-weight: 700;
				color: lawngreen;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<h2>服务中心菜单栏</h2>
			<a href="#" target="_blank">加入我们</a>
			<a href="#" target="_blank">媒体报道</a>
			<a href="#" target="_blank">官方博客</a>
			<a href="#" target="_blank">帮助中心</a>
		</div>
	</body>
</html>

执行结果如下(包括链接未被访问,鼠标悬停链接,链接活动)

7.2 CSS列表的美化

在CSS样式中,主用是通过 list-style-type、list-style-image 和 list-style-position这3个属性改变列表修饰符的类型。常用的CSS列表属性见下表

常用的CSS列表属性
属性说明
list-style复合属性,在一个声明中设置所有的列表属性
list-style-type设置列表项标记的类型
list-style-image使用图像来替换列表项的标记
list-style-position设置在何处放置列表项标记

7.2.1 列表项类型(list-style-type)

此属性用来设置或检索对象的列表项所使用的标记类型。若 list-style-image 属性值为none 或指定url地址的图片不能被显示时,此属性将发生作用。常用的list-style-type属性值见下表。

常用的 list-style-type 属性值
属性值说明属性值说明
disc默认值,标记是实心圆circle标记是空心圆
square标记是实心方块decimal标记是阿拉伯数字
lower-roman标记是小写罗马数字upper-roman标记是大写罗马数字
lower-alpha标记是小写英文字母upper-alpha标记是大写英文字母
none无列表项标记

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			.lxs{
				list-style-type: decimal;
			}
			.houduan{
				list-style-type: circle;
			}
		</style>
	</head>
	<body>
		<div>
			<h3>测试工程</h3>
			<ol class="ceshi">
				<li>吴</li>
				<li>胡</li>
				<li>吴</li>
				<li>洪</li>
			</ol>
			<h3>后端工程师</h3>
			<ol class="houduan">
				<li>罗</li>
				<li>叶</li>
				<li>徐</li>
				<li>黄</li>
			</ol>
		</div>
	</body>
</html>

执行结果如下

7.2.2.列表项图像(list-style-image)

此属性用来设置或检索对象的列表项标记的图像。常用的list-style-image列表属性见下表

list-style-image列表属性值
属性值说明
none默认值,无图形被显示
url图像的路径
inherit规定从父元素继承值

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			li{
				width: 100px;
				border: 2px solid #000000;
			}
			.ceshi{
				list-style-image: url(img/list1.jpg);
				list-style-position: outside;
			}
			.houduan{
				list-style-image: url(img/list2.jpg);
				list-style-position: inside;
			};
		</style>
	</head>
	<body>
		<div>
			<h3>测试工程</h3>
			<ol class="ceshi">
				<li>吴</li>
				<li>胡</li>
				<li>吴</li>
				<li>洪</li>
			</ol>
			<h3>后端工程师</h3>
			<ol class="houduan">
				<li>罗</li>
				<li>叶</li>
				<li>徐</li>
				<li>黄</li>
			</ol>
		</div>
	</body>
</html>

执行结果如下

示例代码(为列表设置内边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			li{
				width: 100px;
				border: 2px solid #000000;
		    }
			.ceshi{
				list-style: url(img/list1.jpg) outside;
			}
			.houduan{
				list-style: url(img/list2.jpg) inside;
			}
		</style>
	</head>
	<body>
		<div>
			<h3>测试工程</h3>
			<ol class="ceshi">
				<li>吴</li>
				<li>胡</li>
				<li>吴</li>
				<li>洪</li>
			</ol>
			<h3>后端工程师</h3>
			<ol class="houduan">
				<li>罗</li>
				<li>叶</li>
				<li>徐</li>
				<li>黄</li>
			</ol>
		</div>
	</body>
</html>

执行结果如下

7.2.4.复合列表样式(list-style)
这个属性是设定列表项样式的一个快捷的综合写法。用这个属性可以同时设置列表项类型属性(list-style-type),列表项图片属性(list-style-image)和列表项位置属性(list-style-position)。
语法:list-style: list-style-type | list-style-position | list-style-image

list-style: list-style-type | list-style-position | list-style-image

注:list-style 属性可以不设置其中的某个值,未设置的属性会使用其默认值

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			li{
				width: 100px;
				border: 2px solid #000000;
			}
			.ceshi{
				list-style: decimal url(img/list1.jpg) outside;
			}
			.houduan{
				list-style: circle url(img/list2.jpg) inside;
			}
			.qianduan li{
				padding-left: 10px;
			}
		</style>
	</head>
	<body>
		<div>
			<h3>测试工程</h3>
			<ol class="ceshi">
				<li>吴</li>
				<li>胡</li>
				<li>吴</li>
				<li>洪</li>
			</ol>
			<h3>后端工程师</h3>
			<ol class="houduan">
				<li>罗</li>
				<li>叶</li>
				<li>徐</li>
				<li>黄</li>
			</ol>
		</div>
	</body>
</html>

执行结果如下

7.2.5.利用背景图像实现列表项标记

虽然使用 list-style-image 属性很容易实现设置列表项图像的目的,但这个属性不能够精确控制图像替换的项目符号距离文字的位置。因此,可以利用 background-image 加以实现

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
	</head>
	<style type="text/css">
		li{
			list-style-type: none;
			background: url(img/list4.jpg) no-repeat;
			padding-left: 25px;
			padding-bottom: 10px;
		}
	</style>
	<body>
		<h3>快递公司</h3>
		<ol>
			<li>邮政快递</li>
			<li>顺丰快递</li>
			<li>京东快递</li>
			<li>圆通速递</li>
			<li>百世汇通</li>
			<li>申通快递</li>
			<li>韵达快递</li>
		</ol>
	</body>
</html>

执行结果如下

7.3 CSS表格的美化

7.3.1.border-collapse

border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是按照标准的HTML 中那样分开显示。
语法:border-collapse: separate | collapse | inherit

border-collapse: separate | collapse | inherit

参数:separate 是默认值,边框分开不合并,不会忽略 border-spacing 和 empty-cells属性。collapse 边框合并,如果相邻,则共用一个边框,会忽略 border-spacing 和empty-cells属性。Inherit是从父元素继承值。

示例代码(表格边框合成)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			table{
				border-collapse: collapse;
				/*border-collapse: separate;*/
			}
			table,td,th{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>课程</th>
				<th>学分</th>
				<th>考试形式</th>
			</tr>
			<tr>
				<td>SQL数据库技术</td>
				<td>4.0</td>
				<td>笔试</td>
			</tr>
			<tr>
				<td>PHP程序设计</td>
				<td>6.0</td>
				<td>机考</td>
			</tr>
		</table>
	</body>
</html>

执行结果如下

示例代码(表格边框未合成)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			table{
				/*border-collapse: collapse;*/
				border-collapse: separate;
			}
			table,td,th{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>课程</th>
				<th>学分</th>
				<th>考试形式</th>
			</tr>
			<tr>
				<td>SQL数据库技术</td>
				<td>4.0</td>
				<td>笔试</td>
			</tr>
			<tr>
				<td>PHP程序设计</td>
				<td>6.0</td>
				<td>机考</td>
			</tr>
		</table>
	</body>
</html>

执行结果如下

7.3.2..border-spacing

border-spacing 属性作用等同于标签属性 cellspacing,即当表格边框独立时(border-collapse 属性等于separate),相邻单元格边框之间的横向和纵向的间距。

语法:border-spacing: length

border-spacing: length

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			.one{
				border-collapse: separate;
				border-spacing: 10px;
			}
			.two{
				border-collapse: separate;
				border-spacing: 10px 30px;
			}
			table,td{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table class="one">
			<tr>
				<td>大数据</td>
				<td>物联网</td>
			</tr>
			<tr>
				<td>云计算</td>
				<td>人工智能</td>
			</tr>
		</table>
		<br />
		<table class="two">
			<tr>
				<td>大数据</td>
				<td>物联网</td>
			</tr>
			<tr>
				<td>云计算</td>
				<td>人工智能</td>
			</tr>
		</table>
	</body>
</html>

执行结果如下

7.3.3.caption-side

caption-side 属性设置或检索表格标题在表格的哪一边,此属性必须和表格的caption标签同时使用。
语法:caption-side: top | right | bottom | left

caption-side: top | right | bottom | left

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			.cap{
				caption-side: bottom;
			}
			table,th,td{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table class="cap">
			<caption><h2>值班表</h2></caption>
			<tr>
				<th>时间</th>
				<th>值日生</th>
			</tr>
			<tr>
				<td>8:00-12:00</td>
				<td>张红敏</td>
			</tr>
			<tr>
				<td>14:00-17:00</td>
				<td>李凯全</td>
			</tr>
			<tr>
				<td>19:00-22:00</td>
				<td>曾天艺</td>
			</tr>
		</table>
	</body>
</html>

执行结果如下

7.3.4.empty-cells

empty-cells属性设置或检索当表格的单元格无内容时,是否显示该单元格的边框。只有当表格边框独立时(即 border-collapse 属性等于 separate)此属性才起作用。
语法:empty-cells: show | hide

empty-cells: show | hide

参数:show 是默认值,指定当表格的单元格无内容时,显示该单元格的边框。hide指定当表格的单元格无内容时,隐藏该单元格的边框

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			.emp{
				border-collapse: separate;
				empty-cells: hide;
			}
			table,th,td{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table class="emp">
			<tr>
				<td>有内容的单元格</td><td>有内容的单元格</td>
			</tr>
			<tr>
				<td>有内容的单元格</td><td></td>
			</tr>
			<tr>
				<td>有内容的单元格</td><td>有内容的单元格</td>
			</tr>
		</table>
	</body>
</html>

执行结果如下

7.4 多媒体的添加与美化

7.4.1.<embed>标签的使用

利用<embed>标签可以在网页中插人各种类型的多媒体文件,如WMV、MP3、AV、MP4、SWF、 MOV、RMVB等。但是在使用<embed>标签之前,需要安装相应的插件,否则多媒体文件不能正常播放。

常用的embed属性
属性说明
src必选项,定义嵌入内容的URL
type定义嵌入内容的类型
width定义嵌入内容的宽度
height定义嵌入内容的高度

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>	
    </head>
	<body>
<!-- /* 7.4.1.<embed>标签的使用 */ -->
		<h1>插入动画:阳春三月</h1>
		<embed src="media/阳春三月.swf"></embed>
		<h1>插入音频:听!是谁在唱歌</h1>
		<embed src="media/听!是谁在唱歌.mp3"></embed>
		<h1>插入视频:第五空间</h1>
		<embed src="media/第五空间.mp4"></embed>
	</body>
</html>

执行结果如下

7.4.2.<bgsound>标签的使用

<bgsound>是IE浏览器中设置网页背景音乐的元素,利用它可以将音乐文件嵌人到网页中又不占页面空间,可以播放的声音文件格式包括WAV、AU、MIDI、MP3等

常用的 bgsound 属性
属性说明
src必选项,定义嵌入内容的 URL
loop该属性表明音频被播放的次数,取值“-1”为无限循环
balance该属性取值在-10000到+10000,它决定扬声器之间的音量如何分配
yolume该属性取值在-10000到0,它决定音频的音量大小
delay该属性设置音频的播放延时

注:由于<bgsound>标签的非标准特性,所以设置网页背景音乐时,一些主流的浏览器常用的方法还是使用<embed>标签。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
	</head>
	<body>
		<h2>童话镇-背景音乐</h2>
		<embed src="media/童话镇.mp3"></embed>
	</body>
</html>

执行结果

7.4.3.HTML5新增的多媒体标签
以前大多数音频、视频是通过插件(例如Flash)来播放的,然而并非所有的浏览器都拥有同样的插件。
HTML5 新增了audio 和video元素,分别用来插入声音和视频。至于格式,只要使用支持HTML5的浏览器就可以了,不需要使用其他的任何插件。<audio>和<video>标签的属性大致相同,见下表

常用的<audio>和<video>标签属性
属性说明
autoplay定义音频或视频在就绪后马上播放
controls定义控件的显示(比如播放/暂停按钮)
loop定义音频或视频结束时是否重新开始播放
preload规定当网页加载时,音频或视频是否默认被加载以及如何被加载。如果使用“aut0rplay”,则忽略该属性
src必选项,定义音频或视频的 URL
height设置视频播放器的高度
width设置视频播放器的宽度
1.<audio>标签

  <audio>标签定义声音,比如音乐或其他音频流,此标签默认是隐藏的。

  由于IE8或更早版本的I浏览器不支持<audio>标签,所以可以在<audio>和</audio>之间放置文本内容,这些文本信息将会被显示在那些不支持<audio>标签的浏览器中。
<audio>标签允许包含多个<source>标签,<source>标签可以链接不同的音频文件,浏览
要将使用第一个可识别的格式。

代码如下:

<audio controls="controls">
<source src="media/Easy. ogg" type="audio/ogg" ></source>
<source src="media/铃铛.mp3" type=" audio/mp3"></source>
</audio>
2.<video>标签

<video>标签定义视频,例如电影片段或其他视频流。<video>标签在页面中嵌入视频的代码和<audio>标签的使用相似。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>	
    </head>
	<body>
		<h1>audio标签插入音频:</h1>
		<audio src="media/铃铛.mp3" controls="controls"></audio>
		<h1>vidio标签插入视频:</h1>
		<video src="media/第五空间.mp4" controls="controls"></video>
	</body>
</html>

执行结果如下

7.5 综合案例——海洋旅游胜地

做一个如下图所示的网页

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>海洋旅游胜地</title>
		<style type="text/css">
			body{
				background-image: url(img/bg-0.jpg);
			}
			.all{
				margin: 0px auto;
				width: 700px;
				height: 600px;
				background-image: url(img/bg.jpg);
			}
			.top{
				width: 700px;
				height: 100px;
				background-image: url(img/top.jpg);
			}
			.menu{
				width: 700px;
				height: 60px;
				text-align: center;
			}
			.left,.right{
				width: 350px;
				height: 440px;
				float: left;
			}
			a{
				font-size: 13px;
				font-weight: 700;
				text-decoration: none;
				background-color: lightcyan;
				color: red;
				margin: 20px;
				padding: 10px 15px;
				border-radius: 10px;
			}
			a:link,a:visited{
				box-shadow: 6px 6px 10px black;
			}
			a:hover{
				font-sise: 14px;
			}
			a:active{
				font-size: 13px;
				box-shadow: -5px -5px 10px black;
			}
			h3{
				color: brown;
			}
			ol{
				list-style-image: url(img/list2.jpg);
				list-style-type:upper-alpha;
			}
			table{
				border-collapse: separate;
				border-spacing: 20px;
				
			}
			p{
				text-indent: 2em;
				line-height: 22px;
				font-weight: 700;
				color: brown;
			}
		</style>
	</head>
	<body>
		<div class="all">
		<div class="top"></div>
		<div class="menu">
		<br>
			<a hrer="#" target="_blank">交通路况</a>
			<a hrer="#" target="_blank">娱乐设施</a>
			<a hrer="#" target="_blank">美食特产</a>
			<a href="#" target="_blank">历史文化</a>
			<a hrer="#" target="_blank">注意事项</a>
		</div>
		<div class="left">
			<h3>新闻动态</h3>
			<ol>
				<li>英比奥山顶景区</li>
				<li>新加坡空中缆车</li>
				<li>天际线斜坡滑车</li>
				<li>圣淘沙名胜世界</li>
				<li>海洋馆和水上探险乐园</li>
			</ol>
			<video src="media/第五空间.mp4" width="320px" height=" 250px" controls ="controls"></video>
		</div>
		<div class="right">
		<table>
			<tr>
				<td><img src="img/table1.jpg"/></td>
				<td><img src="img/table2.jpg"/></td>
			</tr>
			<tr>
				<td><img src="img/table3.jpg"/></td>
				<td><img src="img/table4.jpg"/></td>
			</tr>
		</table>
			<p>这里不过是个平凡的小岛,岛上居民过着简单质朴的生活。当新加坡政府正式收回这个小岛时,决定将它改造成一个休闲度假的胜地。</p>
			<br><br><br>
			<audio src="media/铃铛.mp3" controls ="controls" loop="loop"></audio>
			</div>
		</div>
	</body>
</html>

执行结果如下

标签:style,多媒体,color,标签,list,页面,border,CSS,属性
From: https://blog.csdn.net/songboy1/article/details/143138996

相关文章

  • CSS 3 弹性盒子(常用属性)
    弹性盒子是一种页面布局形式,使用弹性盒子进行布局可根据需求适配不同尺寸屏幕大小flex-direction:控制父容器里子容器排列方式flex-direction:row  默认排列方式(水平横向从左至右排列)flex-direction:row-reverse  反向排列(水平横向从右至左)flex-direction:column  ......
  • HTML&CSS:旋转的动态卡片
    效果演示这段代码创建了一个具有动态背景和渐变效果的卡片。卡片背景有一个无限循环的旋转动画,增加了视觉吸引力。这种效果可以用于展示个人信息、项目介绍或其他需要吸引用户注意的内容。HTML<divclass="card"><h3>前端Hardy</h3></div>CSShtml,body{......
  • 91.北极熊动物主题网页 Web前端网页制作 大学生期末大作业 html+css
     一、更多推荐欢迎来到我的CSDN主页!您的支持是我创作的动力!Web前端网页制作、网页完整代码、大学生期末大作业模板案例、技术交流等,有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅:仙女网页设计-CSDN博客关注作者,点赞收藏博文,获取更多源码,3Q!二、网......
  • html结合js设计一个可拍照可录制可下载的摄像头页面
    功能如下 下载后的照片或视频为当前北京时间 html文件用户设置样式,代码如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"&......
  • docker对nginx.conf进行修改后页面无变化或页面报错
    可能是因为没有重启nginx容器可以执行dockerrestartnginx重启nginx试试引入了其他的配置文件本人安装的是docker默认的nginx,自带了一个default.conf的配置文件,并且在nginx.conf中还引入了这个文件,后面我还对nginx.conf添加了一个server并且端口号都是80,在打印dockerl......
  • swiftui之页面跳转数据连接
    importSwiftUIstructDesignCode:View{@Statevarshow=false@StatevarviewState=CGSize.zerovarbody:someView{ZStack{TitleView().blur(radius:show?20:0)......
  • 部分程序在缓存文件中占比过大时会导致网站页面显示空白
    清除缓存登录网站后台如果您的网站后台仍然可以访问,首先登录后台管理界面。清空缓存在后台管理界面中找到缓存管理功能,清空所有缓存。常见的缓存管理位置包括:WordPress:仪表盘>设置>性能Discuz!:后台>工具>清理缓存DedeCMS:系统>系统基本参数>更新系统缓......
  • 无法显示页面,因为发生内部程序错误
    问题原因:web.config 文件在Windows操作系统云虚拟主机的子目录或二级目录下存在时,可能会导致内部程序错误,因为云虚拟主机不支持这些目录中的 web.config 文件。解决步骤:重命名 web.config 文件:进入子目录或二级目录。将 web.config 文件重命名为其他名称,例......
  • HTML期末大作业~我的家乡(洛阳城)旅游网页设计作业成品(HTML+CSS+JavaScript)
    一、......
  • python在word的页脚插入页面
    1、插入简易页码importwin32com.clientaswin32fromwin32com.clientimportconstantsimportosdoc_app=win32.gencache.EnsureDispatch('Word.Application')#打开word应用程序doc_app.Visible=Truedoc=doc_app.Documents.Add()footer=doc.Sections(1).Foo......