html和css还原小米商城首页面|3

下一个盒子（三盒合一，从左至右）

左侧的盒子感觉有点复杂哦

可能涉及到：行内元素变块，块元素变行内，六个小盒子的浮动（测量尺寸）

加油加油！

插入图片以及超链接

分为六个盒子后进行浮动布局

修改字体颜色，取消下划线

解决之前的文本框问题

方法：增加盒子，单行文本框与按钮类型浮动布局

修改尺寸和间距

添加背景图片（包括hover效果）

最后为了提高还原度，对value进行修改

成品图：

代码

html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="11.css" />
</head><body><div id="row-1"><a href="#" class="toole">小米官网</a><span>|</span><a href="#">小米商城</a><span>|</span><a href="#">MIUI</a><span>|</span><a href="#">loT</a><span>|</span><a href="#">云服务</a><span>|</span><a href="#">天星科技</a><span>|</span><a href="#">有品</a><span>|</span><a href="#">小爱开发平台</a><span>|</span><a href="#">企业团购</a><span>|</span><a href="#">资质证照</a><span>|</span><a href="#">协议规则</a><span>|</span><a href="#">下载app</a><span>|</span><a href="#" class="toori">Select Location</a><span>|</span><a href="#">登录</a><span>|</span><a href="#">注册</a><span>|</span><a href="#">消息通知</a><a href="#" class="toori shopping">购物车(0)</a></div><div id="row-2"><div class="logo"></div><div class="types"><a href="#">Xiaomi手机</a><a href="#">Redmi手机</a><a href="#">电视</a><a href="#">笔记本</a><a href="#">平板</a><a href="#">家电</a><a href="#">路由器</a><a href="#">服务中心</a><a href="#">社区</a></div><div id="find"><input type="text" class="text" value="电脑"><input type="button" class="button" /></div></div><div id="area-1"><div class="right"></div><div class="left"><a href="#" id="ttop">手机<span class="two">></span></a><a href="#">电视<span class="two">></span></a><a href="#">家电<span class="two">></span></a><a href="#">笔记本 平板<span class="six">></span></a><a href="#">出行 穿戴<span class="four">></span></a><a href="#">耳机 音箱<span class="four">></span></a><a href="#">健康 儿童<span class="four">></span></a><a href="#">生活 箱包<span class="four">></span></a><a href="#">智能 路由器<span class="six">></span></a><a href="#" id="ffoot">电脑 配件<span class="four">></span></a></div></div><div id="area-2"><div id="anv"><div class="six-block"><a href="#"><img src="保障服务.png" alt="" class="tansp" /><br />保障服务</a></div><div class="six-block"><a href="#"><img src="自由购.png" alt="" class="tansp" /><br />企业团购</a></div><div class="six-block"><a href="#"><img src="F.png" alt="" class="tansp" /><br />F码通道</a></div><div class="six-block"><a href="#"><img src="米粉卡.png" alt="" class="tansp" /><br />米粉卡</a></div><div class="six-block"><a href="#"><img src="旧换新.png" alt="" class="tansp" /><br />以旧换新</a></div><div class="six-block"><a href="#"><img src="充值.png" alt="" class="tansp" /><br />话费充值</a></div></div><a class="phone1" href="#"><img src="3.png" alt="" style="width: 330px ;height: 212px;" /></a><a class="phone2" href="#"><img src="2.png" alt="" style="width: 330px ;height: 212px;" /></a><a class="phone3" href="#"><img src="1.png" alt="" style="width: 330px ;height: 212px;" /></a></div><div id="area-3"></div>
</body></html>

css

* {margin: 0 auto;
}#row-1 {width: 1536px;height: 49px;background-color: #333333;
}#row-2 {width: 1224px;height: 125px;background-color: white;
}.logo {height: 125px;width: 233px;background-image: url(lo.png);background-repeat: no-repeat;float: left;
}.types {height: 125px;width: 702px;float: left;
}#find {height: 125px;width: 289px;float: left;
}#find .text {height: 44px;width: 234px;margin-top: 37px;border: 1px solid #b0b0b0;outline: none;float: left;color: #5f5750;font-size: 15px;text-indent: 15px;
}#find .button {height: 48px;width: 48px;background-color: #fff;margin-top: 37px;background-image: url(白色放大镜.png);background-size: 47px;border: 1px solid #b0b0b0;border-left: 0;float: left;}#find .button:hover {background-image: url(放大镜2.png);
}.types a {color: #333333;text-decoration: none;font-size: 16px;line-height: 125px;margin-left: 13px;
}.types a:hover {color: #eb6515;
}#area-1 {height: 575px;width: 1224px;
}.left {height: 575px;width: 231px;float: left;background-color: #894645;
}.left a {color: white;font-size: 17px;text-indent: 34px;line-height: 51px;text-decoration: none;width: 231px;height: 51px;background-color: #894645;display: inline-block;
}.left a:hover {background-color: #eb6515;
}.left span {color: #fff;text-decoration: none;font-size: 21px;margin-right: 10px;
}.left span:hover {color: rgb(225, 224, 224);
}.left .two {margin-left: 125px;
}.left .four {margin-left: 86px;
}.left .six {margin-left: 69px;
}.left #ttop {margin-top: 32.5px;
}.right {height: 575px;width: 993px;float: right;background-color: #b81a17;background-image: url(大红.png);background-size: 993px;background-position: center;background-repeat: no-repeat;
}#area-2 {height: 212px;width: 1224px;margin-top: 16px;}.six-block {width: 78px;height: 106px;float: left;
}#anv {width: 234px;height: 100%;background-color: #5f5750;float: left;
}.phone1 {width: 330px;height: 100%;background-color: rgb(201, 153, 153);float: right;
}.phone2 {width: 330px;height: 100%;background-color: rgb(144, 110, 110);float: right;
}.phone3 {width: 330px;height: 100%;background-color: rgb(123, 93, 93);float: right;
}span {color: #363b42;margin-left: 7.2px;
}#row-1 a {color: #b0b0b0;text-decoration: none;font-size: 12px;line-height: 49px;
}#row-1 a:hover {color: white;
}#row-1 .toole {margin-left: 146px;
}#row-1 .toori {margin-right: 146px
}#row-1 .shopping {width: 93px;height: 49px;display: inline-block;text-align: center;background-color: #424242;margin-left: 18px;
}#row-1 .shopping:hover {background-color: #fff;color: #eb6515;
}#area-3 {height: 210px;width: 1224px;margin-top: 64px;background-color: black;background-image: url(最后.png);background-repeat: no-repeat;background-position: center;background-size: 1224px;
}.tansp {width: 32px;height: 32px;margin-top: 19px;margin-left: 5px;
}.six-block,
.six-block a {color: #c3c0be;text-decoration: none;text-align: center;
}.six-block a:hover {color: white;
}

写了好多。。。。。T-T

html和css还原小米商城首页面|3相关推荐

学好英语网html首页制作,HTML+CSS+JavaScript项目8 “学好英语网”首页面制作_0527_连蕊.pptx...
项目8 "学好英语网"首页面制作;;[任务8-1]认识对象;[任务8-1]知识储备;1.什么是对象在计算机世界中,不仅包括来自于客观世界的对象,还包含为解决问题而引入的抽象对象.例 ...
html+css仿制小米商城首页
一.首先是学习心得简介: 这是一个仅用css+html实现的页面,不过y页面也用css实现了一些精致的动态效果,比如老版本小米官网的logo滑动效果小米的二维码和购物车,导航栏延时下拉效果关于 ...
Java学习-14 CSS与CSS3美化页面及网页布局
Java学习-14 CSS与CSS3美化页面及网页布局 1. CSS简介什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素, ...
HTML+CSS+JavaScript制作登录页面_科幻后台登录界面html模板_科技感登录界面html模板
科幻后台登录界面html模板原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :蓝色科技风格后台登录框,科幻的网站后 ...
JS 和 CSS 是如何影响页面渲染的？
为什么script脚本要放在body标签的最后面? 这是面试的时候经常遇到的问题,但是很少听到有人能完整的回答出来.其实这个问题并不简单,它涉及到浏览器渲染方面的知识,搞懂了这一块对就能对性能优化有一 ...
HTML网页设计制作大作业(div+css) ~中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化)
HTML网页设计制作大作业(div+css) ~ 中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
韩顺平php可爱屋源码_韩顺平_php从入门到精通_视频教程_第20讲_仿sohu主页面布局_可爱屋首页面_学习笔记_源代码图解_PPT文档整理...
韩顺平_php从入门到精通_视频教程_第20讲_仿sohu首页面布局_可爱屋首页面_学习笔记_源代码图解_PPT文档整理对sohu页面的分析注释很重要经验:写一点,测试一点,这是一个很好的方法. ...
css中设置首字下沉效果,CSS如何实现首字下沉效果？
我们在开发 web 页面时,如果是涉及到文字段落的开发,需要对文字设置一些特殊样式以增强 web 页面美观,提升用户体验度.那么今天 w3cschool 小编来教大家 CSS 如何实现首字下沉效果. ...
html怎么编辑首行缩进,CSS如何设置首行缩进？
开发网页时,涉及到一段甚至多段文字的部分经常会把它设置为首行缩进 2 个字符,以优化页面,增强用户体验.那么这篇文章 W3Cschool 小编教你 CSS 如何设置首行缩进 . text-inde ...

html和css还原小米商城首页面|3

代码

html和css还原小米商城首页面|3相关推荐

最新文章

热门文章