HTML5CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第10章有路网PC端主页实战整合

本教程案例在线演示

有路网PC端
有路网移动端

免费配套视频教程

免费配套视频教程

教程配套源码资源

教程配套源码资源

制作有路网首页

HTML5CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第10章有路网PC端主页实战整合_第1张图片

有路网首页布局框架制作

划分区域,确定div
测量各个区域的宽高
使用Flexbox对网页进行布局

youlu-whole.css

.nav{
  height: 30px;
  background-color: #f4f4f4;
}

.search-bar{
  height: 134px;
  background-color: green;
}

.cate-nav{
  height: 38px;
  background-color: red;
}

.main{
  width: 1200px;
  height: 600px;
  margin: 0 auto;
  background-color: pink;
  display: flex;
}

.index-sort{
  width: 210px;
  height: 970px;
  background-color: blue;
}
.right{
  width: 990px;
  height: 970px;
  background-color: white;
}

.help{
  height: 30px;
  background-color: pink;
}

.bottom-info{
  display: flex;
}

.left{
  width:750px;
  height: 900px;
  background-color: orange;
  margin-left: 10px;
}

.lunbotu{
  height: 340px;
  background-color: red;
}
.book-recommend{
  height: 600px;
  background-color: green;
}

.main-right{
  width: 220px;
  height: 900px;
  background-color: blue;
  margin-left: auto;
}

youlu-whole.html




  
  
  Document
  
  


  

整合顶部导航

    
         /* 设置导航栏整体宽高 */
      .topBar {
        line-height: 29px;
        width: 1200px;
        height: 29px;
        margin: 0 auto;
        background-color: #f4f4f4;
      }
      .topBar .topBarL {
        display: inline-block;
        margin-right: 480px;
      }
      .topBarL span {
        font-size: 12px;
        color: #636363;
      }
      .topBar .topBarR {
        display: inline-block;
      }

      .topBar .topBarR li {
        display: inline-block;
      }

      .topBar .topBarR li a {
        line-height: 20px;
        padding: 0 8px;
        border-right: 1px solid #ddd;
      }
      .topBar .topBarR .login {
        color: #f51400;
      }
      .topBar .topBarR .last a {
        border: none;
      }

整合搜索横栏

    
        /* .search-bar{
            height: 134px;
            background-color: green;
        } */
        
        
          /* 搜索横栏 */
      .search-bar {
        width: 1200px;
        margin: 40px auto 0;
        display: flex;
      }

      .search-bar .logo {
        margin-right: 64px;
      }

      .search-bar .search {
        width: 509px;
        margin: 0 auto;
        height: 40px;
      }

      .search-bar .search .input {
        width: 400px;
        height: 36px;
        border: 2px solid red;
        font-size: 20px;
      }

      .search-bar .search .btn {
        vertical-align: top;
        height: 42px;
        width: 100px;
        margin-left: -3px;
        border: 0px solid black;
        background-color: red;
        color: white;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 6px;
        cursor: pointer;
      }
     
      .search-bar .hot-search li {
        display: inline-block;
        font-size: 14px;
        line-height: 32px;
        font-weight: bold;
        padding: 0px 2px;
      }

      .search-bar .hot-search li a {
        color: gray;
      }
      .search-bar .hot-search li a:hover {
        text-decoration: underline;
        color: orange;
      }
    
      .search-bar .cart {
        background-image: url("img/cart.jpg");
        background-repeat: no-repeat;
        padding-left: 44px;
        line-height: 20px;
        margin-left: auto;
      }

      .search-bar .cart a {
        color: black;
      }
      .search-bar .cart a:hover {
        text-decoration: underline;
      }

      .search-bar .cart span {
        color: red;
        font-weight: bold;
      }

整合中间分类导航

    
 /* 中间分类导航 */
      .red-nav{
            height: 38px;
            width: 1200px;
            margin: 0 auto;
            background-color: #D80000;
        }
        .red-nav ul{
          display: flex;
        }
        .red-nav li{
            flex:0 0 auto;
            line-height: 38px;
            font-size: 16px;
            font-weight: bold;
            padding: 0 25px;
        }
        .red-nav li a{
            color: white;
        }
        .red-nav li:hover{
            background-color: #C90000;
        }
        .red-nav .first{
            background-color: #C90000;
            padding-left: 20px;
            padding-right: 100px;
        }

整合左侧图书分类

    
  /* 左侧图书分类 */
        
      /* 整体设置 */
      .index-sort {
        border: 1px solid #dcdcdc;
        border-top: 0;
        background-color: #fff;
        width: 208px;
      }
      /* 每一个大分类li整体设置 */
      .cat-menu li {
        border-bottom: 1px dotted #dcdcdc;
        padding: 0 10px 0 26px;
      }

      /* 每一个大分类li标题设置 */
      .cat-menu li h2 {
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        padding-left: 8px;
      }

      /* 每一个大分类下的小分类设置 */
      .cat-menu li .min-sort a {
        line-height: 22px;
        color: #696969;
        height: 22px;
        font-size: 12px;
      }

      .yl-all-index {
        padding: 10px;
        height: 20px;
        line-height: 20px;
      }

      .yl-all-index a {
        font-size: 14px;
      }

整合help导航

          
        /* .help{
            height: 30px;
            background-color: pink;
        } */
        
        
       .help {
        padding-left: 10px;
        height: 30px;
        line-height: 30px;
      }
      .help a {
        margin: 4px;
      }

整合轮播图

  • 1
  • 2
  • 3
   .lunbotu{
            /*border: 1px solid blue;*/
            width: 750px;
            position: relative;
        }
        .lunbotu ul{
            position: absolute;
            right: 12px;
            bottom: 20px;
            /*border: 1px solid orange;*/
        }
        .lunbotu ul li
        {
            color: white;
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: gray;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            margin: 0 5px;
        }

整合推荐图书

    

推荐图书

1/4
  .nav{
            height: 29px;
            background-color: #f4f4f4;
        }
        /* .search-bar{
            height: 134px;
            background-color: green;
        } */
        .cate-nav{
            height: 38px;
            background-color: #D80000;
        }
        .main{
            /* height: 600px; */
            width: 1200px;
            margin: 0 auto;
            display: flex;
        }
        .index-sort{
            width: 210px;
            /* height: 970px; */
            background-color: blue;
        }
        .right{
            width: 990px;
            height: 300px;
        }
        /* .help{
            height: 30px;
            background-color: pink;
        } */
        .bottom-info{
            display: flex;
        }

        .left{
            width: 750px;
            /* height: 500px; */
            /* background-color: #6dacf4; */
            margin-left: 10px;
        }

        /* .lunbotu{
            height: 340px;
            background-color: red;
        } */
        /* .book-recommend{
            height: 600px;
            background-color: green;
        } */
       .book-recommend {
        width: 750px;
        margin: 0 auto;
      }
      .book-recommend .header {
        border-bottom: 1px solid gray;
        background-image: url("img/laba.jpg");
        background-repeat: no-repeat;
        background-position: 0px 8px;
        display: flex;
      }
      .book-recommend .header div {
        padding-top: 6px;
        padding-right: 6px;
        font-size: 16px;
      }
      .book-recommend .header div span {
        color: red;
      }
      .book-recommend .header h2 {
        margin-right: auto;
        font-size: 22px;
        font-weight: bold;
        padding-left: 20px;
        padding-bottom: 8px;
      }
      .content {
        padding-top: 10px;
      }

      .content div {
        text-align: left;
        padding-left: 30px;
        line-height: 32px;
      }
      .content ul {
        display: flex;
        flex-wrap: wrap;
      }
      .content li {
        width: 187px;
        text-align: center;
      }
      .content .price {
        margin-top: -10px;
        margin-bottom: 20px;
        font-size: 14px;
      }

      .content .price .discount {
        color: red;
        font-weight: bold;
        margin-right: 6px;
      }

      .content .price .origin-price {
        color: gray;
        text-decoration: line-through;
      }
      .content .author {
        color: gray;
      }

      .content li a {
        color: black;
      }
      .content li a:hover {
        color: orange;
        text-decoration: underline;
      }

      .content li img {
        max-width: 160px;
        height: 160px;
      }

整合右侧上部黑板报

    
        .main-right{
            width: 220px;
            /* height: 940px; */
            /* background-color: blue; */
            margin-left: auto;
        }
        
        
        
            /* 设置整体宽度 */
      .black-board {
        width: 220px;
      }
      /* 黑板报和购物指南块整体设置 */
      .black-board .book-con {
        border: 1px solid #eaeaea;
        padding: 6px 10px;
      }
      /* 黑板报和购物指南头部设置 */
      .black-board .hd {
        height: 28px;
        font-size: 12px;
        color: #000;
        font-weight: bold;
      }

      .black-board .hd h2 {
        font-size: 16px;
      }
      /* 黑板报和购物指南体部设置 */
      .black-board .bd {
        padding: 0 5px 0 15px;
      }
      /* 列表项设置 */
      .black-board .bd ul li {
        height: 22px;
        line-height: 22px;
        padding-left: 7px;
      }
      /* 最下方图片距离顶部加些margin */
      .black-board .book-ad-con {
        margin-top: 10px;
      }

整合右侧下部近期热销榜

   

近期热销榜

  • 1如果蜗牛有爱情(上下
    1

    萤火虫小巷

    ¥14.40

    ¥36.00

  • 1如果蜗牛有爱情(上下
    1

    萤火虫小巷

    ¥14.40

    ¥36.00

  • 1如果蜗牛有爱情(上下
    1

    萤火虫小巷

    ¥14.40

    ¥36.00

  • 4如果蜗牛有爱情(上下
    4

    萤火虫小巷

    ¥14.40

    ¥36.00

  • 4如果蜗牛有爱情(上下
    1

    萤火虫小巷

    ¥14.40

    ¥36.00

  • 4如果蜗牛有爱情(上下
    1

    萤火虫小巷

    ¥14.40

    ¥36.00

  • 4如果蜗牛有爱情(上下
    1

    萤火虫小巷

    ¥14.40

    ¥36.00

  • 4如果蜗牛有爱情(上下
    1

    萤火虫小巷

    ¥14.40

    ¥36.00

  • 4如果蜗牛有爱情(上下
    1

    萤火虫小巷

    ¥14.40

    ¥36.00

  • 4如果蜗牛有爱情(上下
    1

    萤火虫小巷

    ¥14.40

    ¥36.00

    .hot {
        width: 220px;
      }
      .hot h2 {
        font-size: 16px;
        line-height: 40px;
        padding-left: 34px;
      }
      .hot ul {
        border: 1px solid gray;
        font-size: 14px;
      }
      .hot li .book1 {
        line-height: 44px;
        border-bottom: 1px dashed gray;
        padding-left: 14px;
      }
      .hot li span {
        margin-right: 6px;
        font-weight: bold;
      }

      .hot .red {
        color: red;
      }

      .hot .book2 {
        display: none;
      }
      .hot .book2 {
        height: 102px;
        border-bottom: 1px dashed gray;
      }
      .hot .book2 div {
        margin-top: 6px;
      }
      .hot .book2 img {
        width: 76px;
      }

      .hot .book2 .nored {
        margin-left: 10px;
        display: inline-block;
        margin-top: 6px;
      }
      .hot .book2 .red {
        margin-left: 10px;
        display: inline-block;
        margin-top: 6px;
      }
      .hot .book2 .title {
        font-size: 14px;
        margin-bottom: 22px;
      }

      .hot .book2 .discount-price {
        font-size: 16px;
        font-weight: bold;
        color: red;
      }

      .hot .book2 .old-price {
        font-size: 14px;
        color: gray;
        text-decoration: line-through;
      }

      .hot li:hover .book1 {
        display: none;
      }
      .hot li:hover .book2 {
        display: flex;
      }

有路网首页pc端完整代码



  
    
    Title
    
    
  
  
    
  • 1
  • 2
  • 3

推荐图书

1/4

近期热销榜

  • 1如果蜗牛有爱情(上下
    1

    萤火虫小巷

    ¥14.40

    ¥36.00

  • 1如果蜗牛有爱情(上下
    1

    萤火虫小巷

    ¥14.40

    ¥36.00

  • 1如果蜗牛有爱情(上下
    1

    萤火虫小巷

    ¥14.40

    ¥36.00

  • 4如果蜗牛有爱情(上下
    4

    萤火虫小巷

    ¥14.40

    ¥36.00

  • 4如果蜗牛有爱情(上下
    1

    萤火虫小巷

    ¥14.40

    ¥36.00

  • 4如果蜗牛有爱情(上下
    1

    萤火虫小巷

    ¥14.40

    ¥36.00

  • 4如果蜗牛有爱情(上下
    1

    萤火虫小巷

    ¥14.40

    ¥36.00

  • 4如果蜗牛有爱情(上下
    1

    萤火虫小巷

    ¥14.40

    ¥36.00

  • 4如果蜗牛有爱情(上下
    1

    萤火虫小巷

    ¥14.40

    ¥36.00

  • 4如果蜗牛有爱情(上下
    1

    萤火虫小巷

    ¥14.40

    ¥36.00

你可能感兴趣的:(HTML5CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第10章有路网PC端主页实战整合)