admin管理员组文章数量:1568306
刚学完html 和 css 自己尝试写了个小米官网首页的静态页面,不包含js部分(还在学)
效果如下:
问题总结:
- 页面资源和布局尺寸皆是从原网站扣下来的(并非自己测量)
- 类命名较少,基本通过各种元素后代选择器,伪类选择器等来书写样式
- css代码量冗余度很高,不会那种可复用css单独提出来写(哪些样式会被复用,写的时候想不到)
就介于上面几点来说, 总感觉自己不是真正的会写html和css(脑子里没有模型)
html代码(没写注释)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="./favicon.ico" />
<link rel="stylesheet" href="css/index.css" />
<title>小米商城</title>
</head>
<body>
<div class="top_bg">
<a href="#"></a>
</div>
<div class="nav">
<div class="nav_nav w">
<div class="nav_nav_left">
<ul>
<li><a href="#">小米商城</a><span>|</span></li>
<li><a href="#">MIUI</a><span>|</span></li>
<li><a href="#">loT</a><span>|</span></li>
<li><a href="#">云服务</a><span>|</span></li>
<li><a href="#">天星数科</a><span>|</span></li>
<li><a href="#">有品</a><span>|</span></li>
<li><a href="#">小爱开放平台</a><span>|</span></li>
<li><a href="#">企业团购</a><span>|</span></li>
<li><a href="#">资质证照</a><span>|</span></li>
<li><a href="#">协议规则</a><span>|</span></li>
<li><a href="#">下载app</a><span>|</span></li>
<li><a href="#">智能生活</a><span>|</span></li>
<li><a href="#">Select Location</a></li>
</ul>
</div>
<div class="nav_nav_right">
<ul>
<li class="gouwuche">
<a href="#" class="gwc">购物车 (0)</a>
<div class="pop_window">购物车中还没有商品, 赶紧选购吧!</div>
</li>
<li><a href="#">消息通知</a></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="#">登录</a><span>|</span></li>
</ul>
</div>
</div>
</div>
<div class="logo">
<div class="logo_nav w">
<div class="logo_png">
<a href="#" class="logo_a"></a>
</div>
<div class="logo_nav_c">
<ul>
<li><a href="#">小米手机</a></li>
<li><a href="#">Redmi红米</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">笔记本</a></li>
<li><a href="#">家电</a></li>
<li><a href="#">路由器</a></li>
<li><a href="#">智能硬件</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>
<div class="logo_search">
<form action="#">
<input
type="search"
name=""
id=""
placeholder="手机"
autocomplete="off"
/>
<input type="submit" value="" />
</form>
</div>
<div class="pop_nav"></div>
</div>
</div>
<div class="banner w">
<div class="banner_nav">
<ul>
<li><a href="#">手机 电话卡</a></li>
<li><a href="#">电视 盒子</a></li>
<li><a href="#">笔记本 显示器</a></li>
<li><a href="#">家电 插线板</a></li>
<li><a href="#">出行 穿戴</a></li>
<li><a href="#">智能 路由器</a></li>
<li><a href="#">电源 配件</a></li>
<li><a href="#">健康 儿童</a></li>
<li><a href="#">耳机 音箱</a></li>
<li><a href="#">生活箱包 电话卡</a></li>
</ul>
</div>
<div class="banner_image">
<a href="#">
<img src="images/note9.webp" alt="图片加载失败" />
</a>
<div class="left"></div>
<div class="right"></div>
<ul class="dian">
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
</ul>
</div>
</div>
<div class="cp">
<div class="chanping w">
<div class="home_list">
<ul>
<li>
<a href=""><img src="images/小米秒杀.png " alt="" />小米秒杀</a>
</li>
<li>
<a href=""><img src="images/企业团购.png " alt="" />企业团购</a>
</li>
<li>
<a href=""><img src="images/F码通道.png " alt="" />F码通道</a>
</li>
<li>
<a href=""><img src="images/米粉卡.png " alt="" />米粉卡</a>
</li>
<li>
<a href=""><img src="images/以旧换新.png " alt="" />以旧换新</a>
</li>
<li>
<a href=""><img src="images/话费充值.png " alt="" />话费充值</a>
</li>
</ul>
</div>
<div class="chanping_banner">
<ul>
<li>
<a href="#"><img src="images/K30.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/10X.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/手表.jpg" alt="" /></a>
</li>
</ul>
</div>
</div>
</div>
<div class="miaosha">
<div class="xiaomimiaosha w">
<div class="miaosha_text">小米秒杀</div>
<div class="miaosha_img">
<ul>
<li>
<div>
<p>22:00 场</p>
<img src="images/闪电.jpg" alt="" />
<p>距离结束还有</p>
<div>
<span>00</span><i>:</i><span>00</span><i>:</i><span>00</span>
</div>
</div>
</li>
<li>
<a href="#">
<div>
<img src="images/手表.webp" alt="" />
</div>
<h3>小米手表</h3>
<p>超长续航</p>
<p>
<span>678元</span>
<span>999元</span>
</p>
</a>
</li>
<li>
<a href="#">
<div>
<img src="images/电视.webp" alt="" />
</div>
<h3>只能电视你的最爱</h3>
<p>超高清离子屏幕</p>
<p>
<span>1678元</span>
<span>1999元</span>
</p>
</a>
</li>
<li>
<a href="#">
<div>
<img src="images/笔记本.webp" alt="" />
</div>
<h3>小米笔记本</h3>
<p>超强性能,畅玩3A打坐</p>
<p>
<span>3678元</span>
<span>3999元</span>
</p>
</a>
</li>
<li>
<a href="#">
<div>
<img src="images/扫地机.webp" alt="" />
</div>
<h3>扫地机器人</h3>
<p>360°无死角清扫</p>
<p>
<span>2678元</span>
<span>2999元</span>
</p>
</a>
</li>
</ul>
</div>
</div>
<div class="note9 w">
<a href=""
><img src="images/a59db7dac2804ee2b5c7be1b02b3770e.webp" alt=""
/></a>
</div>
<div class="phone w">
<div class="mi-phone-hd">
<h3>手机</h3>
<a href="#">查看全部 <span></span></a>
</div>
<div class="mi_class">
<ul>
<li class="mi11">
<a href="#">
<img src="images/mi11.webp" alt="" />
</a>
</li>
<li>
<a href="">
<div class="phone_img">
<img src="/images/小米11.webp" alt="" />
</div>
<h3>小米11</h3>
<p>骁龙888 | 2K四曲面屏</p>
<p>3999元起</p>
</a>
</li>
<li>
<a href="">
<div class="phone_img">
<img src="/images/小米11.webp" alt="" />
</div>
<h3>小米11</h3>
<p>骁龙888 | 2K四曲面屏</p>
<p>3999元起</p>
</a>
</li>
<li>
<a href="">
<div class="phone_img">
<img src="/images/小米11.webp" alt="" />
</div>
<h3>小米11</h3>
<p>骁龙888 | 2K四曲面屏</p>
<p>3999元起</p>
</a>
</li>
<li>
<a href="">
<div class="phone_img">
<img src="/images/小米11.webp" alt="" />
</div>
<h3>小米11</h3>
<p>骁龙888 | 2K四曲面屏</p>
<p>3999元起</p>
</a>
</li>
<li>
<a href="">
<div class="phone_img">
<img src="/images/小米11.webp" alt="" />
</div>
<h3>小米11</h3>
<p>骁龙888 | 2K四曲面屏</p>
<p>3999元起</p>
</a>
</li>
<li>
<a href="">
<div class="phone_img">
<img src="/images/小米11.webp" alt="" />
</div>
<h3>小米11</h3>
<p>骁龙888 | 2K四曲面屏</p>
<p>3999元起</p>
</a>
</li>
<li>
<a href="">
<div class="phone_img">
<img src="/images/小米11.webp" alt="" />
</div>
<h3>小米11</h3>
<p>骁龙888 | 2K四曲面屏</p>
<p>3999元起</p>
</a>
</li>
<li>
<a href="">
<div class="phone_img">
<img src="/images/小米11.webp" alt="" />
</div>
<h3>小米11</h3>
<p>骁龙888 | 2K四曲面屏</p>
<p>3999元起</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<footer>
<div class="server w">
<ul>
<li><a href="#">预约维修服务</a></li>
<li><a href="#">7天无理由退货</a></li>
<li><a href="#">15天免费换货</a></li>
<li><a href="#">满99元包邮</a></li>
<li><a href="#">520余家售后网点</a></li>
</ul>
</div>
<div class="help w">
<div class="help_center">
<ul>
<li>
<dt>帮助中心</dt>
<dd><a href="#">账户管理</a></dd>
<dd><a href="#">购物指南</a></dd>
<dd><a href="#">订单操作</a></dd>
</li>
<li>
<dt>服务支持</dt>
<dd><a href="#">售后政策</a></dd>
<dd><a href="#">自助服务</a></dd>
<dd><a href="#">相关下载</a></dd>
</li>
<li>
<dt>线下门店</dt>
<dd><a href="#">小米之家</a></dd>
<dd><a href="#">服务网点</a></dd>
<dd><a href="#">授权体验店</a></dd>
</li>
<li>
<dt>关于小米</dt>
<dd><a href="#">了解小米</a></dd>
<dd><a href="#">加入小米</a></dd>
<dd><a href="#">投资者关系</a></dd>
<dd><a href="#">企业社会责任</a></dd>
<dd><a href="#">廉洁举报</a></dd>
</li>
<li>
<dt>关注我们</dt>
<dd><a href="#">新浪微博</a></dd>
<dd><a href="#">官方微博</a></dd>
<dd><a href="#">联系我们</a></dd>
<dd><a href="#">公益基金会</a></dd>
</li>
<li>
<dt>特色服务</dt>
<dd><a href="#">F码通道</a></dd>
<dd><a href="#">礼物码</a></dd>
<dd><a href="#">防伪查询</a></dd>
</li>
</ul>
<div class="title">
<h3>400-100-5678</h3>
<p>8:00-18:00（仅收市话费)</p>
<div>
<a href="">人工客服</a>
</div>
</div>
</div>
</div>
<div class="fott">
<div class="copy w">
<div class="logo_footer"></div>
<div class="copy_fotter">
<p>
<a href="#">小米商城</a> | <a href="#">MIUI</a> |
<a href="#">米家</a> | <a href="#">米聊</a> |
<a href="#">多看</a> | <a href="#">游戏</a> |
<a href="#">政企服务</a> | <a href="#">小米天猫店</a> |
<a href="#">小米集团隐私政策</a> |
<a href="#">小米公司儿童信息保护规则</a> |
<a href="#">小米商城隐私政策</a> |
<a href="#">小米商城用户协议</a> | <a href="#">问题反馈</a> |
<a href="#">Select Location</a>
</p>
<p>
<a href="#">北京互联网法院法律服务工作站</a> |
<a href="#">中国消费者协会 </a> |
<a href="#">北京市消费者协会 </a>
</p>
<p class="copy_info">
© mi 京ICP证110507号 京ICP备10046444号
京公网安备11010802020134号 京网文[2020]0276-042号<br />
（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证
(京)-非经营性-2014-0090 营业执照 医疗器械质量公告<br />
增值电信业务许可证 网络食品经营备案 京食药网食备202010048
食品经营许可证<br />
违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉
本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
</p>
<div>
<img src="images/truste.png" alt="" />
<img src="images/v-logo-2.png" alt="" />
<img src="images/v-logo-1.png" alt="" />
<img src="images/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="" />
<img src="images/8f962cacf8634116eeea141abfb31bd7.png" alt="" />
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
ul li {
list-style: none;
}
.w {
width: 1226px;
margin: 0 auto;
}
@font-face {
font-family: 'iconfont';
src: url('../fonts/iconfont.eot');
src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), url('../fonts/iconfont.woff2') format('woff2'), url('../fonts/iconfont.woff') format('woff'), url('../fonts/iconfont.ttf') format('truetype'), url('../fonts/iconfont.svg#iconfont') format('svg');
}
.top_bg,
.top_bg a {
display: block;
position: relative;
top: 0;
width: 100%;
height: 120px;
background-image: url(../images/top_bg.jpg);
background-size: auto 120px;
background-position: 50% 50%;
}
.nav {
position: relative;
width: 100%;
height: 40px;
background-color: #333;
font-size: 12px;
color: #b0b0b0;
line-height: 40px;
}
.nav_nav .nav_nav_left {
float: left;
}
.nav_nav .nav_nav_left li {
float: left;
}
.nav_nav .nav_nav_left li a {
color: #b0b0b0;
}
.nav_nav .nav_nav_left li span {
color: #424242;
margin: 0 6px;
}
.nav_nav li a:hover {
color: #f2fff2;
}
.nav_nav_right {
float: right;
}
.nav_nav_right li {
float: right;
}
.nav_nav_right li a {
color: #b0b0b0;
}
.gouwuche .gwc::before {
font-family: 'iconfont';
content: "\e607";
font-size: 14px;
margin-right: 5px;
}
.nav_nav_right li span {
color: #424242;
margin: 0 6px;
}
.nav_nav_right .gouwuche {
position: relative;
width: 120px;
text-align: center;
margin-left: 15px;
background-color: #424242;
z-index: 32;
}
.nav_nav_right .gouwuche a {
display: inline-block;
width: 100%;
z-index: 32;
}
.nav_nav_right .gouwuche:hover a {
background-color: #fff;
color: #ff6700;
}
.nav_nav_right .gouwuche:hover .pop_window {
height: 100px;
}
.nav_nav_right li .pop_window {
position: absolute;
top: 40px;
right: 0;
height: 0;
width: 316px;
line-height: 100px;
text-align: center;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
transition: height 0.3s;
overflow: hidden;
color: #424242;
background-color: #fff;
}
.logo {
position: relative;
width: 100%;
height: 100px;
/*background-color: #444;*/
font-size: 16px;
}
.logo_nav {
position: relative;
height: 100%;
}
.logo_png {
position: relative;
float: left;
width: 55px;
height: 55px;
margin-top: 22px;
overflow: hidden;
}
.logo_png .logo_a:before,
.logo_png .logo_a:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 55px;
height: 55px;
background-color: #ff6700;
background-repeat: no-repeat;
background-size: 100%;
transition: all 0.3s;
}
.logo_png .logo_a:before {
background-image: url(../images/mi-logo.png);
}
.logo_png .logo_a:after {
background-image: url(../images/mi-home.png);
margin-left: -55px;
}
.logo_png:hover .logo_a::after {
margin-left: 0;
}
.logo_png:hover .logo_a::before {
margin-left: 55px;
}
.logo_nav_c {
float: left;
margin-left: 180px;
}
.logo_nav a {
color: #333;
}
.logo_nav a:hover {
color: #ff6700;
}
.logo_nav ul li {
float: left;
line-height: 100px;
padding: 0 10px;
}
.logo_search {
float: right;
line-height: 100px;
z-index: 1;
}
.logo_search input {
position: relative;
}
.logo_search input[type="submit"] {
position: relative;
top: 4.5px;
font-family: 'iconfont';
font-size: 24px;
right: 0;
width: 50px;
height: 50.3px;
color: #616161;
border: 1px solid #e0e0e0;
outline: 0;
background-color: #fff;
cursor: pointer;
transition: all 0.3s;
}
.logo_search input[type="submit"]:hover {
background-color: #ff6700;
color: #ffffff;
z-index: 1;
}
.logo_search input[type="search"] {
width: 223px;
height: 48px;
padding: 0 10px;
box-sizing: content-box;
color: inherit;
border: 1px solid #e0e0e0;
outline: 0;
-webkit-appearance: none;
margin-right: -7px;
cursor: text;
}
.banner_image a img {
width: 100%;
height: 460px;
}
.banner {
position: relative;
height: 460px;
}
.banner_nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 234px;
vertical-align: center;
background: rgba(0, 0, 0, .3);
z-index: 1;
}
.banner_image {
position: absolute;
top: 0;
left: 0;
}
.banner_nav ul {
margin-top: 30px;
}
.banner_nav li {
height: 40px;
font-size: 14px;
line-height: 40px;
}
.banner_nav li a {
position: relative;
display: block;
padding-left: 30px;
height: 100%;
width: 100%;
color: #Fff;
}
.banner_nav li a::after {
position: absolute;
right: 15px;
font-family: 'iconfont';
content: "\e618";
}
.banner_nav li:hover a {
background-color: #ff6700;
}
.banner_image div {
font-family: 'iconfont';
position: absolute;
top: 50%;
transform: translate(0, -50%);
height: 80px;
width: 45px;
font-size: 32px;
text-align: center;
line-height: 80px;
color: #616161;
}
.banner_image .left {
left: 234px;
border-radius: 0 3px 3px 0;
}
.banner_image .right {
right: 0;
border-radius: 3px 0 0 3px;
}
.banner_image div:hover {
background: rgba(0, 0, 0, .5);
color: rgba(255, 255, 255, 0.603);
}
.banner_image ul {
position: absolute;
bottom: 26px;
right: 32px;
}
.banner_image ul li {
float: left;
width: 8px;
height: 8px;
background: rgba(0, 0, 0, .4);
border-radius: 50%;
margin: 0 4px;
border: 1.5px solid rgba(255, 255, 255, 0.603);
}
.dian li:nth-child(2) {
background: rgba(255, 255, 255, .4);
}
.banner_image ul li a {
float: left;
width: 100%;
height: 100%;
}
.banner_image ul li:hover {
background: rgba(255, 255, 255, .4);
}
.chanping {
margin-top: 14px;
height: 170px;
}
.home_list {
float: left;
width: 234px;
height: 170px;
font-size: 12px;
background-color: #5f5750;
}
.home_list ul {
margin-left: 10px;
}
.home_list ul li {
position: relative;
float: left;
width: 70px;
height: 82px;
text-align: center;
}
.home_list ul li a {
display: block;
position: relative;
color: #fff;
opacity: .7;
text-align: center;
margin-top: 16px;
margin-bottom: 10px;
}
.home_list ul li a::before {
top: -10px;
left: 0;
width: 1px;
height: 65px;
position: absolute;
content: "";
background: #665e57;
}
.home_list ul li::after {
width: 56px;
height: 1px;
position: absolute;
top: 0;
left: 8px;
content: "";
background: #665e57;
}
.home_list ul li img {
display: block;
height: 24px;
width: 24px;
margin: 20px auto 5px;
}
.home_list ul li a:hover {
opacity: 1;
}
.chanping_banner {
float: left;
height: 100%;
}
.chanping_banner li {
float: left;
margin-left: 14.6px;
}
.chanping_banner li img {
width: 316px;
height: 170px;
}
.miaosha {
margin-top: 25px;
width: 100%;
background-color: #f5f5f5;
padding-bottom: 30px;
}
.miaosha_text {
height: 58px;
font-size: 22px;
line-height: 58px;
font-weight: 200;
color: #333;
}
.miaosha_img {
position: relative;
height: 340px;
}
.miaosha_img::after,
.miaosha_img::before {
font-family: 'iconfont';
position: absolute;
top: -35px;
height: 24px;
width: 36px;
border: 1px solid #e0e0e0;
text-align: center;
line-height: 24px;
font-size: 12px;
color: #b0b0b0;
}
.miaosha_img::after {
content: "\e680";
right: 37px;
}
.miaosha_img::before {
content: "\e618";
right: 0px;
}
.miaosha_img ul li {
float: left;
width: 234px;
height: 340px;
background-color: rgba(255, 255, 255, 0.794);
border-top: 1px solid red;
}
.miaosha_img ul li>div {
padding-top: 39px;
text-align: center;
height: 340px;
background-color: #f1eded;
}
.miaosha_img ul li>div img {
margin: 25px 0;
}
.miaosha_img ul li>div p:nth-of-type(1) {
color: red;
font-size: 21px;
}
.miaosha_img ul li>div p:nth-of-type(2) {
color: rgba(0, 0, 0, .54);
font-size: 15px;
}
.miaosha_img ul li>div div {
width: 168px;
margin: 28px auto 0;
}
.miaosha_img ul li>div div span {
display: inline-block;
width: 46px;
height: 46px;
font-size: 24px;
line-height: 46px;
color: #Fff;
background-color: #605751;
}
.miaosha_img ul li>div div i {
font-style: normal;
display: inline-block;
width: 15px;
font-size: 24px;
line-height: 46px;
}
.miaosha_img ul li:nth-child(n+2) {
margin-left: 14px;
border-top: 1px solid blue;
}
.miaosha_img ul li:nth-child(n+2) a {
margin-top: 39px;
display: inline-block;
width: 234px;
text-align: center;
}
.miaosha_img ul li:nth-child(n+2) a img {
width: 160px;
height: 160px;
}
.miaosha_img ul li:nth-child(n+2) a h3 {
font-size: 14px;
font-weight: 400;
line-height: 30px;
color: #212121;
}
.miaosha_img ul li:nth-child(n+2) a p:first-of-type {
font-size: 12px;
color: #b0b0b0;
}
.miaosha_img ul li:nth-child(n+2) a p:last-of-type {
margin-top: 15px;
}
.miaosha_img ul li:nth-child(n+2) a p:last-of-type span {
font-size: 14px;
}
.miaosha_img ul li:nth-child(n+2) a p:last-of-type span:first-child {
color: #ff6709;
}
.miaosha_img ul li:nth-child(n+2) a p:last-of-type span:last-child {
color: #b0b0b0;
text-decoration: line-through;
}
.note9 {
height: 120px;
margin: 25px auto;
}
.note9 a img {
width: 100%;
}
.phone {
height: 672px;
}
.mi-phone-hd {
height: 58px;
}
.mi-phone-hd h3 {
float: left;
height: 58px;
font-weight: 200;
color: #333;
line-height: 58px;
font-size: 22px;
}
.mi-phone-hd a {
float: right;
height: 58px;
color: #424242;
line-height: 68px;
transition: all .3s;
}
.mi-phone-hd a:hover {
color: #ff6700;
}
.mi-phone-hd a span {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
background-color: #b0b0b0;
border-radius: 50%;
font-size: 12px;
color: #ffffff;
vertical-align: -4px;
font-size: 12px;
transition: all .3s;
}
.mi-phone-hd a:hover span {
background-color: #ff6700;
}
.mi-phone-hd a span::before {
content: "";
position: absolute;
width: 5px;
height: 5px;
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
top: 6px;
left: 5px;
transform: rotate(45deg);
}
.mi11 {
float: left;
width: 234px;
height: 614px;
}
.mi11 a img {
width: 100%;
height: 100%;
}
.mi_class {
float: left;
height: 100%;
}
.mi_class ul li:nth-child(n+2) {
float: left;
width: 234px;
height: 300px;
background-color: #Fff;
margin: 0 0 14px 14px;
}
.mi_class ul li:nth-child(n+2) a {
display: block;
width: 234px;
height: 300px;
text-align: center;
}
.phone_img {
height: 160px;
width: 160px;
margin: 20px auto;
}
.phone_img img {
width: 100%;
height: 100%;
}
.mi_class ul li:nth-child(n+2) a h3 {
font-weight: 400;
font-size: 14px;
color: #333;
margin-bottom: 5px;
}
.mi_class ul li:nth-child(n+2) a p:nth-of-type(1) {
font-size: 12px;
color: #b0b0b0;
margin-bottom: 15px;
}
.mi_class ul li:nth-child(n+2) a p:nth-of-type(2) {
color: #ff6700;
font-size: 14px;
}
.mi_class ul li:hover {
box-shadow: 0 15px 15px rgba(0, 0, 0, .2);
/* transform: translate3d(0, -3px, 0); */
transform: translateY(-3px);
}
.mi_class ul li {
transition: all .3s;
}
.server {
height: 80px;
/* background-color: #666; */
border-bottom: 1px solid #ccc;
}
.server ul li {
float: left;
font-size: 16px;
width: 20%;
border-right: 1px solid #e0e0e0;
text-align: center;
}
.server ul li a {
color: #616161;
transition: all .2s;
}
.server ul li a:hover {
color: #ff6700;
}
.server ul li:last-child {
border: 0;
}
.server ul li a::before {
font-family: 'iconfont';
content: "\e607";
font-size: 30px;
margin-right: 6px;
vertical-align: -3px;
}
.help {
padding: 40px 0;
}
.help ul li {
float: left;
width: 163px;
}
.help ul li dt {
margin-bottom: 20px;
color: #424242;
font-size: 14px;
}
.help ul li dd {
margin: 10px 0;
}
.help ul li dd a {
color: #757575;
font-size: 12px;
}
.help ul li dd a:hover {
color: #ff6700;
}
.title {
float: left;
border-left: 1px solid #e0e0e0;
width: 230px;
text-align: center;
}
.title h3 {
color: #ff6700;
font-size: 22px;
margin-bottom: 10px;
}
.title p {
font-size: 12px;
color: #616161;
text-align: center;
margin-bottom: 20px;
}
.title div {
width: 120px;
height: 30px;
border: 1px solid #ff6700;
margin: 0 auto;
color: #ff6700;
}
.title div a {
display: block;
height: 30px;
width: 120px;
color: #ff6700;
font-size: 12px;
line-height: 30px;
transition: all .3s;
}
.title div a::before {
font-family: 'iconfont';
content: "\e7b3";
font-size: 16px;
vertical-align: -1px;
}
.title div a:hover {
background-color: #ff6700;
color: #Fff;
}
.help_center {
overflow: hidden;
}
.logo_footer {
float: left;
width: 57px;
background: url(../images/logo-footer.png) no-repeat;
height: 157px;
margin-right: 10px;
}
.copy_fotter p,
.copy_fotter p a {
color: #757575;
font-size: 12px;
}
.copy_fotter p:last-of-type {
color: #b0b0b0;
}
.copy_fotter div img:nth-of-type(-n+4) {
height: 28px;
}
.copy_fotter div img:last-child {
height: 40px;
}
.fott {
background-color: #f5f5f5;
}
.copy {
padding-top: 30px;
}
资源图片就不传了
版权声明：本文标题：HTML5+CSS3初学尝试(小米官网首页) 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1726415342a1069742.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论