HTML/CSS Xiaomi综合案例day 6.13-6.16

news2024/11/26 10:28:56

ok了家人们今天不做别的,今天浅做一个小米网站,话不多说看看怎么事

一.顶部

我们先看看代码

1,html

2,css代码

1.我们先消除浏览器自带的内外边距,添加一个总背景颜色为浅灰色,设置顶部盒子的大小,添加一个margin:0px auto;使它居中,

2.设置小米logo的大小以及位置,先让它向左浮动,再通过添加边距,到想要的位置,

3.设置a标签,设置字体大小,去除下划线,添加颜色,设置行高和盒子的高度一致,设置内边距15px。

4.添加a标签鼠标悬浮时的样式,

5.设置搜索框的大小,向左浮动,添加一个透明的边框,设置边距

6。设置按钮大小,向左浮动,添加一个透明的边框,添加背景图片,然后让图片居中

7,设置下面盒子的大小,居中

8,设置左边盒子的大小,向左浮动

9,设置a标签的样式,和顶部a标签样式差不多,

10,设置a标签样式里span标签向右浮动

11,设置a标签鼠标悬浮时的样式

12,右边盒子的大小,向左浮动

13,设置图片占有率

来我们看下效果

二,中部

 1.html

2,css

效果如下

整体都是按照这样写的,都差不多

看看整体吧代码太多了,

大概就是这样了,ok了家人们明天见

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

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

相关文章

【电脑小白】装机从认识电脑部件开始

前言 在 B 站上刷到了一个很牛逼的电脑装机视频,很适合电脑小白学习,故用文本记录下。 推荐对组装台式电脑有兴趣的小伙伴都去看看这个视频: 原视频链接:【装机教程】全网最好的装机教程,没有之一_哔哩哔哩_bilibil…

JVM-GC-常用调优命令和GC参数

定位问题常用命令 top:查看内存/CPU占用情况top -Hp pid: 查看进程内线程情况jsp:查看java进程情况jstack 线程pid:查看进程内线程信息,一般查看线程状态,判断是否死锁。重点观察:WAITING、BLOCKED的线程,另外查看wait…

【网络安全】网络安全威胁及途径

1、网络安全威胁的种类及途径 (1)网络安全威胁的主要类型 网络安全面临的威胁和隐患种类繁多,主要包括人为因素、网络系统及数据资源和运行环境等影响。网络安全威胁主要表现为:黑客入侵、非授权访问、窃听、假冒合法用户、病毒…

【读博日记】拓扑结构(待修正)

Topology 拓扑学 内容来源于互联网,还在甄别中——20240617 拓扑结构指把实体抽象成与其形状大小无关的点,把连接实体的线路抽象成线,再研究这些电线之间的关系。 所谓相似的拓扑结构: 例如一个圆环变成正方形、长方形、三角形…

基 CanMV 的 C 开发环境搭建

不论是使用 CanMV 提供的基于 C 语言和 FreeRTOS 的应用开发方式开发应用程序或是编译 CanMV 固件,都需要搭建基于 CanMV 的 C 开发环境,用于编译 CanMV 源码。 1. 开发环境搭建说明 CanMV 提供了基于 C 语言和 FreeRTOS 的应用开发…

读AI新生:破解人机共存密码笔记04计算的极限

1. 计算的极限 1.1. 光靠速度是无法给我们带来人工智能的 1.1.1. 在速度更快的计算机上运行糟糕的算法并不会使算法变得更优秀,这只意味着你会更快地得到错误的答案 1.1.2. 数据越多,错误答案出现的机会就越大 1.…

EE trade:现货黄金杠杆比例的计算方法

现货黄金杠杆交易是一种利用保证金进行交易的方式,允许投资者用较少的资金控制较大的交易量,从而放大收益或损失。杠杆比例的计算方法相对简单,主要取决于交易所需的保证金和实际交易金额之间的关系。 杠杆比例的计算公式 杠杆比例 实际交…

使用插件永久解决IDEA使用Shift+F10失效问题(不需要换老版本输入法)

在日常编程中,使用快捷键可以大大提高开发效率。然而,有时候我们会遇到IDEA 中,ShiftF10 快捷键失效。这个蛋疼的问题现在终于可以得到解决,上个月在逛V2EX的时候看见一位大佬做的插件。 大佬链接:https://www.v2ex.c…

物联网技术-第4章物联网通信技术-4.1计算机网络

目录 1.1计算机网络拓扑与组成 (1)全连通式网络 (2)星型网 (3)环形网 (4)总线网 (5)不规则型网 1.2数据交换类型 (1)电路交换网 &…

STM32单片机DMA存储器详解

文章目录 1. DMA概述 2. 存储器映像 3. DMA框架图 4. DMA请求 5. 数据宽度与对齐 6. DMA数据转运 7. ADC扫描模式和DMA 8. 代码示例 1. DMA概述 DMA(Direct Memory Access)可以直接访问STM32内部的存储器,DMA是一种技术,…

C++ | Leetcode C++题解之第162题寻找峰值

题目&#xff1a; 题解&#xff1a; class Solution { public:int findPeakElement(vector<int>& nums) {int n nums.size();// 辅助函数&#xff0c;输入下标 i&#xff0c;返回一个二元组 (0/1, nums[i])// 方便处理 nums[-1] 以及 nums[n] 的边界情况auto get …

【漏洞复现】泛微OA E-Cology ln.FileDownload 任意文件读取漏洞

免责声明&#xff1a; 本文内容旨在提供有关特定漏洞或安全漏洞的信息&#xff0c;以帮助用户更好地了解可能存在的风险。公布此类信息的目的在于促进网络安全意识和技术进步&#xff0c;并非出于任何恶意目的。阅读者应该明白&#xff0c;在利用本文提到的漏洞信息或进行相关测…

Debian12的#!bash #!/bin/bash #!/bin/env bash #!/usr/bin/bash #!/usr/bin/env bash

bash脚本开头可写成 #!/bin/bash , #!/bin/env bash , #!/usr/bin/bash , #!/usr/bin/env bash #!/bin/bash , #!/usr/bin/bash#!/bin/env bash , #!/usr/bin/env bash Debian12的 /bin 是 /usr/bin 的软链接, /sbin 是 /usr/sbin 的软链接, (Debian12默认没有ll命令,用的ls …

网络安全:数据库安全性

文章目录 网络安全&#xff1a;数据库安全性引言数据库安全性的重要性常见的数据库安全威胁数据库安全性的最佳实践数据加密访问控制审计和监控 结语 网络安全&#xff1a;数据库安全性 引言 在前两篇文章中&#xff0c;我们讨论了SQL注入的概念和防范措施。本篇文章将聚焦于…

5216万!国内自动化巨头,拟剥离旗下子业务

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 新书《智能物流系统构成与技术实践》 近日&#xff0c;中控技术发布公告称&#xff0c;为进一步优化资产结构和产业布局&#xff0c;提升公司核心竞争力&#xff0c;公司拟将其全资子…

Python | Leetcode Python题解之第162题寻找峰值

题目&#xff1a; 题解&#xff1a; class Solution:def findPeakElement(self, nums: List[int]) -> int:n len(nums)# 辅助函数&#xff0c;输入下标 i&#xff0c;返回 nums[i] 的值# 方便处理 nums[-1] 以及 nums[n] 的边界情况def get(i: int) -> int:if i -1 or…

canvas实现画布拖拽效果 适配Uniapp和Vue (开箱即用)

需求:我司是做AIGC项目最近和地铁项目有关需要实现海报效果图&#xff0c;并且需要使用画布拖拽和修改上传删除等等功能 当时连续加班花了10个工作日搓出来 实现挺简单的但是Canvas数据处理还是挺麻烦的 大概功能如图下 首先我们需要引入Fabric.js 这个库封装好了原生的Canva…

如何实现element表格合并行?

前两天我一个朋友咨询我element表格合并行的问题,他研究了很久,已经开始怀疑是不是element UI出现了bug,然后跟我一阵沟通,最终解决了问题,他的问题在于他把事情想复杂了,接下来我们一起来看一下这个经典“案例”,很多人真的很有可能走入这个误区,当然老鸟就不用看了,…

Pyqt QCustomPlot 简介、安装与实用代码示例(二)

目录 前言实用代码示例彩色图演示散点像素图演示实时数据演示多轴演示对数轴演示 结语 所有文章除特别声明外&#xff0c;均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 nixgnauhcuy’s blog&#xff01; 如需转载&#xff0c;请标明出处&#xff01; 完整代码我已经上传到…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 内存访问热度分析(100分) - 三语言AC题解(Python/Java/Cpp)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; &#x1f…