【Web】CSS（No.34）Css页面布局经典案例（四）《米柚官网》
2024-04-24 04:41:53
需要素材点击图片联系我或私信、评论
效果图：
html源码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>米柚</title><link rel="stylesheet" href="css/index.css"></head><body><!-- 导航部分 --><div class="nav"><div class="nav-bar"><img src="img/logo.png" alt="" class="logo"><ul class="bar"><li>首页</li><li>主题</li><li>下载</li><li>产品</li><li>论坛</li></ul><span class="method"><a href="#">简</a><span> | </span><a href="#">繁</a><span> | </span><a href="#">English</a></span></div></div><!-- 正文部分 --><div class="main"><!-- V5 --><div class="V5"><div class="banner"><div class="button"><a href="#">下载MIUI</a><a href="#">进入论坛</a></div></div></div> <!-- video --><div class="video"><div class="vid"><div class="video1"><img src="img/video1.png" alt=""><span>MIUI 介绍视频</span></div><div class="video2"><img src="img/video2.png" alt=""><span>MIUI V5视频</span></div><div class="video3"><img src="img/video3.png" alt=""><span>MIUI 自由桌面</span></div><div class="video4"><img src="img/video4.png" alt=""><span>MIUI 发展历程</span></div></div></div><!-- APP --><div class="APP"><!-- 上面 --><div class="APP-top"><div class="top1"><img src="img/ico-1.jpg" alt=""><h4>电话、短信</h4><p>根据中国用户使用习惯特别优化<br>更可发送免费网络短信</p></div><div class="top2"><img src="img/ico-2.jpg" alt=""><h4>更安全</h4><p>系统级全面保护手机和数据安全<br>更可拦截广告电话、短信</p></div><div class="top3"><img src="img/ico-3.jpg" alt=""><h4>丰富的在线资源</h4><p>取之不尽的视频、音乐、游戏<br>更有超过60万安卓应用…无比强大</p></div><div class="top4"><img src="img/ico-4.jpg" alt=""><h4>与众不同</h4><p>独创百变主题与自由桌面<br>从里到外，让你的手机个性十足</p></div></div><!-- 下面 --><div class="APP-bottom"><div class="bottom1"><img src="img/ico-5.jpg" alt=""><h4>云服务</h4><p>同步通讯录、短信、相册<br>为你保管好一切</p></div><div class="bottom2"><img src="img/ico-6.jpg" alt=""><h4>极速桌面体验</h4><p>驱动级系统优化<br>提供丝般顺滑体验</p></div><div class="bottom3"><img src="img/ico-7.jpg" alt=""><h4>200余项功能改进</h4><p>精心打造相机、闹钟等必备工具<br>更有贴心的大字体、语音助手…</p></div><div class="bottom4"><img src="img/ico-8.jpg" alt=""><h4>"活"的操作系统</h4><p>根据论坛反馈不断进化<br>每周五更新、风雨无阻</p></div></div><!-- 了解更多 --><div class="more"><img src="img/more.jpg" alt=""></div></div></div><!-- 页尾部分 --><div class="tail"><div class="tails"><div class="t1"><div class="orange"></div><h4>活动公告</h4><ul><li>四格报告</li><li>内测申请</li></ul></div><div class="t2"><div class="orange"></div><h4>更新日志</h4><ul><li>3.6.14（开发板）</li><li>3.2.22（推荐版）</li></ul></div><div class="t3"><div class="orange"></div><h4>关注MIUI</h4><ul><li>新浪微博</li><li>腾讯微博</li></ul></div></div><div class="mi"><h6>MIUI官方网站 - 发烧友必刷的Android ROM - 北京小米科技 © 2013 京ICP备10046444号</h6></div><div class="footer"><img src="img/footer_copy.png" alt=""></div></div></body>
</html>
css源码：
/* 公共 */
* {margin:0;padding:0;box-sizing:border-box;
}a {text-decoration:none;
}/* 导航部分 */
.nav {width:100%;height:110px;background:url(../img/head-bg.jpg) no-repeat;background-size:cover;
}.nav-bar {width:1000px;height:100%;margin:0 auto;
}.nav-bar>img {margin-top:40px;margin-right:30px;float:left;
}.bar {font-size:16px;color:#ffffff;list-style:none;margin-left:80px;margin-top:55px;float:left;
}.bar li {float:left;margin-right:70px;
}.method {font-size:10px;color:#ffffff;text-decoration:none;display:block;float:right;margin-top:60px;
}.method>a,
.method>span {font-size:10px;color:#ffffff;float:left;
}/* 正文部分 */
.main {width:100%;height:1345px;
}/* V5 */
.V5 {width:100%;height:545px;background:url(../img/banner-bg.jpg);}.banner {width:1000px;height:100%;background:url(../img/banner.jpg) no-repeat;margin:0px auto;
}.button {width:328px;height:80px;background:url(../img/icon-bg.png) no-repeat;float:left;margin-left:30px;margin-top:400px;padding-top:30px;
}.button>a {color:rgb(140,140,140);margin-left:60px;margin-right:20px;
}.button>a:hover {color:rgb(195,64,0);
}/* video */
.video {width:100%;height:200px;background-color:rgb(229,229,229);border-top:1px solid rgb(210,210,210);border-bottom:1px solid rgb(210,210,210);overflow:hidden;
}.vid {width:1000px;height:100%;margin:0px auto;overflow:hidden;
}.video1,
.video2,
.video3,
.video4 {width:25%;height:100%;float:left;
}.video1>img,
.video2>img,
.video3>img,
.video4>img {float:left;margin-top:20px;margin-left:76px;
}.video1>span,
.video2>span,
.video3>span,
.video4>span {float:left;margin-top:130px;margin-left:-106px;
}/* APP */
.APP {width:100%;height:600px;overflow:hidden;
}.APP-top,
.APP-bottom {width:1000px;height:250px;margin:0px auto;/*background-color:#abcdef;*/overflow:hidden;
}.top1,
.top2,
.top3,
.top4,
.bottom1,
.bottom2,
.bottom3,
.bottom4 {width:25%;height:100%;float:left;font-size:14px;text-align:center;
}.top1>img,
.top2>img,
.top3>img,
.top4>img,
.bottom1>img,
.bottom2>img,
.bottom3>img,
.bottom4>img {margin-top:40px;margin-bottom:15px;
}.top1>h4,
.top2>h4,
.top3>h4,
.top4>h4,
.bottom1>h4,
.bottom2>h4,
.bottom3>h4,
.bottom4>h4 {margin-bottom:5px;
}/* 了解更多 */
.more {width: 1000px;height: 100px;margin:0px auto;text-align:center;
}.more>img {margin-top:15px;
}/* 页尾部分 */
.tail {width:100%;height:360px;background-color:rgb(47,47,47);
}.tails {width:1000px;height:200px;margin:0px auto;
}.orange {width:5px;height:20px;background-color:rgb(236,97,23);float:left;margin-top:80px;margin-right:10px;margin-left:130px;
}.t1,
.t2,
.t3 {width:33%;height:100%;float:left;font-size:12px;
}.t1>h4,
.t2>h4,
.t3>h4 {font-size:16px;margin-top:80px;color:rgb(255,255,255);
}.t1>ul li,
.t2>ul li,
.t3>ul li {list-style:none;margin:20px 0px 0px 10px;color:rgb(255,255,255);padding-left:140px;
}.mi,
.footer {width:1000px;height:80px;margin:0px auto;text-align:center;
}.mi {padding-top:50px;color:rgb(187,187,187);
}.footer {padding-top:30px;
}
【Web】CSS（No.34）Css页面布局经典案例（四）《米柚官网》相关推荐
- 【Web】CSS（No.32）Css页面布局经典案例（二）《云道商城首页》
需要素材点击图片联系我或私信.评论 效果图 html源码: <!DOCTYPE html> <html lang="en"> <head>< ...
- 应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...
- css前端知识分享—页面布局分析
今天分享下"css前端知识分享-页面布局分析"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...
- CSS+DIV进行的页面布局
CSS+DIV进行的页面布局 第一部分.布局概述 1.网页布局 2.页面元素定位机制 第二部分.布局常用属性 1.浮动属性(float) 2.清除浮动(clear) 3.定位属性(position) ...
- Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端 学习路线 笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
- 了解CSS盒模型、页面布局在UI设计中的作用
我司实行UI规范已过去一段时间,页面风格已逐渐实现统一.但近期在实际业务开发中发现,在UI验收环节不断出现小数值调整情况,极大的延长验收时间. 在和UI设计人员探讨后发现设计者对前端盒模型概念不甚了解 ...
- 影响页面布局的css属性,6 和页面布局有关的CSS属性（三）
6 和页面布局有关的CSS属性(三) 03.png 04.png 05.png #box { /* 声明ID选择器,名称为box */ position:absolute; /* 设置层的定位为绝对定 ...
- 初识HTML（五）进阶：CSS盒子模型、页面布局
目录 CSS 盒子模型(Box Model) 页面布局 浮动流 制作导航栏 如何页面布局 定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...
- CSS盒子模型与页面布局
202209 week1 day5~day6 前端学习 1 盒子模型 1.1 盒子模型结构 1.1.1 内容 1.1.2 边界(margin) 1.1.3填充(padding) 1.1.4 边框(bo ...
最新文章
- 飞行时间（TOF）相机优缺点及其应用领域
- addroutes刷新_vue 解决addRoutes动态添加路由后刷新失效问题
- xpath定位元素方法_测试数十次，总结了APP元素定位的万能方法
- 计算机录入的课程标准,《计算机录入技术》课程标准.doc
- 复制控制---复制构造函数
- 洛谷P1984 SDOI2008烧水问题
- double operator[](int i)_请谨慎使用float和double
- 创业12年 最野蛮的屌丝创业者
- python模拟ssh登录
- 桌面计算机未响应怎么办,资源管理器未响应怎么办
- Java 项目开发流程
- Java利用poi-tl实现富文本HTML转Word
- MVC3.0 开发过程中遇到错误及解决方案（不断更新中。。。）
- Matlab GUI animatedline 串口实时
- 基于cocos2dx的2D手游美术资源制作技术选型(1)(2)
- 【华人学者风采】俞汝勤 湖南大学
- CoreData的使用
- 可移植bit-field与driverlib兼容的C2000控制器工程模板创建及SysConfig配置
- 数据库备份：Xtrabackup实现完全备份及增量备份
- 计算机网络主要由哪三个部分组成,计算机网络由哪几个部份组成