01-盒子模型
div {
width: 300px;
height: 300px;
background-color: pink;
padding-left: 4px;
border: 3px solid red;
margin: 50px;
}
02-内边框
div {
width: 600px;
height: 600px;
background-color: pink;
/* padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px; */
padding: 30px;
padding: 30px 50px;
padding: 10px 60px 90px;
/* 上,左右,下 */
padding: 10px 30px 60px 90px;
/* 上 右 下 左 */
}
</style>
</head>
<body>
<div>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque quae possimus temporibus! Rem, eius
voluptatibus? Veniam voluptas voluptatem inventore eaque dolorum repellat non quam. Numquam temporibus nobis
facere pariatur mollitia?
Beatae pariatur itaque at tenetur dolor nulla sapiente quam nemo! Animi praesentium labore qui esse delectus
expedita suscipit corrupti vitae, possimus est eos voluptate quos recusandae aliquid eveniet dolorem explicabo?
Vero quisquam animi reiciendis, ab velit laboriosam placeat tempore temporibus eligendi, asperiores, adipisci
molestias! Saepe modi mollitia nobis velit ipsum aspernatur accusamus perspiciatis minima nemo delectus beatae
cumque, vero voluptatem.
</div>
03-外边距
ul li {
list-style: none;
background-color: pink;
margin-bottom: 30px;
}
span {
display: inline-block;
width: 50px;
background-color: pink;
margin-right: 5px;
margin: 40px;
margin: 40px 30px;
margin: 40px 30px 23px;
margin: 40px 2px 34px 40px;
}
</style>
</head>
<body>
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
<span>1</span><span>2</span><span>3</span><span>4</span>
04-外边距塌陷问题
为了防止外边线塌陷
.father {
width: 800px;
height: 800px;
background-color: aquamarine;
/* border: 1px solid red; */
padding: 5px;
}
.son {
width: 100px;
height: 100px;
background-color: pink;
/* margin-bottom: 20px; */
overflow: hidden;
}
.son2 {
margin-top: 10px;
}
.son3 {
margin-top: 10px;
}
.son1 {
margin-top: 300px;
}
/* margin塌陷问题
父元素的第一个子元素的margin-top值会被父元素抢走
给父元素添加边框
overflow:hidden; -------偏方
*/
/* padding: 10px 20px 40px 50xp 顺时针 */
</style>
</head>
<body>
<div class="father">
<div class="son son1">1</div>
<div class="son son2">2</div>
<div class="son son3">3</div>
</div>
<span>cnidsjkjcdscndskcm</span>
05-文本溢出
div {
width: 800px;
height: 800px;
background-color: pink;
/* overflow: auto; */
/* overflow: hidden; */
/* overflow: visible;s */
}
</style>
06-样式继承
a {
text-decoration: none;
color: #807474;
}
/* div,
div span,
div a {
font-size: 40px;
} */
div {
font-size: 50px;
color: #807474;
/* padding: 13px; */
}
/* css样式的继承性
不是所有样式都继承,只有改变之后对布局无影响的样式,才会继承
a链接最好在自身更改样式
*/
</style>
</head>
<body>
<div>
杀手锏得看懂开始<br>
<span>我是经常都是</span><br>
<a href="#">;的策略模式的流程的</a>
<i>cdjckdd </i>
</div>
07-解决padding影响盒子大小问题
* {
margin: 0;
padding: 0;
}
.goods {
display: flex;
width: 1240px;
height: 600px;
}
.left {
width: 230px;
height: 600px;
background-color: pink;
}
li {
width: 230px;
height: 275px;
list-style: none;
background-color: aqua;
}
.right ul {
display: flex;
width: 990px;
height: 600px;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
</style>
</head>
<body>
<div class="goods">
<div class="left"></div>
<div class="right">
<ul>
<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>
<li>
<a href="#">
flex
</a>
</li>
</ul>
</div>
</div>
08-flex布局
.father {
width: 800px;
height: 800px;
background-color: pink;
display: flex;
/* 排列方式 */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
flex-direction: row;
/* 让flex布局变为多行 */
flex-wrap: wrap;
/* flex-wrap: nowrap; */
/* flex-wrap: wrap; */
/* 主轴上的布局 */
justify-content: center;
justify-content: end;
justify-content: space-around;
justify-content: space-evenly;
justify-content: space-between;
/* 侧轴 */
/* align-items 单行的 align-content:多行的*/
align-items: center;
/* align-items: end; */
align-items: start;
align-content: start;
align-content: end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
}
.son {
width: 170px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="father">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">2</div>
<div class="son">3</div>
<div class="son">3</div>
<div class="son">3</div>
<div class="son">3</div>
<div class="son">3</div>
</div>
09-flex
.father {
display: flex;
width: 800px;
height: 800px;
background-color: pink;
justify-content: space-between;
}
.son {
width: 300px;
background-color: aqua;
}
.son2 {
/* order 值越小,排列在越靠前的位置 */
order: -3;
}
</style>
</head>
<body>
<div class="father">
<div class="son1 son">1</div>
<div class="son2 son">2</div>
<div class="son3 son">3</div>
</div>
10-定位补充
.father {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
}
.son {
width: 100px;
height: 100px;
}
.son1 {
position: absolute;
/* z-index 定位中显示的优先级 */
z-index: 5;
top: 100px;
left: 50px;
background-color: aqua;
}
.son2 {
position: absolute;
z-index: 3;
top: 110px;
left: 80px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="father">
<div class="son son1">111</div>
<div class="son son2">222</div>
</div>
11-浮动
img {
width: 100px;
float: left;
}
</style>
li:
<img src="https://img1.baidu.com/it/u=3991541016,2951402135&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod consequuntur dicta illum nesciunt praesentium autem
natus deserunt odio esse, eius earum eveniet minima tempora, ipsum, ipsam sequi. Deserunt, natus et!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, ea doloribus! Autem ex error rerum nemo nostrum.
Ratione assumenda debitis quasi minus nesciunt, ex obcaecati sit atque neque. Tenetur, nostrum.
Vero voluptas dolor deserunt quas mollitia, cumque magni voluptatum non nulla ea sed, vel, dolores ex perferendis
beatae nemo accusamus consequatur totam ipsum incidunt quae inventore molestiae temporibus sit? Doloremque.
Architecto facilis sunt quas possimus eos quasi, aspernatur dolore aliquam deserunt amet quibusdam, dolores cum
beatae, ut perferendis quam esse assumenda blanditiis quis placeat ipsam repudiandae dicta. Ipsam, debitis atque.
Nemo provident unde quas iste, sunt sit, repellendus atque facere corporis, id tenetur aspernatur. Et molestiae
officiis quod tenetur vero numquam nulla in illo. Soluta quod iure ad atque quas?
Quos corrupti quaerat sint doloremque officia ullam voluptas. Distinctio maiores eaque ullam assumenda atque
asperiores officiis hic vero! Atque, doloribus unde! Vero neque mollitia nostrum minima quos praesentium, iusto
commodi.
Voluptate nam placeat dolorem facere at error exercitationem odit nihil corrupti amet neque modi enim, dolores
fugiat quos eaque! Deleniti quidem ullam sit nobis laudantium accusantium provident commodi natus dolor.
Libero, corporis. Veniam fuga laudantium, quam culpa repellat aut eius quod praesentium similique blanditiis
asperiores? Officia maiores, perferendis qui dignissimos cupiditate, unde placeat explicabo in vel repellendus non
iste aliquam?
Eligendi nulla nesciunt molestias. Consectetur quo quasi debitis magnam, nihil velit unde accusantium tempore et
error suscipit asperiores soluta ex fuga doloremque ratione vel aliquam in temporibus quidem non animi?
Ipsum molestiae fugiat sint? A amet ea eveniet. Autem deserunt nobis enim cumque ex esse facere a et commodi iste
nemo ipsam, omnis fugit suscipit sapiente dolores error dolor quo.
Laborum consequuntur voluptatum corporis cupiditate sequi? Hic non adipisci culpa natus voluptatibus neque doloribus
maiores in esse nostrum. Aperiam beatae minima ratione expedita, commodi maiores voluptate reiciendis molestias sunt
possimus.
12-float讲解
.father {
width: 1000px;
/* height: 1000px; */
background-color: pink;
}
.son {
float: left;
width: 200px;
height: 200px;
background-color: aqua;
}
.son2 {
background-color: blue;
float: left;
/* 浮动,会脱离文档流 不再保留原来位置 会造成在其下方的兄弟元素位置发生变化 */
/* 当子元素发生浮动时,其父元素的高度发生塌陷 */
}
.son3 {
width: 400px;
background-color: black;
}
13-float问题解决办法
/* ul { */
/* height: 300px; */
/* overflow: hidden; */
/* } */
ul li {
/* float: left; */
float: right;
list-style: none;
margin-right: 20px;
}
/* div {
clear: both;
} */
p {
/* clear 清楚浮动 */
clear: both;
}
</style>
</head>
<body>
<ul>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<div></div>
<p>我是完全不想动位置的</p>
</ul>
14-渐变
div {
width: 400px;
height: 800px;
background-image: linear-gradient(to right, green, pink, yellow, red);
}
15-字体图标
<!-- <style>
span {
color: pink;
}
.icon-a-008_huoguo {
font-size: 400px;
}
</style> -->
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.icon {
font-size: 70px;
}
</style>
<span class="iconfont icon-a-008_huoguo"></span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-a-008_hanbaokuaican
"></use>
</svg>
16-媒体查询
div {
background-color: pink;
}
/* @media only screen and (max-width:699px) and(min-width:550px){
div{
background-color: pink;
}
} */
@media screen and (min-width: 900px) {
div {
background-color: green;
}
}
@media only screen and (min-width: 320px) and (max-width: 700px) {
div {
background-color: blue;
}
}
</style>
</head>
<body>
<div>
scdscdc
</div>
17-默认外边距
woshinsaxnsj
<ul>
<li>cnidsjkjcdscndskcm</li>
</ul>
18-2d转换
.father {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
}
.son {
width: 300px;
height: 300px;
background-color: pink;
/* 平移 */
/* transform: translate(-40px, 40px); */
/* transform: translateX(70px); */
/* transform: translateY(-60px); */
/* 旋转 */
/* transform: rotateZ(40deg); */
/* 复合写法 旋转永远放在最后一个 */
/* transform: translate(100px) rotateZ(45deg); */
/* transform: rotateZ(45deg) translate(100px); */
/* transform: scale(1.5); */
/* transform: scaleX(2); */
/* transform: scaleY(2); */
/* transform: skew(40deg); */
/* 向右下移动100px 旋转45度 缩放1.5 */
transform: translate(100px, 100px) scale(1.5) rotate(45deg);
}
</style>
</head>
<body>
<div class="father">
<div class="son">2222222</div>
</div>
19-3d
.father {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 800px;
/* perspective-origin: 100px 200px; */
}
.son {
width: 300px;
height: 300px;
background-color: pink;
/* transform: translateZ(-200px); */
transform: rotateX(45deg);
/* transform: rotateY(45deg); */
/* transform: rotate3d(1, 1, 0, 45deg); */
backface-visibility: hidden;
transform-origin: bottom;
}
</style>
</head>
<body>
<div class="father">
<div class="son">2222222</div>
</div>
20-过渡
.father {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 800px;
/* perspective-origin: 100px 200px; */
}
.son {
/* transition 谁变化给谁加 */
transition: all 5s;
width: 300px;
height: 300px;
background-color: pink;
/* transform: translateZ(-200px); */
/* transform: rotateY(45deg); */
/* transform: rotate3d(1, 1, 0, 45deg); */
/* backface-visibility: hidden; */
}
.son:hover {
width: 800px;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div class="father">
<div class="son">2222222</div>
</div>
21-动画
@keyframes myMovie {
from {
width: 200px;
background-color: pink;
}
to {
width: 800px;
background-color: aqua;
}
}
@keyframes myfirst {
0% {
width: 200px;
background-color: pink;
}
20% {
width: 400px;
background-color: green;
}
80% {
width: 800px;
background-color: red;
}
100% {
width: 1200px;
background-color: aquamarine;
}
}
div {
width: 200px;
height: 50px;
background-color: aqua;
animation: myMovie 5s infinite alternate steps(4);
animation: myfirst 5s infinite alternate steps(400);
}
</style>
</head>
<body>
<div>
</div>
作业:
<!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>
<div class="header">
<div class="header_top"></div>
<div class="header_middle">
<div class="w">
<ul>
<li><a href="#">小米商城</a></li>
<li><a href="#">MIUI</a></li>
<li><a href="#">IOT</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>
<li><a href="#">下载APP</a></li>
<li><a href="#">智能生活</a></li>
<li><a href="#">Select Location</a></li>
<li class="right"><a href="register.html">登录</a></li>
<li><a href="login.html">注册</a></li>
<li><a href="message.html">消息通知</a></li>
<li class="shopping"><a href="shopping.html">购物车(0)</a></li>
</ul>
</div>
</div>
<div class="top_logo w">
<a href="#" class="logo"></a>
<ul class="list">
<li><a href="#">小米手机</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>
<a href="#" class="search_btn"></a>
<div class="search">
<input type="search" value="出行" class="search-text">
</div>
</div>
<div class="top_app w">
<div class="box_autoplay_list">
<ul>
<li><img src="images/app_banner.webp.jpg" style="width: 1226px; height: 460px;" /></li>
<li><img src="images/app_banner.webp2.jpg" style="width: 1226px; height: 460px;" /></li>
<li><img src="images/app_banner.webp3.webp.jpg" style="width: 1226px; height: 470px;"/></li>
<li><img src="images/app_banner.webp4.webp.jpg" style="width: 1226px; height: 470px;" /></li>
</ul>
</div>
</div>
<div class="app_list">
<ul>
<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>
<li><a href="#">健康 儿童</a></li>
<li><a href="#">耳机 音箱</a></li>
<li><a href="#">生活 箱包</a></li>
</ul>
</div>
</div>
<div class="app_bottom w">
<div class="first">
<ul>
<li><a href="#"><img src="images/app_btn1.png" alt="">小米秒杀</a></li>
<li><a href="#"><img src="images/app_btn2.png" alt="">企业团购</a></li>
<li class="first3"><a href="#"><img src="images/app_btn3.png" alt="">F码通道</a></li>
<li class="first4"><a href="#"><img src="images/app_btn4.png" alt="">米粉卡</a></li>
<li class="first5"><a href="#"><img src="images/app_btn5.png" alt="">以旧换新</a></li>
<li class="first6"><a href="#"><img src="images/app_btn6.png" alt="">话费充值</a></li>
</ul><a href="#"></a>
</div>
<ul>
<li><a href="#"><img src="images/app_bottom1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/app_bottom2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/app_bottom3.jpg" alt=""></a></li>
</ul>
</div>
</div>
</body>
</html>