前端实战
在学完HTML与CSS之后,用两天时间完成了爱宠网的制作
把整个网页切成上述八个 div 盒子,然后再依次完成每个 div 盒子的内容
一、顶部导航
html
<div class="top-nav">
<div class="top-nav-con">
<div class="top-nav-l fl">您好,欢迎来到爱宠网</div>
<div class="top-nav-r fr">
<ul>
<li><a href="#">网站导航</a></li>
<li><a href="#">我的订单</a></li>
<li><a href="#">爱宠会员</a></li>
<li><a href="#">我的收藏</a></li>
<li><a href="#">客户服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</div>
</div>
css
ul,li {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
.fl {
float: left;
}
.fr {
float: right;
}
/*顶部导航开始*/
.top-nav {
height: 26px;
background: #f7f7f7;
border-bottom: 1px solid #d8d8d8;
}
.top-nav-con {
width: 970px;
margin: 0 auto;
height: 26px;
}
.top-nav-r ul li {
float: left;
height: 26px;
line-height: 26px;
}
.top-nav-l {
height: 26px;
line-height: 26px;
}
.top-nav-r ul li a {
display: inline-block;
height: 26px;
background: url('images/sj.png') no-repeat right;
padding: 0 10px;
}
二、logo部分、搜索
html
<div class="logo size">
<img src="./images/案例logo.png" alt="">
<div class="search fr">
<input type="text" placeholder="请输入关键字">
<input type="button" class="fr">
</div>
</div>
css
.logo img{
width: 200px;
height: 84px;
}
.fr{
float: right;
}
.search{
width: 519px;
height: 30px;
border: 1px solid #c9c9c9;
background: #f9f9f9;
margin-top: 28px;
padding: 5px 5px 5px 4px;
}
.search input[type='button'] {
width: 99px;
height: 30px;
background: url(images/serch.png);
vertical-align: middle;
}
.search input[type="text"]{
width: 80%;
height: 80%;
}
三、主导航部分部分
html
<div class="nav size">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">狗狗</a></li>
<li><a href="#">狗粮</a></li>
<li><a href="#">售后</a></li>
</ul>
</div>
css
.nav{
width: 970px;
height: 25px;
border-bottom: 2px solid #0266a3;
}
.nav ul li a{
display: inline-block;
height: 25px;
line-height: 25px;
color: #0266a3;
padding: 0 15px;
}
.nav ul li a:hover{
background: #0266a3;
color: #f9f9f9;
}
四、宠物市场部分
html
<div class="mar size">
<div class="mar-l">
<div class="mar-title">宠物市场</div>
<div class="mar-list">
<ul>
<li class="icon1"><a href="">宠物狗</a></li>
<li class="icon1"><a href="">宠物猫</a></li>
<li class="icon1"><a href="">宠物鼠</a></li>
<li class="icon1"><a href="">宠物兔</a></li>
<li class="icon1"><a href="">宠物猪</a></li>
<li class="icon1"><a href="">宠物饲料</a></li>
</ul>
</div>
</div>
<div class="mar-r"><img src="./images/700.png" style="width: 770px;height: 210px ;"></div>
</div>
css
.mar{
margin-top: 10px;
height: 210px;
font: 12px simsun;
}
.mar-l{
float: left;
width: 200px;
height: 210px;
background-color: #ebf0f6;
}
.mar-r{
float: left;
}
.icon1{
background: url("./images/icon_1.png") no-repeat 9px;
margin: 0 30px;
}
.mar-title{
background-color: #0266a3;
color: #f9f9f9;
text-align: center;
height: 28px;
line-height: 28px;
}
.mar-list{
margin-top: 5px;
}
.mar-list li{
float: none;
height: 28px;
line-height: 28px;
text-align: center;
}
.icon1 a{
display: inline-block;
}
.icon1 a:hover{
font-size: 16px;
}
五、狗狗种类
html
<div class="bud">狗粮种类</div>
css
.bud{
border-top: #c3d7e4 solid 2px;
width: 948px;
height: 34px;
margin: 14px auto 11px;
background-color:#ecf1f7 ;
font-size: 14px;
font-weight: 700;
line-height: 34px;
padding-left: 22px;
}
六、狗狗种类列表
html
<div class="pro">
<div class="pro-l">
<div class="p1">
<div class="pl"></div>
<div class="pr"></div>
</div>
<div class="p2"></div>
<div class="p1">
<div class="pl"></div>
<div class="pr"></div>
</div>
</div>
<div class="pro-r">
<div class="pro-rtitle">狗狗咨询</div>
<ul>
<li><a href="#">怎么样训练边境牧羊犬 </a></li>
<li><a href="#">怎么样训练家养牧羊犬 </a></li>
<li><a href="#">怎么样训练边境牧羊犬 </a></li>
<li><a href="#">怎么样训练家养牧羊犬 </a></li>
<li><a href="#">怎么样训练边境牧羊犬 </a></li>
<li><a href="#">怎么样训练家养牧羊犬 </a></li>
<li><a href="#">怎么样训练家养牧羊犬 </a></li>
<li><a href="#">怎么样训练家养牧羊犬 </a></li>
</ul>
</div>
</div>
css
.pro{
display: flex;
justify-content: space-between;
width: 970px;
height: 344px;
margin: 0 auto;
}
.pro-l{
width: 727px;
height: 344px;
border: 1px solid #d8d8d8;
}
.pro-r{
width: 228px;
height: 344px;
border: 1px solid #d8d8d8;
font-size: 17px;
}
.pro-rtitle{
height: 28px;
line-height: 28px;
padding-left: 15px;
background: #fbfbfb;
border-bottom: 1px solid #e0e6f0;
}
.pro-r ul li{
padding-left: 25px;
height: 24px;
background: url("./images/li_bg.png") no-repeat 10px 6px;
margin-top: 12px;
}
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
} .Foodlr1{
width: 25%;
height: 100%;
text-align: center;
float: left;
margin-top: 3px;
}
七、狗粮种类
同五
八、狗粮种类列表
html
<div class="dogFood">
<div class="Foodl">
<div class="Foodll"><a href="#">查看更多>></a></div>
<div class="Foodlr">
<div class="Foodlr1">
<img src="./images/狗粮.png" alt="">
<p class="et1">耐威克狗粮泰迪贵宾成犬5斤2.5KG小型犬粮</p>
<p class="et2">适合年龄1个月-3个月的幼犬</p>
<p class="et3">市场价:
<del>$59</del></p>
<p class="et1">直销价:
<span>$39</span></p>
</div>
<div class="Foodlr1">
<img src="./images/狗粮.png" alt="">
<p class="et1">耐威克狗粮泰迪贵宾成犬5斤2.5KG小型犬粮</p>
<p class="et2">适合年龄1个月-3个月的幼犬</p>
<p class="et3">市场价:
<del>$59</del></p>
<p class="et1">直销价:
<span>$39</span></p>
</div>
<div class="Foodlr1">
<img src="./images/狗粮.png" alt="">
<p class="et1">耐威克狗粮泰迪贵宾成犬5斤2.5KG小型犬粮</p>
<p class="et2">适合年龄1个月-3个月的幼犬</p>
<p class="et3">市场价:
<del>$59</del></p>
<p class="et1">直销价:
<span>$39</span></p>
</div>
<div class="Foodlr1">
<img src="./images/狗粮.png" alt="">
<p class="et1">耐威克狗粮泰迪贵宾成犬5斤2.5KG小型犬粮</p>
<p class="et2">适合年龄1个月-3个月的幼犬</p>
<p class="et3">市场价:
<del>$59</del></p>
<p class="et1">直销价:
<span>$39</span></p>
</div>
</div>
</div>
<div class="Foodr">
<img src="./images/右边狗图片.png" alt="">
</div>
</div>
css
.dogFood{
display: flex;
justify-content: space-between;
width: 970px;
height: 344px;
margin: 0 auto;
}
.Foodlr{
width: 727px;
height: 320px;
border: 1px solid #d8d8d8;
border-top:2px solid #00b0e7 ;
font: 12px simsun;
color: #000;
}
.Foodll{
width: 720px;
text-align: right;
height: 23px;
line-height: 23px;
margin-left: auto;
}
.Foodll a{
font-size: 14px;
color: #00b0e7;
font-weight: 700;
}
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
.Foodlr1{
width: 25%;
height: 100%;
text-align: center;
float: left;
margin-top: 3px;
}
.et2,
.et3{
color: #999999;
}
span,del{
color: #990000;
}
.Foodr{
margin-top: 10px;
margin-right: 12px;
}
.p1{
width: 100%;
height: 50%;
/*border: solid 1px cornflowerblue;*/
display: flex;
justify-content: space-between;
}
.p2{
border-top: 1px solid black;
margin: 0 5px;
}
.pl,
.pr{
width: 318px;
height: 142px;
border: solid 1px red;
margin: 15px 10px;
/*padding: 2px 0 2px 2px;*/
}
九、foot部分
html
<div class="copyright">
<p>本案例只供大家参考学习使用</p><br>
<p>
Copyright @1999-2021 博客在线教育 | 晋ICP备99019762号
</p>
</div>
css
.copyright p{
margin: 0 auto;
text-align: center;
font: 12px simsun;
}
总的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blog</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
float: left;
list-style: none;
font: 12px simsum;
display: list-item;
text-align: -webkit-match-parent;
}
a{
text-decoration: none;
color: #000;
}
.top-nav{
height: 26px;
background: #f7f7f7;
border-bottom: 1px solid #d8d8d8;
}
.top-nav-con{
width: 970px;
margin: 0 auto;
/*height: 26px;*/
font: 12px simsun;
}
.top-nav-r ul li{
float: left;
height: 26px;
line-height: 26px;
}
.top-nav-l{
height: 26px;
line-height: 26px;
float: left;
}
.top-nav-r ul li a{
display: inline-block;
height: 26px;
background: url("images/sj.png") no-repeat right;
padding: 0 10px;
}
/*.top-nav-l fl{*/
/* float: left;*/
/*}*/
.top-nav-r {
float: right;
}
.size{
width: 970px;
margin: 0 auto;
/* height: 26px;*/
}
.logo img{
width: 200px;
height: 84px;
}
.fr{
float: right;
}
.search{
width: 519px;
height: 30px;
border: 1px solid #c9c9c9;
background: #f9f9f9;
margin-top: 28px;
padding: 5px 5px 5px 4px;
}
.search input[type='button'] {
width: 99px;
height: 30px;
background: url(images/serch.png);
vertical-align: middle;
}
.search input[type="text"]{
width: 80%;
height: 80%;
}
.nav{
width: 970px;
height: 25px;
border-bottom: 2px solid #0266a3;
}
.nav ul li a{
display: inline-block;
height: 25px;
line-height: 25px;
color: #0266a3;
padding: 0 15px;
}
.nav ul li a:hover{
background: #0266a3;
color: #f9f9f9;
}
.mar{
margin-top: 10px;
height: 210px;
font: 12px simsun;
}
.mar-l{
float: left;
width: 200px;
height: 210px;
background-color: #ebf0f6;
}
.mar-r{
float: left;
}
.icon1{
background: url("./images/icon_1.png") no-repeat 9px;
margin: 0 30px;
}
.mar-title{
background-color: #0266a3;
color: #f9f9f9;
text-align: center;
height: 28px;
line-height: 28px;
}
.mar-list{
margin-top: 5px;
}
.mar-list li{
float: none;
height: 28px;
line-height: 28px;
text-align: center;
}
.icon1 a{
display: inline-block;
}
.icon1 a:hover{
font-size: 16px;
}
.bud{
border-top: #c3d7e4 solid 2px;
width: 948px;
height: 34px;
margin: 14px auto 11px;
background-color:#ecf1f7 ;
font-size: 14px;
font-weight: 700;
line-height: 34px;
padding-left: 22px;
}
.pro{
display: flex;
justify-content: space-between;
width: 970px;
height: 344px;
margin: 0 auto;
}
.pro-l{
width: 727px;
height: 344px;
border: 1px solid #d8d8d8;
}
.pro-r{
width: 228px;
height: 344px;
border: 1px solid #d8d8d8;
font-size: 17px;
}
.pro-rtitle{
height: 28px;
line-height: 28px;
padding-left: 15px;
background: #fbfbfb;
border-bottom: 1px solid #e0e6f0;
}
.pro-r ul li{
padding-left: 25px;
height: 24px;
background: url("./images/li_bg.png") no-repeat 10px 6px;
margin-top: 12px;
}
.dogFood{
display: flex;
justify-content: space-between;
width: 970px;
height: 344px;
margin: 0 auto;
}
.Foodlr{
width: 727px;
height: 320px;
border: 1px solid #d8d8d8;
border-top:2px solid #00b0e7 ;
font: 12px simsun;
color: #000;
}
.Foodll{
width: 720px;
text-align: right;
height: 23px;
line-height: 23px;
margin-left: auto;
}
.Foodll a{
font-size: 14px;
color: #00b0e7;
font-weight: 700;
}
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
.Foodlr1{
width: 25%;
height: 100%;
text-align: center;
float: left;
margin-top: 3px;
}
.et2,
.et3{
color: #999999;
}
span,del{
color: #990000;
}
.Foodr{
margin-top: 10px;
margin-right: 12px;
}
.copyright p{
margin: 0 auto;
text-align: center;
font: 12px simsun;
}
.p1{
width: 100%;
height: 50%;
/*border: solid 1px cornflowerblue;*/
display: flex;
justify-content: space-between;
}
.p2{
border-top: 1px solid black;
margin: 0 5px;
}
.pl,
.pr{
width: 318px;
height: 142px;
border: solid 1px red;
margin: 15px 10px;
/*padding: 2px 0 2px 2px;*/
}
</style>
</head>
<!--我们可以把整个网页切成上述八个 div 盒子,然后再依次完成每个 div 盒子的内容-->
<body>
<!--顶部导航-->
<div class="top-nav">
<div class="top-nav-con">
<div class="top-nav-l">您好,欢迎来到爱宠网</div>
<div class="top-nav-r">
<ul>
<li><a href="#">网站导航</a></li>
<li><a href="#">我的订单</a></li>
<li><a href="#">爱宠会员</a></li>
<li><a href="#">我的收藏</a></li>
<li><a href="#">客户服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</div>
</div>
<!--logo部分-->
<div class="logo size">
<img src="./images/案例logo.png" alt="">
<div class="search fr">
<input type="text" placeholder="请输入关键字">
<input type="button" class="fr">
</div>
</div>
<!--主导航部分-->
<div class="nav size">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">狗狗</a></li>
<li><a href="#">狗粮</a></li>
<li><a href="#">售后</a></li>
</ul>
</div>
<!--宠物市场部分-->
<div class="mar size">
<div class="mar-l">
<div class="mar-title">宠物市场</div>
<div class="mar-list">
<ul>
<li class="icon1"><a href="">宠物狗</a></li>
<li class="icon1"><a href="">宠物猫</a></li>
<li class="icon1"><a href="">宠物鼠</a></li>
<li class="icon1"><a href="">宠物兔</a></li>
<li class="icon1"><a href="">宠物猪</a></li>
<li class="icon1"><a href="">宠物饲料</a></li>
</ul>
</div>
</div>
<div class="mar-r"><img src="./images/700.png" style="width: 770px;height: 210px ;"></div>
</div>
<!--狗狗种类-->
<div class="bud">狗狗种类</div>
<!--狗狗种类列表-->
<div class="pro">
<div class="pro-l">
<div class="p1">
<div class="pl"></div>
<div class="pr"></div>
</div>
<div class="p2"></div>
<div class="p1">
<div class="pl"></div>
<div class="pr"></div>
</div>
</div>
<div class="pro-r">
<div class="pro-rtitle">狗狗咨询</div>
<ul>
<li><a href="#">怎么样训练边境牧羊犬 </a></li>
<li><a href="#">怎么样训练家养牧羊犬 </a></li>
<li><a href="#">怎么样训练边境牧羊犬 </a></li>
<li><a href="#">怎么样训练家养牧羊犬 </a></li>
<li><a href="#">怎么样训练边境牧羊犬 </a></li>
<li><a href="#">怎么样训练家养牧羊犬 </a></li>
<li><a href="#">怎么样训练家养牧羊犬 </a></li>
<li><a href="#">怎么样训练家养牧羊犬 </a></li>
</ul>
</div>
</div>
</div>
<!--狗粮种类-->
<div class="bud">狗粮种类</div>
<!--狗粮种类列表-->
<div class="dogFood">
<div class="Foodl">
<div class="Foodll"><a href="#">查看更多>></a></div>
<div class="Foodlr">
<div class="Foodlr1">
<img src="./images/狗粮.png" alt="">
<p class="et1">耐威克狗粮泰迪贵宾成犬5斤2.5KG小型犬粮</p>
<p class="et2">适合年龄1个月-3个月的幼犬</p>
<p class="et3">市场价:
<del>$59</del></p>
<p class="et1">直销价:
<span>$39</span></p>
</div>
<div class="Foodlr1">
<img src="./images/狗粮.png" alt="">
<p class="et1">耐威克狗粮泰迪贵宾成犬5斤2.5KG小型犬粮</p>
<p class="et2">适合年龄1个月-3个月的幼犬</p>
<p class="et3">市场价:
<del>$59</del></p>
<p class="et1">直销价:
<span>$39</span></p>
</div>
<div class="Foodlr1">
<img src="./images/狗粮.png" alt="">
<p class="et1">耐威克狗粮泰迪贵宾成犬5斤2.5KG小型犬粮</p>
<p class="et2">适合年龄1个月-3个月的幼犬</p>
<p class="et3">市场价:
<del>$59</del></p>
<p class="et1">直销价:
<span>$39</span></p>
</div>
<div class="Foodlr1">
<img src="./images/狗粮.png" alt="">
<p class="et1">耐威克狗粮泰迪贵宾成犬5斤2.5KG小型犬粮</p>
<p class="et2">适合年龄1个月-3个月的幼犬</p>
<p class="et3">市场价:
<del>$59</del></p>
<p class="et1">直销价:
<span>$39</span></p>
</div>
</div>
</div>
<div class="Foodr">
<img src="./images/右边狗图片.png" alt="">
</div>
</div>
<!--foot部分-->
<div class="copyright">
<p>本案例只供大家参考学习使用</p><br>
<p>
Copyright @1999-2021 博客在线教育 | 晋ICP备99019762号
</p>
</div>
</body>
</html>