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

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了家人们明天见

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

CentOS7的#!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 CentOS7的 /bin 是 /usr/bin 的软链接, /sbin 是 /usr/sbin 的软链接, [root3050 ~]# ll /bin lrwxrwxrw…

IntelliJ IDEA 2024.1安装_idea2024.1版本激 活 码分享

一:IDEA官方下载 ①如题,先到IDEA官方下载,简简单单 ②IDEA官方:IntelliJ IDEA – the Leading Java and Kotlin IDE 二:获取脚本 https://www.yuque.com/fengye-cyk1s/dxii3c/orbl5ruhvm7m3s4g 🌟获取完…

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 …

理解CA-IS3050G高速CAN收发器的CANH和CANL的电压

CA-IS3050G高速CAN收发器符合ISO 11898-2物理层标准。 1、CANH和CANL的电压之和为5V&#xff0c;下图是CA-IS3050G的高速CAN收发器参数&#xff0c;分析如下&#xff1a; 1&#xff09;、总线输出显性电压 2.75V < VCANH <4.5V&#xff0c;负载为60Ω&#xff0c;CANH…

【Linux】进程_8

文章目录 五、进程10. 进程等待阻塞等待和非阻塞等待 11. 进程程序替换 未完待续 五、进程 10. 进程等待 上一篇我们知道了 wait 和 waitpid 函数都有一个 status 参数&#xff0c;这个参数是什么呢&#xff1f;这个参数其实就是进程的返回结果&#xff0c;当子进程结束的时候…

【考研数学】如何保证进度不掉队?暑假强化保姆级规划

数一125学长前来解答&#xff01;一句话&#xff0c;跟对老师&#xff0c;抓基础&#xff0c;有计划的进行复习才是关键&#xff01; 数学基础非常重要&#xff0c;包括高等数学、线性代数和概率论等基础知识点。要确保对这些基础知识有扎实的掌握。 按照教材的顺序&#xff…

Go - 1.Go 语言安装

目录 一.引言 二.下载与安装 1.下载 PKG 2.安装 PKG 三.验证 一.引言 最近开始从头学习 Go 语言&#xff0c;趁着这个机会把学习当中遇到的坑进行整理。学习前首先下载 Go 的安装包。 二.下载与安装 1.下载 PKG 官网地址: All releases - The Go Programming Language …

如何实现element表格合并行?

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

centos7 xtrabackup mysql 基本测试(1)---虚拟机环境安装

centos7 xtrabackup mysql 基本测试&#xff08;1&#xff09;—虚拟机环境安装 win10 建立目录 G:\centos7_mini_1810_server_test\ 下载 centos7 安装文件 CentOS-7-x86_64-Minimal-1810.iso CentOS7_64_mini_1810_server_test G:\centos7_mini_1810_server_test 开…

期末模拟GGG--求逆序数

求逆序数 #include <stdio.h> # include <math.h>unsigned int reverse( unsigned int number );int main() {unsigned int n;scanf("%u", &n);printf("%u\n", reverse(n));return 0; } 函数实现&#xff1a; unsigned int reverse( unsi…

uniapp 微信小程序更改轮播图指示点

仅微信小程序有效 /* #ifdef MP-WEIXIN */// 默认指示点样式wx-swiper .wx-swiper-dot {position: relative;background-color: #ffffff;width: 28rpx;border-radius: 10rpx;height: 8rpx;opacity: 0.4;}// 当前选中样式wx-swiper .wx-swiper-dot-active {background-color: #f…

【 ARMv8/ARMv9 硬件加速系列 3.5.1 -- SVE 谓词寄存器有多少位?】

文章目录 SVE 谓词寄存器(predicate registers)简介SVE 谓词寄存器的位数SVE 谓词寄存器对向量寄存器的控制SVE 谓词寄存器位数计算SVE 谓词寄存器小结SVE 谓词寄存器(predicate registers)简介 ARMv9的Scalable Vector Extension (SVE) 引入了谓词寄存器(Predicate Register…

Vitis HLS 学习笔记--函数例化(Function Instantiation)

目录 1. 简介 2. 功能分析 3. 示例分析 3.1 不使用 FUNCTION_INSTANTIATE 3.2 使用 FUNCTION_INSTANTIATE 4. 总结 1. 简介 函数例化&#xff08;Function Instantiation&#xff09;是 Vitis HLS 中的一个高级优化技术。它允许开发者在保持函数层次结构的同时&#xff…

wsl2平台鸿蒙全仓docker编译环境快速创建方法

文章目录 1 文章适用范围&#xff1a;2 WSL环境安装3 镜像迁移非C盘4 Docker环境准备4.1 docker用户组和用户创建4.2 Docker环境配置4.2.1 Ubuntu下安装docker工具4.2.2 鸿蒙Docker环境安装4.2.3 鸿蒙全仓代码拉取编译 5 参考文献6 FAQ6.1 缺头文件xcrusor/xcursor.h6.2 缺头文…

多叉树的DFS深度优先遍历,回溯法的基础算法之一

一、前言 多叉树一般用于解决回溯问题。 想必大家都学过二叉树&#xff0c;以及二叉树的深度优先遍历和广度优先遍历&#xff0c;我们思考&#xff1a;能不能将二叉树的DFS转化为多叉树的DFS&#xff1f; 二、多叉树的结构 多叉树的本质&#xff0c;就是一棵普通的树&#x…

六、Nginx-正向代理和反向代理

目录 一、正向代理 1、参数详解 2、常用变量详解 3、配置示例 二、反向代理 三、 Nginx的安全控制 1、如何使用SSL对流量进行加密 2、nginx添加SSL的支持 3、 Nginx的SSL相关指令 &#xff08;1&#xff09;ssl &#xff08;2&#xff09;ssl_certificate &#xff0…

Tuxera NTFS与Paragon NTFS:两款NTFS驱动软件的深度对比 tuxera和paragon NTFS哪个好

在Mac上使用NTFS格式的磁盘&#xff0c;通常需要借助第三方的驱动软件。其中&#xff0c;Tuxera NTFS和Paragon NTFS是两款备受欢迎的选择。虽然它们的基本功能相似&#xff0c;但在细节和使用体验上却有所不同。本文将带你深入了解这两款软件的差异&#xff0c;帮助你做出更明…

【python】OpenCV—Segmentation

文章目录 cv2.kmeans牛刀小试 cv2.kmeans cv2.kmeans 是 OpenCV 库中用于执行 K-Means 聚类算法的函数。以下是根据参考文章整理的 cv2.kmeans 函数的中文文档&#xff1a; 一、函数功能 cv2.kmeans 用于执行 K-Means 聚类算法&#xff0c;将一组数据点划分到 K 个簇中&…

响应式高端网站模板源码图库素材 资源下载平台源码

源码介绍 亲测可用&#xff0c;可用于做娱乐网资源网&#xff0c;功能非常的齐全无任何加密也无任何后门&#xff01;响应式高端网站模板源码图库素材 资源下载平台源码&#xff08;可运营&#xff09; 页面很美观&#xff0c;堪比大型网站的美工&#xff0c;而且页面做的也很…

Python将字符串用特定字符分割并前面加序号

Python将字符串用特定字符分割并前面加序号 Python将字符串用特定字符分割并前面加序号&#xff0c;今天项目中就遇到&#xff0c;看着不难&#xff0c;得花点时间搞出来急用啊&#xff0c;在网上找了一圈&#xff0c;没发现有完整流程的文章。所以就搞出来并写了这个文章。仅…