大一学生HTML5期末大作业——基于HTML+CSS制作中药主题实训素材

最新推荐文章于 2024-01-26 11:37:07 发布

优质内容贡献

最新推荐文章于 2024-01-26 11:37:07 发布

阅读量367

点赞数 1

分类专栏： HTML5期末大作业文章标签： html css html5 前端

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

版权

本文介绍了一位大一学生使用HTML5和CSS完成的中药主题实训网页设计，包括网页基本结构、HTML结构代码和前端学习路线。通过网页演示展示作品，并分享了在学习过程中遇到迷茫状态的个人体验。

摘要由CSDN通过智能技术生成

⛵ 源码获取文末联系 ✈

Web前端开发技术
描述网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | 等网站的设计与制作 | HTML期末大学生网页设计作业

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>

<head>
  <meta charset="UTF-8" />
  <title>首页</title>
  <link href="css/main.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="css/font/iconfont.css" />
  <link rel="stylesheet" href="css/major.css" />
  <style>
    /* 轮播样式 */
    /* #region */
    .swiper {
     
      width: 1000px;
      height: 400px;
      margin: 0 auto;
      overflow: hidden;
      position: relative;
      margin-top: 65px;
    }

    .swiper>.lb {
     
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 400px;
      width: 100%;
    }

    .swiper>.lb:nth-child(1) {
     
      background-image: url('images/main/1.jpg');
    }

    .swiper>.lb:nth-child(2) {
     
      background-image: url('images/main/2.jpg');
    }

    .swiper>.lb:nth-child(3) {
     
      background-image: url('images/main/3.jpg');
    }

    .swiper>.lb_btn {
     
      width: 50px;
      height: 50px;
      position: absolute;
      z-index: 2;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100%;
    }

    .swiper>.l {
     
      left: 8px;
      background-image: url('images/icon/l.png');
    }

    .swiper>.r {
     
      right: 8px;
      background-image: url('images/icon/r.png');
    }

    .swiper>.lb_bottom {
     
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 25px;
    }

    .swiper>.lb_bottom>.lb_point {
     
      width: 80px;
      z-index: 4;
      height: 20px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper>.lb_bottom>.lb_point>span {
     
      display: inline-block

最低0.47元/天解锁文章

优质内容贡献

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
大一学生HTML5期末大作业——基于HTML+CSS制作中药主题实训素材

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

扫一扫

专栏目录