web前端-css笔记

syzzz0

已于 2024-03-30 23:37:22 修改

阅读量419

点赞数 4

文章标签：前端 css 笔记

于 2024-03-24 11:27:39 首次发布

本文链接：https://blog.csdn.net/syzzz0/article/details/136960506

版权

选择器

基本选择器

 1. 标签选择器
	标签名{}
 2. 类选择器
	.类名{}
 3. id选择器
 	#id{}
 4. 通配符选择器
	*{}

包含选择器

1. 子类选择器：只会选择距离父元素最近的子元素
	父元素>子元素{} 
2. 后代选择器：选择父元素的全部子元素
	父元素 子元素{}
3. 逗号选择器：选择多个元素
	父元素，父元素{}

伪类选择器

1. 选择相同且连续元素中的第(数值)个子元素
	元素:nth-child(数值){}
2. 选择元素中所有元素的第(数值)个子元素
	元素:nth-of-type(数值){}
3. 选择元素中第一个子元素
	元素:frist_child{}
4. 选择元素中末尾的子元素
	元素:last-cild{}
5. 当鼠标悬停时选择
	元素:hover{} 
6. 选择未访问过的元素
	元素:link{} 
7. 选择已访问过的元素
	元素:visited{}

伪元素选择器

/*添加的伪元素不能被选中*/
1. 放置伪元素在原本元素前
元素::before{
	content:"伪元素内容"
	伪元素的属性
}
2. 放置伪元素在原本元素后
元素::after{
	content:"伪元素内容"
	伪元素的属性
}
3. 元素被选择时修饰
元素::selection{}

属性选择器

带有某属性的元素
元素[属性]{}
元素的某属性为某属性值
元素[属性='属性值']{}
属性值包含某个值
元素[属性*='属性值']{}
属性值以某值开头
元素[属性^='属性值']{}
属性值以某值结尾
元素[属性$='属性值']{}

样式

1. 首行缩进 em单位表示2个字体大小
	text-indebt:2em;
2. 去除下划线
	text-decoration: dashed;
3. 双下划线
	text-decoration: double;
4.字体大小
	font-size: 数值px;
5.加粗：普通400=normal，加粗700=bold
	font-weight: 数值/单词;
6.斜体
	font-style: initial;
7.字体：可以用中文
	font-family: 'Courier New', Courier, monospace;
8.行高：也可用于文字居中
	line-height: 数值px;
9.颜色
	rgb函数 红绿蓝
	color:rgb(133,31,2);
	rbga函数 红绿蓝 透明度（0-1）
	color: rgba(133,31,2,0.5);
	十六进制
	color: #005600;
10.文字阴影
	text:shadow:属性/值;
	X轴 Y轴 模糊半径 颜色
	可以用逗号隔开以对单个元素设置多个文本阴影
11.尺寸及方向
	设置元素是否可调整尺寸，以及可调整的方向
	resize: 属性;
	both：任意调整
	horizontal：水平方向可调
	vertical：垂直方向可调
	none：不可调
12.透明度
	/* 0-1 透明-实心 */
    opacity: 值;
13.光标样式
	cursor: 属性;
    text：文本
	pointer：手指
	move：十字箭头
	default：箭头
14.轮廓样式
	粗细 轮廓线样式 颜色
	outline:属性/值;
	无轮廓线
	outline: none;
}

元素的显示与隐藏

1.opacity:隐藏后依然保留位置
	选择器{opacity:0}
	选择器:hover{opacity:1}

2.display：隐藏后不会保留位置
	选择器{displaya:none}
	选择器:hover{display:block等}

3.visibility:保留位置
	选择器{visibility:hidden}
	选择器{visibility:visible}

列表属性

选择器{list-style:值;}
是list-style-type, list-style-image,list-style-position的简写
list-style-type：控制列表编号样式
list-style-image：列表编号以图片显示
list-style-position：指定标记框在主体块框中的位置
/*用来清除列表样式（编号）*/
选择器{list-style:none;}

字体图标及引入

以 iconfont 为例
最重要的其实是将html和解压包内的文件放到同一文件夹下面，剩下的步骤跟着demo_index.html 复制粘贴修改路径和图标编码就行

将想引入的图标放入购物车，加入项目
在项目中下载代码，解压
打开解压缩包中的demo_index.html文件，复制其中的文字声明代码放到CSS中
在想要使用图标的html文件夹下创建存放图标文件的文件夹
将解压文件夹下的 .css .eot .svg .ttf .woff .woff2 后缀的文件都放入该文件夹中

Unicode 引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标2</title>
    <style>
        @font-face {
        font-family: 'iconfont';
        src: url('iconfont.woff2?t=1711764679375') format('woff2'),
             url('iconfont.woff?t=1711764679375') format('woff'),
             url('iconfont.ttf?t=1711764679375') format('truetype');
        }
     
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
</head>
<body>
    <span class="iconfont">&#xe8f7;</span>
</body>
</html>

font-class 引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标</title>
    
</head>
<body>
    <link rel="stylesheet" href="./iconfont.css">
    <span class="iconfont icon-gouwuche"></span>
</body>
</html>

Symbol 引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字图标3</title>
    <style>
        .icon {
          width: 1em;
          height: 1em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }
        </style>
</head>
<body>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-sousuo"></use>
    </svg>
    <script src="./iconfont.js"></script>
</body>
</html>

css的特性

继承性

相同选择器，设置相同的属性，遵循就进原则。那个样式距离结构进，就显示哪个样式

层叠性

子标签会继承父标签的某些属性（字体颜色、字号等）

优先级

权重问题

!important(最大权重)>行内选择器(1,0,0,0)>id选择器(0,1,0,0)>(伪)类选择器(0,0,1,0)>标签选择器(0,0,0,1)>通配符选择器(0,0,0,0)>继承

权重叠加

复合选择器需要计算权重叠加
四位之间从左至右逐位比较。同样位数可以相加，但不会进位

背景图像

1. 插入图像
	background-image: url("链接");
2. 图像平铺方式
	background-repeat: 属性值;
	不平铺：no-repeat
	X轴平铺：repeat-x
	Y轴平铺：repeat-y
3. 图像背景位置
	background-position: 水平数值 垂直数值;
	水平方向 正数向右，负数向左
	垂直方向 正数向下
	不给数据的方向 默认居中
4. 图像大小
	background-size:属性值/数值;
	属性值：
	cover 图像完全覆盖背景区，不会压缩图像，但是图像可能会被裁剪，导致部分不可见
	contain 图像完全放入背景区，不会压缩图像，会平铺背景区
	数值;
	一个数值：宽度，高度值为auto
	两个数值：宽度 高度
	多个值：值1，值2，值3······ 设置多重背景
5. 固定图像
	background-attachment: 属性值；
	fixed 背景相对视口固定
	local 背景相对于元素的内容固定
	scroll 背景相对于元素本身固定

背景图片的属性可以连写，且没有顺序

去除图片底部空白

实质是修改垂直对齐方式

xzq{
    vertical-align: 属性/值;
    baseline:使元素的基线与父元素的基线对齐
    sub:使元素的基线与父元素的下标基线对齐
    super:使元素的基线与父元素的上标基线对齐
    text-top:使元素的顶部与父元素的字体顶部对齐
    text-bottom:使元素的底部与父元素的字体底部对齐
    middle:元素的中部与父元素的基线加上父元素 x-height 的一半对齐
    top:使元素及其后代元素的顶部与整行的顶部对齐
    bottom:使元素及其后代元素的底部与整行的底部对齐

	值：
	1.使元素的基线对齐到父元素的基线之上的给定长度。可以是负数
	2.使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是line-height属性的百分比。可以是负数
}

vertical-align 只适用于：
1.行内元素和模型与行内元素容器器垂直对齐。例如，将文字与图片对齐
2.垂直对齐表格单元内容
只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐块级元素

内容溢出

overflow-x
overflow-y
overflow：属性值；
可以指定两个属性值，属性值1用于X轴，属性值2用于Y轴
	auto
	visible 内容不能被裁减并且可能渲染到边距盒的外部
	hidden 内容将被裁减以适应边距盒。不提供滚动条，也不支持允许用户滚动。可以以编程的方式滚动
	clip 内容将以元素的边距盒进行裁剪。禁止所有滚动
	scroll 内容将被裁减以适应边距盒。无论是否实际裁剪了任何内容，浏览器总是显示滚动条

显示方式

概念

块级元素：所占宽度是父级元素的100%
行内元素：一行可以存在多个。宽高属性不生效，大小只由内容决定
行内块元素：一行可以存在多个，宽高属性生效，默认宽高由内容决定

元素类型转换

1. 转换为行内块元素
	display:inline-block;
2. 转换为块元素
	display:block;
3. 转换为行内元素
	display:inline;

块元素水平居中

选择器{margin: 0,auto;}

定位

标准流：文档流，标签在文档中默认的排布规则

静态定位

选择器{position:static;}
1. 元素的默认定位方式，可以将元素定位于静态位置(各个元素在HTML文档流中默认的位置。)。
2. 任何元素在默认状态下都会以静态定位来确定自己的位置
3. 在静态定位状态下，无法通过边偏移属性来改变元素的位置。

相对定位

选择器{position:relative;}
相对于自身原本的位置发送偏移，但原本的位置依然不能被其他元素使用

绝对定位

选择器{position: absolute;}
1. 绝对定位在移动后，不会保留原位置
2. 子元素要相当于父元素绝对定位，父元素就要相对定位
3. 子元素会与距离最近的父元素绝对定位
4. 三层嵌套的情况下，子元素只会匹配最近的相对定位的元素进行匹配

固定定位

选择器{position: fixed;}
相对于浏览器的可视窗口进行定位，不会随着页面的滚动而滚动

粘性定位

选择器{position: sticky;}
1. 初始加载时在默认位置，页面滚动又会变成相对定位
2. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
3. 粘性定位占有原先的位置（相对定位特点）
4. 必须添加 top 、left、right、bottom 其中一个才有效

重叠优先级

选择器{z-index: 值;}
值越大，重叠时显示在越上方。可以为负值

盒子模型

边距

行内元素的水平边距有
行内元素的垂直边距无效

内边距

padding: 数值/属性值;
	数值：
	单个值：上下左右
	两个值：上下、左右
	三个值：上、左右、下
	四个值：上、右、下、左
	属性值：
	padding-bottom:
	padding-left:
	padding-right:
	padding-top:

外边距

margin: 数值/属性值;
	数值：
	单个值：上下左右
	两个值：上下、左右
	三个值：上、左右、下
	四个值：上、右、下、左
	属性值：
	margin-bottom: 
	margin-left: 
	margin-right: 
	margin-top:

外边距的合并与塌陷

合并

两个盒子上下相邻，分别设置了下上边距与下边界，以两者中最大的生效

塌陷

父级盒子中的第一个子级盒子的上外边框属性会被父级盒子抢走，不再子级盒子上生效
解决：

设置父级盒子的上内边框
父级盒子设置overflow:hidden

边框

border:值;
	边框粗细 边框样式 边框颜色
	无所谓顺序
border-width:值;
border-style:值;
border-color:值;

边框弧度

选择器{border-radius:值;}
一个值：左上右上左下右下
两个值：左上右下 左下右上
四个值：左上 右上 左下 右下

相邻边框合并

控制表格相邻边框是否合并
border-collapse:属性;
	collapse:表格相邻边框合并
	separate:默认属性。表格相邻边框不合并

控制块级元素相邻边框是否合并
margin: 值;
可以通过设置 负值 使块级元素相邻边框重叠，在视觉上达到边框重叠的效果

盒子尺寸计算问题

让padding不再影响盒子的大小-会自动减去边框的大小，以维持盒子原本的大小
box-sizing: border-box;

消除默认样式

	padding: 0;
    margin: 0;
    box-sizing: border-box;

盒子阴影

选择器{box-shadow: 值/属性;}
/*可以对同一元素添加多个阴影，需要用逗号隔开*/
选择器{box-shadow: 值/属性,值/属性;}
inset X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色
inset 使阴影向内显示

布局

浮动

选择器{flaot:属性;}
left:元素必须浮动在其所在的块容器左侧
right:元素必须浮动在其所在的块容器右侧
none:元素不进行浮动
inline-start:元素必须浮动在其所在块容器的开始一侧
inline-end:表明元素必须浮动在其所在块容器的结束一侧
使用浮动，父元素的行高必须大于等于行高最大的嵌套浮动子元素，并确保其宽度足以容纳这些元素

元素设定浮动后会脱离标准流，父级元素会产生一些问题
1.固定父级元素的高度
2.给父级元素也设定浮动（可能会产生更多问题
3.清除浮动的影响

/* 清除浮动的影响 */
 伪元素选择器::{
 	content:"";
    display:block;
    clear:both;
 }

flex布局

选择器{
	display:flex;
}
flex之后，父级元素就会变成弹性容器，子级元素就会变成弹性盒子
子元素会默认在一行排列,可以自动挤压和延伸
主轴：默认在水平方向
侧轴：默认在垂直方向

对齐方式

主轴

选择器{
    justify-content: 属性值;
    flex-start：从行首起始位置开始排列
    flex-end：从行尾位置开始排列
    center：居中排列
    space-between：均匀排列每个元素。首个元素放置于起点，末尾元素放置于终点
    space-around：均匀排列每个元素。每个元素周围分配相同的空间
    space-evenl：均匀排列每个元素。每个元素之间的间隔相等
    stretch：均匀排列每个元素。'auto'-sized 的元素会被拉伸以适应容器的大小
}

侧轴

选择器{
    align-items:属性值 ;
    /* 改变单个 当然你得通过选择器选到单个元素 */
    align-self: 属性值;
    flex-start:元素与 flex 容器的主轴起点或交叉轴起点对齐
	flex-end:将元素与 flex 容器的主轴末端或交叉轴末端对齐
	center:flex 元素的外边距框在交叉轴上居中对齐
}

修改主轴方向

选择器{
    flex-direction:属性值 ;
    column:垂直上到下方向
    row-reverse:默认方向相反
    column-reverse:垂直下到上方向
}

弹性伸缩比

选择器{
	flex:数值;
	值必须为整数，表示该元素占用父级元素剩余尺寸的比例
}

换行

选择器{
	flex-wrap:属性值;
	属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。
	nowrap:不换行
	wrap:换行，默认属性
	wrap-reverse:换行，但倒叙排列
}

侧轴布局调整

选择器{
	align-content: 属性;
	设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间
	center:居中
	flex-start:由起点开始放置flex元素
	flex-end: 由终点开始放置flex元素
	normal:默认换行属性
}

grid布局

划分单元格
可以用border修改单元格的方框样式
选择器{
    display: grid;
    /* 划分列，每列多少数值，有几个值划几个 */
    grid-template-columns: ;
    /* 划分行 */
    grid-template-rows: ;
    /* 单元格之间间距 */
    grid-gap: 值;

    /* 跨单元格 */
    grid-column-start: 开始的线号;
    grid-column-end: 结束的线号;
    /* 简写 */
    grid-row: 开始/结束;

    /* 函数快速划分单元格 */
    grid-template-columns: repeat(格子数，大小);
    grid-template-rows: repeat(格子数，大小);
}

过渡

	transition: 属性 值,属性 值·······;
	属性名 持续时间 延迟开始时间 维持时间
	margin-right
	all
	color

AT规则

媒体查询

可以置于代码顶层或嵌套在其他 at 条件规则中

@media 媒体类型属性 逻辑运算符 媒体特性{选择器{}}
媒体类型：
	all 所有设备
	print 适用于在打印预览模式下在屏幕上查看的分页材料和文档
	screen 屏幕
逻辑运算符：
	not and only or
	用于联合构造复杂的媒体查询，还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则
媒体特性：
	aspect-ratio 视口的宽高比
	height 视口的高度
	width 视口的宽度
	orientation 视口的旋转方向
	scripting 检测脚本是否可用

自定义字体

可以置于代码顶层或嵌套在其他 at 条件规则中
允许网页开发者为其网页指定在线字体

@font-face{
	font-family:自定义字体名称;
	src:url("链接")
}

动画

一个元素可以添加多个动画
如果某一个关键帧出现了重复的定义，且重复的关键帧中的 CSS 属性值不同，则以最后一次定义的属性为准

定义动画
@keyframes 动画名称 {
    from 等价于 0%
    {
        初始状态
    }
    to 等价于 100%
    {
        结尾状态
    }
}
@keyframes 动画名称 {
    0%{}
    20%{}
    40%{}
    60%{}
    80%{}
    100%{}
动画进行阶段
}

调用动画
每个动画定义中的属性值的顺序很重要
复合数值中，名称以及动画执行时间是必须的
animation: name    duration  timing-function delay         iteration-count direction  fill-mode;
animation: 动画名称 动画执行时间 速度曲线        动画延迟开始时间 执行次数         执行方向   执行完成状态;
控制动画播放 一般和hover一起使用
animation-play-state:属性;
paused:暂停
running:运行

平面转换

只能转换由盒模型定位的元素
需要同时写旋转和平移时，要先写平移，再写旋转

平移 translate

可以独立于transform属性声明平移变换

正数向右，负数向左
transform:translateX(值);
正数向下，负数向上
transform:translateY(值);
正数向屏幕，负数向内
transform:translateZ(值);
X轴 Y轴 Z轴
transform:translate(值);
transform:translateX(值) translateY(值) translateZ(值);
百分比数值的参照物是盒子本身的尺寸

旋转

单位为 deg rad turn

绕X轴旋转
transform: rotateX(值);
绕Y轴旋转
transform: rotateY(值);
沿着Z轴转，才是在平面内转
transform: rotateZ(值);
等同于 rotateZ(值)
transform: rotate(值);
正数顺时针，负数逆时针
默认旋转原点为元素中心

改变旋转原点

水平方向的位置 垂直方向的位置 两个位置确定一个点
像素
百分比基于元素自身尺寸
transform-origin: 值;
方位词
transform-origin: 属性

缩放

单个值：all
两个值：X轴缩放倍数 Y轴缩放倍数
transform: scale(值);
>1放大 <1缩小

倾斜

单位 deg / rad

transform: skewX(值);
transform: skewY(值);
X轴 Y轴
transform: skew(值);

空间转换

视距

必须在父元素上设置

指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果
perspective: 值;
>0 的三维元素比正常大，<0 时则比正常小

平移

Z轴数值不能取百分比
transform: translate3d(x,y,z);

旋转

与平面旋转相反的是，3D 旋转的组合通常是不可交换的；这意味着定义旋转规则的值的顺序是严格控制的

x,y,z为0-1之间的值，表示该方向上的矢量
a为旋转角度，正数代表顺时针旋转，负数代表逆时针旋转
transform: rotate3d(x,y,z,a);

立体呈现

需要给父元素设置

transform-style: 属性;
flat:元素的子元素位于该元素的平面中
preserve-3d:元素的子元素应位于 3D 空间中

作业

五彩导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <link rel="stylesheet" href="./五彩导航.css">
    <a href="#" id="o" target="_blank">五彩导航</a>
    <a href="#" id="t" target="_blank">五彩导航</a>
    <a href="#" id="th" target="_blank">五彩导航</a>
    <a href="#" id="f" target="_blank">五彩导航</a>
</body>
</html>

a:hover{
    color: blue;
}

a{
    width: 150px;
    height: 50px;
    display: inline-block;
    text-align: center;
    line-height: 50px;
    text-decoration: dashed;
    font-weight: 700;
    font-size: 25px;
    color: black;
}

#o{
    background-color: aqua;
}
#o:hover{
    background-color:rgba(1, 5, 100, 0.5);
}

#t{
    background-color: aquamarine;
}
#t:hover{
    background-color:rgba(200, 65, 130, 0.6);
}

#th{
    background-color: cadetblue;
}
#th:hover{
    background-color:rgba(75, 200, 100, 0.5);
}

#f{
    background-color: chartreuse;
}
#f:hover{
    background-color:rgba(0, 0, 255, 0.5);
}

在这里插入图片描述

椅子

图片的框都有了，为啥图片显示不出来啊啊啊啊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>椅子</title>
</head>
<body>
    <link rel="stylesheet" href="./椅子作业.css">
    <li class="abox">
        <a href="#" target="_blank">
            <div class="tu">
                <img width="317" height="316">
            </div>
            <div class="t">
                <p class="n">办公桌台式老板桌简约现代家用电脑桌子</p>
                <p class="price">￥263.00</p>
            </div>
        </a>
    </li>
</body>
</html>

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.abox{
    width: 330px;
    height: 375px;
    background-color: antiquewhite;
    list-style: none;
    padding: 7px;
}
a{
    text-decoration: dashed;
    margin: 0,auto;
}

img{
    background-image: url("CSS\作业练习\素材\椅子.jpg");
    background-repeat: no-repeat;
}

.price{
    color: red;
    font-weight: bold;
}

第三次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wl</title>
</head>
<body>
    <link rel="stylesheet" href="./mi.css">
    <div class="abox">
        <div class="to">
            <div class="lt">
                <a href="#">A</a>
                <span>|</span>
                <a href="#">B</a>
                <span>|</span>
                <a href="#">C</a>
                <span>|</span>
                <a href="#">D</a>
                <span>|</span>
                <a href="#">E</a>
                <span>|</span>
                <a href="#">F</a>
                <span>|</span>
                <a href="#">G</a>
                <span>|</span>
                <a href="#">H</a>
                <span>|</span>
                <a href="#">I</a>
                <span>|</span>
                <a href="#">J</a>
                <span>|</span>
                <a href="#">K</a>
                <span>|</span>
                <a href="#">L</a>
            </div> 
            <div class="rt">
                <a href="#">A</a>
                <span>|</span>
                <a href="#">B</a>
                <span>|</span>
                <a href="#">C</a>
                <span>|</span>
                <a href="#">D</a>
            </div>
        </div>
        <div class="bo">
            <div class="lb"><a href="#"></a></div>
            <div class="mb">
                <ul>
                    <li class="f"></li>
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">C</a></li>
                    <li><a href="#">D</a></li>
                    <li><a href="#">E</a></li>
                    <li><a href="#">F</a></li>
                    <li><a href="#">G</a></li>
                    <li><a href="#">H</a></li>
                    <li><a href="#">I</a></li>
                </ul>
            </div>
            <div class="rb">
                <form action="" method="get">
                    <input type="search">
                    <input type="submit">
                </form>
            </div>
        </div>
        <div class="bod">
            <div class="lul">
                <ul id="l">
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">C</a></li>
                    <li><a href="#">D</a></li>
                    <li><a href="#">E</a></li>
                    <li><a href="#">F</a></li>
                    <li><a href="#">G</a></li>
                    <li><a href="#">H</a></li>
                    <li><a href="#">I</a></li>
                    <li><a href="#">J</a></li>
                </ul>
            </div>
            <div class="rbo">
                <div class="lbu"></div>
                <div class="rbu"></div>
                <div class="bs">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>
        </div>
        <div class="fo">
            <div class="lf">
                <ul class="lfu">
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">C</a></li>
                    <li><a href="#">D</a></li>
                    <li><a href="#">E</a></li>
                    <li><a href="#">F</a></li>
                </ul>
            </div>
            <div class="rf">
                <ul class="rfu">
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">C</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

*{
    list-style: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: dashed;
    font-weight: bold;
    color: black;
}
a:hover{
    color: blue;
}
.abox{
    width: 1500px;
    height: 770px;
    margin: 0 auto;
}
.to{
    display: flex;
    background-color: aqua;
    height: 40px;
    justify-content: space-between;
    padding: 0px 20px 0px 20px;
    border: 2px solid white;
}
.mb ul li{
    width: 40px;
    height: 40px;
    background-color: darksalmon;
    text-align: center;
    line-height: 40px;
}
.bo{
    display: flex;
    background-color: aquamarine;
    height: 100px;
    align-items: center;
    border: 2px solid white;
}
.lb{
    display: flex;
    padding: 22px 0px 22px 22px;
}
.lb a{
    display: inline-block;
    width: 56px;
    height: 56px;
    background-color: blueviolet;
}
.mb ul{
    display: flex;
    width: 1130px;
    flex-wrap: nowrap;
    justify-content: space-around;
}
.rb{
    padding: 0px 15px 0px 50px;
}
.bod{
    display: flex;
    border: 2px solid white;
}
.bod ul{
    display: flex;
    height: 460px;
    width: 234px;
    background-color: cadetblue;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 20px 20px 20px;
}
.rbo{ 
    position: relative;
    height: 460px;
    width: 1266px;
    background-color: chartreuse;
}
.lbu{
    position: absolute;
    width: 50px;
    height: 100px;
    background-color: rgb(165, 155, 42);
    top: 180px;
    left: 10px;
}
.rbu{
    position: absolute;
    width: 50px;
    height: 100px;
    background-color: rgb(165, 155, 42);
    top: 180px;
    left: 1206px;
}
.bs{
    display: flex;
    position: absolute;
    width: 200px;
    height: 50px;
    top: 400px;
    left: 1056px;
    justify-content: space-between;
    align-items: center;
}
.bs a{
    height: 7px;
    width: 7px;
    border: 2px solid #fff;
    border-color: hsla(0, 0%, 100%, .3);
    border-radius: 10px;
    overflow: hidden;
    background-color:red;
    opacity: 1;
}
.fo{
    display: flex;
    height: 170px;
    background-color: cornflowerblue;
    border: 2px solid white;
}
.lfu{
    display: flex;
    width: 234px;
    height: 168px;
    background-color: darkgreen;
    flex-wrap: wrap;
}
.lfu li a{
    display: inline-block;
    width: 78px;
    height: 83px;
    background-color: palegreen;
    text-align: center;
    line-height: 83px;
    border: 3px solid cornflowerblue;
}
.rfu{
    display: flex;
    width: 1266px;
    height: 168px;
    flex-wrap: wrap;
    padding: 0px 0px 0px 20px;
}
.rfu li a{
    display: inline-block;
    width: 400px;
    height: 168px;
    background-color: darkturquoise;
    margin: 0px 0px 0px 15px;
    text-align: center;
    line-height: 168px;
}
.f{
    opacity: 0;
}

很丑的

第三次2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mi</title>
</head>
<body>
    <link rel="stylesheet" href="./mi.css">
    <div class="head">
        <div class="content">
            <div class="h_l">
                <a href="#">小米官网</a>
                <span class="sep">|</span>
                <a href="#">小米商城</a>
                <span class="sep">|</span>
                <a href="#">小米澎湃OS</a>
                <span class="sep">|</span>
                <a href="#">loT</a>
                <span class="sep">|</span>
                <a href="#">云服务</a>
                <span class="sep">|</span>
                <a href="#">天星数科</a>
                <span class="sep">|</span>
                <a href="#">有品</a>
                <span class="sep">|</span>
                <a href="#">小爱开放平台</a>
                <span class="sep">|</span>
                <a href="#">资质证照</a>
                <span class="sep">|</span>
                <a href="#">协议规则</a>
                <span class="sep">|</span>
                <a href="#">下载app</a>
                <span class="sep">|</span>
                <a href="#">Select Location</a>
            </div>

            <div class="h_r">
                <a href="#">登录</a>
                <span class="sep">|</span>
                <a href="#">注册</a>
                <span class="sep">|</span>
                <a href="#">消息通知</a>
                <div class="shopping"><a href="#">购物车</a></div>
            </div>
        </div>
    </div>

    <div class="top">
        <div class="content">
            <div class="t_l">
                <a href="#"></a>
            </div>
            <div class="t_m">
                <ul>
                    <li><a href="#">xiaomi手机</a></li>
                    <li><a href="#">redmi手机</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">平板</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">服务中心</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <div class="t_r">
                <form action="">
                    <a href="#">
                        <input type="search" class="search">
                        
                    </a>
                    <a href="#">
                        <input type="submit" class="submit" value=" ">
                    </a>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}

/*版心*/
.content{
    width: 1226px;
    margin: 0 auto;
}

/*head*/
.head{
    height: 40px;
    background-color: #333;
}

.head .content{
    display: flex;
    justify-content: space-between;
}

.h_l{
    width: 817px;
}
.head .content .h_l a{
    font-size: 12px;
    line-height: 40px;
    color: #B0B0B0;
}
.head .content .h_l .sep{
    margin: 0 3.5px;
    width: 3.3px;
    color: #424242;
}
.head .content .h_l .sep:hover{
    cursor: default;
}

.h_r{
    display: flex;
    width: 300px;
}
.head .content .h_r a{
    font-size: 12px;
    line-height: 40px;
    color: #B0B0B0;
}
.head .content .h_r .sep{
    margin: 0 3.5px;
    width: 3.3px;
    color: #424242;
}
.head .content .h_r .shopping{
    margin-left: 15px;
}
/*head*/

/*top*/
.top{
    height: 100px;
}
.top .content{
    display: flex;
}

.top .content .t_l{
    height: 62px;
    margin-top: 22px;
}
.top .content .t_l a{
    width: 56px;
    height: 56px;
    display: block;
    background-image: url('./logo-mi2.png');
    background-size: cover;
}

.top .content .t_m{
    width: 850px;
}
.top .content .t_m ul{
    display: flex;
    padding: 12px 0px 0px 172px;
}
.top .content .t_m ul a{
    display: block;
    height: 88px;
    color: #333333;
    padding: 26px 10px 38px 10px;
}

.top .content .t_r{
    margin-top: 25px;
}
.top .content .t_r form{
    width: 296px;
    height: 50px;
}
.top .content .t_r form .search{
    border: 1px solid #e0e0e0;
}
.top .content .t_r form a .submit{
    border: 1px solid #e0e0e0;
    background-image: url('../作业练习/素材/sousuo.png');
    background-color: #fff;
}   
/*top*/

下面的都没写

syzzz0

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
web前端-css笔记

important(最大权重)>行内选择器(1,0,0,0)>id选择器(0,1,0,0)>(伪)类选择器(0,0,1,0)>标签选择器(0,0,0,1)>通配符选择器(0,0,0,0)>继承。父级盒子中的第一个子级盒子的上外边框属性会被父级盒子抢走，不再子级盒子上生效。两个盒子上下相邻，分别设置了下上边距与下边界，以两者中最大的生效。四位之间从左至右逐位比较。同样位数可以相加，但不会进位。标准流：文档流，标签在文档中默认的排布规则。行内元素的垂直边距无效。行内元素的水平边距有。
复制链接

扫一扫