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)后缀的文件 ...
随机推荐
- application使用@符合问题:'@' that cannot start any token. (Do not use @ for indentation)
在application配置文件中使用@出现异常: Exception in thread "main" while scanning for the next token fou ...
- 基于TcpListerer的web服务器 和 基于HttpListerer的web服务器
摘自<Asp.Net 本质论>作者:郝冠军 /* 为了简化基于TCP协议的监听程序,.NET在System.Net.Sockets命名空间中提供了TcpListerer类,使用它,在构造函 ...
- sessionStorage在项目中的应用
1. 本地存储 Cookie(局限性):用户可以禁用cookie,最多只能存储4kb,cookie有过期时间的(一般我们设置的时间最长1个月,用户使用杀毒软件也可以清除我们的cookie)LocalS ...
- jQuery滚屏插件XSwitch.js
1.需要有基本的HTML结构 <div style="margin-top: 124px;" id="container" data-XSwitch> ...
- selinux介绍/状态查看/开启/关闭
SELinux(Security-Enhanced Linux) 是美国国家安全局(NSA)对于强制访问控制的实现,是 Linux历史上最杰出的新安全子系统--百度百科. 基于经验来说SELinux在 ...
- 使用Spring-data-jpa(1)(三十)
在实际开发过程中,对数据库的操作无非就“增删改查”.就最为普遍的单表操作而言,除了表和字段不同外,语句都是类似的,开发人员需要写大量类似而枯燥的语句来完成业务逻辑. 为了解决这些大量枯燥的数据操作语句 ...
- java下使用chromedriver获取访问页面状态码
##在使用chromedriver的时候 并没有提供api来获取访问页面的状态码,但是可以打开日志来获取到 LoggingPreferences logPrefs = new LoggingPrefe ...
- jedata日期控件的开始结束日期设置
<span class="wstxt">开始日期:</span><input type="text" class="wo ...
- linux文件权限多一个+啥意思
linux文件权限显示多了一个+,说明添加了acl权限 使用getfacl filename 能查看到 ower group other 还多了一个php 用户有rwx权限. acl详解 转: ht ...
- js 鼠标滚动 禁用 启用
function disabledMouseWheel() { var div = document.getElementById('divid'); if (div.addEventListener ...