小米官网制作注意事项

注意事项

1、先规划布局

2、写一个css里面放  

body{    margin: 0;    padding: 0;}ul{    margin: 0;    padding: 0;    list-style-type: none;}a{    text-decoration: none;}

 3、起名一定规范 

4、注意注释  方便查找

5、定位问题  会导致布局偏移

6、如果要图片不随缩放而改变,图片所在的div和图片本身都不要设高。如果只给div设高,图片不会改变,但会遮盖下面内容,如果也给图片设高,高度会缩放。

难点:

1、动画及阴影问题、

2、关于div 的显示与隐藏

已解决

未解决问题

1、轮播图

2、右侧固定导航  回到顶部按键

未解决原因(时间紧张未做,尽量抓紧时减解决)

原文地址:https://www.cnblogs.com/gaojian910/p/10952219.html

时间: 2024-11-05 10:34:47

小米官网制作注意事项的相关文章

html css 模仿小米官网搜索框

写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习.小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果.浮动.导航条.鼠标经过.定位.文字框效果实现.js效果实现等等.下面这段代码仅仅用html.css写出了基本的样子,js效果,鼠标经过.点击事件,光标定位效果都还没有实现. 效果原图见小米官网:http://www.mi.com 搜索效果切换图: 最终效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

有感于小米官网的中英文版本的差异

早上打开小米,因为操作系统是英文的,所以默认是英文版本的小米.居然跟我之前打开的小米界面不同!!!简洁的界面非常吸引人注意,只有六个菜单项和一个全屏宽度的slider. 我还是习惯性切换到简体中文.一切换就回到了我之前看到的小米的界面,10个菜单.搜索框和大块的类别区域占据了首屏的大量空间,并以"F"型的阅读习惯来看,这部分空间的重量相当之大.加之冗长的站点内容,一共达5屏之多. 截图说话: .COM的精彩看点: 1.布局舒服,采用1+3,(苹果是1+4) 2.白底符合欧美人的阅读喜好

企业官网制作,官网定制开发,仿站都可以

我们的优势:新一代建站技术-多屏适配:电脑/平板/手机/微信站一步到位.我们公司以技术为本,针对客户行业和企业形象及需求,定制高质量.高要求网站,我们长期建站以来,积累了许多模板案例,工期短,费用少. 业务范围:1.网站建设:包括企业官-网 外贸网站建设品牌网站 购物商城 分销型网站等2.移动应用:手机网站 微官-网 APP开发 微信公众号 微信小程序3.系统开发:OA CRM ERP4.基础支撑 :域名注册 VPS 虚拟主机 企业邮箱 服务器租用5.品牌推广:SEO优化推广,网络宣传推广,品牌

小米官网的css3导航菜单

HTML代码: 1 <div class="nav"> 2 <ul> 3 <li><a href="#">首页</a></li> 4 <li> 5 <a href="#"> 6 小米手机 7 <div class="xs"> 8 <div class="xiao"></div>

有感于小米官网的中英文版本号的差异

早上打开小米,由于操作系统是英文的,所以默认是英文版本号的小米.竟然跟我之前打开的小米界面不同! ! !简洁的界面很吸引人注意.仅仅有六个菜单项和一个全屏宽度的slider. 我还是习惯性切换到中文简体.一切换就回到了我之前看到的小米的界面,10个菜单.搜索框和大块的类别区域占领了首屏的大量空间,并以"F"型的阅读习惯来看,这部分空间的重量相当之大.加之冗长的网站内容,一共达5屏之多. 截图说话: .COM的精彩看点: 1.布局舒服.採用1+3,(苹果是1+4) 2.白底符合欧美人的阅

用jquery插件写一个小米官网左侧二级菜单

知识点:静态布局思路,jquery动态布局,代码格式规范,jquery插件调用, 鼠标滑动二级菜单构建. html代码: <div id="Tz_banner"> <ul> <li class="firstLi">手机 电话卡 <div class="info"> <ul> <li><a class="title" href="#"

网页常用动态效果--小米官网轮播图

关键在于层级关系 HTML代码: div.box>ul+ol+span*2(ul层级1,ol层级2,span层级3) ul>li*5>img(注意可以将首个li的z-index定为10) ol>li*5 CSS代码: .box{ width:992px; height:420px; position: relative; overflow:hidden; } .box ul{ position: relative; z-index:1; } .box ul li{ position

小米官网的设计 致敬

毅创科技官网上线,了解毅创微信更便捷

经过团队的日夜奋斗,毅创微信官网终于上线了!地址http://www.aosituoma.net 毅创微信官网有网站首页.功能介绍.成功案例.授权查询.更新日志.联系我们.帮助中心几个板块. 首页有服务内容介绍.成功案例.产品动态.帮助中心等模块. 其中服务内容含四个大方向: 一.第三方平台接入:将您的微信公众平台接入到我们的系统,微官网.微名片. 大转盘.微商城等众多功能即刻拥有.省时省力更省钱 二.微官网制作:微信营销没有微官网怎么行,不会做怎么办?把繁杂的设计制作交给毅创吧,轻松拥有一个高