【Web前端实操19】商城官网_分析与顶部广告

news2024/12/25 0:01:15

本次实操主要是借用小米之前的网站来进行参考,达成网站静态页面开发的目的,而新学者想要一次性直接开发整个网站,肯定会很懵圈,因此,这个商城官网我会一部分一部分地进行拆分来写,最后合成整个界面。

本次想要实现的效果图如下:

当然了,我们并不是实现整个界面,而是要实现顶部广告的效果就可,如果对这部分不明白的,也可以看我的博客【Web前端实操18】粘性定位——即固定顶层内容,可以继续滚动,但是顶层内容固定,不随着一起滚动

看了之后会对我们整个官方网站开发有着更深的理解。

代码如下:
reset.css:
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td
{margin: 0;padding: 0;}
body{text-align: center;font-family: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;}
li{ list-style: none;}
a{text-decoration: none;}
img{border: none;}
mi.css:
/* 头部广告条样式开始 
定义和浏览器一样宽的宽度,定义高度,如有溢出进行隐藏
利用相对定位*/
.header{
    width: 100%;
    height: 120px;
    overflow: hidden;
    position: relative;
}
/* 定义高度,使用绝对定位,居于中间 */
.header img{
    height: 120px;
    /* 图片,以中间开始渲染 */
    position: absolute;
    margin: 0 auto ;
    /* translateX () 函数表示在二维平面上水平方向移动元素 
    即向左平移50%的距离*/
    transform: translateX(-50%);
}
/* 头部广告条样式结束 */
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城官网_分析与顶部广告</title>
    <!-- 全局样式基本上所有文档都需要 
    正式开始开发网站的话就不能写内联样式的,需要使用外接,利用链接引入-->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/mi.css">
</head>
<body>
    <!-- 头部广告条开始 -->
    <div class="header">
        <a href="#">
            <img src="img/top.jpg" alt="顶部广告条">
        </a>
    </div>
    <!-- 头部广告条结束 -->
</body>
</html> 
实现效果:

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

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

相关文章

使用机器学习算法检测交易中的异常行为

交易中的异常检测意味着识别交易或相关活动中的异常或意外模式。这些模式被称为异常或异常值&#xff0c;明显偏离预期规范&#xff0c;可能表明存在不规则或欺诈行为。 异常检测在各种业务中发挥着至关重要的作用&#xff0c;尤其是那些涉及金融交易、在线活动和安全敏感操作…

如何实现无公网ip远程SSH连接家中本地的树莓派

文章目录 如何通过 SSH 连接到树莓派步骤1. 在 Raspberry Pi 上启用 SSH步骤2. 查找树莓派的 IP 地址步骤3. SSH 到你的树莓派步骤 4. 在任何地点访问家中的树莓派4.1 安装 Cpolar4.2 cpolar进行token认证4.3 配置cpolar服务开机自启动4.4 查看映射到公网的隧道地址4.5 ssh公网…

【前端】快速掌握CSS-flex布局

文章目录 一、标准流二、浮动1. 基本使用2. 产品区域布局(1) HTML标签(2) CSS样式 3. 清除浮动(1) 场景搭建(2) 额外标签法(3) 单伪元素法(4) 双伪元素法(5) overflow法 三、Flex布局1. Flex组成2. 主轴对齐方式3. 侧轴对齐方式4. 修改主轴方向5. 弹性伸缩比6. 弹性盒子换行7. …

手机壳也能散热了?

作为一个玩了6年的王者荣耀玩家&#xff0c;手机发热真的很影响游戏体验&#xff01;&#xff01;游戏掉帧&#xff0c;性能下降很恼人&#xff0c;试过好几个散热工具&#xff0c;实际效果都不太好&#xff5e; 自从入了Mate 60之后&#xff0c;看着这款微泵液冷壳毫无犹豫第…

day35WEB 攻防-通用漏洞XSS 跨站反射存储DOMBeef-XSS

目录 一&#xff0c;XSS 跨站-原理&分类&手法&探针 1、原理 2、分类 3、危害 二&#xff0c;反射型XSS 1&#xff0c;案例演示 三&#xff0c;存储型XSS 1&#xff0c;案例演示 四&#xff0c;DOM 型XSS 五&#xff0c;XSS 利用环境-XSS 平台&Beef-XS…

如何使用Docker部署火狐浏览器并实现无公网ip远程访问

文章目录 1. 部署Firefox2. 本地访问Firefox3. Linux安装Cpolar4. 配置Firefox公网地址5. 远程访问Firefox6. 固定Firefox公网地址7. 固定地址访问Firefox Firefox是一款免费开源的网页浏览器&#xff0c;由Mozilla基金会开发和维护。它是第一个成功挑战微软Internet Explorer浏…

【Linux】动态库和静态库——动态库和静态库的打包和使用、gcc编译、拷贝到系统默认的路径、建立软连接

文章目录 动态库和静态库1.静态库和动态库的介绍2.静态库的打包和使用2.1生成静态库2.2使用静态库的三种方式2.2.1gcc编译2.2.2拷贝到系统默认的路径2.2.3建立软连接 3.动态库的打包和使用3.1生成动态库3.2使用动态库3.3解决加载不到动态库的方法 动态库和静态库 1.静态库和动…

“坦克大战”项目设计文档

「坦克大战」项目的设计文档 功能设计 游戏部分 ​ 在存在 障碍物 的地图上&#xff0c;玩家需要操作一辆绿色的坦克与敌对的灰色坦克作战。 坦克 以及其发射的 炮弹 均会被障碍物所阻挡。玩家用键盘上的 wasd按键 控制坦克移动&#xff0c;用 鼠标 控制炮弹发射方向&#x…

删除倒数第N个结点---链表Oj

https://leetcode.cn/problems/remove-nth-node-from-end-of-list/description/?envType=study-plan-v2&envId=top-100-liked 1、常规解法 删除倒数第N个结点,那就是删除整数第(len - N + 1)个结点,我们只需要找到第len-N个结点,让它的next指向倒数第N个结点…

赛氪荣获“2023天津高新技术企业大会支持单位”

1月23日上午&#xff0c;2023天津市高新技术企业大会新闻发布会在天开高教科技园核心区综合服务中心召开&#xff0c;市高企协以及来自高校、企业、社会组织等80余人现场参会。 大会组委会秘书长张博航介绍到&#xff1a;“本次大会将实现自开办以来的多个首次&#xff0c;首次…

【刷题】 leetcode 面试题 08.05.递归乘法

递归乘法 1 题目描述2 思路一&#xff08;返璞归真版&#xff09;3 思路二&#xff08;二进制乘法器版&#xff09;4 思路三&#xff08;变态版&#xff09;Thanks♪(&#xff65;ω&#xff65;)&#xff89;谢谢阅读下一篇文章见&#xff01;&#xff01;&#xff01; 1 题目…

CTF CRYPTO 密码学-7

题目名称&#xff1a;敲击 题目描述&#xff1a; 让我们回到最开始的地方 0110011001101100011000010110011101111011011000110110010100110011011001010011010100110000001100100110001100101101001101000011100001100011001110010010110100110100011001000011010100110000…

2024年第04周农产品价格报告

一、摘要 农产品价格监测主要涉及对畜禽类产品、水产品、蔬菜类产品、水果类产品的价格&#xff0c;以周为单位&#xff0c;进行变化情况的数据监测。其中&#xff0c;蔬菜类产品共18种&#xff0c;分别为大白菜、西红柿、黄瓜、青椒、芹菜、土豆、白萝卜、茄子、豆角、胡萝卜…

论文精读--BERT

不像视觉领域&#xff0c;在Bert出现之前的nlp领域还没有一个深的网络&#xff0c;使得能在大数据集上训练一个深的神经网络&#xff0c;并应用到很多nlp的任务上 Abstract We introduce a new language representation model called BERT, which stands for Bidirectional En…

IDEA中git的使用和代码对比神器Beyond Compare

和多同学idea配置好了&#xff0c;但是使用却不知道怎么使用。 我这里说说idea中使用的几招常用操作。如&#xff1a;提交&#xff0c;拉取&#xff0c;推送&#xff0c;合并&#xff0c;取消合并&#xff0c;撤回本地提交。 以及一些刚接触idea使用git的怕把公司代码搞砸了的同…

遗传算法改进leach协议(附MATLAB代码)

LEACH&#xff08;低能量自适应聚簇层次&#xff09;协议是无线传感器网络中最早的、最具有影响力的分簇协议之一。它通过随机选举一些传感器节点作为簇头&#xff0c;其他节点加入其中一个簇头组成一个簇&#xff0c;然后簇头负责汇聚数据并将数据发送给基站&#xff0c;从而达…

UE4运用C++和框架开发坦克大战教程笔记(十五)(第46~48集)

UE4运用C和框架开发坦克大战教程笔记&#xff08;十五&#xff09;&#xff08;第46~48集&#xff09; 46. 批量加载 UClass 功能测试批量加载多个同类 UClass 资源 47. 创建单个资源对象测试加载并创建单个 UClass 资源对象 48. 创建同类资源对象 46. 批量加载 UClass 功能 逻…

【HTML 基础】元素和标签

文章目录 1. <p> - 段落标签2. <h1> - <h6> - 标题标签3. <a> - 超链接标签4. <img> - 图片标签5. <ul>, <ol>, <li> - 列表标签无序列表有序列表 总结 HTML&#xff08;Hypertext Markup Language&#xff09;是构建 Web 页面…

Prometheus 监控系统的初步了解与系统搭建

目录 目录 目录 前言 Prometheus的相关知识 Prometheus特点 Prometheus的存储引擎&#xff1a;TSDB Prometheus的组件 1.核心组件&#xff1a;prometheus server Prometheus server又分为三个部分&#xff1a; 2.exports 3.client Library 4.cadvisor 5.blackbox-ex…

二维数组的学习

前言 在前面我们学习了一维数组&#xff0c;但是有的问题需要用二位数组来解决。 二维数组常称为矩阵&#xff0c;把二维数组写成行和列的排列形式&#xff0c;可以有助于形象化的理解二维数组的逻辑结构。 一、二维数组的定义 二维数组定义的一般格式&#xff1a; 数据类型 数…