一、绝对定位
<!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{color: white;text-align: center;line-height: 200px;width: 200px;height: 200px;background-color: red;}#absolute{background-color: blue;/* position: fixed; *//* position: absolute; */top: 100px;left: 50px;}#son-absolute{background-color: green;position: absolute;line-height: 100px;width: 120px;height: 120px;font-size: 14px;top: 10px;left: 10px;}</style>
</head>
<body><div id="absolute"><div id="son-absolute">绝对定位的子div</div></div><div class="item1">普通的div1</div><div class="item2">普通的div2</div><div class="item3">普通的div3</div><div class="item3">普通的div4</div><div class="item3">普通的div5</div><div class="item3">普通的div6</div><div class="item3">普通的div7</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 {color: white;line-height: 200px;width: 200px;height: 200px;background-color: red;}#father {background-color: blue;position: absolute;overflow: hidden;}#son {background-color: green;line-height: normal;width: 120px;height: 100px;font-size: 14px;}.center{margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;}</style></head><body><div id="father"><div id="son" class="center">子div</div></div></body>
</html>
三、Jquery插件
<!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>#box {width: 500px;height: 240px;margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;text-align: center;}body {background-image: url("images/black-earth.jpg");background-size: cover;/* position: absolute;width: 100%;height: 100%;margin: 0; */}h3,p{text-align: center;color: white;}input{box-sizing: border-box;width: 300px;background-image: url("images/sousuo.png");background-repeat: no-repeat;background-position: 5px 10px;padding-left: 25px;background-color:white;opacity: 0.5;outline: none;}input:focus{background-image: url("images/sousuo-2.png");border:1px solid cornflowerblue;}input:focus::placeholder{color:cornflowerblue;}input,button{height: 40px;border: 1px solid white;vertical-align: middle;}button{width: 120px;background-image: url("images/xiangyou.png");background-repeat: no-repeat;background-position: 9px 12px;background-color: #d4552d;color: white;font-size: 12px;}</style></head><body><div id="box"><h3>Look For Less,Do More</h3><p>provides the latest , the greatest and the most comprehensive jQuery plugins</p><input type="text" placeholder="请输入插件名"><button>找到您梦想</button></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{color: white;text-align: center;line-height: 200px;width: 200px;height: 200px;background-color: red;}#relative{background-color: blue;/* position: relative; */position: relative;top: 80px;left: 100px;}#son-absolute{background-color: green;position: absolute;line-height: 100px;width: 120px;height: 120px;font-size: 14px;top: 10px;left: 10px;}</style>
</head>
<body><div class="item1">普通的div1</div><div class="item2">普通的div2</div><div class="item3">普通的div3</div><div class="item3">普通的div4</div><div id="relative"><div id="son-absolute">绝对定位的子div</div></div><div class="item3">普通的div5</div><div class="item3">普通的div6</div><div class="item3">普通的div7</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>
</head>
<body><a href="#">百度一下</a><img src="茶艺大师/images/item1.png" alt="" width="100"><p>这是一个段落</p><h1>这是一个h1</h1>
</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>img{float: left;}</style>
</head>
<body><img src="茶艺大师/images/icon5_03.png" alt="" width="200"><p>顺应时代变革，以满足现代人的生活需求为核心，坚持唯一等级和唯一价格，为中国茶做减法，还原茶叶真相，彻底解决茶叶消费买、喝、送的三大需求痛点，让茶真正回归生活，美化生活。企业愿景：打造世界级的中国茶品牌品牌定位：现代派中国茶品牌使命：做中国好茶，做好中国茶 因创新而生，为颠覆而来！顺应时代变革，以满足现代人的生活需求为核心，坚持唯一等级和唯一价格，为中国茶做减法，还原茶叶真相，彻底解决茶叶消费买、喝、送的三大需求痛点，让茶真正回归生活，美化生活。企业愿景：打造世界级的中国茶品牌品牌定位：现代派中国茶品牌使命：做中国好茶，做好中国茶 因创新而生，为颠覆而来！</p></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: 30px;/* float: left; */display: inline-block;}.floatbox{background-color: #f3f3f3;}</style>
</head>
<body><div style="background-color:red;">1</div><div style="background-color:blue; height: 300px;">2</div><div class="floatbox">浮动</div><div style="background-color:green;">4</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>#outer{width: 200px;/* height: 300px; */background-color: red;overflow: hidden;}#inner{width: 100px;height: 300px;background-color: blue;float: left;}</style>
</head>
<body><div id="outer"><div id="inner"></div></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: 30px;/* float: left; */display: inline-block;}.floatbox {background-color: #f3f3f3;}#father{width: 800px;height: 400px;float: none;margin: 0 auto; }</style></head><body><div style="background-color: red">1</div><div style="background-color: blue; height: 300px;">2</div><div class="floatbox">浮动</div><div style="background-color: green">4</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>#about,#enterprise{width: 960px;margin: 0 auto;}#about{font-size: 0;background-image: url("images/茶艺大师_03.png");background-repeat: no-repeat;}#about #about-img{width: 485px;height: 310px;vertical-align: middle;}#about .about-content{width: 465px;height: 310px;margin-left: 10px;background-color: #f3f3f3;font-size: 10px;display: inline-block;vertical-align: middle;padding: 30px;padding-left: 45px;box-sizing: border-box;position: relative;}#about .about-title{font-size: 30px;color: #779d2c;margin: 0;}#about .about-title span{font-size: 15px;}#about .title-bg{width: 180px;height: 21px;position: relative;top: 37px;}#about h1{margin: 0;position: relative;z-index: 2;}#about .about-word{margin-top: 40px;}.more-btn{width: 85px;height: 18px;background-color: #779d2c;color: white;padding: 0;border: none;font-size: 10px;position: absolute;right: 30px;}#enterprise{margin-top: 15px;height: 723px;font-size: 0;}#enterprise #e-img{width: 100%;height: 305px;}#enterprise #e-content{height: 420px;background-color: #f3f3f3;background-image: url("images/icon5_03.png");background-repeat: no-repeat;background-size: 60%;background-position: 300px 0;font-size: 0px;position: relative;}#e-content img{height: 210px;width: 210px;vertical-align: middle;}#e-content #right-img{margin-left: 210px;}#e-content #left-img{width: 540px;}#e-content #e-faith{font-size: 9px;color: #333;display: inline-block;height: 210px;vertical-align: middle;margin-right: 133px;position: relative;box-sizing: border-box;padding:30px;}#e-content #e-faith h1{font-size: 15px;}#e-content #e-c-price{height: 125px;width: 355px;padding-left:30px;padding-top: 25px;box-sizing: border-box;position: absolute;top: -125px;right: 210px;background-color: #f3f3f3;}#e-content #e-c-price h1{font-size: 15px;margin: 0;}#e-content #e-c-price p{font-size: 10px;}</style>
</head>
<body><!-- 关于百香园 --><div id="about"><img src="images/item5.png" alt="" id="about-img"><div class="about-content"><p class="about-title">关于百香园/ <span>about us</span> </p><img src="images/bg.png" alt="" class="title-bg"><h1>北京茶叶有限公司</h1><p class="about-word">中国茶业有限公司创立于2014年，是互联网思维、体验经济下应运而生的一家现代茶商。用创新理念，以极具创造性的手法整合中国茶行业优势资源，联合六大茶类的八位泰斗级制茶大师...</p><button class="more-btn">More</button></div></div><!-- 企业介绍 --><div id="enterprise"><img src="images/item6.png" alt="" id="e-img"><div id="e-content"><img src="images/item7.png" alt="" id="left-img"><img src="images/_03_03.png" alt="" id="right-img"><div id="e-faith"><h1>企业理念</h1><p>企业愿景：打造世界级的中国茶品牌</p><p>品牌定位：现代派中国茶</p><p> 品牌使命：做中国好茶，做好中国茶 因创新而生，为颠覆而来！</p><button class="more-btn">More</button></div><img src="images/_03_06.png" alt=""><!-- 绝对定位子标签 --><div id="e-c-price"><h1>企业价值观</h1><p>顺应时代变革，以满足现代人的生活需求为核心，坚持唯一等级和唯一价格，为中国茶做减法，还原茶叶真相，彻底解决茶叶消费买、喝、送的三大需求痛点，让茶真正回归生活，美化生活。</p></div></div></div>
</body>
</html>
🌈本篇博客的内容【网页核心页面设计】已经结束。
🌈若对你有些许帮助，可以点赞、关注、评论支持下博主，你的支持将是我前进路上最大的动力。
