使用HTML制作简单的小米界面（部分）

以下为最终的效果图

需要实现的效果

最左边展示最新手机图片
右边并排展示销售的手机界面
每个块级元素并排
鼠标移动到块元素时出现阴影和向上弹起的效果

制作思路

使用HTML的div标签制作一个一级大盒子，实现整体大框架
在大框架中设置两个div标签，作为两个二级子盒子，分别放左边的图片以及右边的手机展示
在右边的div盒子中制作出八个放置手机展示的三级子盒子
在三级子盒子中插入图片以及文字
设置各个级别盒子的属性：宽、高、背景色、排版样式
实现鼠标移动到三级盒子上时产生阴影以及弹起效果

开始制作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小米界面</title><style><!--*号表示选中所有标签属性，margin、padding设置为0表示内外边距为0-->*{margin: 0;padding: 0;}/*body为网页可视部分，使用background设置背景色*/body{background-color: #f5f5f5;}/*.box选中一级盒子，设置宽度、高度、浮动、内边距使用了浮动，就可以不使用display：inline-block*/.box{width: 1234px;height: 628px;float: left;padding: 50px;}/*.box1设置左边盒子、宽、高、背景色、浮动*/.box1{width: 234px;height: 614px;background-color: black;float: left;}/*.box2设置左边盒子、宽、高、浮动*/.box2{width: 992px;height: 614px;float: left;}/*设置box3中box4的属性，list-style去除列表前面的小圆点box-sizing声明c3属性，调整内边距时不改变盒子大小text-align设置图片居中对齐*/.box3 .box4{list-style: none;width: 234px;height: 300px;background-color: white;float: left;box-sizing: border-box;text-align: center;margin: 0 0 14px 14px;}/*hover为伪类元素，效果为鼠标移动到块级元素时产生变化box-shadow 阴影属性 :水平阴影大小  垂直阴影大小  模糊距离  阴影尺寸 颜色  内inset /外 outset变换属性 transform:平移：translateX  translateY(100px)缩放: scale(0.5)倾斜: skew(-120deg)旋转：rotate(360deg)*/.box4:hover {box-shadow: 0 0 20px 0 gray;transform: translateY(-2px);}.box4 .text1{display: inline-block;width: 214px;height: 18px;font-size: 14px;text-align: center;font-family: 微软雅黑;}.box4 .text2{display: inline-block;width: 214px;height: 18px;margin: 0 10px 10px 10px;font-size: 12px;color: #b0b0b0;text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-family: 微软雅黑;}.box4 .text3{color:  #ff6700;text-align: center;margin: 0 10px 14px 10px;}</style>
</head>
<body>
<!--创建一级盒子，类名为box-->
<div class="box"><!--创建两个二级盒子，class分别为box1、box2--><div class="box1"><img src="data:images/xm.jpg" width="234px" height="614" alt=""></div><div class="box2"><!--在二级盒子box2中创建八个三级盒子，使用ul列表标签--><ul class="box3"><!--三级盒子中加入需要插入的图片以及文字，图片使用img标签，文字使用p标签--><li class="box4"><img src="data:images/download.jpg" width="160px" height="160px" alt=""><p class="text1">小米8 青春版 4G+16GB</p><p class="text2">潮流镜面渐变色,2400万自拍旗舰</p><p class="text3">1399元</p></li><li class="box4"><img src="data:images/download.jpg" width="160px" height="160px" alt=""><p class="text1">小米8 青春版 4G+16GB</p><p class="text2">潮流镜面渐变色，2400万自拍旗舰</p><p class="text3">1399元</p></li><li class="box4"><img src="data:images/download.jpg" width="160px" height="160px" alt=""><p class="text1">小米8 青春版 4G+16GB</p><p class="text2">潮流镜面渐变色，2400万自拍旗舰</p><p class="text3">1399元</p></li><li class="box4"><img src="data:images/download.jpg" width="160px" height="160px" alt=""><p class="text1">小米8 青春版 4G+16GB</p><p class="text2">潮流镜面渐变色，2400万自拍旗舰</p><p class="text3">1399元</p></li><li class="box4"><img src="data:images/download.jpg" width="160px" height="160px" alt=""><p class="text1">小米8 青春版 4G+16GB</p><p class="text2">潮流镜面渐变色，2400万自拍旗舰</p><p class="text3">1399元</p></li><li class="box4"><img src="data:images/download.jpg" width="160px" height="160px" alt=""><p class="text1">小米8 青春版 4G+16GB</p><p class="text2">潮流镜面渐变色，2400万自拍旗舰</p><p class="text3">1399元</p></li><li class="box4"><img src="data:images/download.jpg" width="160px" height="160px" alt=""><p class="text1">小米8 青春版 4G+16GB</p><p class="text2">潮流镜面渐变色，2400万自拍旗舰</p><p class="text3">1399元</p></li><li class="box4"><img src="data:images/download.jpg" width="160px" height="160px" alt=""><p class="text1">小米8 青春版 4G+16GB</p><p class="text2">潮流镜面渐变色，2400万自拍旗舰</p><p class="text3">1399元</p></li></ul></div>
</div>
</body>
</html>

此界面并未加链接，只能实现排版以及鼠标移动到手机块上产生阴影以及弹起的效果，可作为HTML的初学者练习熟悉一些基本操作。

使用HTML制作简单的小米界面（部分）相关推荐

php简单网页制作代码,用HTML和CSS以及JS制作简单的网页菜单界面的代码
这篇文章主要介绍了使用HTML+CSS+JS制作简单的网页菜单界面,这个ABROAD项目所使用的JavaScript部分代码非常简单,需要的朋友可以参考下写ABROAD项目用到了标签这个东东,其实标 ...
PyQt5制作一个简单的登录界面
最近在学习GUI设计,分享做的一些小项目. 这篇文我们讲一下如何制作一个简单的登录界面. 目录一.效果图二.简述制作过程: 三.源码及材料: 1.源码: 2.图片素材: 一.效果图如下: 二.简 ...
前端大作业-期末课程设计-小米有品网站制作（PC端界面+HTML5+CSS）
仿照小米有品官网制作的pc端界面,只用了HTML5和CSS,没有使用JS HTML5部分共计700多行代码,CSS部分共计1400多行,合计2100多行小米有品官网链接: https://www.x ...
html简单的登录界面制作
html简单的登录界面制作话不多说,老铁们直接拿代码去用吧. <!DOCTYPE html> <html><head><meta charset=" ...
C#连接数据库制作简单登录界面
目标:可视化的登录界面,可实现登录,注册,数据源为SQL server数据库,实现数据库表格内容的读取,写入 C#集成开发环境为visual studio2017 数据库为SQL server数据库 ...
python简单界面实现-python实现的简单窗口倒计时界面实例
本文实例讲述了python实现的简单窗口倒计时界面.分享给大家供大家参考.具体分析如下: 下面的代码通过Tkinter制作windows窗口界面,然后时间了一个简单的倒计时功能,代码可以直接运行 # ...
Android（安卓）一个简单的聊天界面的实现（eclipse实现）
这几天刚刚学习一下安卓的编程,尝试制作了一个简单的聊天界面(还没有实现网络等后续功能)软件界面如图.(使用eclipse实现) 当输入一些内容后,聊天界面可以下拉显示更多的聊天信息,如下图首先对这个 ...
python怎么抓取网页倒计时_python实现的简单窗口倒计时界面实例
本文实例讲述了python实现的简单窗口倒计时界面.分享给大家供大家参考.具体分析如下: 下面的代码通过Tkinter制作windows窗口界面,然后时间了一个简单的倒计时功能,代码可以直接运行 # ...
python简单程序实例-python实现的简单窗口倒计时界面实例
本文实例讲述了python实现的简单窗口倒计时界面.分享给大家供大家参考.具体分析如下: 下面的代码通过Tkinter制作windows窗口界面,然后时间了一个简单的倒计时功能,代码可以直接运行 # ...

使用HTML制作简单的小米界面（部分）

使用HTML制作简单的小米界面（部分）

以下为最终的效果图

需要实现的效果

制作思路

开始制作

使用HTML制作简单的小米界面（部分）相关推荐

最新文章

热门文章