CSS第三章_web中bgcolor-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51666153/article/details/144376124

B站《前端Web开发HTML5+CSS3+移动web视频教程》第五天的课程

一、选择器

1.结构伪类选择器

①作用：根据元素的结构关系查找元素。
②语法：在这里插入图片描述
③实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=weilei, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /* 查找第一个E元素 */
        li:first-child {
            background-color: #00ffff;
        }
        /* 查找最后一个E元素 */
        li:last-child {
            background-color: #ffff00;
        }
        /* 查找第4个元素 */
        li:nth-child(4) {
            background-color: #ff80c0;
        }
    </style>
</head>
<body>
    <ul>
        <li>li 1</li>
        <li>li 2</li>
        <li>li 3</li>
        <li>li 4</li>
        <li>li 5</li>
        <li>li 6</li>
    </ul>
</body>
</html>

④效果图
在这里插入图片描述
⑤.:nth-child(公式)
作用括号中公式的写法，可以根据元素的结构关系查找多个元素。
⑥常用公式表

⑦注意：最后两个公式中n默认从0开始

2.伪元素选择器

①作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。
②选择器
在这里插入图片描述
③注意：必须设置content:" "属性，用来设置伪元素的内容，如果没有内容，则引号留空即可。如果没有content则伪元素不生效。
伪元素默认是行内显示模式
权重和标签选择器相同
④实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: #ff80c0;
          }
        div::before {
            content: "老鼠";
        }
        div::after {
            content: "大米";
        }
    </style>
</head>
<body>
    <div>
        爱
    </div>
</body>
</html>

效果图
在这里插入图片描述

二、PxCook软件

1.介绍

Pxcook（像素大厨）是一款切图设计工具软件，支持PSD文件（设计稿文件后缀名）的文字、颜色、距离自动识别。

2.使用步骤

①创建导入项目（自定义项目的名字）
②选择网页模式，点击创建。
在这里插入图片描述

③导入素材：点击右上角的添加，或者找到PSD文件之间拖拽到软件里面。
④双击打开素材，右上角可以缩放素材，缩放到合适尺寸后，按住空格键，单机鼠标左键可以拖拽幕布，改变幕布位置。
⑤开发模式可以智能识别开发尺寸
⑥设计模式——工具箱——尺子，可以手动测量尺寸

三、盒子模型—组成

1.盒子模型的重要组成部分

①内容区域：width&height
②内边距：padding（出现在内容与盒子边缘之间）
③边框线：border
④外边距：margin（出现在盒子外面）

2.盒子模型—边框线

①属性名：border（bd）
②属性值：边框线粗细线条样式颜色（用空格隔开，不区分先后顺序）
在这里插入图片描述
③设置单方向的边框线
属性名：border-方位名词（bd+方位名词首字母，例如bdl，top、right、bottom、left）
属性值：边框线粗细线条样式颜色（空格隔开，不区分先后顺序）

3.盒子模型—内边距

①属性名：padding/padding-方位名词
②多值写法
在这里插入图片描述

4. 盒子模型—尺寸计算

①盒子变大原因是，默认情况：盒子尺寸=内容尺寸+border尺寸+内边距尺寸
②解决办法：
手动做减法：在设置内容尺寸时，减去border/padding尺寸
设置内减模式自动减去border/padding尺寸：box-sizing:border-box

5.盒子模型—外边距

①作用：拉开两个盒子之间的距离
②属性名：margin
③提示：与padding属性值写法、含义相同，但margin不会撑大盒子尺寸。
④版心居中：margin：0 auto；margin左右的值取auto。

6.清除标签的默认样式

①使用通配符清除默认样式（京东）

*{
    margin:0;
    padding:0;
    }

②使用并集选择器，选中所有有默认样式的标签设置清除默认样式。（淘宝）

③扩展：在清除标签的默认样式的时候，同时加入box-sizing:border-box启动内减。

7.盒子模型—元素溢出

①作用：控制溢出元素的内容的显示方式
②属性：overflow
③属性值
overflow属性的属性值表
④注意：scroll有垂直和水平的滚动条，auto只有垂直的滚动条。

8.外边距问题

①合并现象
场景：垂直排列的兄弟元素，上下margin会合并
现象：取两个margin中较大的值生效。
解决：当需要设置垂直方向的两个盒子之间要有距离时，可以只设置一个盒子外边距就可以。

②塌陷问题
场景：父子级的标签，子级添加的上边距会产生塌陷问题
现象：导致父级一起向下移动
解决方法（推荐使用第一种）：
a取消子级margin，父级设置padding
b父级设置overflow:hidden
c父级设置border-top

③行内元素内外边距问题
场景：行内元素添加margin和padding，无法改变元素的垂直位置，只改变水平位置
解决：给行内元素添加line-height可以改变垂直位置。

9.盒子模型—圆角效果

①作用：设置元素的外边框为圆角
②属性名：border-radius
③属性值：数字+px/百分比（表示圆角半径）
④提示：属性值赋值从左上角顺时针开始，没有赋值的角与对角取相同的值，只有一个值时，四个角都是相同的值。
⑤正圆形状应用
给正方形盒子设置圆角属性，属性值为宽高的一半（或者50%）超过50%之后没有作用。
⑥胶囊形状的应用
给长方形盒子设置胶囊形状，属性值为高度的一半。

10.盒子模型的阴影

①作用：给元素设置阴影效果
②属性名：box-shadow
③属性值：x轴偏移量 y轴偏移量模糊半径扩散半径颜色内外阴影（属性值之间用空格隔开）
④提示：
x轴偏移量和y轴偏移量必须写
默认阴影是外阴影，内阴影需要添加inset
⑤实例

<!DOCTYPE html>
<html>
   <head>
      <title>CSS学习</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width,intial-scale=1.0">
	  <style>
	      div {
		        width:400px;
				height:200px;
		        background-color:#f06b1f;
				box-shadow:10px 10px 10px 1px rgba(0,0,0,0.5);
				
		  }
		  
	  </style>
   </head>
   <body>
      <div>黄色的盒子设置阴影</div>
   </body>
</html>

效果图
在这里插入图片描述

综合案例一：产品卡片

提示：CSS的书写顺序
1.盒子模型属性
2.文字样式
3.圆角、阴影等修饰线

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
	   <meta name="viewport" content="width=device-width,intial-scale=1.0">
	   <style>
	      * {
		      margin:0;
			  padding:0;
			  box-sizing: border-box;
			 }
			body {
				background-color: #f1f1f1;
			}
			.product {
				margin:50px auto;
				padding:40px;
				width: 270px;
				height: 250px;
				background-color:#fff;
				text-align:center;
				border-radius:10px;
			}
			
			.product h3 {
				margin-top:20px;
				margin-bottom:12px;
				font-szie:18px;
				color:#333;
			}
			.product p {
				font-size:12px;
				color:#555;
			}
			
			
	   </style>
   
   </head>
   <body>
		<div class="product">
			<img src="./liveSDK.svg">
			<h3>抖音直播SDK</h3>
			<p>包含抖音直播看播功能</p>
		</div>
   </body>

</html>

效果图

综合案例二：新浪新闻

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .news {
            margin: 30px auto;
            width: 360px;
            height: 200px;
            /* background-color: rgb(139, 222, 29); */
            
        }
        .news .hd {
            width: 360px;
            height: 34px;
            background-color: #eee;
            border: 1px solid #dbdee1;
            border-left: none;

        }
        .news .hd a {
            margin-top: -1px;
            display: block;
            border-top: 3px solid #ff8400;
            border-right: 1px solid #dbdee1;
            width: 48px;
            height: 34px;
            background-color: #fff;

            text-align: center;
            line-height: 34px;
            color: #333;
        }
        .news .bd {
            padding: 5px;
        }
        .news .bd li {
            padding-left: 15px;
            background-image: url("./square.png");
            background-repeat: no-repeat;
            background-position: 0 center;
        }
        .news .bd li a {
            padding-left: 20px;
            background: url("./img.gif") no-repeat 0 center;
            font-size: 12px;
            color: #666;
            line-height: 24px;
        }
        .news .bd li a:hover {
            color: #ff8400;

        }
    </style>
</head>
<body>
    <div class="news">
        <div class="hd"><a href="#">新闻</a></div>
        <div class="bd">
            <ul>
                <li><a href="#">点赞“新农人”温暖的双手</a></li>
                <li><a href="#">在希望的田野上...</a></li>
                <li><a href="#">中国“天眼”又有新发现 已在《自然》杂志发表</a></li>
                <li><a href="#">急！这个领域，缺人！月薪4万元还不好招！啥情况？</a></li>
                <li><a href="#">G9“带货”背后，亏损面持续扩大，竞争环境激烈</a></li>
                <li><a href="#">多地力推二手房“带押过户”，有什么好处？</a></li>  
                
            </ul>
        </div>
    </div>
    
</body>
</html>