我的笔记之CSS_3

最新推荐文章于 2024-08-29 14:32:34 发布

Amaraaaaaaaa

最新推荐文章于 2024-08-29 14:32:34 发布

阅读量111

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_44728880/article/details/123007215

版权

否定伪类选择器

文本阴影

div{

text-shadow: 100px 10px 1px yellow;//：水平垂直模糊程度颜色

}


	盒子阴影

剩余宽高：

与窗口自适应相同

1. flex: 1;占满剩余空间

div:nth-child(1), div:nth-child(3){

flex: 1;

}

div:nth-child(2){

flex: 10;

}

div:nth-child(1), div:nth-child(3){

flex: 1;

}

div:nth-child(2){

flex: 10;

}

2占10/12，1，3占1/12

三栏布局（flex）：

<!--

* @Author: your name

* @Date: 2022-01-22 23:37:44

* @LastEditTime: 2022-01-22 23:41:24

* @LastEditors: Please set LastEditors

* @Description: 打开koroFileHeader查看配置进行设置: 配置 · OBKoro1/koro1FileHeader Wiki · GitHub

* @FilePath: \code\006.html

-->

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

html,body{

height: 100%;

}

body{

display: flex;

}

.box1,.box3{

width: 150px;

background: #000;

}

.box2{

flex: 1;

background: yellow;

}

</style>

</head>

<body>

</body>

</html>

注：不需要设置高度，因为stretch不设置高度会自动伸展成父盒子的高度

垂直方向

只需加

flex-direction: column;

且将宽度改为高度

移动端布局

模拟器上显示分辨率

CSS像素设备的独立像素

物理分辨率：设备像素

设备像素比（dpr）=物理像素/CSS像素

iPhone6：1css 像素==2物理像素

设计稿：

提供物理分辨率为了清晰的页面

提供一份

要求：

1.百分比布局

2.弹性盒布局

3.rem布局

meta标签

mate等于饰扣，其中宽度等于设备款的，初始缩放：不准缩小，不准放大或缩小。

案例一：支付宝弹性盒子

<!--

* @Author: your name

* @Date: 2022-01-22 23:37:44

* @LastEditTime: 2022-01-23 21:40:39

* @LastEditors: Please set LastEditors

* @Description: 打开koroFileHeader查看配置进行设置: 配置 · OBKoro1/koro1FileHeader Wiki · GitHub

* @FilePath: \code\006.html

-->

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

html,

body {

height: 100%;

}

.box {

height: 1425px;

width: 955px;

/* background: red; */

display: flex;

flex-direction: column;

}

.banner {

height: 408px;

background: #242a3a;

color: white;

font-size: 38px;

text-align: center;

}

.upbanner {

width: 955px;

height: 119px;

/* background: red; */

display: flex;

justify-content: center;

align-items: center;

}

.upbanner div {

width: 89px;

height: 89px;

box-sizing: border-box;

/* background: black; */

/* border: 1px solid seashell ; */

}

.ubox1 {

flex: 1;

text-align: left;

}

.ubox5 {

flex: 10;

text-align: left;

line-height: 80px;

}

.downbanner {

width: 954px;

height: 289px;

/* background:green; */

display: flex;

justify-content: center;

align-items: center;

justify-content: space-around;

line-height: 35px;

}

.downbanner div {

width: 130px;

height: 175px;

box-sizing: border-box;

/* background: black; */

/* border: 1px solid seashell ; */

}

.body {

flex: 1;

/* background: yellow; */

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

justify-content: space-around;

box-sizing: border-box;

background: #f4f5f9;

}

.ubody {

/* width: 955px;

height: 637px; */

/* background: #000; */

background: #f4f5f9;

flex: 1;

display: flex;

flex-wrap: wrap;

}

.ubody > div {

width: 25%;

height: 215px;

background: white;

border: #f4f5f9 1px solid;

display: flex;

box-sizing: border-box;

}

.ubody .one {

margin: auto;

font-size: 32px;

text-align: center;

}

/* .ubody div img {

width: 99px;

height: 81px;

} */

.dbody {

margin-top: 15px;

width: 955px;

height: 226px;

/* background: red; */

}

.footer {

height: 128px;

background: #fafbfd;

display: flex;

justify-content: center;

align-items: center;

justify-content: space-around;

}

.footer>div{

width: 150px;

height: 128px;

background: #fafbfd;

/* border: 1px solid blue; */

display: flex;

}

.footer .fone{

margin: auto;

text-align: center;

font-size: 32px;

}

.upbanner span{

font-size: 50px;

}

.downbanner span{

font-size: 100px;

}

.downbanner p{

margin-top: 30px;

}

.ubody span{

font-size: 50px;

}

.ubody p{

margin-top: 20px;

}

.footer span{

font-size: 50px;

/* color: #f5666a; */

}

.footer p{

margin-top: 5px;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div>

<p>信用卡还贷</p>

</div>

<div>

</div>

<div>

</div>

<div>

<p>信用卡还贷</p>

</div>

<div>

<p>信用卡还贷</p>

</div>

<div>

<p>信用卡还贷</p>

</div>

<div>

<p>信用卡还贷</p>

</div>

<div>

<p>信用卡还贷</p>

</div>

<div>

<p>信用卡还贷</p>

</div>

<div>

<p>信用卡还贷</p>

</div>

<div>

<p>信用卡还贷</p>

</div>

<div>

<p>信用卡还贷</p>

</div>

</div>

<div >

<!-- <span class="iconfont icon-gift

.icon-gift"></span> -->

</div>

<div >

</div>

<div >

</div>

<div >

</div>

</body>

</html>

案例二：足球圈移动布局

<!--

* @Author: your name

* @Date: 2022-01-23 22:35:14

* @LastEditTime: 2022-01-24 00:35:00

* @LastEditors: Please set LastEditors

* @Description: 打开koroFileHeader查看配置进行设置: 配置 · OBKoro1/koro1FileHeader Wiki · GitHub

* @FilePath: \code\009.html

-->

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

html, body{

height: 100%;

}

body{

display: flex;

box-sizing: border-box;

flex-direction: column;

}

header{

height: 44px;

background: #0cc440;

display: flex;

justify-content: center;

align-items: center;

}

header .radius1, header .radius2{

color:white;

font-size: 12px;

/* border: 1px solid white; */

border-radius:12px 0% 0% 12px;

width: 60px;

height: 24px;

background-color:rgba(255,255,255,0.2);

text-align: center;

line-height: 24px;

font-weight: bold;

}

header div:hover{

background-color:rgba(255,255,255,0.4);

font-weight: bolder;

}

div p{

opacity: 0.5;

}

header .radius2{

border-radius: 0% 12px 12px 0%;

}

section{

/* background: yellow; */

font-size: 14px;

flex: 1;

overflow: auto;

}

section .up{

display: flex;

justify-content: center;

align-items: center;

height: 35px;

justify-content: space-around;

text-align: center;

background: #ffffff;

font-style: normal;

line-height: 35px;

font-size: 14px;

position: sticky;

top: 0px;

}

section .up div{

flex: 1;

border-bottom: 1px solid #ddd6dd;

}

section .up div:hover{

color: #0cc440;

border-bottom: 2px solid #0cc440;

}

section .dowm{

flex: 1;

display: flex;

flex-wrap: wrap;

text-align: center;

font-style: normal;

justify-content: space-between;

}

section .dowm div{

width: 49.5%;

box-sizing: border-box;

border: 1px solid #ddd6dd;

margin-top: 4px;

}

section .dowm div img{

width: 100%;

}

section .dowm div p{

text-align: left;

text-indent: 10px;

font-weight: bolder;

color: #000;

height: 30px;

line-height: 30px;

font-size: 12px;

}

footer{

height: 44px;

/* background-color: red; */

display: flex;

font-size: 12px;

}

footer div{

flex: 1;

margin: auto;

text-align: center;

/* border: 1px solid #ddd6dd; */

background: #ffffff;

}

footer div:hover{

color: #0cc440;

}

footer .yuan{

position: relative;

}

.yuan span{

font-size: 30px;

text-align: center;

line-height: 50px;

position: absolute;

width: 50px;

height: 50px;

border: 1px solid #dadada;

border-radius: 50%;

left: 50%;

margin-left: -25px;

margin-top: -32px;

background: white;

}

</style>

</head>

<body>

</div>

</div>

</header>

</i>

<div>

<p>小丸子啊小丸子啊</p>

</div>

<div>

<p>小丸子啊小丸子啊</p>

</div>

<div>

<p>小丸子啊小丸子啊</p>

</div>

<div>

<p>小丸子啊小丸子啊</p>

</div>

<div>

<p>小丸子啊小丸子啊</p>

</div>

<div>

<p>小丸子啊小丸子啊</p>

</div>

</i>

</section>

<div>

</div>

<div>

</div>

</div>

<div>

</div>

<div>

</div>

</footer>

</body>

</html>

京东分类布局案例

<!--

* @Author: your name

* @Date: 2022-01-24 19:59:27

* @LastEditTime: 2022-01-25 14:16:55

* @LastEditors: Please set LastEditors

* @Description: 打开koroFileHeader查看配置进行设置: 配置 · OBKoro1/koro1FileHeader Wiki · GitHub

* @FilePath: \code\1.html

-->

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

font-style: normal;

}

body, html{

height: 100%;

}

ul{

list-style: none;

}

body{

flex-direction: column;

display: flex;

}

header{

background: #ffffff;

height: 45px;

display: flex;

align-items: center;

border-bottom: 1px solid #eeeeee;

/* position: sticky;

top: 0px; */

}

header span{

flex: 1;

text-align: center;

font-size: 20px;

color: #5d5f6a;

font-weight: bold;

}

header i{

flex: 1;

}

header div{

flex: 7.3;

/* border: 1px solid white; */

}

header div input{

height: 31px;

border-radius: 15.5px ;

border: 0px;

width: 100%;

position: relative;

text-indent: 45px;

color: #757575;

font-size: 13px;

background: #f7f7f7;

}

div span {

position: absolute;

left: 15%;

line-height: 31px;

color: #c0c0c0;

}

section{

flex: 1;

/* background-color: yellow; */

overflow: auto;

display: flex;

}

section ul{

width: 80px;

background-color: #f8f8f8;

display: flex;

flex-direction: column;

overflow: auto;

}

section li{

/* border: 1px solid white; */

flex: 1;

text-align: center;

height: 46px;

line-height: 46px;

font-size: 14px;

background: #f8f8f8;

}

section li:hover{

background: white;

color: #e93b3d;

}

section .i2{

flex: 1;

/* background-color: yellow; */

overflow: auto;

display: flex;

flex-direction: column;

}

footer{

/* background: yellow; */

height: 50px;

display: flex;

}

footer i{

border: 1px solid white;

flex: 1;

margin: auto;

text-align: center;

font-style: normal;

color: #8b8b8b;

}

footer i:hover{

color: #e93b3d;

}

footer i span{

font-size: 15px;

}

footer i p{

font-size: 9px;

margin-top: 5px;

}

::-webkit-scrollbar{

display: none;

/* 滚动条消失 */

}

section .i2 header{

height: 46px;

display: flex;

background: #000;

text-align: center;

}

.i2 header :nth-child(1){

flex:3.5;

height: 100%;

background: red;

border: 1px solid white;

}

.i2 header :nth-child(2){

/* flex: 1; */

width: 20px;

background: yellow;

height: 100%;

}

.i2 section{

overflow:auto;

display: flex;

flex-wrap: wrap;

box-sizing: border-box;

justify-content: center;

align-items: flex-start;

}

.i2 section div{

width: 33%;

height: 101px;

background-color: aqua;

flex-wrap: wrap;

border: 1px solid white;

box-sizing: border-box;

}

</style>

</head>

<body>

<div>

</div>

</header>

<ul >

</ul>

<i></i>

</header>

</section>

</i>

</section>

<i>

</i>

<i>

</i>

<i>

</i>

<i>

</i>

<i>

</i>

</footer>

</body>

</html>

header ul{

display: flex;

overflow: auto;

}

header ul li{

flex-shrink: 0;可以挤压

}

在水平方向挤压滚动

多列布局column

column-count: 5;

/* 显示的列数 */

column-gap: 30px;

/* 调整列间距 */

column-rule: 2px solid red;

/* 列边框 */

column-fill: balance;

/* 控制列高度统一 */

column-fill: auto;

/*把父盒子占满*/

column-width: 200px;

/* 调整列宽 */

column-span: all;

/* 横跨所有的列 */

响应式布局

margin: 0;

padding: 0;

}

body,html{

height: 100%;

}

@media screen and (min-width:1000px){

body{

background: yellow;

}

@media screen and (min-width:500px) and (max-width:1000px){

body{

background: red;

}

@media screen and (max-width:500px){

body{

background: green;

}

在横屏竖屏检测效果

@media screen and (orientation:portrait){

/* 在竖直状态下 */

div{

width: 33.3%;

}

@media screen and (orientation:landscape){

/* 在横屏的状态下 */

div{

width: 20%;

}

响应式布局案例

<!--

* @Author: your name

* @Date: 2022-01-25 14:29:33

* @LastEditTime: 2022-01-26 17:16:42

* @LastEditors: Please set LastEditors

* @Description: 打开koroFileHeader查看配置进行设置: 配置 · OBKoro1/koro1FileHeader Wiki · GitHub

* @FilePath: \code\002.html

-->

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

body,html{

height: 100%;

}

.top,.top .right, .bottom{

display: flex;

flex-wrap: wrap;

align-content: flex-start;

align-items: center;

justify-content: center;

justify-content: space-around;

margin-top: 5px;

}

.top .left{

width: 48%;

background: yellow;

height: 200px;

}

.top .right{

width: 48%;

background-color: blue;

height: 200px;

justify-content: space-between;

}

.top .right :nth-child(1){

width: 48%;

background: green;

height: 200px;

}

.top .right :nth-child(2){

width: 48%;

background: red;

height: 200px;

}

.bottom div{

width: 24%;

background: grey;

height: 200px;

margin-top: 5px;

}

@media screen and (min-width:1024px){

.bottom div{

width: 23%;

}

@media screen and (min-width:768px) and (max-width:1024px){

.bottom div{

width: 31%;

}

@media screen and (min-width:450px) and (max-width:768px){

.bottom div{

width: 48%;

}

@media screen and (min-width:768px){

.top .left, .top .right{

width: 48%;

}

@media screen and (max-width:450px){

.bottom div{

width: 90%;

}

@media screen and (max-width:768px){

.top .left, .top .right{

width: 100%;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

em与rem

em是相当于父元素的字体大小

rem相对单位，相对于根元素（html）的字体大小

<!--

* @Author: your name

* @Date: 2022-01-26 15:15:33

* @LastEditTime: 2022-01-26 18:05:49

* @LastEditors: Please set LastEditors

* @Description: 打开koroFileHeader查看配置进行设置: 配置 · OBKoro1/koro1FileHeader Wiki · GitHub

* @FilePath: \code\003.html

-->

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

html{

font-size: 16px;

}

body{

font-size: 50px

}

.box{

width: 46.875rem;

height: 100px;

background: #000;

}

</style>

document.documentElement.style.fontSize=document.documentElement.

clientWidth/750*16+'px'

</script>

</head>

<body>

</body>

</html>

足球圈rem

<!--

* @Author: your name

* @Date: 2022-01-26 15:15:33

* @LastEditTime: 2022-01-26 20:46:25

* @LastEditors: Please set LastEditors

* @Description: 打开koroFileHeader查看配置进行设置: 配置 · OBKoro1/koro1FileHeader Wiki · GitHub

* @FilePath: \code\003.html

-->

<!-- <!DOCTYPE html>

<head>

<title>Document</title>

<style>

html{

font-size: .8rem;

}

body{

font-size: 2.5rem

}

.box{

width: 46.875rem;

height: 5rem;

background: #000;

}

</style>

document.documentElement.style.fontSize=document.documentElement.

clientWidth/750*30+'px'

</script>

</head>

<body>

</body>

</html>

<!--

* @Author: your name

* @Date: 2022-01-23 22:35:14

* @LastEditTime: 2022-01-24 00:35:00

* @LastEditors: Please set LastEditors

* @Description: 打开koroFileHeader查看配置进行设置: 配置 · OBKoro1/koro1FileHeader Wiki · GitHub

* @FilePath: \code\009.html

-->

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

html, body{

height: 100%;

}

body{

display: flex;

box-sizing: border-box;

flex-direction: column;

}

header{

height: 2.2rem;

background: #0cc440;

display: flex;

justify-content: center;

align-items: center;

}

header .radius1, header .radius2{

color:white;

font-size: .6rem;

/* border: .05rem solid white; */

border-radius:.6rem 0% 0% .6rem;

width: 3rem;

height: 1.2rem;

background-color:rgba(255,255,255,0.2);

text-align: center;

line-height: 1.2rem;

font-weight: bold;

}

header div:hover{

background-color:rgba(255,255,255,0.4);

font-weight: bolder;

}

div p{

opacity: 0.5;

}

header .radius2{

border-radius: 0% .6rem .6rem 0%;

}

section{

/* background: yellow; */

font-size: .7rem;

flex: 1;

overflow: auto;

}

section .up{

display: flex;

justify-content: center;

align-items: center;

height: 1.75rem;

justify-content: space-around;

text-align: center;

background: #ffffff;

font-style: normal;

line-height: 1.75rem;

font-size: .7rem;

position: sticky;

top: 0rem;

}

section .up div{

flex: 1;

border-bottom: .05rem solid #ddd6dd;

}

section .up div:hover{

color: #0cc440;

border-bottom: .1rem solid #0cc440;

}

section .dowm{

flex: 1;

display: flex;

flex-wrap: wrap;

text-align: center;

font-style: normal;

justify-content: space-between;

}

section .dowm div{

width: 49.5%;

box-sizing: border-box;

border: .05rem solid #ddd6dd;

margin-top: .2rem;

}

section .dowm div img{

width: 100%;

}

section .dowm div p{

text-align: left;

text-indent: .5rem;

font-weight: bolder;

color: #000;

height: 1.5rem;

line-height: 1.5rem;

font-size: .6rem;

}

footer{

height: 2.2rem;

/* background-color: red; */

display: flex;

font-size: .6rem;

}

footer div{

flex: 1;

margin: auto;

text-align: center;

/* border: .05rem solid #ddd6dd; */

background: #ffffff;

}

footer div:hover{

color: #0cc440;

}

footer .yuan{

position: relative;

}

.yuan span{

font-size: 1.5rem;

text-align: center;

line-height: 2.5rem;

position: absolute;

width: 2.5rem;

height: 2.5rem;

border: .05rem solid #dadada;

border-radius: 50%;

left: 50%;

margin-left: -1.25rem;

margin-top: -1.6rem;

background: white;

}

.iconfont{

font-size: .8rem;

}

</style>

document.documentElement.style.fontSize=document.documentElement.

clientWidth/320*20+'px'

</script>

</head>

<body>

</div>

</div>

</header>

</i>

<div>

<p>小丸子啊小丸子啊</p>

</div>

<div>

<p>小丸子啊小丸子啊</p>

</div>

<div>

<p>小丸子啊小丸子啊</p>

</div>

<div>

<p>小丸子啊小丸子啊</p>

</div>

<div>

<p>小丸子啊小丸子啊</p>

</div>

<div>

<p>小丸子啊小丸子啊</p>

</div>

</i>

</section>

<div>

</div>

<div>

</div>

</div>

<div>

</div>

<div>

</div>

</footer>

</body>

</html>

vw和vh

<!--

* @Author: your name

* @Date: 2022-01-26 21:19:47

* @LastEditTime: 2022-01-26 21:21:27

* @LastEditors: Please set LastEditors

* @Description: 打开koroFileHeader查看配置进行设置: 配置 · OBKoro1/koro1FileHeader Wiki · GitHub

* @FilePath: \code\004.html

-->

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

margin: 0;

padding: 0;

}

html, body{

height: 100%;

}

html{

font-size: 26.67vw;

}

div{

width: 3.75rem;

height: 100px;

background-color: yellow;

}

</style>

<body>

</body>

</html>

渐变

background: linear-gradient(red,yellow,green,blue);

支持多颜色渐变

background: linear-gradient(to top,red,yellow);

支持方向

background: linear-gradient(to top right,red,yellow);

background: linear-gradient(45deg,red,yellow);

支持角度

background: radial-gradient(red 50%,yellow 60%);

background: radial-gradient(circle,red ,yellow,green);表现为圆

background: -webkit-radial-gradient(60% 40%,closest-side ,yellow,green);

太极案例

<!--

* @Author: your name

* @Date: 2022-01-26 22:04:49

* @LastEditTime: 2022-01-27 17:16:05

* @LastEditors: Please set LastEditors

* @Description: 打开koroFileHeader查看配置进行设置: 配置 · OBKoro1/koro1FileHeader Wiki · GitHub

* @FilePath: \code\005.html

-->

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body{

background-color: aqua;

}

div{

width: 200px;

height: 200px;

border: 1px solid white;

background: linear-gradient(white 50%,black 50%);

margin: 0 auto;

display: flex;

align-items: center;

border-radius: 50%;

}

div::before{

content: "";

width: 100px;

height: 100px;

background: red;

display: block;

border-radius: 50%;

background: radial-gradient(white 25%,black 25%);

}

div::after{

content: "";

width: 100px;

height: 100px;

background: green;

display: block;

border-radius: 50%;

background: radial-gradient(black 25%, white 25%);

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

过度

div{

width: 200px;

height: 200px;

background: red;

transition: all 2s linear 2s;

}

div:hover{

height: 600px;

background: black;

}

除了display：none/block属性无法实现

transition: all 2s ease 2s;

Amaraaaaaaaa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的笔记之CSS_3

否定伪类选择器文本阴影div{ text-shadow: 100px 10px 1px yellow;//：水平垂直...
复制链接

扫一扫