前端三件套开发模版——产品介绍页面

今天有空,使用前端三件套html、css、js制作了一个非常简单的产品制作页面,与大家分享,希望可以满足大家应急的需求。本页面可以对产品进行“抢购”、对产品进行介绍,同时可以安排一张产品的高清大图,我也加入了页面的背景。

下面我们上具体流程。


HTML

首先是主体部分,我主要是用div盒子对页面的各个部分进行分割,在一层大的div当中潜逃两个小的div盒子,其中一个div中再次嵌套一个div进行文字介绍。具体的结构图如下:

看完大致结构和原理,我们就开始具体的开发与实践。我们用到的主体上面已经说过,主要用div进行完成,文字部分主要是用h系列的标签和p标签实现。图片直接使用img即可使用。需要注意的是我们需要加入id或class来方便后续css的设置。接下来上代码和具体效果图供大家参考:

<div class="container">  <div class="image-section">  <img src="imgimg.png" alt="内容" class="image">  <div class="image-info"><h2>&nbsp;xxx秒杀产品&nbsp;&nbsp;&nbsp;</h2><p id="miaosha">秒杀价:¥1000&nbsp;</p><p id="miaosha">正在秒杀;</p><p>总量:100</p><p>余量:20</p><p>开始抢货时间:2024.6.2 15:30</p> <p>结束抢货时间:2024.6.4 15:30</p><button class="large-btn">立即秒杀</button><br><button class="small-btn">返回上一页</button>  </div>  </div>  <div class="text-section"><h2>商品详情</h2><p>一款新推出的智能产品</p></div>  
</div>

PS:这里的效果已经加入了最终的CSS代码,并非最初的html所呈现的效果。最终css代码如何使用请听我娓娓道来。


CSS

CSS部分我们主要加入了对字体大小font-size、内外边距padding和margin、按钮button、div的背景色backgroundcolor、背景图backgroundimage的多重设置。同时我们也针对字体样式font-family进行了修改,为大家设置出一款还算好看的字体。

但是大家需要注意的是实际开发中我们需要尽可能多的使用%进行设置,而非使用px等设置,因为实际开发中我们的代码需要保证在多台电脑上得到的效果尽量一样,因此使用百分比等方式再适合不过。

我们的代码如下,大家使用后就可以得到如上图的代码:

<style>body, html {  margin: 0;  padding: 0;  width: 100%;  height: 100%;  font-family: Arial, sans-serif;  }  .container {  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-around;  height: 100vh;  }  .image-section {  display: flex;  align-items: center;  width: 100%;  max-width: 800px;  } .image {  max-width: 50%;  height: auto;  margin-right: 100px;}  .image-info {  margin-left: 20px;  }  .image-info h2 {  margin: 0 0 10px 0;background-color: #f0f0f0;padding: 10px;}.image-info p {  margin: 0;font-size: 20px;}  .large-btn, .small-btn {  margin-top: 10px;  padding: 10px 20px;  border: none;  cursor: pointer;  outline: none;  }  .large-btn {  font-size: 16px;  width: 100%;box-sizing: border-box;}  .small-btn {  font-size: 14px;  padding: 8px 16px; margin-left: auto; }  .text-section p {  max-width: 600px;  text-align: center;}.text-section {  max-width: 600px;  text-align: center;  background-color: #f2f2f2;   padding: 20px; margin-top: 20px; border-radius: 8px; padding-left: 30px;padding-right: 30px;}#productname{background-color: #f2f2f2;padding: 10px;}#miaosha{background-color: #f2f2f2;padding: 5px;}body{background-image: url("test.webp");background-size: cover;background-position: center;}.image-section{background-color: #f2f2f2;padding: 30px;}
</style>

JS

最后我们如果想要实现网页之间的跳转和购买等功能,我们需要对按钮设置一些js代码来完成。这里我们直接使用addEventListener即可实现页面跳转等功能,直接秒杀。我也在代码中給出一些注释,希望对大家有帮助:

<script>// 等待DOM加载完成  document.addEventListener('DOMContentLoaded', function() {  // 使用querySelector获取第一个class为small-btn的按钮  var smallBtn = document.querySelector('.small-btn');  // 为按钮添加点击事件监听器  smallBtn.addEventListener('click', function() {  // 改变当前窗口的URL,实现页面跳转  window.location.href = 'conductlist.html';  });  });document.addEventListener('DOMContentLoaded', function() {  // 使用querySelector获取第一个class为small-btn的按钮  var smallBtn = document.querySelector('.large-btn');  // 为按钮添加点击事件监听器  smallBtn.addEventListener('click', function() {  // 改变当前窗口的URL,实现页面跳转  window.location.href = 'sucess.html';  });  });</script>

将上述代码结合起来,我们就可以得到一个可以跳转页面的html网站了。希望对大家有所帮助,希望您也可以为我留下点赞、收藏和关注,这对我很重要,谢谢! 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/40327.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JAVA实现二分查找,斐波那契数列,深度优先搜索详情教程【包含代码】

本人详解 作者:王文峰,参加过 CSDN 2020年度博客之星,《Java王大师王天师》 公众号:JAVA开发王大师,专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生,期待你的关注和支持!本人外号:神秘小峯 山峯 转载说明:务必注明来源(注明:作者:王文峰…

react+ts+antd项目搭建

前言&#xff1a; 基于ts语言创建react项目&#xff0c;node版本是v16.14.2 一、 脚手架创建项目 全局安装 npm install -g creacte-react-app创建项目file-management&#xff0c;ts需要添加–template typescript npx create-react-app file-management --template typesc…

Ubuntu查看opencv版本c++

✗命令行中直接输入&#xff1a; pkg-config --modversion opencv✔命令行中直接输入&#xff1a; pkg-config --modversion opencv4注解&#xff1a;附上在markdown中打勾&#xff0c;对号和打叉。使用时将&和#之间的空格去掉&#xff0c;这里只是为了不让CSDN自动转换才…

Ubuntu20.04 c++程序 涉及opencv问题记录

头文件更改 默认的头文件引用是 #include <opencv2/core/core.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <opencv2/highgui/highgui.hpp>但是在ubuntu20中/usr/include中默认的是opencv4&#xff0c;他文件夹里面才是opencv2&#xff0c;需要…

vue3单个页面进行防抖节流

防抖 <template><button id"submitButton" ref"submitButton">GET</button> </template><script lang"ts" setup> import { ref, onMounted } from vue;// 防抖函数 function debounce(func: () > void, dela…

【mybatis】mybatis-plus中Wrapper(查询条件构造器)简介_常用方法

1、简介 MyBatis-Plus 是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。MyBatis-Plus 提供了强大的条件构造器&#xff08;Wrapper&#xff09;&#xff0c;用于构建复杂的 SQL 查询条件&#xff0c;使得我们…

沟通方法和技巧

0 Preface/Foreword 1 沟通对象 沟通维度&#xff1a; upward&#xff0c;向上沟通&#xff0c;直接上级downward&#xff0c;向下沟通&#xff0c;直接下级horizontal&#xff0c;横向沟通&#xff0c;同部门/跨部门同事 2 沟通方式&#xff08;5W2H&#xff09; 对于开会和…

小白尝试某程机票信息爬取

实训课需要机票数据集&#xff0c;网上没有&#xff0c;所以我选择爬取数据 此过程可谓经历的九九八十一难&#xff0c;也参考了不少大佬的文章&#xff0c;在此特别记录一下 弯路不多说&#xff0c;我直接讲成功的方法 找到请求url 通过控制台&#xff0c;最后确认下面的 …

在WordPress中获取10天之内的文章更新数

要在WordPress中获取10天之内的文章更新数&#xff0c;您可以使用以下代码片段。这段代码将显示在过去10天内更新的文章数量。 <?php // 获取当前时间戳 $now time();// 计算10天前的时间戳 $ten_days_ago $now - (10 * 24 * 60 * 60);// 设置查询参数 $args array(pos…

【Spring Boot AOP中切入表达式格式介绍】

文章目录 一、切入表达式简介二、切入表达式的语法1. 方法匹配符示例&#xff1a; 2. 类型匹配符示例&#xff1a; 一、切入表达式简介 切入表达式&#xff08;Pointcut Expression&#xff09;是AOP中定义切入点&#xff08;Pointcut&#xff09;的一种方式。它定义了在哪些连…

基于Java中的SSM框架实现物流管理系统项目【项目源码+论文说明】

基于Java中的SSM框架实现物流管理系统演示 摘要 企业的发展离不开物流的运输&#xff0c;在一个大型的企业中&#xff0c;商品的生产和建设&#xff0c;推广只是前期的一些工作&#xff0c;在后期的商品销售和物流方面的建立&#xff0c;才能让一个企业得到大力的发展。 企业…

基于Linux/ARM/单片机利用状态机对多个按键进行扫描实现短按或者长按

1&#xff09;Linux/ARM/单片机入门级按键扫描程序设计&#xff0c;分享给将要学习或者正在学习Linux/ARM/单片机开发的同学。 2&#xff09;内容属于原创&#xff0c;若转载&#xff0c;请说明出处。 3&#xff09;提供相关问题有偿答疑和支持。 学习Linux/ARM/单片机的同学…

docker部署简单的Kafka

文章目录 1. 拉取镜像2. 运行创建网络运行 ZooKeeper 容器运行 Kafka 容器 3. 简单的校验1. 检查容器状态2. 检查 ZooKeeper 日志3. 检查 Kafka 日志4. 使用 Kafka 命令行工具检查5. 创建和删除测试主题 1. 拉取镜像 选择一组兼容性好的版本。 docker pull bitnami/kafka:3.6…

Facebook:数字社交的引领者与创新者

自2004年诞生以来&#xff0c;Facebook从一个校园网络项目迅速成长为全球最大的社交媒体平台&#xff0c;彻底改变了我们与世界互动的方式。作为数字社交的引领者和创新者&#xff0c;Facebook不仅在技术层面上不断突破&#xff0c;也在社会和文化领域留下了深刻的印记。本文将…

vue2 + element三级菜单实现模板

需求&#xff1a; 需要一个含有三级菜单的结构模板&#xff0c;用于业务快速开发。 解决&#xff1a; sidebar.vue <template><el-menu :default-active"defaultActive" class"el-menu-vertical-demo" active-text-color"#ffd04b"&…

『大模型笔记』2024大模型AI工程师必备技能!

2024大模型AI工程师必备技能! 文章目录 一. 2024大模型AI工程师必备技能!1. 引言:理解如何在各种应用中使用大语言模型(LLM)2. 第1层:Question answering(Q&A)3. 第2层:Chatbot=Q&A+短期记忆(上下文知识)4. 第3层:RAG=Q&A+短期记忆(上下文知识)+长期记忆(外…

【论文解读】CVPR2024:DUSt3R: Geometric 3D Vision Made Easy

论文“”https://openaccess.thecvf.com/content/CVPR2024/papers/Wang_DUSt3R_Geometric_3D_Vision_Made_Easy_CVPR_2024_paper.pdf 代码&#xff1a;GitHub - naver/dust3r: DUSt3R: Geometric 3D Vision Made Easy DUSt3R是一种旨在简化几何3D视觉任务的新框架。作者着重于…

Docker的架构原理

例子可以想象成一个买手机的场景 clien可以想象 你个人 docker deamon &#xff1a;店员 images&#xff1a; 样机 regisitry&#xff1a; 手机仓库 container: 使用的手机 首先我要在店员买一个手机&#xff0c;店员发现是样机&#xff0c;但是仓库有&#xff0c;&…

【SpringBoot3】使用Jasypt加密数据库用户名、密码等敏感信息

一、使用步骤介绍 使用Jasypt&#xff08;Java Simplified Encryption&#xff09;进行数据加密和解密主要涉及几个步骤&#xff0c;包括引入依赖、配置加密密码、加密敏感信息、将加密信息存储到配置文件中&#xff0c;以及应用程序启动时自动解密。以下是详细的使用说明&…

11 docker安装redis

目录 安装redis 1. 配置redis配置文件redis.conf 1.1. 找到redis.conf文件 1.2. 配置文件 2. 启动容器 3. 测试redis-cli连接 4. 证明docker使用的是指定的配置文件 安装redis 1. 配置redis配置文件redis.conf 1.1. 找到redis.conf文件 宿主机创建目录/app/redis在/a…