学习CSS的第一天

已于 2022-06-18 11:58:57 修改
阅读量432 收藏
点赞数
文章标签： 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弹性布局

重庆李豪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css中border width属性,CSSborder-width属性使用教程
weixin_39942318的博客
08-04 1333
当前位置：Gxlcms > css > CSSborder-width属性使用教程CSSborder-width属性使用教程时间：2021-07-01 10:21:17 帮助过：71人阅读border-width -- 定义四个边框的宽度取值:{1,4} | inherit{1,4}: 边框宽度(可以有一个,两个,三个或四个值)in...
CSS3学习第七天
qq_46563235的博客
10-24 1148
学习笔记来源于哔哩哔哩千锋教育前端学习笔记
css怎么选中第一个<a>,css – 如何选择一个类“A”,但不是类“B”的div？
weixin_39755712的博客
08-03 703
您可以使用属性选择器来匹配只有一个类的div：div[class=A] {background: 1px solid #0f0;}如果要选择另一个具有多个类的div，请使用引号：div[class="A C"] {background: 1px solid #00f;}某些浏览器不支持属性选择器语法。像往常一样，“一些浏览器”是IE 6及以上的委婉语。完整示例：.A { font-size:22p...
css 样式小技巧01
GCC_Chason的博客
05-20 147
梯形方块, 遮罩层优化, 地图上的光晕圆圈, 凸起文字,凹陷文字
小白学习css的第一天
A__xy的博客
11-01 835
css第一天总结 css简介 CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言 CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。 CSS 最大价值: 由 HTML 专
CSS学习第一天基础（总结）
weixin_45883291的博客
02-01 1617
css概念 css:     cascading style sheets (层叠式样式表) 用来规定html在网页上的显示样式；     前三端：      html           ...
HTML+CSS复习第一天
weixin_62922379的博客
07-12 2626
3.使用grid布局 display:grid justify-content:center;1.使用flex布局 justify-content:center;怪异盒模型：margin + content(border+padding+content)普通盒模型：margin + border + padding + content。普通盒模型变为怪异盒模型使用的是box-sizing:border-box。分为两种：相对路径 绝对路径 img标签内部的属性是以键值对的形式存在的。
HTML和Css的学习
SYX_lh的博客
10-19 3196
学习HTML和Css
用HTML+CSS做一个漂亮简单的个人网页
热门推荐
qq_42523321的博客
12-20 57万+
用HTML+CSS做一个漂亮简单的个人网页 1.刚好帮我妹写了一个作业做一个个人网页设计，简单的三个小页面，就从网上随便找了图片自己随便设计了下东拼西凑哈哈哈！！！可能有点low但是对她来说或者需要做简单的个人网站应该就够了吧！ 图片是从站酷上面找的(因为我不会设计图)，如果有侵权了什么的请联系我立刻马上删掉哈! （首页的首屏有下雪了的特效，右下角有音乐播放提示） 2.先看一下效果哈！ 效...............
CSS学习第五天——CSS选择器的优先级
m0_65051363的博客
07-28 2008
CSS学习第五天——CSS选择器的优先级
CSS学习第一天总结.pdf
10-11
CSS学习第一天总结
前端基础css第一天,对应博客
04-03
css第一天学习内容,可对照博客
CSS初识初学者思维导图-css学习第一天
12-24
css 目的、样式表分类（位置）、选择器、常见文字css属性
基于CSS制作天蓝色导航菜单
01-21
一款亮丽的导航，能给网站一个画龙点睛...第一步：放置一个div作为导航主体部分 XML/HTML Code复制内容到剪贴板 <div u00a0class=userPlaceMain></div>  为其编写样式： CSS Code复制内容到剪贴板 .userPlaceMain 
HTML第一天.xmind
03-14
个人整理的HTML学习资料，希望能帮到你^-^! - HTML 指的是超文本标记语言 (**H**yper **T**ext **M**arkup **L**anguage)是用来描述网页的一种语言。 - HTML 不是一种编程语言，而是一种标记语言 (markup ...
深入探索CSS3 appearance 属性：解锁原生控件的定制秘密
艾恩小灰灰的博客
05-05 421
CSS3 的appearance属性是网页设计中一个不可忽视的宝藏，它不仅让我们有能力去除那些不甚如意的默认样式，更赋予了我们无限的创意空间，去打造既美观又实用的用户界面。通过上述详尽的解析与实例，希望能帮助你更好地掌握这一属性，让你的网页设计之旅更加丰富多彩。
nodejs-x64-0.10.21.tgz
最新发布
05-11
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v4.1.1-linux-armv6l.tar.xz
05-11
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v4.1.0-linux-arm64.tar.xz
05-11
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
css 第一个css名的元素
08-28
在CSS中，第一个CSS类的元素是通过使用CSS选择器来选择的。选择器可以是元素名称、类名、ID、属性值等。如果你想选择第一个CSS类的元素，可以使用以下方式： 1. 使用类选择器：如果你的CSS类名是 "my-class"，可以...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值