思路_爱宠网_html+css

效果演示：

代码演示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      /*css初始化*/
      body,
      div,
      ul,
      li,
      input,
      p,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        margin: 0;
        padding: 0;
        font: 12px simsun;
        color: #000;
      }
      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部分开始*/
      .logo {
        width: 970px;
        height: 84px;
        margin: 0 auto;
      }
      .logo-pic {
        width: 200px;
        height: 84px;
      }
      .search {
        width: 519px;
        height: 30px;
        border: 1px solid #c9c9c9;
        background: #f9f9f9;
        margin-top: 28px;
        padding: 5px 5px 5px 4px;
      }
      .search input[type='text'] {
        width: 419px;
        height: 28px;
        border: 1px solid #a6a6a6;
        border-right: 0 none;
        vertical-align: middle;
      }
      .search input[type='button'] {
        width: 99px;
        height: 30px;
        background: url('images/serch.png');
        vertical-align: middle;
      }
      /*主导航开始*/
      .nav {
        width: 970px;
        height: 25px;
        margin: 10px auto;
        border-bottom: 2px solid #0266a3;
      }
      .nav li {
        float: left;
      }
      .nav li a {
        display: inline-block;
        height: 25px;
        line-height: 25px;
        padding: 0 15px;
        color: #0266a3;
      }
      .nav li a:hover {
        background: #0266a3;
        color: #fff;
      }
      /*宠物市场部分开始*/
      .mar {
        width: 970px;
        height: 210px;
        margin: 0 auto;
      }
      .mar-left {
        width: 200px;
        height: 210px;
        background: #ebf0f6;
      }
      .mar-title {
        height: 30px;
        background: #0266a3;
        line-height: 30px;
        color: #fff;
        padding-left: 20px;
      }
      .mar-list {
        margin-top: 5px;
      }
      .mar-list li {
        height: 28px;
        line-height: 28px;
        padding-left: 39px;
      }
      .mar-list li.icon1 {
        background: url('images/icon_1.png') no-repeat 9px;
      }
      /*狗狗种类*/
      .bud {
        height: 34px;
        width: 948px;
        margin: 14px auto 11px;
        background: #ecf1f7;
        border-top: #c3d7e4 2px solid;
        font-size: 14px;
        font-weight: 700;
        line-height: 34px;
        padding-left: 22px;
      }
      /*狗狗种类列表*/
      .pro {
        width: 970px;
        height: 344px;
        margin: 0 auto;
      }
      .pro-left {
        width: 727px;
        height: 344px;
        border: 1px solid #d8d8d8;
      }
      .pro-right {
        width: 228px;
        height: 344px;
        border: 1px solid #d8d8d8;
      }
      .pro-left-t {
        width: 656px;
        height: 142px;
        margin: 15px 0px 14px 26px;
      }
      .pro-pic-l {
        width: 318px;
        height: 142px;
      }
      .pro-pic-r {
        width: 318px;
        height: 142px;
      }
      .pro-pic-ll {
        width: 97px;
        height: 142px;
      }
      .pro-pic-llt {
        width: 97px;
        height: 100px;
        text-align: center;
      }
      .pro-pic-llt img {
        margin-top: 17.5px;
      }
      .pro-pic-btn input {
        width: 98px;
        height: 26px;
        background: url('images/buy.png');
        margin-top: 15px;
      }
      .pro-pic-lr p {
        margin-left: 10px;
        font-size: 14px;
      }
      .pro-pic-lr p span {
        color: #ff0000;
        font-weight: 700;
      }
      .pro-pic-lr p del {
        font-size: 12px;
      }
      .pro-pic-lr p.txt1 {
        height: 28px;
        margin-top: 10px;
      }
      .pro-pic-lr p.txt2 {
        height: 49px;
      }
      .pro-pic-lr p.txt3 {
        height: 38px;
      }
      .pro-line {
        border-top: 1px solid black;
        margin: 0 5px;
      }
      .pro-right-title {
        height: 28px;
        line-height: 28px;
        padding-left: 15px;
        background: #fbfbfb;
        border-bottom: 1px solid #e0e6f0;
      }
      .pro-right ul {
        margin-top: 17px;
      }
      .pro-right ul li {
        padding-left: 25px;
        height: 24px;
        background: url('images/li_bg.png') no-repeat 10px 6px;
      }
      .pro-right ul li a:hover {
        color: #ff0000;
        text-decoration: underline;
      }
      /*狗粮种类列表*/
      .dogFood {
        width: 970px;
        height: 326px;
        margin: 0 auto;
      }
      .dogFood-left {
        width: 722px;
        height: 326px;
      }
      .dogFood-l-t {
        height: 23px;
        border-bottom: 2px solid #00b0e7;
      }
      .dogFood-l-b {
        height: 301px;
        border: 1px solid #cacaca;
      }
      .dogFood-l-t h3 {
        width: 100px;
        text-align: right;
        font-size: 14px;
        color: #00b0e7;
        font-weight: 700;
        height: 23px;
        line-height: 23px;
        margin-left: auto;
      }
      .dogFood-pic {
        width: 164px;
        text-align: center;
        margin: 5px 0 0 13px;
      }
      .dogFood-pic p.et1 {
        height: 43px;
        margin-top: 9px;
      }
      .dogFood-pic p.et2,
      .dogFood-pic p.et3 {
        color: #999;
        height: 24px;
      }
      .dogFood-pic p.et3 del,
      .dogFood-pic p.et4 span {
        color: #990000;
      }
      .dogFood-right {
        width: 218px;
        height: 326px;
      }
      /*foot部分*/
      .copyright {
        height: 91px;
        text-align: center;
      }
      .copyright p.copy {
        height: 24px;
        margin-top: 13px;
      }
    </style>
  </head>
  <body>
    <!-- 顶部导航 -->
    <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>
    <!-- logo部分 -->
    <div class="logo">
      <div class="logo-pic fl"><img src="images/案例logo.png" alt="" /></div>
      <div class="search fr">
        <input type="text" value="请输入关键字" /><input type="button" />
      </div>
    </div>
    <!-- 主导航部分 -->
    <div class="nav">
      <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">
      <!-- 市场左盒子 -->
      <div class="mar-left fl">
        <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-cen fl"><img src="images/700.png" alt="" /></div>
    </div>
    <!-- 狗狗种类 -->
    <div class="bud">狗狗种类</div>
    <!-- 狗狗种类列表 -->
    <div class="pro">
      <!-- 左边大盒子 -->
      <div class="pro-left fl">
        <!-- 左边大盒子上部分 -->
        <div class="pro-left-t">
          <!-- 左上大盒子左边盒子 -->
          <div class="pro-pic-l fl">
            <div class="pro-pic-ll fl">
              <div class="pro-pic-llt">
                <img src="images/狗狗种类.png" alt="" />
              </div>
              <div class="pro-pic-btn"><input type="button" /></div>
            </div>
            <div class="pro-pic-lr fl">
              <p class="txt1">聪明、学习能力强</p>
              <p class="txt2">理解力高、容易训练、温和、忠诚</p>

              <p class="txt3"><span>4000.00</span> <del>¥5000.00</del></p>
              <p class="txt4">限量<span>200</span>件已售出<span>20</span>件</p>
            </div>
          </div>
          <div class="pro-pic-l fr">
            <div class="pro-pic-ll fl">
              <div class="pro-pic-llt">
                <img src="images/狗狗种类.png" alt="" />
              </div>
              <div class="pro-pic-btn"><input type="button" /></div>
            </div>
            <div class="pro-pic-lr fl">
              <p class="txt1">聪明、学习能力强</p>
              <p class="txt2">理解力高、容易训练、温和、忠诚</p>

              <p class="txt3"><span>4000.00</span> <del>¥5000.00</del></p>
              <p class="txt4">限量<span>200</span>件已售出<span>20</span>件</p>
            </div>
          </div>
        </div>
        <!-- 左边大盒子中线 -->
        <div class="pro-line"></div>
        <!-- 左边大盒子下部分 -->
        <div class="pro-left-t">
          <!-- 左上大盒子左边盒子 -->
          <div class="pro-pic-l fl">
            <div class="pro-pic-ll fl">
              <div class="pro-pic-llt">
                <img src="images/狗狗种类.png" alt="" />
              </div>
              <div class="pro-pic-btn"><input type="button" /></div>
            </div>
            <div class="pro-pic-lr fl">
              <p class="txt1">聪明、学习能力强</p>
              <p class="txt2">理解力高、容易训练、温和、忠诚</p>

              <p class="txt3"><span>4000.00</span> <del>¥5000.00</del></p>
              <p class="txt4">限量<span>200</span>件已售出<span>20</span>件</p>
            </div>
          </div>
          <div class="pro-pic-l fr">
            <div class="pro-pic-ll fl">
              <div class="pro-pic-llt">
                <img src="images/狗狗种类.png" alt="" />
              </div>
              <div class="pro-pic-btn"><input type="button" /></div>
            </div>
            <div class="pro-pic-lr fl">
              <p class="txt1">聪明、学习能力强</p>
              <p class="txt2">理解力高、容易训练、温和、忠诚</p>

              <p class="txt3"><span>4000.00</span> <del>¥5000.00</del></p>
              <p class="txt4">限量<span>200</span>件已售出<span>20</span>件</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 右边大盒子 -->
      <div class="pro-right fr">
        <div class="pro-right-title">狗狗咨询</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>
          <li><a href="#">怎么样训练边境牧羊犬 </a></li>
          <li><a href="#">奖惩并施才是好主人 </a></li>
          <li><a href="#">怎么样训练边境牧羊犬 </a></li>
          <li><a href="#">奖惩并施才是好主人 </a></li>
        </ul>
      </div>
    </div>
    <!--狗粮种类-->
    <div class="bud">狗粮种类</div>
    <!-- 狗粮种类列表 -->
    <div class="dogFood">
      <div class="dogFood-left fl">
        <div class="dogFood-l-t">
          <h3>查看更多>></h3>
        </div>
        <div class="dogFood-l-b">
          <div class="dogFood-pic fl">
            <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="et4">直销价：<span>¥39</span></p>
          </div>
          <div class="dogFood-pic fl">
            <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="et4">直销价：<span>¥39</span></p>
          </div>
          <div class="dogFood-pic fl">
            <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="et4">直销价：<span>¥39</span></p>
          </div>
          <div class="dogFood-pic fl">
            <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="et4">直销价：<span>¥39</span></p>
          </div>
        </div>
      </div>
      <div class="dogFood-right fr">
        <img src="images/右边狗图片.png" alt="" />
      </div>
    </div>

    <!--foot部分-->
    <div class="copyright">
      <p class="copy">本案例只供大家参考学习使用</p>
      <p class="copy">
        Copyright @2013-2019 实验楼在线教育 | 蜀ICP备13019762号
      </p>
    </div>
  </body>
</html>

思路：
我们可以把整个网页切成上述八个 div 盒子，然后再依次完成每个 div 盒子的内容

同样的我们先看看顶部导航需要我们做什么：

上面的结构我们可以分为两个 div 盒子来写，一个左边的，一个右边的。左边的 div 盒子很简单，就是 div 里面加一行字符。而右边的 div 里面则要嵌套一个无序列表，每个 li 里面再单独嵌套一个 a 标签。值得注意的是我们需要把默认的 li 样式和 a 标签的样式修改一下，而且为了让每一个 li 在一行显示，我们可以设置浮动，至于那个小三角我们可以通过背景图片来设置。下面来看看 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;
}

posted @ 2021-08-11 17:36 博客zhu虎康阅读(96) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

博客zhu虎康

思路_爱宠网_html+css

公告