深圳福田网站建设nba排名最新
一、伪元素
伪元素是 CSS 中的一种选择器，用于选择某些特定的元素或元素的一部分，而这些元素本身并不存在于文档的结构中。伪元素使得网页设计师可以更灵活地控制样式，从而可以为元素的内容、框架或文本提供额外的样式，增强网页的视觉效果和用户体验。
1、作业
<!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>div{width: 200px;height: 200px;line-height: 200px;text-align: center;font-size: 24px;background-color: #f3f3f3;margin: 0 auto; }div::before{content: "[";margin-right: 20px;/* display: none; */}div::after{content: "]";margin-left: 20px;/* display: none; */}div::before,div::after{transition: all .5s;opacity: 0;}div:hover::after,div:hover::before{opacity: 1;}</style>
</head>
<body><div>CSS</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>div{width: 200px;height: 200px;line-height: 200px;text-align: center;font-size: 24px;background-color: #f3f3f3;position: relative;margin: 100px auto; }/*before：聊天框 after:三角形*/div::before{content: "CSS伪类";width: 200px;height: 50px;position: absolute;top: -80px;left: 0;background-color:red;border-radius: 60px;text-align: center;line-height: normal;}div::after{content: "";position: absolute;top: -30px;left: 75px;width: 0;height: 0;border:20px solid transparent;border-top:20px solid red ;}div::after,div::before{opacity: 0;transition: all 1s;}div:hover::before,div:hover::after{opacity: 1;}</style>
</head>
<body><div>CSS</div>
</body>
</html>
2、伪元素清除浮动
<!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>div{width: 200px;height: 200px;line-height: 200px;text-align: center;font-size: 30px;color: white;}.floatbox{background-color: blue;float: left;}.box{background-color: red;}#wrap::after{content: "";display:block;height: 0;visibility: hidden;clear: both;}</style>
</head>
<body><div class="floatbox">float</div><div class="box"></div>
</body>
</html>
二、BFC
BFC 的特点
独立性：BFC 内部的元素不会影响外部元素，外部元素也不会影响内部元素。这种独立性使得布局更加可控。
清除浮动：当 BFC 中的元素浮动时，它会包裹住这些浮动的元素，避免其影响到外部的布局，有助于解决清除浮动的问题。
高度计算：BFC 可以计算其内部元素的高度，避免父元素高度塌陷的问题。即使内部没有内容，BFC 也会根据内部元素的布局计算出高度。
1、盒子放置特点
<!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>div{width: 200px;height: 200px;background-color: red;/* 触发BFC，div内部区域会有bfc的特点 */overflow: hidden;}</style>
</head>
<body><div><p>这是一个p标签</p><div style="width: 100px; height: 100px;"><p >这是第二个个p标签</p></div></div>
</body>
</html>
2、margin重叠
<!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>div{width: 200px;height: 200px;background-color: red;/* 触发BFC，div内部区域会有bfc的特点 */overflow: hidden;}</style>
</head>
<body><div><p>这是一个p标签</p><div style="width: 100px; height: 100px;"><p >这是第二个个p标签</p></div></div>
</body>
</html>
3、左边界接触
<!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>div{width: 200px;height: 200px;background-color: red;/* 触发BFC，div内部区域会有bfc的特点 */overflow: hidden;}p{width: 100px;background-color: blue;overflow: hidden;}</style>
</head>
<body><div><p>这是一个p标签</p><p >这是第二个个p标签</p></div>
</body>
</html>
4、不会和浮动盒子重叠
<!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>div{width: 200px;height: 200px;background-color: red;/* 触发BFC，div内部区域会有bfc的特点 *//* overflow: hidden; */}#float-box{float: left;}#bfc-box{height: 300px;background-color: blue;overflow: hidden;}</style>
</head>
<body><div id="float-box"></div><div id="bfc-box"></div>
</body>
</html>
5、隔离容器
<!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>div{width: 200px;height: 200px;background-color: red;/* 触发BFC，div内部区域会有bfc的特点 *//* overflow: hidden; */}#float-box{color: red;/* display: flex; */}#bfc-box{height: 300px;background-color: blue;}</style>
</head>
<body><div id="float-box"><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p></div><div id="bfc-box"></div>
</body>
</html>
6、浮动元素高度计算
<!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>div{width: 300px;/* height: 300px; */background-color: red;/* 触发BFC，div内部区域会有bfc的特点 */overflow: hidden;}#bfc-box{background-color: blue;/* overflow: hidden; */}#bfc-box p{float: left;width: 100px;}</style>
</head>
<body><div id="bfc-box"><p>这是一个p标签</p><p>这是一个p标签</p></div>
</body>
</html>
7、三栏式布局
<!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>#left,#right{width: 200px;height: 300px;}#left{float: left;background-color: yellow;}#right{float: right;background-color:green;}#main{/* width: 100%; *//* min-width: 300px; */height: 500px;background-color: greenyellow;/* 触发bfc */overflow: hidden;}</style>
</head>
<body><div id="left"></div><div id="right"></div><div id="main"></div></body>
</html>
三、IFC
IFC 的特点
行内布局：IFC 主要影响行内元素及它们在文本流中的排列方式。行内元素在一行中布局，它们的高度和宽度通常由内容决定，而不会产生块级元素的特性。
行内上下文：在 IFC 中，行内元素可以在一行内与其他行内元素、文本、图像等交错显示，但不会导致行高的变化（除非用 line-height 等属性进行调整）。
包含的元素：在 IFC 内，可以包含其他行内元素和块级元素，但块级元素会触发上下文的变化，通常会导致换行。
对齐与间距：IFC 允许使用 vertical-align 和 text-align 等属性来控制元素的对齐和间距。
1、简介
<!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>div{border: 1px solid red;width: 400px;}</style>
</head>
<body><div><span>这是span标签</span><a href="#">百度一下</a><input type="text"><button>登录</button></div>
</body>
</html>
2、font-size
<!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>div{border: 1px solid red;width: 400px;}span{}</style>
</head>
<body><div>整个ifc区域中只有文字<span>span中的 文字</span></div>
</body>
</html>
3、font-family
<!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>div{border: 1px solid red;width: 400px;/* line-height: 2px; */font-family:'ca';font-size: 30px;/* line-height: 2px; *//* line-height: 1px; */line-height: 50px;font-size: 100px;}@font-face {font-family: "徐静蕾字体";src: url("font/徐静蕾字体.fon");}@font-face {font-family: "ca";src: url("font/Catamaran-Bold.ttf");}span{}</style>
</head>
<body><div><span>整个ifc</span> </div>
</body>
</html>
4、line-height
<!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>div{border: 1px solid red;width: 400px;line-height: 2px;}span{/* line-height: 2;font-size的2倍 *//* line-height: 2px; */}</style>
</head>
<body><div>整个ifc区域中只有文字span中的 文字整个ifc区域中只有文字span中的 文字</div>
</body>
</html>
5、verrical-align
<!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>div{border: 1px solid red;line-height: 160px;/* line-height: 148px; */font-family: "ca";}img,button,input{vertical-align: text-top;}img{/* height: 50px; */}span{}a{font-size: 140px;}@font-face {font-family: "ca";src: url("font/Catamaran-Bold.ttf");}</style>
</head>
<body><div>这是<img src="1.png" alt="">这是<a href="#">百度一下</a><input type="text"><button>登录</button></div>
</body>
</html>
四、弹性布局
弹性布局（Flexbox）是一种用于设计网页布局的CSS布局模式，它提供了一种更有效的方式来布置、对齐和分配空间给容器内的项目。弹性布局特别适用于需要在不同屏幕上进行响应式设计的场合。
1、介绍
<!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>div{width: 200px;height: 200px;background-color: red;font-size: 30px;display: inline-block ;}#second{display: inline-flex;}</style>
</head><body><div>1</div><div id="second">2</div><div>3</div>
</body>
</html>
2、子元素
<!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>#second{display: inline-flex;/* width: 1200px; */height: 500px;border:1px solid red;font-size: 30px;display:flex;justify-content: center;flex-wrap: wrap;margin: 0 auto;}#second div{width: 200px;height: 100px;margin-left: 20px;margin-top: 20px;background-color: red;}</style>
</head><body><div id="second"><div></div><div></div><div></div><div></div><div></div></div></body>
</html>
3、弹性容器-基础
<!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>#list{width: 60%;margin: 0 auto;/* height: 1000px; */height: 1000px;background-color: #f3f3f3;display: flex;/* flex-direction: column-reverse; 改变主轴*/ justify-content: center;align-content: center;/* align-items: stretch; *//* align-items: center; */flex-wrap: wrap;}#list div{width: 200px;height: 200px;background-color: tomato;/* line-height: 200px; */text-align: center;font-size: 30px;color: white;}</style>
</head>
<body><div id="list"><div style="height: 150px;">1</div><div style="height: 200px;">2</div><div style="height: 300px;">3</div><div style="height: 200px;">4</div><!-- <div>1</div><div>2</div><div>3</div><div>4</div> --><!-- <div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div> --></div>
</body>
</html>
4、弹性容器-收缩比例
<!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>#list{width: 600px;margin: 0 auto;/* height: 1000px; */height: 1000px;background-color: #f3f3f3;display: flex;/* flex-direction: column-reverse; 改变主轴*/ /* justify-content: center; *//* align-content: center; *//* align-items: stretch; *//* align-items: center; *//* flex-wrap: wrap; */}#list div{width: 200px;height: 200px;background-color: tomato;/* line-height: 200px; */text-align: center;font-size: 30px;color: white;}</style>
</head>
<body><div id="list"><!-- <div style="height: 150px;">1</div><div style="height: 200px;">2</div><div style="height: 300px;">3</div><div style="height: 200px;">4</div> --><div style="flex-shrink: 1;">1</div><div style="flex-shrink: 1;">2</div><div style="flex-shrink: 0;">3</div><div style="flex-shrink: 0;">4</div><!-- <div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div> --></div>
</body>
</html>
五、jquery基础
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它简化了 HTML 文档的遍历和操作、事件处理、动画以及 Ajax 交互。
1、基础
<!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>body {margin: 0;}header {height: 50px;background-color: #ccc;display: flex;}img {width: 10%;}ul {width: 90%;list-style: none;margin: 0;padding: 0;display: flex;}li {width: 20%;text-align: center;line-height: 50px;}.item {width: 300px;/* height: 400px; */padding: 10px;box-sizing: border-box;margin-bottom: 15px;border: 1px solid #ccc;/* flex-grow: 1; */margin-left: 15px;transition: all 0.5s;}.item img {width: 100%;}.price {color: darkred;font-size: 24px;font-weight: bold;}main {width: 80%;margin: 0 auto;border: 1px solid red;/* height: 2000px; */display: flex;flex-wrap: wrap;justify-content: space-evenly;align-content: flex-start;}#first{background-color: darkred;order: 1;}#last{background-color: darkblue;order: -1;}</style></head><body><header><img src="images/logo.png" alt="" /><ul><li>第1项哈哈哈</li><li>第2项哈哈哈</li><li>第3项哈哈哈</li><li>第4项哈哈哈</li><li>第5项哈哈哈</li></ul></header><main id="list"><div class="item" id="first"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div><div class="item" id="last"><img src="images/id1.jpg" alt="" /><p>[蜗牛]不锈钢装饰物品</p><p class="price">￥ 998</p></div></main></body>
</html>
2、字体图标设计
<!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><link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"><style>a{color: red;}</style>
</head>
<body><i class="fa fa-pencil-square-o" aria-hidden="true"></i><a href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>百度一下</a>
</body>
</html>
3、实战
<!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><link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"><style>body{background-color: #f3f3f3;margin: 0;}header{height: 50px;background-color: black;display: flex;justify-content: space-between;position: fixed;top: 0;width: 100%;z-index: 2;}#logo{height: 50px;line-height: 50px;}#logo img{height: 30px;vertical-align: middle;}header ul{/* width: 90%;min-width: 700px; */margin: 0;padding: 0;list-style: none;display: flex;color: white;/* align-content: center; */}header ul li{line-height: 50px;/* padding:20px; */width: 100px;text-align: center;}#search-box{height: 500px;background-image: url("images/4.jpg");background-repeat: no-repeat;background-size: cover;display: flex;justify-content: center;align-content: center;flex-wrap: wrap;background-attachment: fixed;position: relative;}#search-box .search{width: 500px;height: 200px;background-color: blue;position: fixed;top: 150px;left: 0;right: 0;margin:auto;}nav{background-color: #fff;color: gray;height: 50px;}nav ul{height: 100%;width: 80%;list-style: none;margin: 0 auto;padding: 0;display: flex;align-content: center;flex-wrap: wrap;}nav ul li{flex-grow: 1;text-align: center;height: 25px;border-right: 1px solid #ccc;}.noborder{border: none;}main{width: 80%;margin: 0 auto;display: flex;flex-wrap: wrap;}main div{flex-grow: 1;width: 200px;height: 200px;background-color: darkred;line-height: 200px;font-size: 30px;color: white;text-align: center;margin-top: 15px;margin-left: 15px;}main div:hover{box-shadow: 0 0 10px 5px rgba(0,0,0);}#main{width: 100%;height: 2000px;position: relative;z-index: 1;background-color: #f3f3f3;}</style>
</head>
<body><header><div id="logo"> <img src="images/logo.png" alt=""></div><ul><li><i class="fa fa-edit"></i> 在线编辑</li><li><i class="fa fa-edit"></i> 在线编辑</li><li><i class="fa fa-edit"></i> 在线编辑</li><li><i class="fa fa-edit"></i> 在线编辑</li><li><i class="fa fa-edit"></i> 在线编辑</li><li><i class="fa fa-edit"></i> 在线编辑</li><li><i class="fa fa-edit"></i> 在线编辑</li></ul></header><!-- 搜索区域 --><div id="search-box"><div class="search"><input type="text"><button>登录</button></div></div><div id="main"><nav><ul><li><i class="fa fa-edit"></i>网页模板</li><li><i class="fa fa-edit"></i>网页模板</li><li><i class="fa fa-edit"></i>网页模板</li><li><i class="fa fa-edit"></i>网页模板</li><li><i class="fa fa-edit"></i>网页模板</li><li><i class="fa fa-edit"></i>网页模板</li><li><i class="fa fa-edit"></i>网页模板</li><li><i class="fa fa-edit"></i>网页模板</li><li><i class="fa fa-edit"></i>网页模板</li><li class="noborder"><i class="fa fa-edit"></i>网页模板</li></ul></nav><main><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></main></div>
</body>
</html>
4、边框阴影
<!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>div{width: 200px;height: 200px;background-color: red;margin: 200px auto;box-shadow: 0 0 3px 3px #aaa;}</style>
</head>
<body><div></div>
</body>
</html>
5、边框固定
<!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>#demo{width: 100%;height: 400px; margin: 0px auto;box-shadow: 0 0 3px 3px #aaa;background-image: url("images/4.jpg");background-size: cover;margin-bottom: 0px;background-attachment: fixed;}#demo2{width: 800px;height: 2300px; background-color: red;margin: 0 auto;background-image: url("images/id1.jpg");background-repeat: no-repeat;}</style>
</head>
<body><div id="demo"></div><div id="demo2"></div></body>
</html>
🌈本篇博客的内容【网页核心页面设计】已经结束。
🌈若对你有些许帮助，可以点赞、关注、评论支持下博主，你的支持将是我前进路上最大的动力。