HTML网页设计_公司主题_极简风（HTML+CSS+js）

已于 2023-02-04 18:10:09 修改
阅读量1.4k 收藏 8
点赞数 1
分类专栏： 网页设计 文章标签： html css javascript
于 2023-02-04 14:21:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suli77/article/details/128877706
版权

一、网页介绍

1、作品介绍：本作品的主题是科技公司的官网，UI简约高级，代码也比较简单。大家可以根据自己的需求进行素材调整替换，该实例包含的HTML、CSS和js，非常适合初学HTML的同学来学习。

2、网页编辑：网页代码非常简单，可以使用市面上任何HTML编辑软件进行修改，Dreamweaver、Notepad++等等。

3、网页技术：技术主要采用了Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash等，基本覆盖期末大作业需要的知识点。

二、页面展示

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

三、核心代码

1、主页

<html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>电子产品展示科技产品公司企业网站</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="design by www.Baidu.com" />
<link type="text/css" rel="stylesheet" href="style/global.css"  />
<link type="text/css" rel="stylesheet" href="style/lib.css"  />
<link type="text/css" rel="stylesheet" href="style/style.css"  />
<script type="text/javascript" src="js/iepngfix_tilebg.js" ></script>
<script type="text/javascript" src="js/jq_min.js" ></script>
<script type="text/javascript" src="js/website_js.js" ></script>
</head>
<body>
<div id="header">
  <div class="top_line"></div>
  <div class="center">
    <div class="logo"><a href="index.htm" ><img src="images/logo.png"  /></a></div>
    <div class="nav">
      <ul>
        <li class="cur"><a href="index.htm" >首页</a></li>
        
        <li ><a href="index-1.htm" >产品中心</a></li>
        
        <li ><a href="index-2.htm" >关于我们</a></li>
        
        <li ><a href="index-3.htm" >新闻中心</a></li>
        
        <li ><a href="index-4.htm" >留言中心</a></li>
        
        <li ><a href="index-5.htm" >联系我们</a></li>
        
        <li ><a href="index-6.htm" >下载中心</a></li>
        
      </ul>
    </div>
  </div>
</div>
<div id="banner">
  <ul>
    <li style="display:block;"><a href="index.htm" ><img src="images/81f3836bfa.jpg"  /></a></li>
    <li ><a href="index.htm" ><img src="images/6abee24513.jpg"  /></a></li>
    <li ><a href="index.htm" ><img src="images/e47b0642ee.jpg"  /></a></li>
    <li ><a href="index.htm" ><img src="images/87f6a47b1a.jpg"  /></a></li>
  </ul>
  <div class="icon">
    <dl style="width:112px;">
      <dd class="cur"></dd>
      <dd ></dd>
      <dd ></dd>
      <dd ></dd>
      <div class="clear"></div>
    </dl>
  </div>
</div>
<script>
$(function(){
	changeBanner();	
})
</script>
<div id="content">
  <div class="index_cate">
    <div class="center">
     
      <div class="menu_title">移动电源</div>
      
      <div class="menu_title">数据线</div>
      
      <div class="menu_title">蓝牙音箱</div>
      <div class='menu_title cur '>智能自拍器</div>
      <div class="menu_title">智能穿戴</div>
       </div>
  </div>
  <div class="index_list">
    <div class="center">
      <div class="menu_list" style="display:block;"> 
      <div class="list ">
          <div class="img"><a href="8.html" ><img src="images/1-150H21419400-L.jpg"  width="280" height="305" /></a></div>
          <div class="name"><a href="8.html" >A6移动电源</a></div>
          <div class="more"><a href="8.html" >查看详细 ></a></div>
        </div>
<div class="list ">
          <div class="img"><a href="7.html" ><img src="images/1-150H2141S00-L.jpg"  width="280" height="305" /></a></div>
          <div class="name"><a href="7.html" >A2 移动电源</a></div>
          <div class="more"><a href="7.html" >查看详细 ></a></div>
        </div>
<div class="list ">
          <div class="img"><a href="6.html" ><img src="images/1-150H2141G30-L.jpg"  width="280" height="305" /></a></div>
          <div class="name"><a href="6.html" >K3 移动电源</a></div>
          <div class="more"><a href="6.html" >查看详细 ></a></div>
        </div>
<div class="list ">
          <div class="img"><a href="5.html" ><img src="images/1-150H21415210-L.jpg"  width="280" height="305" /></a></div>
          <div class="name"><a href="5.html" >T3 移动电源</a></div>
          <div class="more"><a href="5.html" >查看详细 ></a></div>
        </div>

        <div class="clear"></div>
      </div>
      <div class="menu_list" > 
        <div class="clear"></div>
      </div>
      <div class="menu_list" > 
        <div class="clear"></div>
      </div>
      <div class="menu_list" > <div class="list ">
          <div class="img"><a href="3.html" ><img src="images/1-150H21412130-L.jpg"  width="280" height="305"  /></a></div>
          <div class="name"><a href="3.html" >智能自拍器</a></div>
          <div class="more"><a href="3.html" >查看详细 ></a></div>
        </div>

        <div class="clear"></div>
      </div>
      <div class="menu_list" > <div class="list ">
          <div class="img"><a href="4.html" ><img src="images/1-150H21413190-L.jpg"  width="280" height="305"  /></a></div>
          <div class="name"><a href="4.html" >智能手环-par</a></div>
          <div class="more"><a href="4.html" >查看详细 ></a></div>
        </div>

        <div class="clear"></div>
      </div>
    </div>
  </div>
  <div class="index_chosen">
    <div class="center">
      <div class="chosen_title">Product 精选产品</div>
      <div class="wrap">
        <div class="index_nav">
          <div class="t">产品中心</div>
          <div class="nav_list"> <img src="images/index_ico_0.jpg"  /> <a href="index-7.htm" >移动电源</a> </div>
          <div class="nav_list"> <img src="images/index_ico_1.jpg"  /> <a href="index-8.htm" >数据线</a> </div>
          <div class="nav_list"> <img src="images/index_ico_2.jpg"  /> <a href="index-9.htm" >蓝牙音箱</a> </div>
          <div class="nav_list"> <img src="images/index_ico_3.jpg"  /> <a href="index-10.htm" >智能自拍器</a> </div>
          <div class="nav_list"> <img src="images/index_ico_4.jpg"  /> <a href="index-11.htm" >智能穿戴</a> </div> </div>
        <div class="index_news">
          <div class="t">新闻中心</div>
          <div class="news_list"><a href="16.html" >车充使用不当就成电子产品杀手！</a> </div>
<div class="news_list"><a href="15.html" >小米官网上线小米电视2S 48英寸</a> </div>
<div class="news_list"><a href="14.html" >猎豹移动与APUS厮杀真相</a> </div>
<div class="news_list"><a href="13.html" >Airwheel智能车成为便携低碳出行的</a> </div>
<div class="news_list"><a href="12.html" >猎豹离职员工披露内幕：猎豹移动</a> </div>
<div class="news_list"><a href="11.html" >爱尔威S系列思维车智能车全方位</a> </div>
 </div>
        <div class="index_ad"> 
        <div class='adlist'><a href="8.html"  target='_blank'><img src="images/1-150H21419400-L.jpg"  width="280" height="275"></a></div>
<div class='adlist'><a href="7.html"  target='_blank'><img src="images/1-150H2141S00-L.jpg"  width="280" height="275"></a></div>
<div class='adlist'><a href="6.html"  target='_blank'><img src="images/1-150H2141G30-L.jpg"  width="280" height="275"></a></div>
<div class='adlist'><a href="5.html"  target='_blank'><img src="images/1-150H21415210-L.jpg"  width="280" height="275"></a></div>
<div class='adlist'><a href="4.html"  target='_blank'><img src="images/1-150H21413190-L.jpg"  width="280" height="275"></a></div>
<div class='adlist'><a href="3.html"  target='_blank'><img src="images/1-150H21412130-L.jpg"  width="280" height="275"></a></div>
 </div>
      </div>
    </div>
  </div>
</div>

<div id="footer">
  <div class="center">
    <div class="copyright">Copyright &copy; 2002-2011 Baidu.COM   <a href="javascript:if(confirm( �ļ���δ�� ȡ�أ���Ϊ �������·��������ʼ��ַ�����õķ�Χ�� ��Ҫ�ӷ������ϴ�����'))window.location='"  target='_blank'>Power by DedeCms</a></div>
  </div>
</div>

</body>
<script src="error.html"  type="text/javascript"></script>
</html>
<script>
$(function(){
	changeMenu("menu_title", "menu_list");	
})
</script>

2、CSS

/*global css*/
/* Baidu.com 做最好的织梦模板 */
* {
	font-family:"微软雅黑", Arial, Helvetica, sans-serif;
	-webkit-text-size-adjust:none; /*_behavior:url(../iepng/iepngfix.htc);*/
}
td, th, div, input, select, textarea, li, ol, dt, dd, h1, h2, h3, h4, h5, h6 {
	font-size:12px;
	color:#333;
}
font, span {
	font-size:12px;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote {
	padding:0;
	margin:0;
}
h1, h2, h3, h4, h5, h6 {
	font-weight:normal;
}
li {
	list-style-type:none;
}
img {
	border:none;
}
.line {
	border-bottom:1px dashed #ccc;
	height:1px;
	overflow:hidden;
}
.border {
	border:1px solid #ccc;
}
/*文字大小，颜色，行距定义 fz:font-size；fc:font-color；flh:font-line-height*/
.fz_12px {
	font-size:12px;
}
.fz_14px {
	font-size:14px;
}
.fz_16px {
	font-size:16px;
}
.fc_red {
	color:#ff0000;
}
.fc_gory {
	color:#666;
}
.fc_white {
	color:#fff;
}
.fc_yellow {
	color:#ff6600;
}
.flh_150 {
	line-height:150%;
}
.flh_180 {
	line-height:180%;
}
/*form*/
.form_input {
	border:1px solid #ccc;
	color:#333;
	background:url(../images/input_bg.gif) #fff repeat-x;
	height:20px;
	line-height:20px;
}
.form_area {
	border:1px solid #ccc;
	color:#333;
	background:url(../images/input_bg.gif) #fff repeat-x;
	line-height:180%;
}
.form_button {
	border:none;
	background:#505050;
	color:#fff;
	height:22px;
	line-height:22px;
	padding:0 5px;
	overflow:hidden;
	width:80px;
}
.form_button_130 {
	width:130px;
}
.form_focus {
	border-color:red;
}
.form_gory_button {
	border:none;
	background:url(../images/button_grey.gif);
	width:110px;
	height:25px;
	line-height:25px;
	font-weight:bold;
	color:#555;
	text-align:center;
}
select.form_focus {
	background:#ccc;
}
/* padding */
.clear {
	margin:0px auto;
	clear:both;
	height:0px;
	font-size:0px;
	overflow:hidden;
}
.blank3 {
	margin:0px auto;
	clear:both;
	height:3px;
	font-size:1px;
	overflow:hidden;
}
.blank6 {
	margin:0px auto;
	clear:both;
	height:6px;
	font-size:1px;
	overflow:hidden;
}
.blank9 {
	margin:0px auto;
	clear:both;
	height:9px;
	font-size:1px;
	overflow:hidden;
}
.blank12 {
	margin:0px auto;
	clear:both;
	height:12px;
	font-size:1px;
	overflow:hidden;
}
.blank15 {
	margin:0px auto;
	clear:both;
	height:15px;
	font-size:1px;
	overflow:hidden;
}
.blank20 {
	margin:0px auto;
	clear:both;
	height:20px;
	font-size:1px;
	overflow:hidden;
}
.blank25 {
	margin:0px auto;
	clear:both;
	height:25px;
	font-size:1px;
	overflow:hidden;
}
/*a*/
a {
	color:#333;
	text-decoration:none;
}
a:hover {
	color:#ff6600;
	text-decoration:underline;
}
a.red {
	color:red;
	text-decoration:none;
}
a.red:hover {
	color:red;
	text-decoration:underline;
}
/*turn page*/
#turn_page {
	text-align:center;
	height:26px;
	line-height:26px;
}
#turn_page .page_button {
	background:#fff;
	border:1px solid #ccc;
	margin:0 3px;
	padding:2px 5px;
}
#turn_page .page_item {
	background:#f3f3f3;
	color:#333333;
	border:1px solid #ccc;
	padding:2px 5px;
	margin:0 3px;
}
#turn_page .page_item_current {
	background:#69b839;
	border:1px solid #ccc;
	padding:2px 5px;
	margin:0 3px;
	color:#fff;
}

四、项目链接

https://download.csdn.net/download/suli77/87415477

suli77
关注
专栏目录
11个精美网页——Web前端开发技术课程大作业，期末考试，Dreamweaver简单网页制作
QQ_____365392777的博客
08-08 4309
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
学生HTML网页作业：基于HTML+CSS+JavaScript画家企业8页
QQ_____365392777的博客
08-06 2695
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站......
【HTML】深色主题切换
最新发布
qq_52848404的博客
08-27 783
在现代网页设计中，深色主题（Dark Mode）已成为提升用户体验的重要特性之一。它不仅有助于减少屏幕对眼睛的刺激，还能节省设备电量，特别是在 OLED 屏幕上。本教程将引导小白通过两种不同的方法实现深色主题切换，帮助小白更直观地理解整个过程。
基于HTML美中华传统文化题材网页项目的设计与实现 (纯HTML+CSS制作中国茶文化网站)...
qq_365392777
10-23 428
????文章目录​​一、????‍????网站题目​​​​二、✍️网站描述​​​​三、????网站介绍​​​​四、????网站演示​​​​五、⚙️ 网站代码​​​​????HTML结构代码​​​​????CSS样式代码​​​​六、???? 如何让学习不再盲目​​​​七、????更多干货​​一、????‍????网站题目????茶文化网站、????️‍????中华传统文化题材、京剧文化????水墨风书画、中国民间...
html网页设计主题大全,网页设计HTML大全(珍藏版)
weixin_30063287的博客
05-30 4467
◆ 批注◆跑马灯◆...普通卷动◆behavior=slide>...滑动◆...预设卷动◆...来回卷动◆direction=down>...向下卷动◆direction=up>...向上卷动◆direction=right>向右卷动◆向左卷动◆loop=2>...卷动次数◆...设定宽度◆height=30>...设定高度◆...设定背景颜色◆scrollA...
html + css+ js 网页设计
weixin_46601817的博客
05-17 4263
科技公司类网页设计： html css js bootstarp 也可制作其他主题网页 联系：扣扣1-9-3-9-7-1-3-1-3-6
HTML+CSS+JS+JQ+Bootstrap的黑白极简主义主题单页面模板.7z
06-28
本份资源精心汇集了一套完整网站源码，融合了HTML的骨架搭建、CSS的视觉美化、JavaScript的交互逻辑、jQuery的高效操作以及Bootstrap的响应式设计，全方位揭秘了现代网页开发的精髓。 HTML，作为网页的基础，它构建...
html+css+bootstrap-家居网html网页设计，纯色极简网站设计模板Furnitor.zip
03-09
它是一个 CSS，HTML 和 JS 的集合，它使用了最新的浏览器技术，给你的 Web 开发提供了时尚的版式； AJAX，创建交互式网页应用的网页开发技术。 【设计思路】 用户友好性：界面简洁直观，易于操作，减少用户的学习...
网页课程设计&毕业设计_灰色极简风格html5网站模板.zip
03-02
综上所述，这个"灰色极简风格html5网站模板"涵盖了HTML5语义化标签的使用、CSS3样式设计、响应式布局、JavaScript交互、SEO优化等多个核心IT知识点，对于学习和实践网页开发的学生或设计师来说，是一个非常有价值的...
html+css+bootstrap实现电商-书店网站设计模板，极简风网上书店html商城.zip
03-16
它是一个 CSS，HTML 和 JS 的集合，它使用了最新的浏览器技术，给你的 Web 开发提供了时尚的版式； AJAX，创建交互式网页应用的网页开发技术。 【设计思路】 用户友好性：界面简洁直观，易于操作，减少用户的学习...
HTML+CSS+JS+JQ+Bootstrap的极简主义创意展示响应式网页模板.7z
07-10
探索网页设计的无限可能，从零构建专业级网站不再是梦想。这份精选资源包，囊括HTML、CSS、JavaScript、jQuery及Bootstrap框架的完美结合，为您的创意插上飞翔的翅膀。HTML奠定坚实基础，CSS赋予页面绚丽风格，...
css+html+js简单模板
03-26
css+html+js实现了一个简单的页面功能，下载可直接打开，学习代码
制作一个简单HTML公司官网网页设计（HTML+CSS）
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
个人网页模板之静态版（HTML+CSS+JS）
01-11
前一段时间帮同学完成的一个作业，静态的网站知识几乎都涉及了！
html+css+js网页设计
weixin_44337480的博客
05-22 1108
设计一个使用HTML、CSS和JavaScript的网页涉及多个步骤。以下是一个基本的指南，帮助你开始创建这样的网页：使用HTML定义结构：使用CSS定义样式：使用JavaScript添加交互：使用CSS媒体查询实现响应式布局：在多种设备和浏览器上测试网页：优化网页性能：下面是一个简单的示例，展示了如何使用HTML、CSS和JavaScript创建一个简单的网页： 这个示例包含了一个标题、一个按钮和一些内联样式。当用户点击按钮时，会弹出一个包含“你好，世界！”的警告框。
HTML+CSS+JS网页设计
m0_73738929的博客
04-15 5万+
HTML页面主要由：登录、注册跳转页面，轮播图，家乡简介，热门景点，特色美食等组成。通过Div+CSS、鼠标滑过特效、获取当前时间，跳转页面、基本所需的知识点全覆盖。提示：以下是本篇文章正文内容，下面案例可供参考。
基于html的网页设计-音乐主题
weixin_46820017的博客
06-15 1896
基于html的网页设计
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
HTML+CSS+JS网页设计与制作摄影类个人网页
mon_star°的博客
11-26 358
1、网站程序：主要使用网页三剑客html+css+javaScript实现网页设计与制作，完成网站的功能设计。制作适用于任何浏览器或设备的精美网站。2、网站布局：主要采用浮动布局。兼容各大主流浏览器、显示效果稳定。3、网站文件：网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件等。4、网站素材：搜集或制作适合网页风格和尺寸的图片，追求优质视觉体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

suli77

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值