css实战与技巧

已于 2022-12-14 17:51:38 修改
阅读量542 收藏 2
点赞数
文章标签： css css3 html
于 2022-11-15 16:21:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72979912/article/details/127868080
版权

CSS实战与技巧

第一章 css常用技巧

1-1 hover使用技巧（hover可以设置的元素）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#zxw{
     
				width: 400px;height: 400px;background: #000;
			}
			.zxw2{
     
				width: 150px;height: 400px;background: #ff0000;
			}
			/*.zxw2:hover{
				width: 300px;height: 300px;background: #00ff00; 设置自己元素
			}*/
			/*#zxw:hover .zxw2{
				width: 300px;height: 300px;background: #00ff00; 设置自己的后代元素
			}*/
			/*#zxw:hover .zxw2 p{
				color: blue;font-size: 30px;	设置自己的后代的后代元素
			}*/
			/*#zxw3:hover{
				color: #fff;font-size: 20px;	设置自己元素
			}*/
			/*#zxw3:hover+p{
				color: #fff;font-size: 20px;	加号可以设置自己元素的下一个元素的属性
			}*/
			/*#zxw3:hover~p{
				color: #fff;font-size: 20px;	~可以设置自己元素之后的所有元素的属性
			}*/
			/*使用以上css验证 解开注释即可验证*/
		</style>
	</head>
	<body>
		<!--元素在hover状态时：
		1.可以设置自己的属性
		2.可以设置自己的后代元素的属性
		3.可以设置自己之后兄弟元素的属性
		4.不能设置自己的祖先元素-->
		<div id="zxw">
			<div class="zxw2">
				<p>我要自学网</p>
				<p>我要自学网</p>
				<p>我要自学网</p>
				<p id="zxw3">我要自学网</p>
				<p>我要自学网</p>
				<p>我要自学网</p>
			</div>
		</div>
	</body>
</html>

1-2 移入弹出大图（移入后弹出大图效果）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<style type="text/css">
			#zxw{
     
				width: 300px;height: 235px;position: relative;
			}
			.one{
     
				width: 100%;height: 100%;
			}
			.two{
     
				width:600px;height: 470px;position: absolute;
				top:0;left:300px;display: none;
			}
			#zxw:hover .two{
     
				display: block;
			}
			/*对上一节课的实践*/
		</style>
	</head>
	<body>
		<div id="zxw">
			<img class="one" src="../../img/01.jpg"/>
			<img class="two" src="../../img/02.jpg"/>
		</div>
	</body>
</html>

请添加图片描述
请添加图片描述

1-3 多级导航（多级导航栏的编辑方式）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<style type="text/css">
			.ul1{
     
				width: 502px;height: 52px;border: 1px solid #000;
				margin: 100px auto;text-align:center;
			}
			.li1{
     
				width: 98px;height: 50px;line-height: 50px;margin:1px 1px;
				float: left;position: relative;
			}
			.li1 div{
     
				width: 98px;height: 50px;background: #ccc;
			}
			.ul2{
     
				position: absolute;top:52px;left:0;display: none;
			}
			.li1:hover .ul2{
     
				display: block;
			}
			.li2{
     
				background:#ccc;width: 98px;height: 50px;border-bottom:1px solid #000000
			}
		</style>
	</head>
	<body>
		
		<nav>
			<!--ul.ul1>li.li1{一级导航$}*5-->
			<ul class="ul1">
				<li class="li1">
					<div>一级导航1</div>
					<ul class="ul2">
						<li class="li2">二级导航1</li>
						<li class="li2">二级导航2</li>
						<li class="li2">二级导航3</li>
						<li class="li2">二级导航4</li>
						<li class="li2">二级导航5</li>
					</ul>
				</li>
				<li class="li1">
					<div>一级导航2</div>
					<ul class="ul2">
						<li class="li2">二级导航1</li>
						<li class="li2">二级导航2</li>
						<li class="li2">二级导航3</li>
						<li class="li2">二级导航4</li>
						<li class="li2">二级导航5</li>
					</ul>
				</li>
				<li class="li1">
					<div>一级导航3</div>
					<ul class="ul2">
						<li class="li2">二级导航1</li>
						<li class="li2">二级导航2</li>
						<li class="li2">二级导航3</li>
						<li class="li2">二级导航4</li>
						<li class="li2">二级导航5</li>
					</ul>
				</li>
				<li class="li1">
					<div>一级导航4</div>
					<ul class="ul2">
						<li class="li2">二级导航1</li>
						<li class="li2">二级导航2</li>
						<li class="li2">二级导航3</li>
						<li class="li2">二级导航4</li>
						<li class="li2">二级导航5</li>
					</ul>
				</li>
				<li class="li1">
					<div>一级导航5</div>
					<ul class="ul2">
						<li class="li2">二级导航1</li>
						<li class="li2">二级导航2</li>
						<li class="li2">二级导航3</li>
						<li class="li2">二级导航4</li>
						<li class="li2">二级导航5</li>
					</ul>
				</li>
			</ul>
		</nav>
		
			
	</body>
</html>

请添加图片描述
请添加图片描述

1-4 纯css点击切换（css点击标题切换内容）

第一种方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<style type="text/css">
			/*这里运用的是锚链接和overflow属性*/
			.box{
     
				width: 302px;height: 302px;border:1px solid #000;
				text-align: center;margin: 0 auto;
			}
			nav{
     
				width: 302px;height: 30px;border-bottom:2px solid #000;
			}
			nav a{
     
				display: block;width: 100px;height: 28px;line-height: 28px;
				float: left;
			}
			.content{
     
				width: 300px;height:270px;overflow: hidden;
			}
			.cont{
     
				width: 300px;height:270px;line-height: 270px;
				font-size: 40px;color: #fff;
			}
			#one{
     
				background: red;
			}
			#two{
     
				background: green;
			}
			#three{
     
				background: blue;
			}
		</style>
	</head>
	<body>
		
		<div class="box">
			<nav>
				<a href="#one">按钮1</a>
				<a href="#two">按钮2</a>
				<a href="#three">按钮3</a>
			</nav>
			
			<div class="content">
				<div id="one" class="cont">内容1</div>
				<div id="two" class="cont">内容2</div>
				<div id="three" class="cont">内容3</div>
			</div>
		</div>
		
		
	</body>
</html>

第二种方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<style type="text/css">
			/*这里运用的是锚链接,定位和target伪类*/
			.box{
     
				width: 302px;height: 302px;border:1px solid #000;
				text-align:center;margin: 0 auto;
			}
			nav{
     
				width: 302px;height: 30px;border-bottom:2px solid #000;
			}
			nav a{
     
				display: block;width: 100px;height: 28px;line-height: 28px;
				float: left;
			}
			.content{
     
				width: 300px;height:270px;position: relative;
			}
			.cont{
     
				width: 302px;height:270px;line-height: 270px;
				font-size: 40px;color: #000;
				position: absolute;top:0;left: 0;
			}
			#one{
     
				background: red;z-index: 1;
			}
			#two{
     
				background: green;
			}
			#three{
     
				background: blue;
			}
			#one:target,#two:target,#three:target{
     
				z-index: 9;font-size:50px;
			}
		</style>
	</head>
	<body>
		<!--target选择的是当前被链接到目标元素-->
			<!--注意：target伪类加在目标元素上-->
		
		<div class="box">
			<nav>
				<a href="#one">按钮1</a>
				<a href="#two">按钮2</a>
				<a href="#three">按钮3</a>
			</nav>
			
			<div class="content">
				<div id="one" class="cont">内容1</div>
				<div id="two" class="cont">内容2</div>
				<div id="three" class="cont">内容3</div>
			</div>
		</div>
		
		
	</body>
</html>

请添加图片描述
点击相应的按钮即可跳转到相应的内容

1-5 纯css横向滚动（css设置可以横向滚动的效果）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<style type="text/css">
			.box{
     
				width: 100%;height: 302px;border:2px solid #000000 ;margin-top:100px ;
				overflow-y: scroll;
				/*移动端横向滚动overflow-x: scroll;*/
				/*移动端纵向滚动overflow-y: scroll;*/
				/*横向滚动,移动端不会出现滚动条*/
			}
			ul{
     
				width: 200%;height: 300px;
			}
			ul li{
     
				width: 15.666%;height: 300px;margin: 0 0.5%;float: left;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li style="background: red;"></li>
				<li style="background:green;"></li>
				<li style="background: blue;"></li>
				<li style="background: yellow;"></li>
				<li style="background: brown;"></li>
				<li style="background: orange;"></li>
			</ul>
		</div>
	</body>
</html>

请添加图片描述

1-6 清除图片下方间隙（清除图片下方的间隙和清除图片边框）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
     
				width:460px;margin: 100px auto;
				border:1px solid #000;ver
			}
			.box span{
     
				font-size: 30px;
			}
			.img{
     
				vertical-align: top;/*文本垂直对齐方式*/
			}
		</style>
	</head>
	<body>
		<!--英语本中四线划分三格，倒数第二条是基线（默认值），使用vertical-align:top;即可清除图片下方间隙-->
		<!--ie10以下几个老版本浏览器中图片在a元素中如果没有设置跳转路径会带有边框，因此样式重置reset.css中使用img{border:none;}清除图片边框-->
		<div class="box">
			<span>YYYyy</span>
			<a href="">
				<img src="../../img/01.jpg">
			</a>
		</div>
	</body>
</html>

1-7 文本溢出显示省略号（文本溢出文本框后显示省略号）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
     
				width: 202px;height: 32px;border:1px solid #000;
				margin: 100px auto;line-height: 30px;
				/*溢出隐藏*/
				overflow: hidden;
				/*文字变成一行显示*/
				white-space: nowrap;
				/*溢出时显示省略号*/
				text-overflow: ellipsis;
				/*三个属性进行配合才可以实线溢出时显示省略号的效果*/
				
			}
		</style>
	</head>
	<body>
		
		
		<p>我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网</p>
		
		
	</body>
</html>

请添加图片描述

1-8 元素透明度设置（设置一个元素的整体透明度）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
     
				width: 224px;height: 310px;margin: 100px auto;
				border:5px solid #000;
			}
			.box:hover{
     
				opacity: 0;
				/*元素透明度设置:
				1.整个元素及元素内的后代元素,都会随之改变透明度;
				2.不能使用百分比
				3.从0.0(完全透明)到1.0(完全不透明)*/
			}
			img{
     
				width:224px;height: 220px;
			}
			p{
     
				height: 50px;line-height: 50px;font-size: 30px;font-weight: 700;color: red;
				background: #0000FF;
			}
			img:hover{
     
				/*图像透明度设置,只对图像有效*/
				/*filter: opacity(30%);*/
			}
		</style>
	</head>
	<body>
		
		<div class="box">
			<img src="../../img/01.jpg"/>
			<p>我要自学网</p>
		</div>
		
		
	</body>
</html>

1-9 隔行变色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<style type="text/css">
			ul{
     
				width: 400px;margin: 100px auto;
			}
			/*li:nth-child(9n+2){
				color: red;
			}					设置到那个结束*/		
			li:nth-child(9n+2):nth-child(-n+12){
     
				color: red;
			}
			/*nth-child(an+b):*/
			/*1.a变化周期,相邻两个元素序号大减小*/
			/*2.n计数器,从零开始*/
			/*3.b偏移值,从第几号元素开始*/
			
		</style>
		
	</head>
	<body>
		
		<ul>
			<li>我要自学网1</li>
			<li>我要自学网2</li>
			<li>我要自学网3</li>
			<li>我要自学网4</li>
			<li>我要自学网5</li>
			<li>我要自学网6</li>
			<li>我要自学网7</li>
			<li>我要自学网8</li>
			<li>我要自学网9</li>
			<li>我要自学网10</li>
			<li>我要自学网11</li>
			<li>我要自学网12</li>
			<li>我要自学网13</li>
			<li>我要自学网14</li>
			<li>我要自学网15</li>
			<li>我要自学网16</li>
			<li>我要自学网17</li>
			<li>我要自学网18</li>
			<li>我要自学网19</li>
			<li>我要自学网20</li>
		</ul>
		
	</body>
</html>

请添加图片描述

1-10 外边距击穿（清除外边距击穿）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<style type="text/css">
			.box{
     
				width: 400px;height: 400px;background: red;
				/*padding-top:1px;border:1px solid #000 ;overflow:hidden;*/
			}
			.zxw{
     
				width: 200px;height: 200px;background: green;
				margin-top: 100px;
			}
			/*img{
				width:200px;height: 200px;margin-top:100px ;
			}
			span{
				margin-left: 100px;
			}*/
		</style>
	</head>
	<body>
		<!--外边距击穿：当有两个相邻的盒元素时，他们的外边距会重合，当其中一个设置了外边距之后，另一个也会应用这个外边距-->
		<!--相邻的定义为：同级或嵌套 的盒元素，他们之间没有非空的内容，并且父元素没有外边距和边框分割-->
		<!--如果子元素不是块级元素，就不会出现外边距击穿问题-->
		<!--外边距击穿的处理方法：-->
		<!--1.父元素设置溢出隐藏-->
		<!--2.父元素设置内边距-->
		<!--3.父元素设置边框-->
		<div class="box">
			<div class="zxw"></div>
		</div>
		
		
		<!--<div class="box">
			<img src="../../img/01.jpg"/>
			<span>我要自学网</span>
		</div>-->
		
		
	</body>
</html>

请添加图片描述

1-11 优先级提升（提升元素属性的优先级）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<style type="text/css">
			#zxw1{
     
				color: blue;
			}
			.zxw{
     
				color:red;
			}
			p{
     
				color: yellow!important;
			}
		</style>
	</head>
	<body>
		<!--1.!important把被修饰的语句的优先级提升到最大-->
		<!--2.只能提升一个语句的优先级，不能提生一个选择器的优先级-->
		
		<p class="zxw" id="zxw1">我要自学网</p>
		
	</body>
</html>

继承样式<l浏览器预设的样式<通用选择器<标签选择器<类选择器<id选择器<行内样式（style属性）

1-12 禁止选中文本（禁止选中文本效果）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<style type="text/css">
			p{
     
				width: 300px;height: 50px;font-size: 30px;
				margin: 50px auto;
			}
			a{
     
				user-select:none;
			}
		</style>
	</head>
	<body>
			<!--user-select:none;禁止选中文本效果，页面美观-->
		<p>
			<a href="#">我要自学网我要自学网我要自学网我要自学网</a>
		</p>
		
	</body>
</html>

第二章 矢量图标及背景精灵

2-1 矢量图标浅解

矢量图：是根据几何特性来绘制图形，他的特点时放大后图像不会失真，和分辨率无关
位图：是由称作像素（图片元素）的单个点组成的，放大后，会变成马赛克

2-2 矢量图标下载及引入

1.进入阿里巴巴矢量图标库：http://www.iconfont.cn/
2.登录，可以微博登录
3.鼠标悬停在需要的图标，点击收藏 入库（购物车图标）
4.把购物车图标加入项目
5.点击下载至本地，download.zip
6.下载完成后进行解压，把文件复制到网站项目中

2-3 font-class方式引入图标

font-class是Unicode书写不直观，语意不明确的问题
与Unicode使用方法相比，具有如下特点：
1.兼容性良好，支持IE8+，及所有现代浏览器
2.相比于Unicode语意明确，书写更直观，可以很容易分辨这个icon是什么
3.因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的Unicode引用
4.不过因为本质上还是使用的字体，所以多色图标还是不支持的

2-4 单标签使用矢量图标

第一步：引入项目下面生成的fontclass代码：

第二部：挑选相应图标并获取类名，应用于页面： ## 2-5 symbol方式引入图标 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个SVG的集合，与另外两种相比具有如下特点： 1.支持多色图标了，不再受单色限制 2.通过一些技巧，支持像字体那样，通过font-class,color来调整样式 3.兼容性较差，支持IE9+，及现代浏览器 4.浏览器渲染SVG的性能一般，还不如png 使用步骤如下： 1.引入项目下面生成的symbol代码： 2.加入通过CSS代码（引入一次就行） 3.挑选相应图标并获取类名，应用于页面： 改变图片的大小和字体一样 通过改变svg标签的css来改变 ## 2-6 实战矢量图标引用 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<link rel="stylesheet" href="../../icon/font_51zxw/iconfont.css"/>
		<style type="text/css">
			#zxw{
     
				width:50px;padding:0 5px;border: 1px solid #8cc63e;margin: 100px auto;
			}
			#zxw a{
     
				display: block;width: 50px;height: 52px;border-bottom: 2px solid #8cc63e;text-align:center;
			}
			#zxw #nobord{
     
				height: 50px;border-bottom: none;
			}
			#zxw a .iconfont{
     
				font-size:36px;line-height: 50px;color:#8cc63e;
			}
		</style>
	</head>
	<body>
		<div id="zxw">
			<a href="">
				<span class="iconfont icon-shouye"></span>
			</a>
			<a href="">
				<span class="iconfont icon-QQ"></span>
			</a>
			<a id="nobord" href="">
				<span class="iconfont icon-shouji"></span>
			</a>
		</div>
	</body>
</html>

请添加图片描述

2-7 背景精灵简介

1.背景精灵技术（雪碧图）：就是在一张大图片上集成了很多张小图片上。使用背景定位来显示要显示的图片
2.背景精灵技术 的作用：可以减少向服务器请求的次数，降低服务器的压力，加快浏览器加载

2-8 背景大图制作技巧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<style type="text/css">
			.zxw{
     
				width: 400px;height:50px;background: bisque;
				margin:100px auto;
			}
			.zxw a{
     
				display: block;width:80px;height: 50px;line-height: 50px;
				float: left;text-align:right;padding-right: 20px;
				background: url(../../img/zxw1.png) no-repeat;
			}
			#a1{
     
				background-position:0 0;
			}
			#a2{
     
				background-position:0 -50px;
			}
			#a3{
     
				background-position:0 -100px;
			}
			#a4{
     
				background-position:0 -150px; 
			}
		</style>
	</head>
	<body>
		<div class="zxw">
			<a href="" id="a1">
				<span>首页</span>
			</a>
			<a href="" id="a2">
				<span>QQ</span>
			</a>
			<a href="" id="a3">
				<span>微信</span>
			</a>
			<a href="" id="a4">
				<span>手机</span>
			</a>
		</div>
	</body>
</html>

请添加图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<style type="text/css">
			.zxw{
     
				width: 50px;background: bisque;
				margin:100px auto;
			}
			.zxw a{
     
				display: block;width:50px;height: 80px;text-align: center;
				padding-top: 50px;box-sizing: border-box;
				background: url(../../img/zxw2.png) no-repeat;
			}
			#a1{
     
				background-position:0 0;
			}
			#a2{
     
				background-position:-50px 0;
			}
			#a3{
     
				background-position:-100px 0;
			}
			#a4{
     
				background-position:-150px 0; 
			}
		</style>
	</head>
	<body>
		<div class="zxw">
			<a href="" id="a1">
				<span>首页</span>
			</a>
			<a href="" id="a2">
				<span>QQ</span>
			</a>
			<a href="" id="a3">
				<span>微信</span>
			</a>
			<a href="" id="a4">
				<span>手机</span>
			</a>
		</div>
	</body>
</html>

请添加图片描述

制作背景大图，适用于背景图片，没有专门的盒子存放
1.图标和文字上下排列，要做单行背景图，每个图标所占的宽度，等于元素的宽度
2.图标和文字左右排列，要做单列背景图，每个图标所占的高度，等于元素的高度

2-9.固定尺寸背景精灵设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<style type="text/css">
					/*远程培训班开始*/
					.ycpx{
     
						height:160px;background: #fff;padding-top:22px ;width:1200px;margin: 0 auto;
					}
					.ycpx a{
     
						display: block;width:210px;height: 114px;float: left;
						margin: 0 15px;border-radius: 12px;overflow: hidden;
						color:#fff;font-size:24px;font-weight: 700px;text-align: center;line-height: 114px;
						background: url(../../img/zxw3.png) no-repeat;
					}
					.ycpx a:hover{
     
						/*background-size:110% 110% ;*/
					}
					.ycpx .a1{
     
						background-position:0 0 ;
					}
					.ycpx .a2{
     
						background-position:-208px 0;
					}
					.ycpx .a3{
     
						background-position:-416px 0;
					}
					.ycpx .a4{
     
						background-position:-624px 0;
					}
					.ycpx .a5{
     
						background-position:-832px 0;
					}

		/*远程培训班结束*/
		</style>
	</head>
	<body>
			<!--远程培训班开始-->
		<div class="ycpx">
			<a class="a1" href="#">
				
			</a>
			<a class="a2" href="#">
				
			</a>
			<a class="a3
最低0.47元/天 解锁文章
君子不立于危墙
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
HTML / CSS 实践练习
MartinYP的博客
07-13 589
HTML / CSS 实践练习记录博客
百度前端实战训练营--CSS基础
hechengjiang_009的博客
01-07 633
百度前端实战训练营——CSS基础
css 样式实战
ws - 兮的博客空间
12-06 925
使用filter 滤镜可对图标进行任意变色。示例1：在当前父元素下把按钮定位到右边。参数： 展示隐藏动画时间，默认无动画。父元素使用 relative 定位。子元素使用 absolute 定位。图标使用 relative 定位。内容使用 absolute 定位。文本超出显示省略号 …2-图标展开隐藏切换。
2024年Web前端最全我写CSS的常用套路(附demo的效果实现与源码）(1)，满满干货
最新发布
2401_84411323的博客
05-05 349
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
CSS实践详解总结
小小默：进无止境
05-13 818
【1】CSS选择器 ① 类选择器 1.后代选择 选择父类下面的所有后代。 .wrapper-item .layui-form-label{ width: 25%; } <div class="wrapper-item"> <label for="name" class="layui-form-label"> <span class="we-red">*</span>姓名 </label> </
HTML和CSS实战项目
天天学安全专属博客
07-07 1149
HTMl和CSS学后必做项目
你可能不知道的CSS技巧实战经验整理
01-19
所以开发者们把以下CSS代码放在他们页面上： 复制代码代码如下: *{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } box-sizing 是个很新的属性，目前需要使用 -webkit-和 ...
CSS高效开发实战
12-31
全书包含大量的实战案例和开发技巧，总结了CSS开发中的非常好的实践方法（LESS、SASS、Bootstrap、Foundation、Node.js、jQuery），讨论了各种实际问题的解决方案，是一本目前市场上难得一见的CSS高效开发实战书。
html+css入门到实战源码
12-09
总之，HTML和CSS的学习是一个循序渐进的过程，从基础标签和样式规则开始，逐渐过渡到更高级的概念和技巧。通过这个"html+css入门到实战源码"的学习资源，你将能够逐步掌握前端开发的基础，为未来的网页设计和开发...
图解CSS3核心技术与案例实战pdf
05-16
《图解CSS3核心技术与案例实战》是一本深入解析CSS3技术的专业书籍，旨在帮助读者理解和掌握CSS3的精髓，并能将其应用到实际项目中。这本书以清晰的图解方式，将复杂的概念和技巧生动地呈现出来，适合初学者和有一定...
HTML/CSS实战训练（仿新浪网页）
giserhfbuie的博客
03-14 2180
学了两天的HTML/CSS了，这是第一次参与实战做网页，发现将零碎知识点串在一起很重要，要不然还是不知道怎么写，而且深刻感受到了前端的不易，虽然前端逻辑简单，但实际上手却有很多疑问和考虑的点，不过幸好通过不断的尝试做出来了。在用CSS选择器时，一定要注意是块级元素还是行内元素，它们之间的特点，margin和padding是对哪个标签使用的，float使用完毕对齐后，要在div标签中加入<div style="clear:both;">，这样其他边框才不会改变。另外，对于行内元素来说，是不能直接控
传智播客梅兰商城项目实战HTML+CSS源代码.rar
09-10
本人根据传智播客梅兰商城项目实战的PSD文件。做的网页，用到了HTML5+CSS3的一些技术。欢迎大家下载查看。本人也是新手一个！
HTML & CSS 核心教程：（103集实战教学，从入门到精通）
11-21
HTML & CSS 核心教程：（103集实战教学，从入门到精通）
HTML&CSS;实战教程
03-20
创建标准网页的初学者指南，也适合深入学习Html，CSS的同学，后面课程有深入的讲解，本课程会初级介绍Html和CSS，让你从入门到精通轻松掌握Web开发语言，从元素标签到CSS样式每个部分都详细进行了介绍和讲解，讲解了经常遇见的一些兼容性问题。本教程会结合实际案例，一步一步带你走进Html和CSS的世界，创建让你心动的Web页面
HTML5+CSS3速成实战课程【7天学会，上手实战没问题】视频教程
10-27
课程通俗易懂，7天学会，上手实战没问题； 建议有HTML、DIV+CSS基础技能的学员来学习！适合人群：非常适合初级学员、在校大学生、实习生，亦或是上班族，对网页制作有浓厚兴趣的极客们。
HTML+CSS小实战案例
热门推荐
Biexiansheng的博客
04-19 1万+
HTML+CSS小实战案例 登录界面的美化，综合最近所学进行练习 网页设计先布局，搭建好大框架，然后进行填充，完成页面布局 1 html> 2 head> 3 meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 title>实验title> 5 style type=
菜鸟学习笔记——前端开发——CSS（5） 实例练习
zhihuiyu123的博客
06-21 3786
由于上次做网页布局的练习摔得有点惨，这次再找一个练一练。例题网址    http://www.runoob.com/w3cnote/htmlcss-make-a-website.html这次练习的是——简单的响应式网页step1：只布局，无响应效果导航栏由于之前练习过，暂时没什么难度；中间部分左右分布（一开始用的float）；下方一个页脚。这一步马马虎虎完成，然而调整窗口大小之后，页面就像一坨某某...
CSS实例练习
KWLShadow的博客
09-17 837
HTML5+CSS3设计页面布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
CSS实战（制作京东简易首页）
John_boom的博客
09-17 3942
项目文件夹 （站点）我们的网页都应该放到一个文件夹内。 站点-本地站点规划好页面项目文件夹 1 .首页 index.html 2 .样式 css文件夹 css文件 相同样式 （全局样式 公共样式） Base.css（基本样式） global.css (全局样式) 3.图片 images 文件 4.特效 js文件夹
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值