基于html的美食网站——速鲜站餐饮食品(HTML+CSS+JavaScript)--水果超市(响应式)2页

源码获取 文末联系

Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | H5微商城购物商城项目 | HTML期末大学生网页设计作业

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. JavaScript:做与用户的交互行为

文章目录

  • 前端学习路线
  • 网页基本结构
  • 网页演示
    • HTML结构代码
  • 学的反而越迷茫
  • 学习更多


前端学习路线

(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="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>水果超市title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <script src="js/jquery.min.js">script>
    <script src="js/bootstrap.min.js">script>
    <script src="js/main.js">script>
    <style>
      .box {
     
        width: 100%;
        border: #999 solid 1px;
        box-sizing: border-box;
      }

      .box-th {
     
        overflow: hidden;
        width: 100%;
        background-color: #88ace6;
      }

      .box-th ul li {
     
        float: left;
        width: 90px;
        height: 40px;
        margin-right: 10px;
        line-height: 30px;
        padding: 5px;
        text-align: center;
      }

      .current {
     
        color: #fff;
        background-color: green;
      }

      .box-tb {
     
        margin-top: 20px;
        height: 200px;
        padding: 0 10px;
        overflow: hidden;
      }
      .box-tb .item {
     
        line-height: 2;
        text-indent: 2rem;
      }

      .box-tb .item:nth-child(n + 2) {
     
        display: none;
      }
      .ly h5 {
     
        border-bottom: 1px solid rgb(133, 128, 128);
        padding-bottom: 3px;
      }
    style>
  head>

  <body>
    
    <header class="top">
      <div class="container">
        <div class="logo fontsize5 pull-left"><img src="images/logo.png" width="240" />div>
        <div class="search pull-right">div>
      div>
    header>
    <div class="clearfix">div>
    <div class="menu clearfix">
      <ul class="container nav">
        <li class="first"><a href="index.html" target="_self">首页a>li>
        <li class=""><a class="noborder" href="picture.html" target="_self">水果图片a>li>
        <li class=""><a class="noborder" id="op">意见提交a>li>
      ul>
    div>
    
    <div class="swipe" id="swipe">
      
      <div class="bg" id="swipe_bg">div>
      
      <section>
        
        <div class="img-box" id="swipe_img_box">
          <a href="#" class="link" id="swipe_link">
            <img src="./images/a.jpg" alt="" class="sw-img" id="swipe_img" />
          a>
        div>
        
        <div class="select" id="swipe_select">div>
        
        <div class="btn left" id="swipe_btn_left">
          
          <img src="./images/swiper-l.png" class="fa" alt="" />
        div>
        
        <div class="btn right" id="swipe_btn_right">
          
          <img src="./images/swiper-r.png" class="fa" alt="" />
        div>
      section>
    div>
    
    

你可能感兴趣的:(web前端期末大作业,javascript,html,css,bootstrap,美食)