CSS样式补充
<style>
.one {
width: 24px;
height: 24px;
background: url('./images/taobao.png') 0px -264px;
float: left;
}
.two {
width: 24px;
height: 24px;
background: url('./images/taobao.png') 0px -484px;
float: left;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
<style>
div {
width: 400px;
height: 300px;
border: 1px solid #000;
background: url('./images/1.jpg') no-repeat;
margin: 100px auto;
}
div:nth-child(2) {
/*
1、数字 + px
优点:设置简单
缺点:图片可能会拉伸变形
*/
background-size: 400px 300px;
}
div:nth-child(3) {
/*
2、百分比:
优点:设置简单
缺点:图片可能会拉伸变形
*/
background-size: 100% 100%;
}
div:nth-child(4) {
/*
3、contain:包含——》让背景图片进行等比例缩放,直到不会超出盒子的最大
优点:进行等比例缩放,不会让图片变形
缺点:可能盒子会出现留白
*/
background-size: contain;
}
div:nth-child(5) {
/*
4、cover:覆盖——》让背景图片进行等比例缩放,直接填满整个盒子刚好没有空白为止
优点:进行等比例缩放,不会让图片变形
缺点:可能背景图片会超出盒子
*/
background-size: cover;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
<style>
div {
width: 600px;
height: 600px;
border: 1px solid #000;
background: url('./images/1.jpg') no-repeat center center / 100% 100%;
/* background-size: 100% 100%; */
/*
background的连写:
background:color image repeat position / size
解决方法:
1、要么把单独的样式写在连写的下面
2、要么把单独的样式写在连写的里面
*/
background: color image repeat position/size;
}
</style>
</head>
<body>
<div></div>
</body>
<style>
div {
height: 300px;
text-align: center;
line-height: 300px;
font-size: 100px;
font-weight: 700;
}
div:nth-child(1) {
text-shadow: 18px 20px 16px red;
}
div:nth-child(2) {
text-shadow: 10px 10px 5px red,
20px 20px 5px green,
30px 30px 5px blue;
}
div:nth-child(3) {
color: #fff;
background-color: #000;
text-shadow: 0 0 5px #fff, 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
}
div:nth-child(4) {
background-color: #000;
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}
div:nth-child(5) {
color: #666;
background-color: #666;
text-shadow: -1px -1px 1px #fff,
1px 1px 1px #000;
}
div:nth-child(6) {
color: #666;
background-color: #666;
text-shadow: -1px -1px 1px #000,
1px 1px 1px #fff;
}
</style>
</head>
<body>
<div>多喝点热水</div>
<div>多喝点热水</div>
<div>多喝点热水</div>
<div>多喝点热水</div>
<div>多喝点热水</div>
<div>多喝点热水</div>
</body>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
margin: 100px auto;
/* 盒子阴影 */
box-shadow: 32px 26px 15px #000;
}
</style>
</head>
<body>
<div></div>
</body>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
/* 过渡 */
transition: all 1s;
}
div:hover {
width: 800px;
/* width: 200px; */
background-color: yellow;
}
</style>
</head>
<body>
<div></div>
</body>
鼠标碰之前
鼠标碰之后,缓慢变长变颜色
项目前置认知
<!DOCTYPE html>
<!--
document:文档
type:类型
文档类型声明:当前网页是html5
-->
<html lang="en">
<!--
标识网页使用的语言
en:英文
zh-CN:中文
-->
<head>
<meta charset="UTF-8">
<!--
设置网页使用的字符编码
UTF-8:字符编码的一种
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
我是一个中文
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小兔鲜儿-新鲜、惠民、快捷!</title>
<meta name="description" content="小兔鲜儿官网,致力于打造全球最大的食品、生鲜电商购物平台。" />
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物" />
</head>
<body>
</body>
</html>
项目结构搭建