web领域优质创作者-网页设计

web领域优质创作者-网页设计

关注
发信
关注(28)粉丝(399)

HTML+CSS+JavaScript大作业——网上医药用品购物商城 大学生静态HTML网页源码 dreamweaver网页作业 简单网页课程成品

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

一、网页介绍📖

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

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

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

一、网页效果🌌

HTML+CSS+JavaScript大作业——网上医药用品购物商城 大学生静态HTML网页源码 dreamweaver网页作业 简单网页课程成品-LMLPHP

二、代码展示😈

1.HTML结构代码 🧱

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


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>我健康商城</title>

<link href='css/comm.css' rel='stylesheet' type='text/css'>
<link href='css/style_index.css' rel='stylesheet' type='text/css'>

</head>

<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript" src='js/lunbo.js'></script>
<script type="text/javascript" src='js/other.js'></script>


<body>

  <!-- 页眉 -->
  <form action='' method=''>
  <div class='PTit30'>
    <div class='W1200 nav_bj'>
    
      <div class='FL'>
        <span>欢迎来到我健康网上药店！</span>
        <a href='javascript:;'>登录</a>
        <a href='javascript:;'>注册</a>
      </div>
    
      <div class='FR nav_gray'>
        <div class='FL pointer'>
          <a href='javascript:;'  class='a_color'>我的我健康</a> <img src='picture/index_sjx.png' title='' alt='' class='sjx' />
          <ul>
            <li><a href='javascript:;'>我的处方</a></li>
            <li><a href='javascript:;'>我的收藏</a></li>
            <li><a href='javascript:;'>我的地址</a></li>
          </ul>
        </div>
        <div class='FL pointer'>
          <a href='javascript:;'  class='a_color'>我的订单</a> <img src='picture/index_sjx.png' title='' alt='' class='sjx' />
          <ul>
            <li><a href='javascript:;'>待付款订单</a></li>
            <li><a href='javascript:;'>待确认收货</a></li>
          </ul>
        </div>
        <div class='FL pointer'>
          <img src='picture/index_gwc.png' title='' alt='' class='img_pos' />
          <a href='javascript:;' class='a_color'>购物车 <span>0</span> 件</a>
        </div>
        <div class='FL'><img src='picture/index_dh.png' class='img_pos' title='' alt='' /> XXX</div>
        <div class='FL pointer'>
          <a href='javascript:;'  class='a_color'>客户服务</a> <img src='picture/index_sjx.png' title='' alt='' class='sjx' />
          <ul>
            <li><a href='javascript:;'>帮助中心</a></li>
            <li><a href='javascript:;'>联系我们</a></li>
            <li><a href='javascript:;'>投诉建议</a></li>
          </ul>
        </div>
        <div class='FL pointer'>
          <a href='javascript:;'  class='a_color'>网站导航</a> <img src='picture/index_sjx.png' title='' alt='' class='sjx' />
          <div class='wzdh_xq'>
            <div>
              <div><a href='javascript:;'>特色频道</a></div>
              <p><a href='javascript:;'>男科药馆</a><a href='javascript:;'>医疗器械</a></p>
            </div>
            <div>
              <div><a href='javascript:;'>健康工具</a></div>
              <p><a href='javascript:;'>掌上药店</a><a href='javascript:;'>自助找药</a><p>
            </div>
            <div>
              <div><a href='javascript:;'>健康知多点</a></div>
              <p>
                <a href='javascript:;'>用药指南</a>
                <a href='javascript:;'>健康问答</a>
                <a href='javascript:;'>肝胆科</a>
              </p>
              <p>
                <a href='javascript:;'>皮肤科</a>
                <a href='javascript:;'>呼吸科</a>
                <a href='javascript:;'>减肥瘦身</a>
              </p>
              <p>
                <a href='javascript:;'>两性健康</a>
                <a href='javascript:;'>妇科</a>
                <a href='javascript:;'>母婴</a>
              </p>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
    </div>
  </div>	
  <!-- logo 搜索 -->
  <div class='W1200 logo_div'>
    
    <div class='logo FL'>
      <p><img src='picture/index_logo.png' /></p>
    </div>
    <div class='logo_ss FL'>
      
        <input type='text' name='srk' placeholder='汤臣倍健' class='input_text' /><input type='submit' name='ss' value='搜索' />
     
      <div class='input_cli'>
        <div class='FL input_left'>
          <P>历史记录：</P>
          <p><img src='picture/kk-pic01.gif' /></p>
          <p class='input_cen'>亲，您还没有历史记录哦</p>
        </div>
        
        <div class='FL input_right'>
          <P>正在热搜中：</P>
          <p>
            <span><a href='javascript:;'>阿胶</a></span>
            <span><a href='javascript:;'>安宫牛黄丸</a></span>
            <span><a href='javascript:;'>必利劲</a></span>
            <span><a href='javascript:;'>乙肝</a></span>
            <span><a href='javascript:;'>锁阳固精丸</a></span>
            <span><a href='javascript:;'>舒利迭</a></span>
            <span><a href='javascript:;'>欧姆龙血压计</a></span>
            <span><a href='javascript:;'>恩替卡韦</a></span>
            <span><a href='javascript:;'>维生素C</a></span>
          </p>
        </div>
        
      </div>
      <p>
        <a href='javascript；;'>16.9买3件</a>
        <a href='javascript；;'>保肝护肝</a>
        <a href='javascript；;'>皮肤护理</a>
        <a href='javascript；;'>消暑养生</a>
        <a href='javascript；;'>眉眼美肤</a>
        <a href='javascript；;'>爱肠护胃</a>
      </p>
    </div>
    
  </div>

2.CSS样式代码 🏠


/* 将具有默认margin和padding的标记置零，所有标记的margin、padding都在使用时具体定义 */
* {margin:0; padding:0;}

/* 修正IE5.x和IE6的斜体溢出bug */
* html body {overflow:visible;}
* html iframe, * html frame {overflow:auto;}
* html frameset {overflow:hidden;}

/* 常用标签，基本标签默认样式取消，HTML标签，取消基本标签默认样式，防止不同浏览器显示效果不同，text-align:center; 解决不同浏览器居中问题 */
body {color:#000; background:#FFF; font-family:'微软雅黑', Verdana, Arial, sans-serif; font-size: 12px; text-align:center; /*width:960px; */}
body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, tr {margin:0 auto; padding:0;}
input, select {font-size:12px; vertical-align:middle;}

/* 设置内容左对齐，恢复因BODY设置剧中产生的继承 */
body div {text-align:left;}

/* 标签属性，textarea,input 强制输入时内容超出时换行 */
textarea, input {word-wrap:break-word; word-break:break-all; padding:0px;}

/* 清除ul列表标记的样式，ul列表更多的用在不需要列表前置符号的样式里 */
li {list-style-type:none;}

/* 定义图片边框，当图片作为链接内容被填充时，会有默认边框出现，重定义掉 */
img {border:0 none;}

/* 定义默认的链接样式，仅仅是作为默认样式提供，可以在各自的实例中覆盖掉 */
a {color:#0A75E7; text-decoration:none;}
a:hover {color:#f00;}

/* 去掉链接的虚线框 */
a {outline:none; star:expression_r(this.onFocus=this.blur());}

/* 定义H系列标签，覆盖H系列标签默认属性 */
h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:18px; }
h4 { font-size:16px; }
h5 { font-size:14px; }
h6 { font-size:12px; }


/* ------------------------------------通用属性定义---------------------------------------- */

/* 鼠标样式 */
.pointer { cursor:pointer; }

/* 取消边框 */
.NoBorder { border:0 none; }
.NoPadding { padding:0; }

/* 文本对齐方式 */
.t_l { text-align:left; }
.t_c { text-align:center; }
.t_r { text-align:right; }

三、个人总结😊

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

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

四、更多干货🚀

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

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

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬
12-26 08:30
Powered by LMLPHP ©2024 web领域优质创作者-网页设计 0.001615