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

最新推荐文章于 2024-01-08 09:16:09 发布

优质内容贡献

最新推荐文章于 2024-01-08 09:16:09 发布

阅读量570

点赞数

分类专栏：学生div+css静态网页设计成品文章标签： javascript html css bootstrap 前端

本文链接：https://blog.csdn.net/qq_524614081/article/details/127908179

版权

⛵ 源码获取文末联系 ✈

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>温碧泉化妆品

最低0.47元/天解锁文章

优质内容贡献

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JS大作业：网站设计——家具装修公司(12页 bootstrap, 响应式)

web学生网页设计作业源码HTML期末作业课程设计期末大作业采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面；（2）css文件：css全部页面样式,文字滚动, 图片放大等；（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
复制链接

扫一扫