学了一个星期的html和css，用新学的东西写点东西，仿照小米商城的首页按照它的页面布局盗用它的图片写了个小米商城的静态页面。

源代码：链接:https://pan.baidu.com/s/1qf63B6dBAUoDd6tpHFgESQ 密码:lwc5

  • 总结写前端时的不足：

    • css很多属性名记不住，经常需要去查笔记
    • 类名命名不是很规范
    • 没有充分利用css类的特性
    • 整个页面布局像是东拼西凑出来的（虽然拼凑的挺不错）
    • 暂时还没实现页面的动态效果，比如说轮播图，选项卡，鼠标放在某个a标签上的动态效果（等学了javascript再回过头来实现动态效果）
  • 总结：写前端更像是在‘织毛衣’，从上到下一点一点，一个div一个div的去写，去布局，没有逻辑。通过写这个页面加深了对html标签的使用以及对css元素属性的了解，知道了自己的不足以及后续编写其他页面需要注意的一些地方。

效果图

  • 顶部

  • 中间部分

  • 尾部

html+css实现小米商城首页静态页面的更多相关文章

  1. 用HTML+CSS实现一个计科院网站首页静态页面

    链接:https://pan.baidu.com/s/1akwyc89q3nzKDQQulaFelQ 提取码:s6ys

  2. Django之使用celery和NGINX生成静态页面实现性能优化

    性能优化原理: 当我们要给client浏览器返回一个页面时,我们需要去数据库查询数据并将数据和基本页面模板渲染形成页面返回给客户端,但如果每一个用户访问时都去查询一次首页的的数据时,当日访问量很大时那 ...

  3. django-配置静态页面-celery/redis/nginx

    celery生成静态页面 celery_tasks/tasks.py # 生成静态首页 from django.template import loader, RequestContext # tem ...

  4. WebApi中将静态页面作为首页

    WebApi中将静态页面作为首页 使用场景 在我的项目中使用Asp.Net WebApi作为后端数据服务,使用Vue作为前端Web,在服务器IIS上部署时需要占用两个端口,一个是80端口,用户在浏览器 ...

  5. 用手机自带uc浏览器查看静态页面，css样式不显示

    问题描述: 这个问题是一个同事在写手机页面用UC浏览器测试以后遇到的,其他浏览器静态页面显示正常,唯独UC浏览器不显示页面样式. 我测试过代码是没有问题的,因为临时没有找到安卓手机,就猜想PC端的应该 ...

  6. mvc伪静态<四> 伪静态后静态页面或者引用的css和图片失效

    引用的css和图片失效的解决办法 把样式引用文件的相对路径改成绝对路径就可以了 比如原先的引用路径为:<link href="~/Content/css/style.css" ...

  7. 仿新浪首页、主题、详情页，纯html静态页面

    仿新浪首页.主题.详情页.纯html静态页面,下载地址: http://download.csdn.net/detail/sweetsuzyhyf/8085535

  8. 浅谈php生成静态页面

    一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...

  9. 用 Smarty 生成静态页面入门介绍

    why Smarty? 随着公司首页(以下简称首页)流量越来越大,最近开始考虑使用后台语言生成静态页面的技术. 我们知道,一个简单页面一般是一个 .html(或者 .htm ..shtml)后缀的文件 ...

随机推荐

  1. 五、Oracle的常识点

    1.Oracle中使用rownum来进行分页,这个是效率最好的分页方法 select * from ( ) 2.Oracle的索引使用 创建索引: create index index_name on ...

  2. Oracle12c中容错&amp;性能新特性之表空间组

    1.        简介 表空间组可以使用户消耗来自多个表空间的临时表空间.表空间组有如下特点: 1)      至少包含一个表空间.表空间组中包含的最大表空间数没有限制. 2)      和表空间共 ...

  3. [LeetCode] 112. Path Sum ☆(二叉树是否有一条路径的sum等于给定的数)

    Path Sum leetcode java 描述 Given a binary tree and a sum, determine if the tree has a root-to-leaf pa ...

  4. python（5）之集合

    集合是一个无序的,不重复的数据组合,它的主要作用如下: 1.去重,把一个列表变为集合就自动去重了 2.关系测试,测试两组数据之间的交集.并集.差集等 常用操作如下: #集合的操作 list_1={1, ...

  5. 小程序使用wxParse解析html

    转载至:http://blog.csdn.net/tang05709/article/details/54924675 这个是需要循环出显示的https://github.com/tonyzhan/c ...

  6. 通过css 实现“瀑布流”

    .hot_list{-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -moz-column-gap:7px; -webk ...

  7. linux因勿删或误操作导致登录界面异常，命令无法使用，显示/bin/bash:No such file or directory

    一.故障现象 1.用secure CRT连接服务器时显示: /bin/bash:No such file or directory 翻译成中文是:没有此类文件或目录 2.直接登录服务器执行命令时显示: ...

  8. redux源码解析(深度解析redux+异步demo)

    redux源码解析 1.首先让我们看看都有哪些内容 2.让我们看看redux的流程图 Store:一个库,保存数据的地方,整个项目只有一个 创建store Redux提供 creatStore 函数来 ...

  9. 原生js（form）验证，可以借鉴下思路，应用到工作中

    我在工作中时常使用form验证,在目前的公司做的表单验证用的angular的form组件,对于一个有追求的前端,或者应用在移动端写个form验证,引入angular或者jquery组件等验证,难免显得 ...

  10. day6-if,while,for的快速掌握

    python的缩进和冒号 python之所以如此简单,归功于它的缩进机制,严格的缩进机制是的代码非常整齐规范,赏心悦目,提高了可读性,在一定意义上提高了可维护性,但对于从其他语音转过来的朋友如:jav ...