网页核心页面设计（第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>
#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>
需要网页图片和代码的可以评论区留言，我会整理好回复的
🌈本篇博客的内容【网页核心页面设计】已经结束。
🌈若对你有些许帮助，可以点赞、关注、评论支持下博主，你的支持将是我前进路上最大的动力。