HTML+CSS+JS网页设计期末课程大作业(家居网)

一、作品介绍

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

---

二、作品效果

▶️视频演示

https://live.csdn.net/v/embed/239867

(title-C101SJ-家具网带js轮播图三级(7页))]

截图演示

07.png

06.png

05.png

04.png

03.png

02.png

---

三、 作品代码

HTML代码

                            
首页
关于家具
家具展示
收藏保养
家具知识
在线留言






    

        

        

     

     


    
    

        
1
        
2
        
3

    





关于家具
家具是指人类维持正常生活、从事生产实践和开展社会活动必不可少的器具设施大类。家具也跟随时代的脚步不断发展创新，到如今门类繁多，用料各异，品种齐全，用途不一。是建立工作生活空间的重要基础。

家具是由材料、结构、外观形式和功能四种因素组成，其中功能是先导，是推动家具发展的动力;结构是主干，是实现功能的基础。这四种因素互相联系，又互相制约。由于家具是为了满足人们一定的物质需求和使用目的而设计与制作的，因此家具还具有材料和外观形式方面的因素。

结构是指家具所使用的材料和构件之间的一定组合与连接方式，它是依据一定的使用功能而组成的一种结构系统。它包括家具的内在结构和外在结构，内在结构是指家具零部件间的某种结合方式，它取决于材料的变化和科学技术的发展。像传统的榫接方式和现代板式家具用的五金件连接方式都是内在结构。





北欧布艺沙发组合
价格：4980元
北欧实木床日式主卧
价格：2980元
轻奢大理石电视柜茶几组合
价格：4848元
北欧轻奢乳胶布艺沙发组合
价格：3543元
欧式轻奢家具实木床
价格：4838元
现代简约移门卧室大衣柜
价格：3068元
真皮沙发现代简约实木休闲椅
价格：2115元
木沙发简约现代客厅椅
价格：640元











网站版权 家具网

CSS代码

body {
    margin: 0 auto;
    font-size: 14px;
    font-family: "微软雅黑";
    line-height: 22px;
    background: #fbf6d9
}


.about-main ul li a img {
    display: block;
    height: 138px;
    width: 102px;
    border: 1px solid #c4c4c4;
    padding: 3px;
}

.about-main ul li span {
    font-size: 12px;
}

.new_lt {
    height: 30px;
    float: left;
    text-align: left;
    width: 840px;
}

.new_rt {
    height: 30px;
    float: right;
    margin-right: 13px;
    display: inline;
}

.neirong {
    width: 960px;
    height: auto;
    overflow: hidden;
    background: #FFF;
    padding: 20px;
}

.biaoti {
    color: #3d2915;
    font-weight: bold;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    margin-bottom: 10px;
    _margin-bottom: 10px;
    border-bottom: #CCC 1px dashed;
}

.cernt {
    margin: 0 auto;
    display: block;
}
.foot {
    width: 1000px;
    height: 83px;
    background:#039bac;
    margin: 0 auto;
    padding-top: 60px;
}

.banq {
    width: 1000px;
    height: 40px;
    line-height: 40px;
    color: #FFF;
    margin: 0 auto;
    text-align: center;
}
.lyleft{
    width:390px;
    height: 550px;
    float: left;
    margin-right: 30px;
}
.lyright{
    width: 540px;
    height: 550px;
    float: left;
}
.iput{
    width: 530px;
    height: 40px;
    line-height: 40px;
    border: #a6a5a5 1px solid;
    padding-left: 10px;
    color: #bcbcbc;
    font-size: 14px;
    margin-bottom: 30px;
}
.liuyan{
    width: 530px;
    height: 220px;
    line-height: 40px;
    border: #a6a5a5 1px solid;
    padding-left: 10px;
    color: #bcbcbc;
    font-size: 14px;
    margin-bottom: 40px;
}
.btn{
    width: 131px;
    height: 36px;
    line-height: 36px;
    background: url(../images/more.png) no-repeat;
    text-align: center;
    color: #FFF;
    border: none;
    display: block;
    margin: 0 auto;
}

---

四、更多源码

【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）

【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）

Gitee仓库地址（来个Star吧~）： https://gitee.com/zhanyuqiu2022/my-app