html+css实现小米商城首页静态页面

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

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

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

效果图

顶部
中间部分
尾部

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

用HTML+CSS实现一个计科院网站首页静态页面
链接:https://pan.baidu.com/s/1akwyc89q3nzKDQQulaFelQ 提取码:s6ys
Django之使用celery和NGINX生成静态页面实现性能优化
性能优化原理: 当我们要给client浏览器返回一个页面时,我们需要去数据库查询数据并将数据和基本页面模板渲染形成页面返回给客户端,但如果每一个用户访问时都去查询一次首页的的数据时,当日访问量很大时那 ...
django-配置静态页面-celery/redis/nginx
celery生成静态页面 celery_tasks/tasks.py # 生成静态首页 from django.template import loader, RequestContext # tem ...
WebApi中将静态页面作为首页
WebApi中将静态页面作为首页使用场景在我的项目中使用Asp.Net WebApi作为后端数据服务,使用Vue作为前端Web,在服务器IIS上部署时需要占用两个端口,一个是80端口,用户在浏览器 ...
用手机自带uc浏览器查看静态页面，css样式不显示
问题描述: 这个问题是一个同事在写手机页面用UC浏览器测试以后遇到的,其他浏览器静态页面显示正常,唯独UC浏览器不显示页面样式. 我测试过代码是没有问题的,因为临时没有找到安卓手机,就猜想PC端的应该 ...
mvc伪静态<四> 伪静态后静态页面或者引用的css和图片失效
引用的css和图片失效的解决办法把样式引用文件的相对路径改成绝对路径就可以了比如原先的引用路径为:<link href="~/Content/css/style.css" ...
仿新浪首页、主题、详情页，纯html静态页面
仿新浪首页.主题.详情页.纯html静态页面,下载地址: http://download.csdn.net/detail/sweetsuzyhyf/8085535
浅谈php生成静态页面
一.引言在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...
用 Smarty 生成静态页面入门介绍
why Smarty? 随着公司首页(以下简称首页)流量越来越大,最近开始考虑使用后台语言生成静态页面的技术. 我们知道,一个简单页面一般是一个 .html(或者 .htm ..shtml)后缀的文件 ...

随机推荐

Ajax请求中的async:false/true的作用【转载】
[Ajax请求中的async:false/true的作用] 作者:https://www.cnblogs.com/mmzuo-798/p/7098979.html 前言: 昨天在做倒计时修改的时候,发 ...
如何解决Retrieving the COM class factory for component with CLSID {00024500-0000-0000-C000-000000000046} failed due to the following error: 8000401a. 问题
在系统中需要把数据导出到excel并且压缩,然后报了这个问题: 我在网站上找到了方法: 地址:https://social.msdn.microsoft.com/Forums/vstudio/en-U ...
[LeetCode] 113. Path Sum II ☆☆☆(二叉树所有路径和等于给定的数)
LeetCode 二叉树路径问题 Path SUM(①②③)总结 Path Sum II leetcode java 描述 Given a binary tree and a sum, find al ...
使用Spring Security安全控制（二十六）
准备工作首先,构建一个简单的Web工程,以用于后续添加安全控制,也可以用之前Chapter3-1-2做为基础工程.若对如何使用Spring Boot构建Web应用,可以先阅读<Spring B ...
原 spring-boot工程中，jpa下hibernate的ddl-auto的各种属性
jpa: hibernate: ddl-auto: create ddl-auto:create----每次运行该程序,没有表格会新建表格,表内有数据会清空 ddl-auto:create-d ...
Win10系列：VC++ Direct3D开发基础1
在介绍如何使用Direct3D项目模版来绘制立体图形之前,首先为读者介绍在Direct3D应用程序开发过程中涉及到的一些常用概念. (1)资源资源是指可以被Direct3D图形管线所访问的内存空间, ...
ASP.Net MVC(1) 之走进MVC
一.MVC三层架构: mvc三层架构,大家都比较熟悉了,这里再介绍一下.Mvc将应用程序分离为三个部分: Model:是一组类,用来描述被处理的数据,同时也定义这些数据如何被变更和操作的业务规则.与数 ...
unity中制作模拟第一人称视角下的指南针
private int zRotation; public GameObject obj; public void Update() { //obj = GameObject.Find("C ...
python之路 ---计算机硬件基础
计算机(computer)俗称电脑,是现代一种用于高速计算的电子计算机器,可以进行数值计算,又可以进行逻辑计算,还具有存储记忆功能.是能够按照程序运行,自动.高速处理海量数据的现代化智能电子设备.一个 ...
bzoj1045
题解: 随便推一下公式然后发现是中位数代码: #include<bits/stdc++.h> using namespace std; ],n; long long sum; int ...