Web基础——CSS常用标签（2）

最新推荐文章于 2024-06-25 22:00:00 发布
最新推荐文章于 2024-06-25 22:00:00 发布
阅读量4k 收藏 1
点赞数 1
分类专栏： 前端 文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43496491/article/details/122294215
版权

目录

1.边框圆角

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#btn {
				height: 40px;
				width: 100px;
				border: 0px black solid;
				/* 边框圆角 */
				/* border-radius: 5px; */
				/* 设置四个方向的圆角 */
				border-top-right-radius: 20px;
				border-bottom-left-radius: 20px;
				/* 文本居中 */
				text-align: center;
				/* 设置行高，跟外框高度一样，可以让文字上下居中 */
				line-height: 40px;
				background-color: goldenrod;
				font-weight: 500;
				font-size: 18px;
				color: white;
			}
			#photo {
				height: 300px;
				width: 300px;
				border: 0px black solid;
				/* 把弧度设置为宽高的一半 */
				border-radius: 150px;
				background-image: url(img/xingye.jpg);
				background-size: 100% 100%;
				/* 阴影 左右 上下 发光范围 阴影颜色*/
				box-shadow: 0px 0px 50px yellow;
			}
			button {
				height: 40px;
				width: 100px;
				border: 0px black solid;
				background-color: goldenrod;
				font-weight: 500;
				font-size: 18px;
				color: white;
				/* 设置四个方向的圆角 */
				border-top-right-radius: 20px;
				border-bottom-left-radius: 20px;
			}
		</style>
	</head>
	<body>
		<div id="btn">
			一个按钮
		</div>
		<hr>
		<hr>
		<br>
		<div id="photo">
		</div>
		<br>
		<br>
		<br>
		<button type="button">一个按钮</button>
	</body>
</html>

2.内间距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#wai {
				height: 200px;
				width: 400px;
				border: 1px black solid;
				/* 站在外框的角度设置内间距 */
				padding-left: 150px;
				padding-top: 80px;
				/* 设置内间距时，防止把外框撑大 */
				box-sizing: border-box;
			}
			#nei {
				height: 100px;
				width: 200px;
				border: 1px black solid;
				background: yellowgreen;
			}
		</style>
	</head>
	<body>
		<div id="wai">
			<div id="nei">
			</div>
		</div>
	</body>
</html>

3.字符间距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				/* 字符间距 */
				letter-spacing: 10px;
			}
			button{
				height:50px;
				font-size: 15px;
				width: 200px;
				letter-spacing: 10px;
			}
		</style>
	</head>
	<body>
		<button type="button">按钮按钮按阿牛</button>
		<p>
			计算机信息（数字、文字、图片）在电子中是以二进制 1 和 0（01000101）进行存储的。
			为了规范字母数字字符的存储，创建了 ASCII（全称 American Standard Code for Information Interchange）。它为每个存储字符定义了一个独特的二元 7 位数字，支持 0-9 数字，大/小写英文字母（a-z、A-Z）和一些特殊的字符，比如 ! $ + - ( ) @ < > 。
			由于 ASCII 使用一个字节（7 位表示字符，1 位表示传输奇偶控制），所以它只能表示 128 个不同的字符。这些字符中有 32 个被保留作为其他控制目的使用。
			ASCII 的最大的缺点是，它排除了非英文字母。
			ASCII 今天仍然在广泛使用，尤其是在大型计算机系统中。
			如需深入了解 ASCII，请查看完整的 ASCII 参考手册。
		</p>
	</body>
</html>

4.线条设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1{
				text-decoration: underline;	
			}
			h2{
				text-decoration: line-through;
			}
			h3{
				text-decoration: overline;
			}
			a{
				/* 去掉下划线 */
				text-decoration: none; 
			}
			h4{
				/* 大写字母转小写 */
				text-transform: lowercase; 
			}
			h5{
				/* 小写字母转大写 */
				text-transform: uppercase;
			}
			h1:hover{
				/* 设置鼠标指针的样式 */
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<h1>啊发撒沙发沙发</h1>
		<h2>啊发撒沙发沙发</h2>
		<h3>啊发撒沙发沙发</h3>
		<a href="#">asfasdfsadfd</a>
		<h4>ABCDEF</h4>
		<h5>asdfasdfasdfasdfasf</h5>
	</body>
</html>

5.段落的缩进

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				/* 首行缩进 2倍 */
				text-indent: 2em; 
				/* 行高 */
				line-height: 2em;
			}
		</style>
	</head>
	<body>
		<p>
JavaScript是一门面向对象的编程语言，与其它面向编程的语言不同的是，JavaScript的面向是基于原型的。即使在ES6中有了类的概念，但也只是语法糖而已。所有JS对象都会从它的原型对象
JavaScript是一门面向对象的编程语言，与其它面向编程的语言不同的是，JavaScript的面向是基于原型的。即使在ES6中有了类的概念，但也只是语法糖而已。所有JS对象都会从它的原型对象中继承属性和方法，从而实现面向对象编程。
			构造器函数
			回顾前面学过的构造函数，我们可以通过构造函数的new方法实例化对
		</p>
	</body>
</html>

6.列表属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#wai {
				border: 0px black solid;
				height: 30px;
				padding: 0;
				display: flex;

			}
			#wai .neili {
				/* 去掉列表自带的小圆点 */
				list-style-type: none;
				border: 0px black solid;
				width: 100px;
				height: 30px;
				/* 只要是块标签，都可以浮动 */
				float: left;
				text-align: center;
				line-height: 30px;
				margin: auto;
				border-radius: 6px;
				background: goldenrod;
				color: white;
			}
			.neili:hover>#nei {
				display: block;
			}
			#nei {
				padding: 0;
				display: none;
			}
			#nei .item {
				list-style-type: none;
				border-bottom: 1px black solid;
				width: 100px;
				height: 30px;
				background: red;
			}
		</style>
	</head>
	<body>
		<ul id="wai">
			<li class="neili">关于本站
				<ul id="nei">
					<li class="item">关于本站</li>
					<li class="item">联系我们</li>
					<li class="item">进入首页</li>
					<li class="item">关于本站</li>
					<li class="item">联系我们</li>
					<li class="item">进入首页</li>
				</ul>
			</li>
			<li class="neili">联系我们</li>
			<li class="neili">进入首页</li>
			<li class="neili">关于本站</li>
			<li class="neili">联系我们</li>
			<li class="neili">进入首页</li>
		</ul>
	</body>
</html>

7.彩色图片变黑白

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				height: 400px;
				width: 230px;
				background-image: url(img/girl2.jpg);
				background-size: 100% 100%;
				transition: filter 2s;
			}
			#d1:hover{
				/* -webkit- 浏览器 的兼容 */
				-webkit-filter: grayscale(100%);
				-moz-filter: grayscale(100%);
				-ms-filter: grayscale(100%);
				-o-filter: grayscale(100%);
				filter: grayscale(100%);
				filter: gray;
				transition: filter 2s;
			}
		</style>
	</head>
	<body>
		<div id="d1">
		</div>
	</body>
</html>

8.Transform动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				height: 200px;
				width: 200px;
				background-color: red;
				transition: transform 1s;
			}
			#d1:hover{
				/* 位移动画，左右 上下 */
				transform: translate(200px,0px);
				transition: transform 1s;
			}
			#d2{
				height: 200px;
				width: 200px;
				background-color:yellow;
				transition: transform 1s;
			}
			 #d2:hover{	
				/* 旋转动画 负数值，逆时针旋转，正值 顺时针 旋转*/
				transform: rotate(-45deg);
				transition: transform 1s;
			}
			#d3{
				height: 200px;
				width: 200px;
				background-color:goldenrod;
				transition: transform 1s;
			}
			#d3:hover{
				/* 缩放动画 */
				transform: scale(2);
				transition: transform 1s;
			} 
			#d4{
				height: 200px;
				width: 200px;
				background-color:blue;	
				transition: transform 1s;	
			}
			#d4:hover{
				transform: skew(-45deg);
				transition: transform 1s;
			} 
		</style>
	</head>
	<body>
		<div id="d1">
		</div>
		<div id="d2">
		</div>
		<div id="d3">
		</div>
		<div id="d4">
		</div>
	</body>
</html>

9.过渡动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#wai {
				height: 100px;
				width: 250px;
				border: 1px black solid;
				display: flex;
			}
			#nei {
				height: 80px;
				width: 230px;
				background-image: url(img/mi.png);
				box-sizing: 100% 100%;
				margin: auto;
				/* 过渡动画的复合写法 */
				transition: transform 0.5s 0s linear;
			}
			#wai:hover>#nei {
				transform: rotate(15deg);
				/* 过渡的属性，过渡时长  延时过渡 过渡速率 */
				/* transition:transform 0.5s 0s linear; */
				/* 过渡的属性  all 代表所有属性 */
				transition-property:transform ;
				/* 过渡时长 */
				transition-duration: 0.5s;
				/*延时过渡  */
				transition-delay: 2s;
				/* 过渡速率 */
				transition-timing-function: linear;
			}
		</style>
	</head>
	<body>
		<div id="wai">
			<div id="nei">
			</div>
		</div>
	</body>
</html>
Geek Li
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
2. Web技术基础 - IP地址是网络中设备的位置标识，URL是网络资源的定位符，域名则是更容易记忆的网络主机名称。 - Web工作原理基于客户端-服务器模型，浏览器作为客户端发出请求，服务器响应请求并返回网页内容。 ...
web标准知识——丰富段落里的标签
10-30
在当前的网络环境中，网页标准是构建清晰、可访问和SEO优化网页的基础。标准的关键在于使用恰当的HTML标签来表示内容的不同部分，使浏览器和搜索引擎都能正确理解内容结构。段落标签是最基本的标签之一，它在XHTML和...
Web前端基础 HTML以及CSS简单标签
weixin_43657184的博客
11-10 385
目录 HTML head中常见的标签 body中常见的标签 HTML实体 HTML：超文本标记语言（英语：HyperText Markup Language）是一种用于创建网页的标准标记语言 用HTML语法写成的文件称为网页文件，后缀为 .html 或 .htm 一个最简单的网页： *&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt
Web基础——CSS常用标签（1）
威威的博客
01-03 4896
1.层溢出 层溢出的处理 auto 会自动判断是否加上滚动条 hidden 隐藏溢出的内容 visible 显示溢出的内容 默认值 scroll 始终加上滚动条 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #d1{ w
前端：HTML、CSS、JavaScript 代码注释 / 注释与代码规范
最新发布
snowball的博客
06-25 2847
HTML注释是在HTML代码中添加说明和解释的一种方法，这些注释不会被浏览器渲染或显示在页面上，而是被浏览器忽略。使用单行注释或多行注释：对于较短的注释，可以使用单行注释；对于较长的注释或需要跨越多行的注释，应使用多行注释。使用有意义的注释：确保注释提供了有价值的信息，而不是简单的“TODO”或“此处需要修改”。结束来标记多行注释。位于被注释的代码附近：通常，注释应位于被注释的代码之前或之上，以便于阅读和理解。位于被注释的代码之前：通常，注释应位于被注释的代码之前，以便于阅读和理解。
Web基础——CSS常用标签（3）
威威的博客
01-03 3931
这里写目录标题子层在外层中移动自定义动画（1）自定义动画（2）自定义动画详细写法流式布局Emmet语法弹性盒子布局（1）弹性盒子布局（2）弹性盒子布局（3）弹性盒子布局页面 子层在外层中移动 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #wai { heig
web前端———CSS基础知识点总结
m0_66347252的博客
03-01 684
CSS CSS(cascading style sheet) 汉译为层叠样式表(层叠性),是用于控制网页样式 WEB标准中的表现标准语言,在网页中主要对网页信息的显示进行控制。 目前推荐遵循的是W3C发布的CSS3.0版本； 用来表现HTML或者XHTML等样式文件的计算机语言。 1998年5月21日由w3C正式推出的css2.0 CSS语法 CSS语法由两部分组成：选择符、声明。 声明包括：属性和属性值 选择符(选择器) {属性:属性值;属性:属性值;} p{width:100px;hei...
WEB前端之HTML基础标记（附赠常用开发工具）
高星雨的博客
10-27 675
2.基本的页面结构<!doctype html>——文档类型说明 网页根标记，页面 <head> <head>网页头部</head> <title>Insert a title</title> <title>网页标题...
《Java Web开发基础——从Servlet到JSP》源代码v1.0
11-29
《Java Web开发基础——从Servlet到JSP》是一本深入探讨Java Web开发的教程，主要涵盖了从基础的Servlet到高级的JSP技术。这个压缩包包含的源代码是该书教学内容的实践部分，旨在帮助读者更好地理解和应用所学知识。...
java web项目——51商城
05-06
【Java Web项目——51商城】是一个典型的电子商务平台开发实例，它主要涵盖了Java技术栈在Web开发中的应用。在这个项目中，我们不仅会涉及到后端服务的开发，还会接触到前端界面的设计与实现。以下是这个项目可能...
Web网页设计——茶道
03-25
总的来说，“Web网页设计——茶道”项目为初学者提供了实战HTML和CSS的机会，通过设计与茶文化相关的网页，可以学习到网页布局、样式控制、响应式设计等多个核心概念，为后续的Web开发打下坚实的基础。
html和css常见标签汇总
03-23
html和css的常见标签汇总，便于web前端学习中查阅
web前端基础知识
qq_43375584的博客
02-28 6311
HTML&CSS基础经典版 HTML：结构（页面元素和内容） css：表现（网页元素的外观和位置等页面样式） 行为：JavaScript：行为（网页模型定义与页面交互） 排版标签 排版标签标题标签：h系列标签 重要程度依次递减 特点：独占一行、h1-h6文字逐渐减小 段落标签：p 特点：段落之间存在间隙、独占一行 换行标签： 水平分割线： 文本格式化标签 场景：让文字加粗b strong、下划线u ins、倾斜i em、删除线s del等 语义：突出重要
Web前端开发 HTML常用标签
JxufeCarol的博客
03-03 1008
参考链接： 1）HTML常用标签及其属性 https://www.cnblogs.com/dear_diary/p/6510393.html 2）https://www.w3school.com.cn #基本 <html>…</html> 定义 HTML 文档 <head>…</head> 文档的信息 <meta> ...
【web】css标签属性
m0_66112222的博客
09-08 917
常用的行属性标签：span（放置文字）a（超链接，用来跳转网页）href（用来放置网页地址（相对路径、网络路径、绝对路径））（href可以为空，刷新页面，#返回顶部，###无效链接）target（跳转方式：_self默认，在网页本身打开页面 _blank打开新的页面）常用的块属性标签：div标签（没有任何意义，一般用来划分区域）p标签（段落标签）h1-h6（标题标签，h1标签一般在一个网页中只有一个）ul>li（无序列表）ol>li（有序列表）*有开始标签和结束标签，（双标签），只有一个标签的叫做单标签。
web前端——html其它常用标签
xishaoguo的博客
02-26 1132
标签的查找：    我们每个页面要写这么多的标签，那么我们怎么才能知道标签都有哪些呢？或者说我们应该从哪里查找这些标签呢？我们可以通过W3CSchool.chm这个w3c离线手册进行查找，这个手册可以从网上下载，直接百度搜索就可以找到好多下载的地址。w3c ： 欧洲计算机协会，好多好多公司在一起组成的一个协会，专门研究和讨论计算机技术的地方。以前是没有中国公司参加的，因为中国在计算机这一块做出的贡...
Web前端之CSS
ling的博客
12-24 4127
前面说了HTML，现在再来数一说CSS，所谓CSS是指层叠样式表 (Cascading Style Sheets)，通过引入样式表，从而极大的提高了工作效率。 CSS 基础语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 selector {declaration1; declaration2; … declarationN } 选择器通常是你需要改变样式的 ...
web前端常用初始化css，开箱即用！！！
芥焉丶丶的博客
01-21 3628
/* @Author: jieyan */ /* 禁用iPhone中Safari的字号自动调整 */ *{  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box; } html {  -webkit-text-size-adjust: 100%;  -ms-
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Geek Li

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值