学习CSS的第一天

已于 2022-06-18 11:58:57 修改
阅读量458 收藏
点赞数
文章标签： css3
于 2022-04-05 09:57:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66579387/article/details/123964793
版权

p1.after和hover的使用


 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#ii{
		width:100px;
		height: 100px;
		border-radius:100%;
		border:5px solid navajowhite;
	margin-left:200px;
	text-align:center;
		}
		#ii::after{    /* 创建伪元素content中添加内容 */
			content:"猴王";
			font-family: '宋体';
			position:relative;
			top:40px;
		}
		#ii:hover{  /* 鼠标移入改变背景颜色 */
			background-color: pink;
		}
		</style>
	</head>
	<body>
		<div id="ii"></div>
	</body>
</html>

2.z-index的使用  （数值大的在上）

 

 

 

3.文档流样式inline

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		li{
			display:inline;
		}</style>
	</head>
	<body>
		<ul>
			<li>大家好 我是猴王！</li>
			<li>大家好 我是猴王！</li>
			<li>大家好 我是猴王！</li>
			<li>大家好 我是猴王！</li>
			<li>大家好 我是猴王！</li>
		</ul>
	</body>
</html>

4.合并单元格

th标签表头单元格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		table{
			width:400px;
			height:400px;
		}
		td{
			border:1px solid black;
		}
		#cont{
			transform:translateX(500px);
		}
		#cont1{
			transform:translateY(-400px);
		}</style>
	</head>
	<body>
		<table id="cont">
			<tr>
				<td colspan='2'></td><!-- 合并行 -->
				<td></td>
				<!-- <td></td> -->
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td rowspan='2'></td><!-- 合并列 -->
			</tr>
			<tr>
				<td></td>
				<td></td>
				<!-- <td></td> -->
			</tr>
		</table>
		<table id="cont1">
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

5.input表单元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" placeholder="默认显示" maxlength="6"> <!-- 最大输入6位数 -->
		<br>
		<input type="password" placeholder="输入显示*">
		<br>
		<input type="button" value="我是一个按钮">
		<br>
		<input type="checkbox"><!-- 一个勾选框 -->
		<br>
		<input type="radio"><!--选中后不可以取消-->
		<br>
		<input type="checkbox" checked="checked"><!-- 一个勾选框 默认选中-->
		<br>
		<input type="radio" id = "nan" name="nex"><label for="nan">男</label>
		<input type="radio" id = "nv" name="nex"><label for="nv">女  只能选择一个</label>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#w input{
			border:0;/*清除自带边框*/
			outline:none;/*清除点击后的边框*/
		}
		*{
			box-sizing: border-box;/*设置内边距不会把盒子挤大*/
		}
		#q input{
			width:100px;
			padding-left:20px;
			
		}
		</style>
	</head>
	<body>
		<div id="w">
	<!--search类型带清除小叉叉-->
	<input type="search" placeholder="默认显示">
	</div>
	<div id="q">
		<input type="text" placeholder="默认显示">
	</div>
	</body>
</html>

6.消除边框

 border-collapse: collapse;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table{
				height:400px;
				width:400px;
				margin: 0;
				padding: 0;
				border-collapse: collapse;
			}
		td{
				border:1px solid blue;
			}
		</style>
	</head>
	<body>
		<table>

				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
		</table>
	</body>
</html>

6.找儿子和孙子

 

7.下拉菜单

8.清除浮动

 

 

9.京东秒杀

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		
		#kuang{
			position: absolute;
			right: 0;
			top: 0;
			width: 0;
			height: 0;
			border-color:transparent white transparent transparent;
			border-style:solid;
			border-width: 30px 15px 0 0;
		}
		#kuan{
			width: 0;
			height: 0;
			border-color:transparent blue transparent transparent;
			border-style:solid;
			border-width: 24px 10px 0 0;
		}
		#q{
			border:1px solid pink;
			width: 160px;
			height: 30px;
			line-height: 30px;
			margin: 0 auto;
		}
		#p{
			position: relative;
			float:left;
			width: 80px;
			background: red;
			text-align: center;
			color:white;
		}
		#o{
			width: 80px;
			float:right;
			text-align: center;
			text-decoration: line-through;
		}
		</style>
	</head>
	<body>
		
		<div id ="kuan"></div>
		
		<div id="q">
		<span id="p">$5999<i id="kuang"></i></span>
		<span id="o">$5999</span>
		</div>
		
	</body>
</html>

10.overflow元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div>#aa{
			float: left;
			border:2px solid red;
			width: 130px;
			height: 180px;
			margin:10px;
		}
		.q1{
			overflow: hidden;/*溢出部分隐藏*/
		}
		.q2{
			overflow: scroll;/*总是显示滚动条*/
		}
		.q3{
			overflow: auto;/*超出显示滚动条 不超出不显示*/
		}
		.q4{
			overflow: visible;/*不剪切内容也不添加滚动条*/
		}</style>
	</head>
	<body>
	<div>
		<div id="aa" class="q1">
			<a>京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择
		、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、
		手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。</a></div>
		<div id="aa" class="q2">
			<a>京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择
			、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、
			手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。</a>
		</div>
		<div id="aa" class="q3">
			<a>京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择
		、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、
		手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。</a></div>
		<div id="aa" class="q4">
			<a>京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择
			、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、
			手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。</a>
		</div>
	</div>
	</body>
</html>

11.鼠标样式

12.设置中心点

>> 旋转案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			overflow: hidden;/*隐藏before伪元素*/
		position: relative;
		width: 100px;
		height: 100px;
		border:1px solid pink;
		margin: 100px 100px;
		}
		div::before{
			content: "猴王";
			line-height: 100px;
			text-align: center;
			/*before是行类块元素要转换为块级元素*/
			display: block;
			position: absolute;
			width: 100%;
			height: 100%;
			background-color: pink;
			transform-origin: left bottom;/*选择中心点*/
			transform: rotate(180deg);/*选择旋转角度*/
			transition: all .6s;/*添加过渡动画时长*/
		}
		div:hover::before{
			transform: rotate(0deg);
		}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
	</body>
</html>

13.steps使用（指定了时间函数中间隔数量）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			overflow: hidden;
			height: 50px;
			font-size: 40px;
			width: 0;
			background: pink;
			white-space: nowrap;/*文字强制一行显示*/
			animation: w 6s steps(6) forwards;
			
		}
		@keyframes w{
			0%{
				width: 0;
			}
			100%{
				width: 240px;
			}
		}</style>
	</head>
	<body>
		<div id="s">重庆高等猴王</div>
	</body>
</html>

14.旋转案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		body{
			perspective: 500px;
		}
		#box{
			position: relative;
			width: 100px;
			height: 100px;
			margin:100px auto;
			transition: all 2.0s;
			transform-style: preserve-3d;
		}
		#box:hover{
			transform: rotateY(60deg);
		}
		#box div{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: pink;
		}
		#box div:last-child{/*设置box中最后一个div标签*/
			background: purple;
			transform: rotateX(60deg);
		}
		</style>
		</head>
	<body>
		<div id="box">
			<div></div>
			<div></div>
		</div>
	</body>
</html>

15.文字阴影

 

 16.clac函数

17.nth-child选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#hh,#kk{	
				float: left;
				margin-left:20px;
				width: 120px;
				height: 620px;
				border:2px solid red;
			}
			#qq,#pp{
				width: 100px;
				height: 20px;
				margin-top:10px;
				margin-left:10px;
			}
			#qq:nth-child(even){/*选择偶数*/
				background: pink;
			}
			#qq:nth-child(odd){/*选择奇数*/
				background: palegreen;
			}
			#pp:nth-child(n){
				background:chocolate;
			}
			#pp:nth-child(3n-1){
				background: yellow;
			}
			#pp:nth-child(3n-2){
				background:paleturquoise;
			}
		</style>
	</head>
	<body>
		<div id="hh">
			<div id="qq"></div>
			<div id="qq"></div>
			<div id="qq"></div>
			<div id="qq"></div>
			<div id="qq"></div>
			<div id="qq"></div>
			<div id="qq"></div>
			<div id="qq"></div>
			<div id="qq"></div>
			<div id="qq"></div>
			<div id="qq"></div>
			<div id="qq"></div>
			<div id="qq"></div>
			<div id="qq"></div>
			<div id="qq"></div>
			<div id="qq"></div>
			<div id="qq"></div>
			<div id="qq"></div>
			<div id="qq"></div>
			<div id="qq"></div>
		</div>
		<div id = "kk">
			<div id="pp"></div>
			<div id="pp"></div>
			<div id="pp"></div>
			<div id="pp"></div>
			<div id="pp"></div>
			<div id="pp"></div>
			<div id="pp"></div>
			<div id="pp"></div>
			<div id="pp"></div>
			<div id="pp"></div>
			<div id="pp"></div>
			<div id="pp"></div>
			<div id="pp"></div>
			<div id="pp"></div>
			<div id="pp"></div>
			<div id="pp"></div>
			<div id="pp"></div>
			<div id="pp"></div>
			<div id="pp"></div>
			<div id="pp"></div>
		</div>
	</body>
</html>

18.flex弹性布局

重庆李豪
关注
css实现圆球旋像水波波动_纯css实现波浪球
weixin_39815879的博客
02-01 400
其实利用不规则园旋转实现，打开浏览器看下代码就知道了波浪球html,body {height: 100%;display: flex;align-items: center;justify-content: center;background: linear-gradient(antiquewhite, navajowhite);}.sea {width: 300px;height: 300px;...
CSS3学习第七天
qq_46563235的博客
10-24 1327
学习笔记来源于哔哩哔哩千锋教育前端学习笔记
css怎么选中第一个<a>,css – 如何选择一个类“A”,但不是类“B”的div？
weixin_39755712的博客
08-03 795
您可以使用属性选择器来匹配只有一个类的div：div[class=A] {background: 1px solid #0f0;}如果要选择另一个具有多个类的div，请使用引号：div[class="A C"] {background: 1px solid #00f;}某些浏览器不支持属性选择器语法。像往常一样，“一些浏览器”是IE 6及以上的委婉语。完整示例：.A { font-size:22p...
文档流、盒子模型、内边距、外边距、盒子模型水平方向的布局、盒子模型垂直方向的布局、盒子模型外边距的折叠、行内元素的盒模型（萌新必看，大佬随便）
qq_45623543的博客
11-07 2642
《个人学习笔记十四》 文档流（normal flow） 网页是一个多层的结构，一层摞着一层 通过css可以分别为每一层来设计样式 作为用户来讲只能看到最顶上一层 这些层中，最底下的一层是文档流，文档流是网页的基础 我们所创建的元素默认都是在文档流中进行排列 对于我们来说文档流主要有两个状态 在文档流中 不在文档流中（脱离文档流） 元素在文档流中有什么特点： 块元素 块元素会在页面独占一行（自上而下垂直排列） 默认宽度是父元素的全度（会把父元素撑满） 默认高度是呗内容撑开的（子元素） 行内元素
文本框获得焦点时改变背景颜色
weixin_30407099的博客
09-21 1330
文本框或者文本域获得焦点时改变背景颜色和边框.时区焦点时还原最初状态.这样做可以极大地提高用户体验,使用户的操作可以可到及时的反馈. 我先是想到使用CSS实现, input:focus,textarea:focus{ border:1px solid #f99; background-color:navajowhite; } 貌似实现了,经过测试:发现低版本...
简意“border“!
Doctor!..IT狂人！Doctor ye!
08-10 86
　　简意border，border------"square,bottom,corner，ellipse，circle"；常用值：none,dotted,solid,dashed;-----dimension:width,单位px;color,style, example:1px solid gray. example 01: .nav-menu{margin:0;padding:0;} .nav-menu p{ border:...
小白学习css的第一天
A__xy的博客
11-01 923
css第一天总结 css简介 CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言 CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。 CSS 最大价值: 由 HTML 专
CSS学习第一天基础（总结）
weixin_45883291的博客
02-01 1771
css概念 css:     cascading style sheets (层叠式样式表) 用来规定html在网页上的显示样式；     前三端：      html           ...
CSS初识初学者思维导图-css学习第一天
12-24
css 目的、样式表分类（位置）、选择器、常见文字css属性
CSS学习第一天总结.pdf
10-11
【CSS学习第一天总结】 在第一天的学习中，我们深入了解了CSS（层叠样式表）的基本概念和重要性。CSS是一种标记语言，主要用于控制HTML或XML文档的呈现，包括文本、图像和布局等方面。它使得网页设计更为丰富多彩，...
前端基础css第一天,对应博客
04-03
本文将根据提供的“前端基础css第一天”学习资料，深入探讨第一天学习中涉及的重要CSS知识点，帮助初学者建立扎实的基础。 首先，我们来了解CSS的基本概念。CSS通过分离文档的内容与表现，使得网页设计更加灵活和...
CSS第一天知识点.rar
07-20
在本压缩包“CSS第一天知识点.rar”中，包含了一系列关于CSS（Cascading Style Sheets）基础知识的文件。这些文件旨在帮助初学者理解并掌握CSS这一重要的网页设计语言。以下是根据文件名所涵盖的知识点的详细解释： ...
html与css学习第8天的精灵图
03-06
精灵图（Sprite）是网页设计中一种常见的优化技巧，它将多个小图像合并到一个大图（sprites.png）中，然后通过CSS定位显示需要的部分，从而减少HTTP请求次数，提高页面加载速度。在HTML和CSS的学习过程中，了解并...
css边框修饰
weixin_74261199的博客
10-30 624
② 分别设置边框四个方向的宽度。② 分别设置四个方向的边框颜色。② 分别设置四个方向的圆角边框。属性设置四个方向的边框颜色。属性整体设置四个圆角。整体设置上下左右边框。
【CSS3】css开篇基础（5）
Easonmax的博客
10-26 1389
我们不只是能做出如上最简单的三角形，还能根据不同边框长度做出更多不同的三角形，在这三角形的做法我就只说一种，另外的你们自己去探索。轻量级：一个图标字体比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器的请求。因为这里块很多，用浮动就有点麻烦，不如直接用行内块，行内块本身之间就有点距离，浮动还需要设置。展示的是图标，本质属于字体。如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 2099
【代码】炫酷的登录框!(附源码)
巨好看的登录注册界面源码
bjzhang75的博客
10-31 2842
巨好看的登录注册界面源码
导航栏小案例
最新发布
m0_74725366的博客
11-03 143
实现类似于这样的效果。
flex布局的练习题 ---都抖音解决方案(web)
m0_75035023的博客
10-31 296
flex布局的练习题 ---都抖音解决方案(web),html,
初学前端CSS第一天要点总结
资源摘要信息:"前端基础css第一天,对应博客" 知识点： ...CSS描述了在屏幕、纸张、语音或其他媒体上元素的呈现方式。...以上知识点是前端基础css第一天的学习内容，可以对照相关的博客进行深入理解和学习。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值