HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
本教程案例在线演示
有路网PC端
有路网移动端
免费配套视频教程
免费配套视频教程
教程配套源码资源
教程配套源码资源
制作有路网水平导航菜单
category-nav.css
.red-nav{height: 38px;background-color: #d80000;width: 100%;
}
.red-nav ul{display: flex;width: 1200px;margin: 0 auto;
}
.red-nav li{flex: 0 0 auto;line-height: 38px;font-size: 16px;padding: 0 24px;font-weight: bold;
}
.red-nav li a{color: white;
}.red-nav li:hover{background-color: #c90000;
}
.red-nav li:nth-child(1)
{padding-right: 100px;padding-left: 20px;background-color: #c90000;
}
youlu-category-nav.html
Document
制作有路网搜索栏
制作HTML骨架
网站购物车3本店铺购物车0本
美化logo
.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: 16px;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;}
完整代码
searchbar.css
.search-bar{width: 1200px;margin: 0 auto;display: flex;
}
.search-bar .logo{margin-right: 154px;
}.search{height: 40px;width: 420px;margin: 0 auto;/* margin-top: 60px; */
}
.search .input{border: 3px solid red;width: 300px;height: 36px;font-size: 20px;
}
.search .btn{height: 44px;width: 100px;border:0;background-color: red;color: white;font-size: 18px;font-weight: bold;margin-left: -4px;vertical-align: top;letter-spacing: 6px;
}.search-bar .hot-search li{display: inline-block;line-height: 32px;font-weight: bold;padding: 0px 2px;font-size: 14px;
}.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 span{color: red;font-weight: bold;
}
youlu-searchbar.html
Document
网站购物车0本店铺购物车0本
制作有路网推荐图书页面
HTML骨架
推荐图书
1/4
美化头部
.book-recommend {width: 750px;margin: 100px auto 0px;}.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 {width: auto;height: 160px;}
完整代码
recommend-books.css
.book-recommend{width: 750px;margin: 40px auto;
}
.book-recommend .header{display: flex;border-bottom: 1px solid gray;background-image: url('img/laba.jpg');background-repeat: no-repeat;background-position: 0 6px;padding-left: 16px;padding-bottom: 6px;font-size: 16px;
}.book-recommend .header h2{margin-right: auto;font-size: 16px;
}.book-recommend .header span{color: red;
}.book-recommend .content{margin-top: 10px;
}.book-recommend .content ul{display: flex;flex-wrap: wrap;
}.book-recommend .content li{width: 187px;text-align: center;line-height: 24px;
}.book-recommend .content li .author{position: relative;left:-36px;
}.book-recommend .content li img{width: auto;height: 160px;
}.book-recommend .content .price{margin-bottom: 20px;
}.book-recommend .content .discount{color:red;font-weight: bold;margin-right: 8px;
}.book-recommend .content .origin-price{text-decoration: line-through;
}
youlu-recommend-books.html
Document
推荐图书
1/4
制作有路网近期热销榜
HTML骨架
近期热销榜
- 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 .book1 {display: none;}.hot .book2 {display: flex;height: 102px;border-bottom: 1px dashed gray;}.hot .book2 div {margin-top: 6px;}.hot .book2 img {width: 76px;}.hot .book2 span {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;}hover切换视图显示
.hot .book2 {display: none;}.hot li:hover .book1 {display: none;}.hot li:hover .book2 {display: flex;}
完整代码
hot.css
.hot{width: 220px;
}
.hot h2{font-size: 16px;line-height: 40px;padding-left: 30px;
}.hot ul{border: 1px solid gray;font-size: 14px;
}
.hot .book2{display: none;
}.hot .book1{line-height: 44px;border-bottom: 1px solid gray;padding-left: 14px;
}.hot span{margin-right: 8px;font-weight: bold;
}.hot .red{color:red;
}.hot .book2{padding-top: 6px;height: 90px;border-bottom: 1px solid gray;
}.hot img{width: 76px;
}.hot .book2 p{line-height: 24px;font-size: 14px;
}
.hot .discount-price{color:red;
}.hot .old-price{text-decoration: line-through;
}.hot .book2{display: none;
}.hot li:hover .book1{display: none;
}.hot li:hover .book2{display: flex;
}
youlu-hot.html
Document
近期热销榜
- 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
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！