小李带你玩转html—07

最新推荐文章于 2024-07-18 15:09:01 发布
最新推荐文章于 2024-07-18 15:09:01 发布
阅读量78 收藏
点赞数
分类专栏： html 文章标签： html web css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44171009/article/details/109642108
版权

超级链接a的修饰

html结构：超级链接a

<a href="www.baidu.com" target="_blank"></a>
  1. a的4个状态
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>a标签的四个状态</title>
	</head>
	<style type="text/css">
		
			*{
				margin: 0;
				padding: 0;
			}
			a:link{
				color: khaki;
				/*访问之前的状态*/
			}
			a:visited{
				color:red
				/*访问之后的状态*/
			}
			a:hover{
				color: salmon;
				/*鼠标移动到超链接的颜色*/
			}
			a:active{
				color:green;
				/*鼠标按住不动的颜色*/
			}
		
	</style>
	<body>
		<a href="http://wwww.baidu.com" target="_blank">点击跳转到度娘</a>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
访问顺序l o v e h a t e
2.a标签的实际应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>a标签的实际应用</title>
	</head>
	<style type="text/css">
		body{
				font-size: 20px;
				color: #333;
				line-height: 50px;
				font-family: "微软雅黑";
				font-weight: bold;
				
				
				text-decoration: none;
				
			}
		*{
			padding: 0;
			margin: 0;
		}
		a{
			display: block;
			width: 200px;
			height: 50px;
			border: 1px solid #000;
			background: pink;
			color: #333;
			text-decoration: none;
			text-align: center;
		}
		a:hover{
			background: green;
			color: #FFFF00;
		}
		a:active{
			background: skyblue;
			color: red;
		}
	</style>
	<body>
			<a href="https://www.bilibili.com" target="_blank">点击跳转到度娘</a>
	</body>
</html>

效果图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

background背景

background是一个复合属性
①background-color 背景色
例子： 简易导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简单导航栏</title>
	</head>
	<style type="text/css">
		*{
 			padding: 0;
 			margin: 0;
		}
		ul{
			list-style: none;
		}
		.nav{
			width: 960px;
			background: #ccc;
			margin: 50px auto;
			overflow: hidden;
			font-size: 14px;
			font-family: "微软雅黑";
			color: #252525;
			line-height: 30px;
			text-align: center;
		}
		.nav ul{
			overflow: hidden;
		}
		.nav ul li{
			float: left;
			width: 120px;
		}
		.nav ul li a {
			display: block;
			width: 120px;
			height: 30px;
			color: #252525;
			text-decoration: none;
		}
		.nav ul li.current a{
			background: skyblue;
			color: #fff;
			font-weight: bold;
		}
		.nav ul li a:hover{
			background: rgba(135,206,235,0.5);
			color: #fff;
			font-weight: bold;
		}
	</style>
	<body>
		<div class="nav">
			<ul>
				<li class="current"><a href="#">首页</a></li>
				<li><a href="#">产品</a></li>
				<li><a href="#">新闻</a></li>
				<li><a href="#">服务</a></li>
				<li><a href="#">合作</a></li>
				<li><a href="#">技术</a></li>
				<li><a href="#">招聘</a></li>
				<li><a href="#">联系我们</a></li>
			</ul>
		</div>
	</body>
</html>

效果图
在这里插入图片描述
在这里插入图片描述

②background-image背景图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>background-image</title>
	</head>
	<style type="text/css">
		*{
 			padding: 0;
 			margin: 0;
		}
		.box{
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			background-image: url(images/123.jpg);
			margin: 100px;
		}
	</style>
	<body>
		<div class="box">
			
		</div>
	</body>
</html>

在这里插入图片描述
③.背景重复background-repeat
属性值：
repeat 默认值，整个背景区域重复
no-repeat 不重复
repeat-x 水平方向重复
repeat-y 垂直方向重复

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景重复</title>
	</head>
	<style type="text/css">
		*{
 			padding: 0;
 			margin: 0;
		}
		.box{
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			background-image: url(images/3.jpg);
			background-repeat: repeat-x;
			margin: 100px;
		}
	</style>
	<body>
		<div class="box">
			
		</div>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景重复</title>
	</head>
	<style type="text/css">
		*{
 			padding: 0;
 			margin: 0;
		}
		.box{
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			background-image: url(images/3.jpg);
			background-repeat: repeat-y;
			margin: 100px;
		}
	</style>
	<body>
		<div class="box">
			
		</div>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景重复</title>
	</head>
	<style type="text/css">
		*{
 			padding: 0;
 			margin: 0;
		}
		.box{
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			background-image: url(images/3.jpg);
			background-repeat: repeat;
			margin: 100px;
		}
	</style>
	<body>
		<div class="box">
			
		</div>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景重复</title>
	</head>
	<style type="text/css">
		*{
 			padding: 0;
 			margin: 0;
		}
		body{
			background-image: url(images/back.jpg);
		}
		.box{
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			background-image: url(images/3.jpg);
			background-repeat: repeat;
			margin: 100px;
		}
	</style>
	<body>
		<div class="box">
			
		</div>
	</body>
</html>

在这里插入图片描述
④.background-position背景相对位置
属性值：像素表示法、单词表示法、百分比表示法
1.像素表示法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图相对定位</title>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			margin:100px;
			background-image: url(images/wawa.jpg);
			background-repeat: no-repeat;
			/*两个属性值分别为x,y*/
			background-position: 150px 100px;
		}
		
	</style>
	<body>
		<div class="box">
			
		</div>
	</body>
</html>

在这里插入图片描述
2.单词表示法
图片位置用代表的英文单词表示
水平方向：left center right
垂直方向：top center bottom

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图相对定位</title>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			margin:100px;
			background-image: url(images/wawa.jpg);
			background-repeat: no-repeat;
			/*两个属性值分别为*/
			/*background-position: 150px 100px;*/
			background-position: left center;
		}
		
	</style>
	<body>
		<div class="box">
			
		</div>
	</body>
</html>

在这里插入图片描述
3.百分比表示法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图相对定位</title>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			margin:100px;
			background-image: url(images/wawa.jpg);
			background-repeat: no-repeat;
			/*两个属性值分别为*/
			/*background-position: 150px 100px;*/
			/*background-position: left center;*/
			background-position:0% 50%;
		}
		
	</style>
	<body>
		<div class="box">
			
		</div>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图相对定位</title>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			margin:100px;
			background-image: url(images/wawa.jpg);
			background-repeat: no-repeat;
			/*两个属性值分别为*/
			/*background-position: 150px 100px;*/
			/*background-position: left center;*/
			background-position:100% 50%;
		}
		
	</style>
	<body>
		<div class="box">
			
		</div>
	</body>
</html>

在这里插入图片描述
⑤background-attachment背景附着
指的是背景图片是否随着页面滚动而滚动
属性值：
scroll 滚动，背景图会随着页面动
fixed 不会滚动
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景滚动</title>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		body{
			background-image: url(images/back.jpg);
			background-repeat: repeat-x;
			background-position: center top; 
			background-attachment: fixed;
		}
		div{
			width: 100px;
			height:100px;
			background-color:skyblue ;
			margin-bottom: 50px;
		}
	</style>
	<body>
		<div><h1>1</h1></div>
		<div><h1>2</h1></div>
		<div><h1>3</h1></div>
		<div><h1>4</h1></div>
		<div><h1>5</h1></div>
		<div><h1>6</h1></div>
		<div><h1>7</h1></div>
		<div><h1>8</h1></div>
	</body>
</html>

复合写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景滚动</title>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		body{
			/*background-image: url(images/back.jpg);
			background-repeat: repeat-x;
			background-position: center top; 
			background-attachment: fixed;*/
			background: url(images/back.jpg) repeat-x center top fixed skyblue;
		}
		div{
			width: 100px;
			height:100px;
			background-color:skyblue ;
			margin-bottom: 50px;
		}
	</style>
	<body>
		<div><h1>1</h1></div>
		<div><h1>2</h1></div>
		<div><h1>3</h1></div>
		<div><h1>4</h1></div>
		<div><h1>5</h1></div>
		<div><h1>6</h1></div>
		<div><h1>7</h1></div>
		<div><h1>8</h1></div>
	</body>
</html>
Hacker white
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小李动态表情 小李动态表情包 v2.0
11-08
【小李动态表情 小李动态表情包 v2.0】是一个专为用户们提供娱乐和社交互动的资源集合，其中包含了一系列与著名演员莱昂纳多·迪卡普里奥（Leonardo DiCaprio）相关的动态表情。这款表情包的更新至v2.0版本，意味着...
小李QQ表情 小李QQ表情包 v2.0
11-08
【小李QQ表情 小李QQ表情包 v2.0】是一个专为QQ聊天平台设计的表情包集合，其中包含了各种以知名演员“小李”为主题的趣味动态和静态表情。这款表情包版本为v2.0，意味着它是经过更新和优化的版本，可能包含了更多的...
HTML5 入门：一个最简单的HTML页面（doctype、meta、Head、标签的使用)
weixin_34402408的博客
01-23 595
HTML5的&lt;!doctype&gt;声明怎么写 这是HTML 4.01的doctype： &lt;!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; XHTML 1.0的doctype。它的长度跟HTML 4.01的差不太多： &lt;!...
小李带你玩转html—08
小李同学的博客
11-26 110
定位 css布局：盒模型、浮动、定位 辅助的功能属性：文本、a、背景等 定位：相对定位、绝对定位、固定定位 脱标：浮动、绝对定位、固定定位 相对定位 定位：元素位置相对于某一参照物进行的位置偏移 相对定位：元素相对于自身的相对偏移 position：定位 属性值：relative 相对的 偏移的数据量由其他属性来表示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title
小李带你玩转html—10
小李同学的博客
12-12 68
图片和透明效果 1.图片的分类 1.1 JPG图片 是我们最常用的一种图片格式 特点：色彩丰富，可以压缩，品质可以调整 缺点：不能保存图层，不能做动图，不能保存背景透明的图片 1.2 PNG图片 不可压缩，可以保存图层，可以保存半透明效果 缺点：文件太大 1.3 GIF图片 无所谓压缩不压缩，色彩单一，色值有256种 文件小，可以存动图 2.盒子的透明 2.1 ...
小李带你玩转html—06
小李同学的博客
10-31 84
标准文档流与浮动 文字必须在div渲染之后写 标准文档流都是高低不齐，底边对齐 块级元素和行内元素划分 标准文档流将我们的html标签分成了块级标签和行内标签 块级标签：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 特点：①自己独占一行②可以设置宽高③如果
小李带你玩转html—09
小李同学的博客
12-07 77
Hack 浏览器兼容问题：针对不同的浏览器写不同的代码，显示相同的效果 分类：html hack 、css hack html hack 根据不同的浏览器写不同的html代码，需要一个辅助的代码，叫做Hack符号 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html hack</title> <style type="text/css"&
小李带你玩转html—05
小李同学的博客
10-26 56
还是盒模型 盒模型清空样式，一些标签自带样式，需要清空 效果图如下 margin 当两个盒子在垂直方向时，外边距小的会被外边距大的重合，这个现象叫做外边距塌陷。 父盒子和子盒子也会出现margin塌陷现象 解决办法：①给父盒子加一个边框 方法② 用父盒子的padding 属性挤出来 ...
小李带你玩转html—03
小李同学的博客
03-22 53
继承性 css继承性：后代元素能够继承来自祖先元素的文字的样式，不能继承盒子的样式，继承性这个特性很好，我们可以将整体的文字样式全部写在body，后面的标签自动继承。 继承性也是 层叠式的第一个特性。 层叠性 我们学了多个选择器，同一格标签可以同时多个选择器选中。 问题：多个选择器选中一个元素，相同的样式听谁的？ 选择器权重问题： 标签、类、id权重比较 ：通配符权重最低 所以，层叠高的...
小李带你玩转html—02
小李同学的博客
03-20 73
基础选择器 选择器：指的是我们需要添加样式的标签元素的模式。 标签选择器
小李带你玩转html—01
小李同学的博客
03-17 87
CSS css:cascading style sheets,层叠式样式表(通俗来说，定义了html标签你想要在网页上显示的样式) css的本质就是将结构和样式进行分离，不再结合在一起 首先我们得知道前端三层： html 结构层，搭建了网页的框架 css 样式层，让页面更加好看 JavaScript 行为层，实现了页面交互，让网页更加灵活好看 CSS作用 样式：html标签在页面上的显示样式。...
JAVA作业1小李打怪物.docx
08-23
在这个JAVA作业中，小李打怪物的场景是通过面向对象编程来实现的。面向对象编程是一种编程范式，它基于“对象”的概念，这些对象包含了数据（属性）和操作数据的方法（行为）。在这个例子中，有两个主要的类：`Xiao...
html css js 3d元素周期表源码
05-10
标题中的“html css js 3d元素周期表源码”表明这是一个使用HTML、CSS和JavaScript技术构建的3D元素周期表项目。这个项目可能是一个互动的学习工具，通过三维视觉效果来展示化学元素的信息，帮助用户更好地理解和...
小李的数据库之旅（上）
12-14
　小李是这个大学计算机科学与技术系的知名学生，他的编程能力了得，使用Pascal 炉火纯青，这都是高中期间参加青少年信息学奥林匹克竞赛打下的底子， 虽然没有获过奖，但在80年代末，90年代初很多人都不知道计算机...
html 关闭信息窗口
cuisidong1997的博客
07-14 347
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
高频面试题-HTML
CSDN20221005的博客
07-15 938
离线存储是基于 .appcache ⽂件的缓存机制(不是存储技术)实现的，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储了下 来。块级元素有： div p 列表标签(ul ol li dl dt dd) 标题标签(h1 h2 h3 h4) 表格标签(table)空元素： <br> <hr> <img> <input> <link> <meta>->新增了语义化标签(header/footer/nav/asid)->新增了表单增强控件(data/time/email/url)
DDei在线设计器-HTML渲染
最新发布
hoslay1的专栏
07-18 223
HtmlViewer插件通过将一个外部DIV附着在图形控件上，从而改变原有图形的显示方式。允许使用者自己定义HTML通过HTML元素。本示例演示了通过Html来扩展渲染图形，从而获得更加丰富的图形展现。通常情况下，我们创建的图形控件，如下图所示：通过HtmlViewer插件，我们可以使用表现力更强的HTML元素来替换显示的图形，或者结合业务需要，将一些业务数据显示在图形上，如下：!
ChatGPT对话：如何把Html文件转换为Markdown文件
uestcai的博客
07-15 1394
【编者按】ChatGPT提供了多种方法。编者常用VS Code，所以想使用VS Code解决问题，但ChatGPT提供了一些错误的方法，失败了。最后发现编写python程序最简单。
考考小李ctfxss漏洞
07-25
很高兴回答你的问题。对于CTF（Capture The Flag）比赛中的漏洞，我可以提供一些基本的信息。CTF比赛是一个网络安全竞赛，旨在通过解决各种网络安全挑战来测试参赛者的技能。 在CTF比赛中，常见的漏洞类型包括但不...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值