HTML+CSS+JS大作业：网站设计——家具装修公司(12页 bootstrap, 响应式)_网站装修代码

作者：知新_RL | 2024-08-18 07:37:46

踩

网站装修代码

⛵ 源码获取文末联系 ✈

Web前端开发技术
描述网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 | HTML期末大学生网页设计作业，Web大学生网页

HTML：结构
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
JavaScript：做与用户的交互行为

前端学习路线

（1）html文件：其中index.html是首页、其他html为二级页面；
（2）css文件：css全部页面样式,文字滚动, 图片放大等；
（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）

网页基本结构

(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个　　
(2)二级页面：从首页点击进入之后的页面叫做二级页面
(3)三级页面：从二级页面点击进入的页面

网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的
首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.
网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。

网页演示

在这里插入图片描述

HTML结构代码


<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<meta http-equiv="Cache-Control" content="no-transform">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<title>啦啦啦好想biu点什么</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/animate.min.css">
		<link rel="stylesheet" href="css/style.css">
	</head>

	<body id="moar">
		<header class="navbar navbar-default navbar-fixed-top" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
					<h1 class="logo"><a class="navbar-brand" href="">啦啦啦好想biu点什么</a></h1>
				</div>
				<nav class="collapse navbar-right navbar-collapse" role="navigation">
					<ul class="list-inline navbar-nav">
						<li>
							<a href="">首页</a>
						</li>

						<li>
							<a href="design.html">设计</a>
						</li>

						<li>
							<a href="youshi.html">优势</a>
						</li>

						<li>
							<a href="case.html">案例</a>
						</li>

						<li>
							<a href="team.html">团队</a>
						</li>

						<li>
							<a href="about.html">关于</a>
						</li>

						<li>
							<a href="news.html">资讯</a>
						</li>

						<li>
							<a href="contact.html">联系</a>
						</li>

						<li class="tel visible-lg-inline-block">
							<a href="javascript:;"><span class="icon-page-lianxi"></span> 021-88888888</a>
						</li>
					</ul>
				</nav>
			</div>
		</header>

		<!--end-->
		<section class="banner">
			<div id="owl-banner" class="owl-carousel owl-theme">
				<div class="item" style="background:url(picture/1-1P3200Z1570-L.jpg)">
					<a><img src="picture/banner-height.gif" class="center-block" alt="幻灯3"></a>
				</div>
				<div class="item" style="background:url(picture/1-1P3200Z2230-L.jpg)">
					<a><img src="picture/banner-height.gif" class="center-block" alt="幻灯3"></a>
				</div>
				<div class="item" style="background:url(picture/1-1P3200Z2100-L.jpg)">
					<a><img src="picture/banner-height.gif" class="center-block" alt="幻灯3"></a>
				</div>

			</div>
			<div class="banner-bc"></div>
		</section>
		<!--end-->

		<section class="case sx-jianju">
			<div class="container text-center">
				<div class="home-title wow animated fadeInUp">
					<h2 class="h-h2-white"> 案例 </h2>
					<p class="m-sm-white"> case </p>
				</div>
				<div class="row">
					<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 wow animated fadeInUp">
						<figure>
							<a href="javascript:;" title="滨海幸福里"><img src="picture/1-1P3201024310-L.jpg" alt="滨海幸福里">
								<figcaption>
									<h3>滨海幸福里<span>办公写字楼</span></h3>
								</figcaption>
							</a>
						</figure>
					</div>
					<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 wow animated fadeInUp">
						<figure>
							<a href="javascript:;" title="中国铁塔"><img src="picture/1-1P320102J30-L.jpg" alt="中国铁塔">
								<figcaption>
									<h3>中国铁塔<span>办公写字楼</span></h3>
								</figcaption>
							</a>
						</figure>
					</div>
					<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 wow animated fadeInUp">
						<figure>
							<a href="javascript:;" title="广州医疗美容会所"><img src="picture/1-1P3201211110-L.jpg" alt="广州医疗美容会所">
								<figcaption>
									<h3>广州医疗美容会所<span>办公写字楼</span></h3>
								</figcaption>
							</a>
						</figure>
					</div>
					<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 wow animated fadeInUp">
						<figure>
							<a href="javascript:;" title="生物岛办公室装修"><img src="picture/1-1P3201211380-L.jpg" alt="生物岛办公室装修">
								<figcaption>
									<h3>生物岛办公室装修<span>办公写字楼</span></h3>
								</figcaption>
							</a>
						</figure>
					</div>
					<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 wow animated fadeInUp">
						<figure>
							<a href="javascript:;" title="富力新天地办公室"><img src="picture/1-1P3201211570-L.jpg" alt="富力新天地办公室">
								<figcaption>
									<h3>富力新天地办公室<span>餐厅酒楼</span></h3>
								</figcaption>
							</a>
						</figure>
					</div>
					<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 wow animated fadeInUp">
						<figure>
							<a href="javascript:;" title="温碧泉化妆品"><img src="picture/1-1P3201210390-L.jpg" alt="温碧泉化妆品">
								<figcaption>
									<h3>温碧泉化妆品
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】