HTML网页设计结课作业——11张精美网页 html+css+javascript+bootstarp-程序员宅基地

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

文章目录

一、网页介绍
一、网页效果
二、代码展示
- 1.HTML代码
- 2.CSS代码
三、个人总结
四、更多干货

一、网页介绍

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果

在这里插入图片描述

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/css.css"/>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<title>雅马哈家庭影院</title>
</head>
<body >
<!--顶部-->
<header class='clearfix'>
  <div class="logo"> <img src="images/logo.jpg" alt=""></div>
  <div class="nav"><a href="index.html">首页</a><a href="pro1.html">家庭音响</a><a href="pro2.html">专业音响</a><a href="case.html">经典案例</a><a href="about.html">品牌介绍</a><a href="news.html">新闻中心</a><a href="login.html">登录</a><a href="reg.html">注册</a></div>
  <div id="close" class="visible-xs"><img src="images/menu.png"></div>
  <div class="clear"></div>
</header>
<!--内容-->
<div class=" con">
  <div class="pic">
    <div class="banner">
      <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
          <div class="item active"> <img src="images/banner.jpg" alt="First slide"> </div>
          <div class="item"> <img src="images/banner2.jpg" alt="Second slide"> </div>
          <div class="item"> <img src="images/banner3.jpg" alt="Third slide"> </div>
        </div>
      </div>
    </div>
    <script> 
 $(document).ready(function(){
       
 $('#myCarousel').carousel({
      interval:5000});//每隔5秒自动轮播 
 }); 
 </script>
  </div>
  <div class="container">
    <div class="part2">
      <h2 class="Title">选择您的产品</h2>
      <ul class="row">
        <a href="pro1.html">
        <li class="col-sm-6"><img src="images/img_01.jpg" width="100%"/>
          <p>家庭音响</p>
        </li>
        </a> <a href="pro2.html">
        <li class="col-sm-6"><img src="images/img_02.jpg" width="100%"/>
          <p>专业音响</p>
        </li>
        </a>
      </ul>
    </div>
    <div class="Part1 container">
      <h2 class="Title">公司介绍</h2>
      <div class=" text">
        <p>多年来，雅马哈一向致力于帮助艺术家们通过现场以及录制的表演节目激发和感染听众。现在，我们将这些专业经验和技术理念应用于开发一系列高品质的家庭影院设备。更简便的操作界面，让您能够轻松地安装与使用，在家就能够感受到音乐厅或影院的效果。雅马哈家庭影院融合典雅的外观设计、精致的工艺、不凡的音质、以及出众的环绕技术，为您提供高品质的环绕声影音体验。</p>
        <a href="about.html" class="more">查看更多 </a> <br>
        <br>
      </div>
      <div > <img src="images/1.jpg" width="100%"/> </div>
    </div>
    <div class="part2">
      <h2 class="Title">我们的案例</h2>
      <ul class="row">
        <li class="col-sm-4"><img src="images/a1.jpg" width="100%"/>
          <h4>造境成画，借光为适│寻觅都市中的最美影音空间</h4>
        </li>
        <li class="col-sm-4"><img src="images/a2.jpg" width="100%"/>
          <h4>智能影音中山三角别墅案例分享</h4>
        </li>
        <li class="col-sm-4"><img src="images/a3.jpg" width="100%"/>
          <h4>智能影音旗舰体验中心影音室</h4>
        </li>
      </ul>
    </div>
  </div>
</div>
<!--底部-->
<footer>
  <p>版权所有 </p>
</footer>
<script src="js/script.js"></script>
</body>
</html>

2.CSS代码



/*通用类*/
* {
    
	margin: 0;
	padding: 0;
}

body {
    
	margin: 0 auto;
	line-height: 21px
}

img {
    
	border: none;
}

a {
    
	cursor: pointer;
	color: #333;
	text-decoration: none;
	outline: none;
}

em {
    
	font-style: normal;
}

.lt {
    
	float: left;
}

.rt {
    
	float: right;
}

ul, li, h1, h2, h3, p {
    
	padding: 0;
	margin: 0;
	list-style: none
}

ul {
    
	list-style-type: none;
}

.clear {
    
	clear: both
}

img {
    
	display: block;
	max-width: 100%
}
/*header 开始*/
header {
    
	background: #000;
	border-bottom: 1px solid #666;
	padding: 0 30px;
}

header .logo {
    
	float: left;
	height: 90px;
	width: auto;
	margin: 0 auto;
}

header .logo img {
    
	width: auto;
	height: 100%;
}

header .nav {
    
	float: right;
	text-align: center;
	height: 90px;
	line-height: 90px;
}

header .nav a {
    
	float: left;
	padding: 0 20px;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}

header .nav a:hover {
    
	background: #333
}

.banner {
    
	background-size: cover;
}

.banner img {
    
	width: 100%;
	display: block;
}

footer {
    
	text-align: center;
	color: #fff;
	margin-top: 50px;
	background: #000;
}

footer p {
    
	height: 70px;
	line-height: 70px;
}

.Title {
    
	font-size: 36px;
	color: #000;
	text-align: center;
	font-weight: bold;
	height: 50px;
	line-height: 50px;
	margin: 40px 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.con .text {
    
	font-size: 18px;
	color: #333;
	line-height: 26px;
}

.con .text p {
    
	margin: 0 0 10px 0;
}

.Part1 {
    
	padding-bottom: 40px
}

.Part1 .text {
    
	max-width: 850px;
	margin: 20px auto;
	text-align: center
}

.part2 {
    
	margin-bottom: 0px;
}

.part2 li {
    
	text-align: center;
	margin-bottom: 30px;
	position: relative;
}

.part2 li  img {
    
	margin-bottom: 10px;transition:all 1s ease-out;
}
.part2 li:hover img{
    	transform:scale(0.9);}
.part2 li p {
    
	font-size: 36px;
	font-weight: bold;
	top: 50%;
	margin-top: -18px;
	padding: 10px 0;
	display: block;
	left: 0;
	position: absolute;
	width: 100%;
	text-align: center;
	color: #fff
}

.news li {
    
	margin: 20px 0
}

.form_con {
    
	margin: 0px auto;
	font-size: 16px;
}

.form_con .phone {
    
	width: 100%;
	height: 36px;
	padding: 0 15px;
	box-sizing: border-box;
	font-size: 14xp;
	margin-bottom: 10px;
	display: block;
}

.form_con .phone.oi {
    
	height: 120px;
}

.form_con button {
    
	width: 100%;
	height: 36px;
	background: #666;
	border: none;
	color: #fff;
}

.part2 {
    
	overflow: hidden
}

#close {
    
	position: absolute;
	right: 0px;
	top: 5px
}

#close img {
    
	width: 40px
}

.part65 li img {
    
	padding: 0 50px
}

.part65 li h2 {
    
	margin-top: 70px;
	font-size: 30px;
	margin-bottom: 20px
}

.part65 li p {
    
	letter-spacing: 2px;
	line-height: 30px;
	font-size: 16px
}

.more {
    
	display: inline-block;
	margin-top: 50px;
	border: #000 solid 1px;
	padding: 10px 50px;
	font-size: 16px
}

.more:hover {
    
	background: #000;
	color: #fff
}

.part65 li:nth-child(2n) div:nth-child(1) {
    
	float: right
}

.part65 li div div {
    
	padding: 0 60px
}

@media only screen and (max-width:1200px) {
    
	header .nav a {
    
		padding: 0 10px
	}
}

@media only screen and (max-width:1024px) {
    
	header .logo {
    
		height: 70px;
		margin-top: 10px
	}

	header .nav a {
    
		font-size: 16px;
		padding: 0 10px
	}

	.part2 li p {
    
		font-size: 18px
	}

	.con .text p,.part2 li h4 {
    
		font-size: 14px
	}
}

@media only screen and (max-width:860px) {
    
	header .nav a {
    
		font-size: 14px;
		padding: 0 5px
	}
}

@media only screen and (max-width:768px) {
    
	.part65 li img,.part65 li div div {
    
		padding: 0
	}

	header .logo {
    
		margin-top: 0px
	}

	.part65 li h2 {
    
		font-size: 20px;
		line-height: 30px
	}

	body {
    
		padding-top: 50px
	}

	header {
    
		width: 100%;
		position: fixed;
		padding: 0;
		top: 0;
		left: 0;
		z-index: 555;
	}

	.row {
    
		margin: 0
	}

	header .nav {
    
		width: 100%;
		display: none;
		line-height: 50px;
		height: auto;
		background: #000
	}

	.Part1 .text {
    
		margin-left: 10px;
		margin-right: 10px
	}

	header .nav a {
    
		font-size: 14px;
		width: auto;
		margin: 0px;
		font-weight: normal
	}

	header .nav a {
    
		display: block;
		width: 100%;
	}

	.re {
    
		width: 150px
	}

	.Part1 {
    
		padding-bottom: 0
	}

	header .logo {
    
		height: 50px;
	}

	.s {
    
		padding-top: 20px;
		font-size: 22px;
		text-align: center
	}

	.part2 li img {
    
		height: auto;
	}

	.Title,.tits {
    
		font-size: 24px;
		margin: 20px 0
	}

	.text {
    
		font-size: 14px;
		line-height: 26px;
	}
}

三、个人总结

一套合格的网页应该包含(具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
所有页面相互超链接，可到三级页面，有5-10个页面组成；
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
菜单美观、醒目，二级菜单可正常弹出与跳转；
要有JS特效，如定时切换和手动切换图片新闻；
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
页面清爽、美观、大方，不雷同。
网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货

1.看到这里了就 【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】 。

2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

3.以上内容技术相关问题可以相互学习交流

在这里插入图片描述

本文链接：https://blog.csdn.net/QQ_____365392777/article/details/137800096

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

VINS-Mono代码阅读笔记（二）：feature_tracker代码阅读_image discontinue! reset the feature tracker!-程序员宅基地

文章浏览阅读3.8k次，点赞14次，收藏22次。1.入口main函数feature_tracker结点的入口函数为feature_tracker_node.cpp文件中的main函数。main函数代码如下：/** * feature_tracker_node的入口函数*/int main(int argc, char **argv){ ros::init(argc, argv, "feature_tracker");..._image discontinue! reset the feature tracker!

古堡算式ABCDE * ? = EDCBA-程序员宅基地

文章浏览阅读1.7k次。/*福尔摩斯到某古堡探险，看到门上写着一个奇怪的算式： ABCDE * ? = EDCBA 他对华生说：“ABCDE应该代表不同的数字，问号也代表某个数字！” 华生：“我猜也是！” 于是，两人沉默了好久，还是没有算出合适的结果来。请你利用计算机的优势，找到破解的答案。把 ABCDE 所代表的数字写出来。*/ #includ_abcde * ?

tensorflow中常用的变量初始化方法_tensorflow 创建一个初始为均匀分布的变量-程序员宅基地

文章浏览阅读3.6k次。1. 初始化为常量tf.constant_initializer__init__( value=0, #指定的常量 dtype=tf.float32, #数据类型 verify_shape=False #是否可以调整tensor的形状，默认可以调整)#常量初始化#tf.constant_initializerva..._tensorflow 创建一个初始为均匀分布的变量

g2o学习记录（3）源码下的example例子运行_g2o example-程序员宅基地

文章浏览阅读2.4k次，点赞4次，收藏5次。g2o(3)源码下的example例子运行由于我使用的是Cmake3.5.1版本，高版本必须加上cmake_minimum_required(VERSION 3.5) 第一次运行cmake命令的时候会出现：/usr/bin/cmake -DCMAKE_BUILD_TYPE=Debug -G "CodeBlocks - Unix Makefiles" /home/tanqiwei/D..._g2o example

十四届蓝桥杯EDA科目客观题汇总_蓝桥杯eda真题-程序员宅基地

文章浏览阅读2.7w次，点赞156次，收藏895次。这是我自己搜集的部分十四届之前的蓝桥杯eda科目的真题和模拟题，有部分答案解释是我自己写的，所以经供参考。_蓝桥杯eda真题

textFormat失效问题的解决。-程序员宅基地

文章浏览阅读147次。import flash.text.TextField;import flash.text.TextFormat;var label:TextField = new TextField();var labelCss:TextFormat = new TextFormat();labelCss.color = "0xff0000";labelCss.leading = 5;labelCss...._format text as code点了没反应

随便推点

spring boot + mybatis-plus返回树形结构数据_数据库返回树形结构数据-程序员宅基地

文章浏览阅读2.5k次，点赞2次，收藏15次。以上是我从最近的项目中学到的spring boot + mybatis-plus返回树形结构的方法。_数据库返回树形结构数据

01背包、完全背包、多重背包、分组背包问题，一文读懂_01背包方案-程序员宅基地

文章浏览阅读2.3k次，点赞4次，收藏15次。背包问题是一种组合优化的 NP 完全问题：有 N 个物品和容量为 W 的背包，每个物品都有自己的体积 w 和价值 v，求拿哪些物品可以使得背包所装下物品的总价值最大。0-1背包有N件物品和一个最多能背重量为W 的背包。第i件物品的重量是weight[i]，得到的价值是value[i] 。每件物品只能用一次，求解将哪些物品装入背包里物品价值总和最大。每件物品都有选与不选两种情况，那么这个问题完全可以用回溯法来暴力搜索，时间复杂度为O(n2)O(n^2)O(n2)，因为暴力解法时间复杂度太高，所以才要用_01背包方案

【04多媒体基础参数】_1分钟的视频信息,要求每秒播放30帧每帧分辨率为1024*1024,视频的采样率为4比-程序员宅基地

文章浏览阅读246次。04多媒体基础参数参数定义比特率：音视频、图像都可以采用这个指标，它指的是规定时间内传输的比特数，单位是 bps（bit per second），比特率越高，数据传输的速度就越快，流媒体的播放质量就越好（音视频越清晰），所需带宽也越大，比特率有时候也和码率混为一谈，但码率的单位一般是 kbps（千位每秒）采样率：专用于音频多媒体，也称为采样速度或者采样频率，它定义了每秒从连续信号中提取并组成离散信号的采样个数，单位为赫兹（Hz）。采样率的意义在于将模拟信号转换成数字信号时的采样频率，也就是单_1分钟的视频信息,要求每秒播放30帧每帧分辨率为1024*1024,视频的采样率为4比

python的string模块（字符）和random模块的使用_import string在python中的用法-程序员宅基地

文章浏览阅读2.2k次，点赞3次，收藏18次。一、模块string的简单使用import string #导入string模块，获取大小写字母、特殊字符、数字等#获取大小写字母abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZprint(string.ascii_letters)#获取大写字母ABCDEFGHIJKLMNOPQRSTUVWXYZprint(string.ascii_uppercase)#获取小写字母abcdefghijklmnopqrstuvwxyzprint(s_import string在python中的用法

IntelliJ IDEA导入 Eclipse 项目【山东大学现代软件开发技术】2023.2.2 Ulitimate Edition_idea导入eclipse-程序员宅基地

文章浏览阅读1.2k次，点赞3次，收藏8次。本文记录了将 Eclipse 项目导入 IDEA 2023.2.2 的过程，同时也适用于山东大学现代软件开发技术这门课的开发环境迁移。_idea导入eclipse

Chrome浏览器调试教程_chrome 浏览器调试协议-程序员宅基地

文章浏览阅读1.8k次，点赞2次，收藏2次。Chrome浏览器及调试教程引言在web开发过程中，我们在写JavaScript脚本时难免会遇到各种bug，这时，我们就需要去调试我们的JavaScript脚本，然后去修改代码。最简单的调试方法就是使用alert方法，将可信息通过alert方法的弹窗显示出来。但是，alert方法有几个弊端：1）alert方法在弹..._chrome 浏览器调试协议