CSS3相关

最新推荐文章于 2024-05-26 19:30:00 发布

阿姆斯特朗螺旋麦辣鸡

最新推荐文章于 2024-05-26 19:30:00 发布

阅读量431

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_44556624/article/details/108287786

版权

1. css的复合选择器

常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
在这里插入图片描述

1.1 后代选择器
后代选择器又称为包含选择器，可以选择父元素里面子元素。当标签发生嵌套时，内层标签就成为外层标签的后代。

元素1 元素2 { 样式声明 }

<style>
	/*把ol里的li变色*/
	ol li {
		color: blue;
	}
	ol li a {
		color: red;
	}
	.nav li a{
		color: yellow;
	}
</style>
<body>
	<ol>
		<li>ol的孩子</li>
		<li>ol的孩子</li>
		<li><a href="#">ol的孙子</a></li>
	</ol>
	<ol class="nav">
		<li>ol的孩子</li>
		<li>ol的孩子</li>
		<li><a href="#">ol的孙子</a></li>
	</ol>
</body>

元素2可以使元素1的儿子或孙子

1.2 子选择器
只能选择最近一级的选择器（子选择器）

元素1 > 元素2 { 样式声明 }

例：将肘子变为红字

.hot>a{
	color: red;
}
<div class="hot">
	<a href="#">肘子</a>
	<ul>
		<li><a href="#">猪蹄</a></li>
		<li><a href="#">猪尾巴</a></li>
	</ul>
</div>

1.3 并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式

元素1,元素2 { 样式声明 }

1.4 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。伪类选择器很多，比如有链接伪类、结构伪类等
伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。
1.4.1 链接伪类选择器

a: link /* 选择所有未被访问的链接*/
a: visited /* 选择所有已被访问的链接*/
a: hover /* 选择鼠标指针位于其上链接*/
a: active /* 选择鼠标按下未被弹起链接*/

1.4.2 focus伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素
点击某个框后变色

<style>
	input:focus{
		background-color: yellow;
	}
</style>
<body>
	<input type="text">
	<input type="text">
	<input type="text">
</body>

2 显示模式

元素显示模式就是元素（标签）以什么方式进行显示，比如< div >自己占一行，比如一行可以放多个< span >。
HTML 元素一般分为块元素和行内元素两种类型。
2.1 块元素
常见的块元素有< h1 >~< h6 >、< p>、< div>、< ul>、< ol>、< li>等，其中 < div> 标签是最典型的块元素。
块级元素的特点：

独占一行。
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
是一个容器及盒子，里面可以放行内或者块级元素。

注意： 文字类的元素内不能使用块级元素。< p> 标签主要用于存放文字，因此 < p> 里面不能放块级元素，特别是不能放< div>；同理，< h1>~< h6>等都是文字类块级标签，里面也不能放其他块级元素。
2.2 行内元素
常见的行内元素有 < a>、< strong>、< b>、< em>、< i>、< del>、< s>、< ins>、< u>、< span>等，其中
< span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点：

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素

注意： 链接里面不能再放链接；特殊情况链接 < a> 里面可以放块级元素，但是给 < a> 转换一下块级模式最安全。
2.3 行内块元素
在行内元素中有几个特殊的标签 —— < img />、< input />、< td>，它们同时具有块元素和行内元素的特点。
行内块元素的特点：

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
默认宽度就是它本身内容的宽度（行内元素特点）。
高度，行高、外边距以及内边距都可以控制（块级元素特点）。

2.4 元素显示模式转换
在这里插入图片描述
比如这种链接< a>是行元素，点击链接就跳转，但是要设计成由长宽块状样子就要变成块元素。

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;

<style>
	a{
		width: 200px;
		height: 30px;
		background-color: yellow;
		display: block;
		text-align: center;
		text-decoration: none;
	}
</style>
<body>
	<a href="#">点击进入下一页 </a>
</body>

demo：简洁小米官网侧边栏点进去就变色
在这里插入图片描述

<style>
	a{
		width: 200px;
		height: 30px;
		background-color: #55585a;
		display: block;
		text-decoration: none;
		text-indent: 2em;
		/*让文字行高等于盒子的行高就能使文字垂直居中*/
		line-height: 30px;
	}
	a:hover{
		background-color: #ff6700;
	}
</style>
<body>
	<a href="#">手机 电话卡</a>
	<a href="#">电视 盒子</a>
	<a href="#">笔记本 平板</a>
	<a href="#">出行 穿戴</a>	
	<a href="#">智能 路由器</a>
	<a href="#">健康 儿童</a>
	<a href="#">耳机 音响</a>
</body>

3 背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
3.1 背景图片

background-image : url (url)

背景图片平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

在这里插入图片描述
背景图片位置

background-position: x y;

background-position: center left;
background-position: 10px 20px;

背景图像固定（背景附着）
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动

background-attachment : scroll | fixed
//scroll：背景图像随内容滚动
//fixed: 背景图像固定

<style>
	body {
		background-image: url(F:/sublime实验/前端综合案例/wangz.jpg);
		background-repeat: no-repeat;
		background-position: center top;
		background-attachment: scroll;
		/*背景图片不随文字的滚动*/
		/*background-attachment: fixed;*/
	}
</style>
<body>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	<p>背景图片随文字的滚动而滚动</p>
	
</body>

复合写法

background: transparent url(image.jpg) repeat-y fixed top ;

背景颜色半透明
背景图片的颜色半透明

background: rgba(0, 0, 0, 0.3);
//最后一个参数是 alpha 透明度，取值范围在 0~1之间

4 盒子

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容。
在这里插入图片描述
4.1 边框

border : border-width || border-style || border-color
border-style：solid（实）dashed(虚) dotted（点线）

盒子边框上面是红色，下面是蓝色

<style>
	div{
		width: 200px;
		height: 200px;
		border: 5px solid blue;
		border-top: 5px solid red;
	}
</style>
<body>
	<div></div>
</body>

相邻边框合并

border-collapse: collapse;

HTML里的demo用CSS做

<style>
	table{
		width: 500px;
		height: 250px;
		
	}
	table,td,th {
		border: 1px solid skyblue;
		/*合并边框*/
		border-collapse: collapse;
		text-align: center;
	}
</style>

<body>
<!-- cellpadding:框里文字的内容与框的距离；cellspacing:单元格间的距离 -->
	<table>
		<tr>
			<th>排名</th> <th>关键词</th> <th>趋势</th> <th>今日搜索</th> <th>最近七日</th> <th>相关链接</th>
		</tr>
		<tr>
			<td>1</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td><td><a href="http://www.baidu.com">百度</a> <a href="http://www.baidu.com">百度</a> </td>
		</tr>
		<tr>
			<td>2</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td><td>123</td>
		</tr>
		<tr>
			<td>3</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td> <td>123</td>
		</tr>
		<tr>
			<td>4</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td> <td>123</td>
		</tr>
		<tr>
			<td>5</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td> <td>123</td>
		</tr>
		<tr>
			<td>6</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td> <td>123</td>
		</tr>
		<tr>
			<td>7</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td> <td>123</td>
		</tr>
	</table>
</body>

4.2 内边距
padding 属性用于设置内边距，即边框与内容之间的距离。

padding-left/right/top/bottom

padding:5px 10px 15px 20px上右下左

导航栏demo
在这里插入图片描述

<style>
	.nav{
		height: 41px;
		border-top: 3px solid #ff8500;
		border-bottom: 1px solid #edeef0;
		background-color: #fcfcfc;
		line-height: 41px;
	}
	.nav a{
		/*a是行内元素，height不起作用，要转化成行内块元素*/
		display: inline-block;
		height: 41px;
		padding: 0 20px;
		font-size: 12px;
		color: #4c4c4c;
		text-decoration: none;
	}
	.nav a:hover {
		  background-color: #eee;
		  color: #ff8500;
	}
</style>

<body>
	<div class="nav">
		<a href="#">新浪导航</a>
		<a href="#">手机新浪网</a>
		<a href="#">移动客户端</a>
		<a href="#">微博</a>
	</div>
</body>

4.3 外边距
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

margin-left/right/top/bottom

外边距典型应用： 外边距可以让块级盒子水平居中（缩小放大浏览器页面，都在中间），但是必须满足两个条件：
① 盒子必须指定了宽度（width）。
② 盒子左右的外边距都设置为 auto 。

.header{ width:960px; margin:0 auto;}

嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方法：

可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加 overflow:hidden。
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题

在这里插入图片描述


<style>
	.header{
		width: 300px;
		height: 100px;
		background-color: blue;
		margin-top: 50px;
		/*1.添加上边框*/
		/*border-top: 1px solid transparent;*/
		/*2.添加上内边框*/
		/*padding: 1px;*/
		/*3.overflow：hidden*/
		overflow: hidden;
	}
	.son{
		width: 50px;
		height: 50px;
		background-color: green;
		margin-top: 20px;
	}
</style>
<body>
	<div class="header">
		<div class="son"></div>
	</div>
</body>

清除内外边距

* {
 padding:0; /* 清除内边距 */
 margin:0; /* 清除外边距 */
 }

demo
在这里插入图片描述
为什么图片显示不出，我人没了

<style>
	*{
		padding:0; /* 清除内边距 */
 		margin:0; /* 清除外边距 */
	}
	body{
		background-color: #f5f5f5;
	}

	.box{
		width: 298px;
		height: 415px;
		/*让块级盒子居中对齐*/
		background-color: #fff;
		margin: 100px auto;
	}
	.review{
		height: 70px;
		padding:0px 28px; 
		font-size: 14px;
		margin-top: 30px;
	}
	.appraise{
		padding:0px 28px; 
		font-size: 12px;
		color: gray;
		margin-top: 20px;
	}
	.info{
		padding:0px 28px;
		font-size: 14px;
		margin-top: 20px;
	}
	.info h4{
		display: inline-block;
		/*取消标题加粗*/
		font-weight: 400;
	}
	.info span{
		color: #ff6700;
	}
	.info em{
		/*em如果里的|会变成斜线，这里是取消变斜*/
		font-style: normal;
		margin: 0px 6px 0px 15px;
	}
</style>
<body>
	<div class="box">
		<img src="‪E:/images/1.jpg">
		<p class="review">快递牛，整体连接不错可以说秒连，红米给力</p>
		<div class="appraise">来自于117384232</div>
		<div class="info">
			<h4 class="h">Redmi AirDots真无线...</h4>
			<em>|</em>
			<span> 99.9元</span>
		</div>
	</div>
</body>

demo
去掉li前面的小圆点

list-style: none;

在这里插入图片描述

<style>
	*{
		padding:0; /* 清除内边距 */
 		margin:0; /* 清除外边距 */
	}
	body{
		background-color: #f5f5f5;

	}
	/*去掉li前面的小圆点*/
	li{
		list-style: none;
	}
	.box{
		width: 248px;
		height: 163px;
		border: 1px solid grey;
		background-color: #fff;
		/*让块级盒子居中对齐*/
		margin: 100px auto;
	}
	.h{
		height: 32px;
		padding-left: 15px;
		border-bottom:1px dotted grey;
		font-size: 14px;  
		font-weight: 400;
		color: grey;
		/*让文字垂直居中*/
		line-height: 32px;
	}
	.box ul{
		padding-top: 7px;
	}
	.box ul li a{
		height: 15px;
		padding: 5px 5px;
		text-decoration: none;
		font-size: 12px;
		color: #666666;
	}
	.box ul li{
		height: 23px;
		line-height: 23px;
		padding-left: 20px;
	}
</style>
<body>

	<div class="box">
		<h3 class="h">品优购快报</h3>
		<ul>
			<li><a href="">【特惠】爆款耳机五折秒！</a></li>
			<li><a href="">【特惠】母亲节，健康好礼低至五折</a></li>
			<li><a href="">【特惠】爆款耳机五折秒！</a></li>
			<li><a href="">【特惠】9.9元洗100张照片！</a></li>
			<li><a href="">【特惠】长虹智能空调立省1000</a></li>
		</ul>
	</div>
</body>

圆角边框

border-radius:length;
：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius

如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
参数值可以为数值或百分比的形式

盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

5 浮动

浮动特性：
1.脱离标准普通流的控制（浮）移动到指定位置（动）, （俗称脱标）
2. 浮动的盒子不再保留原先的位置
3. 浮动元素会具有行内块元素特性

定位

定位 = 定位模式 + 边偏移。
静态定位static
相对定位relative
绝对定位absolute

5.1 相对定位

选择器 { position: relative; }

相对定位的特点：

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。相对定位给绝对定位当爹

5.2 绝对定位

选择器 { position: absolute; }

绝对定位的特点：

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
绝对定位不再占有原先的位置。（脱标）
所以绝对定位是脱离准流的。

因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

5.3 固定定位fixed

选择器 { position: fixed; }

固定定位的特点：（务必记住）

以浏览器的可视窗口为参照点移动元素。
 跟父元素没有任何关系
 不随滚动条滚动。
固定定位不在占有原先的位置。

固定在版心内部
demo
卖家秀
在这里插入图片描述
买家秀（不是）

<style>
	.right{
		position: fixed;
		top: 100px;
		right: 40px;
	}
	.left{
		position: fixed;
		top: 100px;
		left: 40px;
	}
	
</style>
<body>
	<div class="right">
		<img src="F:\sublime实验\前端综合案例\学成网在线教育\web\images\icon1.png" alt="">
	</div>
	<div class="left">
		<img src="F:\sublime实验\前端综合案例\学成网在线教育\web\images\icon1.png" alt="">
	</div>
</body>

固定在版心外部
固定定位小技巧：固定在版心右侧位置。
小算法：

让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置。
让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置
就可以让固定定位的盒子贴着版心右侧对齐了。

demo
在这里插入图片描述

<style>
	.w{
	
		width: 800px;
		height: 1400px;
		background-color: pink;
		margin:0 auto;
	}
	.left{
		position: fixed;
		width: 100px;
		height: 400px;
		left: 50%;
		margin-left: 400px;
		background-color: blue;
	}
</style>
<body>	
	<div class="left"></div>
	<div class="w">	</div>
</body>

5.4 定位叠放优先级
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

选择器 { z-index: 1; }

 数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上
 如果属性值相同，则按照书写顺序，后来居上
 数字后面不能加单位
 只有定位的盒子才有 z-index 属性

绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
① left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。
② margin-left: -100px;：让盒子向左移动自身宽度的一半。

<style>
	.box{
		position: absolute;
		width: 200px;
		height: 200px;
		background-color: pink;
		/*不能通过这样使绝对定位的盒子居中*/
		/*margin:0 auto;*/
		left: 50%;
		margin-left: -100px;
		top: 50%;
		margin-top: -100PX;
	}
</style>
<body>	
	<div class="box "></div>
</body>

绝对定位和固定定位也和浮动类似。

行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。（如果不加定位，则大小为整行）
脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。
绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
但是绝对定位（固定定位）会压住下面标准流所有的内容。
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

<style>
	.box1{
		/*浮动定位不会压到下面的文字*/
		float: left;
		width: 200px;
		height: 200px;
		background-color: pink;
	}
	.box2{
		/*绝对定位会压到（掩盖）下面的文字*/
		position: absolute;
		width: 200px;
		height: 200px;
		background-color: pink;
		/*不能通过这样使绝对定位的盒子居中*/
		/*margin:0 auto;*/
		/*left: 50%;*/
		/*margin-left: -100px;*/
		/*top: 50%;*/
		/*margin-top: -100PX;*/
	}
</style>
<body>	
	<div class="box2 "></div>
	<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</body>

demo：淘宝焦点图布局
在这里插入图片描述

<style>
	*{
		margin:0;
		padding: 0;
	}
	li{
		list-style: none;
	}
	.promt{
		position: relative;
		width: 520px;
		height: 280px;
		margin: 100px auto;
	}
	.prev,
	.next {
		position: absolute;
		top: 50%;
		margin-top:-15px;
		
		/*加了绝对定位的盒子可以设置高度和宽度*/
		width: 20px;
		height: 30px;
		background: rgba(0,0,0,0.3);
		text-align: center;
		line-height: 30px;
		color: #fff;
		text-decoration: none;
	}
	.prev{
		left: 0;
		/*让方形变圆一点*/
		border-top-right-radius: 15px;
		border-bottom-right-radius: 15px;
	}
	.next{
		right: 0;
		border-top-left-radius: 15px;
		border-bottom-left-radius: 15px;
	}
	.promt ul li a{
		position: absolute;
		right: 50%;
		margin-bottom:10px;
		background: rgba(0,0,0,0.3);
	}
	.promo-nav{
		position: absolute;
		bottom: 10px;
		width: 70px;
		height: 13px;
		left: 50%;
		margin-left: -35px;
		background: rgba(255,255,255,0.3);
		border-radius: 7px;
	}
	.promo-nav ul li{
		float: left;
		width: 8px;
		height: 8px;
		background-color: #fff;
		border-radius: 50%;
		margin:3px; 
	}

</style>
<body>	
	<div class="promt ">
		<img src="F:\sublime实验\前端综合案例\tb.jpg" alt="">
		<a href="#" class="prev">></a>
		<a href="#" class="next"><</a>
		<div class="promo-nav">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>
</body>
</html>

5.5 元素的显示与隐藏
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

display 显示隐藏，但是不保留位置
visibility 显示隐藏，但是保留原来的位置
overflow 溢出显示隐藏，但是只是对于溢出的部分处理

display

display: none ；隐藏对象 -----隐藏元素后，不再占有原来的位置
display：block ；除了转换为块级元素之外，同时还有显示元素的意思

visibility

visibility：visible ; 元素可视
visibility：hidden; 元素隐藏

visibility 隐藏元素后，继续占有原来的位置。
如果隐藏元素想要原来位置，就用 visibility：hidden
如果隐藏元素不想要原来位置，就用 display：none

overflow

6 精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称CSS Sprites、CSS 雪碧）。
核心原理： 将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
demo：在字母表中显示自己的名字
在这里插入图片描述
变成

<style>
	*{
		margin:0;
		padding: 0;
	}
	span{
		display: inline-block;
	}
	.t{
		width: 80px;
		height: 91px;
		/*background-color: pink;*/
		background:  url(zimu.jpg) no-repeat -90px -301px;
	}
	.r{
		width: 80px;
		height: 91px;
		/*background-color: pink;*/
		background:  url(zimu.jpg) no-repeat -429px -205px;
	}
	.a{
		width: 80px;
		height: 91px;
		/*background-color: pink;*/
		background:  url(zimu.jpg) no-repeat -14px -6px;
	}
	.c{
		width: 80px;
		height: 91px;
		/*background-color: pink;*/
		background:  url(zimu.jpg) no-repeat -184px -11px;
	}
	.y{
		width: 80px;
		height: 91px;
		/*background-color: pink;*/
		background:  url(zimu.jpg) no-repeat -218px -404px;
	}
</style>
<body>	
	<span class="t"></span>
	<span class="r"></span>
	<span class="a"></span>
	<span class="c"></span>
	<span class="y"></span>
</body>

7 三角形做法

<style>
	*{
		margin:0;
		padding: 0;
	}
	.box1{
		width: 0;
		 height: 0;
		 line-height: 0;
		 font-size: 0;
		 border: 50px solid transparent;
		 border-left-color: pink;
		 margin:100px auto;
	}
	
</style>
<body>	
	<div class="box1"></div>
</body>

在这里插入图片描述

<style>
	*{
		margin:0;
		padding: 0;
	}
	span{
		display: inline-block;
	}
	.jd{
		position: relative;
		width: 60px;
		height: 100px;
		background-color: pink;

		margin:100px auto;
	}
	.jd span{
		position: absolute;
		top: -10px;
		height: 0;
		width: 0;
		right: 10px;
		line-height: 0;
		font-size: 0;
		border:5px solid transparent;
		border-bottom-color: grey; 
	}
</style>
<body>	
	<div class="jd">
		<span></span>
	</div>
</body>

8 用户界面样式

8.1 鼠标样式

<ul>
		<li style="cursor: default;">白箭头</li>
		<li style="cursor: pointer;">小胖手</li>
		<li style="cursor: move;">十字架</li>
		<li style="cursor: text;">文本 工字型</li>
		<li style="cursor: not-allowed;">禁止</li>
	</ul>

8.2 取消轮廓线
取消边框点进去后的轮廓

<style>
	input{
			outline: none;
		}
</style>
<body>
	<input type="text">
</body>

8.3 取消边框右下角拖拽
在这里插入图片描述

<style>
	textarea{
			resize: none;
		}
</style>
<body>
	<textarea name="" id="" cols="30" rows="10"></textarea>
</body>

9 vertical align 属性应用

vertical-align : baseline | top | middle | bottom

在这里插入图片描述
9.1
图片默认与文字基线对齐

改成底线对齐：

<style>
	*{
		margin:0;
		padding: 0;
	}
	img{
		vertical-align: bottom;
		/* vertical-align: middle; */ 居中 
	}
</style>
<body>	
	<img src="F:\sublime实验\前端综合案例\tb.jpg" alt="">pgjdyq
</body>

9.2
图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：

给图片添加 vertical-align:middle | top| bottom 等。
把图片转换为块级元素 display: block;

<style>
	*{
		margin:0;
		padding: 0;
	}
	div{
		border: 1px solid red; 
	}
	img{
		vertical-align: bottom;
		/* display: block; */改为块级元素
	}
</style>
<body>	
	<div>
		<img src="F:\sublime实验\前端综合案例\tb.jpg" alt="">	
	</div>
	
</body>

10 溢出元素用省略号表示

> /*1. 先强制一行内显示文本*/
 white-space: nowrap;
 /*2. 超出的部分隐藏*/
 overflow: hidden;
 /*3. 文字用省略号替代超出的部分*/
 text-overflow: ellipsis;

常见布局技巧

行内块
页码在页面中间显示:

把这些链接盒子转换为行内块，之后给父级指定 text-align:center;
利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中

<style>
	*{
		margin:0;
		padding: 0;
	}
	.box{
		text-align: center;
		margin:100px auto;
	}
	.box a{
		display: inline-block;
		width: 36px;
		height: 36px;
		background-color: #f7f7f7;
		border:1px solid #ccc;	
		text-decoration: none;
		text-align: center;
		line-height: 36px;
	}
	
	.box .prev,
	.box .next{
		width:85px;
		font-size: 12px;
	}
	.box .current,
	.box .elp{
		background-color: #fff;
		border: none;
	}
	.box input{
		height: 36px;
		width: 45px;
		border:1px solid #ccc;
	}
</style>
<body>	
	<div class="box">
		<a href="#" class="prev"><<上一页</a>
		<a href="#">1</a>
		<a href="#" class="current">2</a>
		<a href="#">3</a>
		<a href="#">4</a>
		<a href="#">5</a>
		<a href="#">6</a>
		<a href="#" class="elp">...</a>
		<a href="#" class="next">>>下一页</a>
		到第
		<input type="text">页
		<button>确定</button>
	</div>
</body>

三角强化

<style>
	*{
		margin:0;
		padding: 0;
	}
	.box {
		
		width: 0;
		height: 0;
		/*border-color: transparent red transparent transparent; 
		border-style: solid;
		border-width: 22px 8px 0 0;*/
		margin: 100px auto;
	}
	.price{
		width: 160px;
		height: 24px;
		border: 1px solid red;
		line-height: 24px;
	}
	.left{
		position: relative;
		float: left;
		width: 90px;
		height: 100%;
		background-color: red;
		text-align: center;
		color: #fff;
		font-weight: 700;
	}
	.left i{
		position: absolute;
		width: 0;
		height: 0;
		border-color: transparent #fff transparent transparent; 
		border-style: solid;
		border-width: 24px 10px 0 0;
		right: 0;
		top: 0;

	}
	.right{
		margin-left: 5px;
		font-size: 12px;
		color: grey;
		text-decoration: line-through;
	}
</style>
<body>	
	<div class="box"></div>
	<div class="price">
		<span class="left">
			¥1650
			<i></i>
		</span>
		<span class="right">¥5600</span>
	</div>
</body>

阿姆斯特朗螺旋麦辣鸡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3相关

1. css的复合选择器常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等1.1 后代选择器后代选择器又称为包含选择器，可以选择父元素里面子元素。当标签发生嵌套时，内层标签就成为外层标签的后代。元素1 元素2 { 样式声明 }<style> /*把ol里的li变色*/ ol li { color: blue; } ol li a { color: red; } .nav li a{ color: yellow; }</style&
复制链接

扫一扫