一、登录页面
<!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: 300px;height: 300px;border: 1px solid #ccc;margin:0 auto;padding:40px;}h1{margin: 0px;}input{width: 100%;height: 40px;padding:0px;margin-top: 15px;background-repeat: no-repeat;background-position: 0px 9px;padding-left: 25px;border: 1px solid #ccc;outline: none;box-sizing: border-box;}button{margin-bottom: 15px;width: 100%;height: 50px;padding:0px;background-color: royalblue;color: white;border: 1px solid #ccc;}#input-user{background-image: url("image/user.png"); }#input-pass{margin-bottom: 15px;background-image: url("image/pass.png");}a{text-decoration: none;color: royalblue;}#link-register{margin-right: 71px;}</style>
</head>
<body><div id="box"><h1>用户登录</h1><input type="text" placeholder="用户名/邮箱" id="input-user"><input type="password" placeholder="密码" id="input-pass"><button>登录</button><a href="#" id="link-register">还没有账号？注册账号</a><a href="#">忘记密码</a></div>
</body>
</html>
二、ie盒模型
<!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;padding:20px;border:10px solid black;}#ie{box-sizing: border-box;}</style>
</head>
<body><div></div><div id="ie"></div>
</body>
</html>
三、div练习
<!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>p{font-size: 30px;}#pay{width: 700px;height: 150px;border-top: 1px solid #ccc;/* line-height: 150px; */}#pay div{display: inline-block;border:1px solid #ccc;width: 150px;height: 50px;/* line-height: 50px; */}#pay div img{vertical-align: middle;}</style>
</head>
<body><p>支付方式</p><div id="pay"><div><img src="image/27.png" alt=""> 支付宝支付</div><div><img src="image/weixin.png" alt=""> 微信支付</div><div><img src="image/zhifupingtai-yinlian.png" alt="">银联支付</div><div>货到付款</div></div>
</body>
</html>
四、vertical-align和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{width: 200px;height: 140px;/* border:1px solid red; */line-height: 140px;display: inline-block;font-size: 14px;}img{border:1px solid blue;vertical-align: middle;}input{width: 50px;height: 40px;vertical-align: middle;}body{font-size: 14px;}#outer{font-size: 0;width: 800px;height: 170px;}</style>
</head>
<body><div id="outer"><div><img src="image/27.png" alt=""> <span>支付宝支付</span></div><div><img src="image/27.png" alt=""> <span>支付宝支付</span></div><div><img src="image/27.png" alt=""> <span>支付宝支付</span></div><div><img src="image/27.png" alt=""> <span>支付宝支付</span></div></div><br><input type="text"><button>登录</button>
</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>body{margin: 0;font-size: ;font-family: ;font-weight: ;color:;}</style>
</head>
<body><h1>h1里的内容</h1><p>p标签</p><ul><li>第1个列表项</li><li>第2个列表项</li><li>第3个列表项</li><li>第4个列表项</li></ul>
</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>body{margin: 0;}#header{width: 100%;height: 90px;background-color: black;}#header-content{width: 1200px;height: 100%;margin: 0 auto;line-height: 90px;}#header-content #logo{height: 50px;}#header-content img,#header-content input,#header-content button,#header-content ul,#header-content a{vertical-align: middle;}/* 导航 */#nav{list-style: none;padding-left: 0px;display: inline-block;margin: 0;margin-left: 200px;height: 40px;line-height: 40px;}#nav li{display: inline-block;width: 120px;height: 40px;text-align: center;line-height: 40px;color: white;}#nav #work-li{background-color: white;/* background-image: url("image/indexFormat.png");background-repeat: no-repeat;background-position: 5px 10px; */color: purple;}#search-input{width: 100px;height: 30px;box-sizing: border-box;border:none;border-bottom: 1px solid #ccc;background-color: black;}#search-btn{height: 30px;border:none;border-bottom: 1px solid #ccc;background-color:black;background-image: url("image/搜索.png");background-repeat: no-repeat;background-position: 0px 5px;width: 30px;}/* 卡片列表 */#list{width: 1200px;height: 900px;margin: 20px auto;font-size: 0px;}.item{font-size: 14px;width: 220px;height: 245px;margin-right:20px;margin-top: 20px;border: 1px solid red;box-sizing: border-box;display: inline-block;}.item img{width: 100%;}.item .item-title{font-size: 20px;text-align: center;margin: 0;}.item .item-content{font-size: 12px;color: #ccc;margin: 0;padding:10px;box-sizing: border-box;}.span-red{color: white;background-color: red;margin-left: 90px;}.span-blue{color: white;background-color: blue;}.span-yellow{color: white;background-color: yellow;}.item span{display: inline-block;padding:2px;}#tabs{width: 1200px;margin: 0 auto;border-bottom: 1px solid #ccc;height: 40px;margin-top: 100px;line-height: 40px;}#tabs a{color: black;text-decoration: none;padding:10px;}#tabs #tabs-unline{border:1px solid #ccc;border-bottom: 1px solid white;}</style>
</head>
<body><div id="header"><div id="header-content"><img src="image/logo-500px.png" id="logo" alt=""><ul id="nav"><li id="work-li"><img src="image/indexFormat.png" alt=""> 就业培训</li><li>企业内训</li><li>图片出版</li><li>蜗牛笔记</li></ul><input type="text" placeholder="搜索课程" id="search-input"><button id="search-btn"></button><img src="image/头像.png" alt=""><a href="#">注销</a></div></div><!-- 导航 --><div id="tabs"><a href="#">随堂视频</a><a href="#" id="tabs-unline">线下教学</a></div><!-- 主体 --><div id="list"><!-- 一个小盒子 --><div class="item"><img src="image/model1.jpg" alt=""><p class="item-title">专业基础：HTML+CSS</p><p class="item-content">知识要点：CSS3选择器、伪类、过渡、变换、动画、字体图标、</p><span class="span-red">成都</span><span class="span-blue">邓乃文</span><span class="span-yellow">11期</span></div><div class="item"><img src="image/model1.jpg" alt=""><p class="item-title">专业基础：HTML+CSS</p><p class="item-content">知识要点：CSS3选择器、伪类、过渡、变换、动画、字体图标、</p><span class="span-red">成都</span><span class="span-blue">邓乃文</span><span class="span-yellow">11期</span></div><div class="item"><img src="image/model1.jpg" alt=""><p class="item-title">专业基础：HTML+CSS</p><p class="item-content">知识要点：CSS3选择器、伪类、过渡、变换、动画、字体图标、</p><span class="span-red">成都</span><span class="span-blue">邓乃文</span><span class="span-yellow">11期</span></div><div class="item"><img src="image/model1.jpg" alt=""><p class="item-title">专业基础：HTML+CSS</p><p class="item-content">知识要点：CSS3选择器、伪类、过渡、变换、动画、字体图标、</p><span class="span-red">成都</span><span class="span-blue">邓乃文</span><span class="span-yellow">11期</span></div><div class="item"><img src="image/model1.jpg" alt=""><p class="item-title">专业基础：HTML+CSS</p><p class="item-content">知识要点：CSS3选择器、伪类、过渡、变换、动画、字体图标、</p><span class="span-red">成都</span><span class="span-blue">邓乃文</span><span class="span-yellow">11期</span></div><div class="item"><img src="image/model1.jpg" alt=""><p class="item-title">专业基础：HTML+CSS</p><p class="item-content">知识要点：CSS3选择器、伪类、过渡、变换、动画、字体图标、</p><span class="span-red">成都</span><span class="span-blue">邓乃文</span><span class="span-yellow">11期</span></div><div class="item"><img src="image/model1.jpg" alt=""><p class="item-title">专业基础：HTML+CSS</p><p class="item-content">知识要点：CSS3选择器、伪类、过渡、变换、动画、字体图标、</p><span class="span-red">成都</span><span class="span-blue">邓乃文</span><span class="span-yellow">11期</span></div><div class="item"><img src="image/model1.jpg" alt=""><p class="item-title">专业基础：HTML+CSS</p><p class="item-content">知识要点：CSS3选择器、伪类、过渡、变换、动画、字体图标、</p><span class="span-red">成都</span><span class="span-blue">邓乃文</span><span class="span-yellow">11期</span></div><div class="item"><img src="image/model1.jpg" alt=""><p class="item-title">专业基础：HTML+CSS</p><p class="item-content">知识要点：CSS3选择器、伪类、过渡、变换、动画、字体图标、</p><span class="span-red">成都</span><span class="span-blue">邓乃文</span><span class="span-yellow">11期</span></div><div class="item"><img src="image/model1.jpg" alt=""><p class="item-title">专业基础：HTML+CSS</p><p class="item-content">知识要点：CSS3选择器、伪类、过渡、变换、动画、字体图标、</p><span class="span-red">成都</span><span class="span-blue">邓乃文</span><span class="span-yellow">11期</span></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{color: white;text-align: center;line-height: 200px;width: 200px;height: 200px;background-color: red;}#fix{background-color: blue;position: fixed;top:100px;left: 200px;}</style>
</head>
<body><div id="fix">固定定位的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>body{font-family: '微软雅黑';font-size: 11px;color: white;}#header,#nav,#main,#line,#banner{margin: 0 auto;}#header{width: 960px;height: 45px;background-color: #8cb142;line-height: 45px;}#header ul {display: inline-block;list-style: none;padding-left: 0;margin: 0;margin-left: 465px;}#header ul li{display: inline-block;width: 40px;height: 30px;text-align: center;line-height: 30px;}#banner{width: 960px;display: block;}#nav{width: 960px;height: 30px;margin-bottom: 20px;font-size: 15px;color: black;line-height: 30px;}#nav a{color: #8cb142;text-decoration: none;}#line{width: 960px;height: 1px;background-color: #ccc;padding: 0;margin: 0 auto;border:none;}#main{width: 790px;text-align: center;margin-top: 20px;font-size: 0;}#main .left,#main .right{width: 390px;height: 145px;display: inline-block;vertical-align: middle;margin-top: 10px;}#main .left{font-size: 15px;overflow: hidden;/*margin-top带跑*/margin-right: 10px;}#main .left p{background-color: black;opacity: 0.7;height: 31px;line-height: 31px;margin-top: 114px;}#main .right{/* padding-left: 45px;padding-right: 45px;padding-top: 35px;padding-bottom: 35px; */padding: 35px 45px;/*上下 左右*/box-sizing: border-box;background-color: #f3f3f3;color: black;font-size: 11px;}#main .right h4{margin: 0;color: #8cb142;}#main .right .right-word{margin: 0;}#main #first-item{background-image: url('images/item1.png');background-size: cover;/*背景图片拉伸*/}#main #more{width: 121px;height: 34px;font-size: 15px;color: #fefefe;background-color: #8cb142;border:none;margin-top: 12px;}#footer{width: 960px;height: 365px;background-color: #8cb142;margin: 0 auto;margin-top: 45px;overflow: hidden;}#footer #foot-navs{width: 721px;height: 127px;margin: 0 auto;margin-top: 65px;}#footer ul{display: inline-block;list-style: none;}#footer ul li{height: 25px;}#footer ul .nav-title{font-size: 15px;}#footer img{width: 85px;height: 84px;}#footer .code{display: inline-block;margin-left: 45px;text-align: center;}#footer .code p{text-align: center;font-size: 15px;margin: 0;margin-top: 10px;}#footer #foot-imgs{width: 282px;height: 27px;font-size: 0;margin: 0 auto;margin-top: 50px;}#footer #foot-imgs img{width: 76px;height: 100%;margin-right: 18px;}#fixed-logo{width: 121px;height: 242px;background-color: #8cb142;/* background-color: yellow; */position: fixed;top: 30px;left: 483px;}#fixed-logo p{writing-mode:tb-rl;display: inline-block;margin: 0;/* background-color: red; */}#fixed-logo img{width: 58px;height: 63px;}#fixed-logo #logo-title{font-family: "By-JOSSQ-DMF-in-BeiJing";font-size: 50px; margin-left: 10px;}#fixed-logo #logo-word{font-family: "DINOT-Regular";font-size: 15px;}</style></head>
<body><!-- 头部 --><div id="header"><ul><li>首页</li><li>品茶</li><li>制茶</li><li>茶讯</li><li>更多</li></ul></div><!-- 图片 --><img src="images/banner.png" alt="" id="banner"><!-- 面包导航 --><div id="nav">您的位置：首页> <a href="#">茶讯</a></div><!-- 水平线 --><hr id="line"><!-- 主要内容 --><div id="main"><!-- 左边的区域 --><div class="left" id="first-item"><p>传统与现代碰撞，打造中国式高品质生活</p></div><!-- 右边的区域 --><div class="right"><h4>陈文波：是波普艺术在当代中国的品牌代表</h4><p>12-8</p><p class="right-word">他说：我是都市的卧底 ，他把相对小众的艺术作品 搬进了车水马龙的时尚商圈</p></div><!-- 左边的区域 --><div class="left" id="first-item"><p>传统与现代碰撞，打造中国式高品质生活</p></div><!-- 右边的区域 --><div class="right"><h4>陈文波：是波普艺术在当代中国的品牌代表</h4><p>12-8</p><p class="right-word">他说：我是都市的卧底 ，他把相对小众的艺术作品 搬进了车水马龙的时尚商圈</p></div><!-- 左边的区域 --><div class="left" id="first-item"><p>传统与现代碰撞，打造中国式高品质生活</p></div><!-- 右边的区域 --><div class="right"><h4>陈文波：是波普艺术在当代中国的品牌代表</h4><p>12-8</p><p class="right-word">他说：我是都市的卧底 ，他把相对小众的艺术作品 搬进了车水马龙的时尚商圈</p></div><button id="more">查看更多</button></div><!-- 尾部 --><div id="footer"><div id="foot-navs"><ul><li class="nav-title">关于</li><li>公司介绍</li><li>产品展示</li><li>服务介绍</li><li>疑难解答</li></ul><ul><li class="nav-title">关于</li><li>公司介绍</li><li>产品展示</li><li>服务介绍</li><li>疑难解答</li></ul><ul><li class="nav-title">关于</li><li>公司介绍</li><li>产品展示</li><li>服务介绍</li><li>疑难解答</li></ul><ul><li class="nav-title">关于</li><li>公司介绍</li><li>产品展示</li><li>服务介绍</li><li>疑难解答</li></ul><div class="code"><img src="images/butom.jpg" alt=""><p>百香园公众号</p></div><div class="code"><img src="images/butom.jpg" alt=""><p>百香园公众号</p></div></div><div id="foot-imgs"><img src="images/footam1.png" alt=""><img src="images/foontm2.png" alt=""><img src="images/foontm3.png" alt=""></div></div><!-- 特殊位置的标签：css定位专用区域 --><div id="fixed-logo"><img src="images/logo.png" alt=""><p id="logo-title">茶世界</p><p id="logo-word">ONE TEA ONE WORLD</p></div></body>
</html>
需要网页图片和代码的可以评论区留言，我会整理好回复的
🌈本篇博客的内容【网页核心页面设计】已经结束。
🌈若对你有些许帮助，可以点赞、关注、评论支持下博主，你的支持将是我前进路上最大的动力。
