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

相关推荐
德育处主任12 分钟前
p5.js 掌握圆锥体 cone
前端·数据可视化·canvas
mazhenxiao14 分钟前
qiankunjs 微前端框架笔记
前端
无羡仙21 分钟前
事件流与事件委托:用冒泡机制优化前端性能
前端·javascript
秃头小傻蛋21 分钟前
Vue 项目中条件加载组件导致 CSS 样式丢失问题解决方案
前端·vue.js
CodeTransfer22 分钟前
今天给大家搬运的是利用发布-订阅模式对代码进行解耦
前端·javascript
睡不着先生22 分钟前
`text-wrap: balance` 实战指南:让多行标题自动排版更优美
css
阿邱吖23 分钟前
form.item接管受控组件
前端
韩劳模25 分钟前
基于vue-pdf实现PDF多页预览
前端
鹏多多26 分钟前
js中eval的用法风险与替代方案全面解析
前端·javascript
KGDragon26 分钟前
还在为 SVG 烦恼?我写了个 CLI 工具,一键打包,性能拉满!(已开源)
前端·svg