小项目
文章平均质量分 85
SHoadgnaw
生活就是诗和远方。
展开
-
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀tips在不同设备中显示的样式页面布局思路htmlcsstips这个页面里的图片忒难看,实际可以换一换在不同设备中显示的样式页面布局思路响应式页面开发方案bootstrap框架设计图采用1280px设计尺寸屏幕划分分析因为中屏和大屏布局一致 所以列定义为col-md-就可以了小屏幕布局发生变化 所以小屏幕需要根据需求改变布局超小屏布局也发生变化 所以超小屏也要根据需求改变布局先布局md以上的pc端布局 在根据需求修改小原创 2021-04-12 22:46:03 · 815 阅读 · 0 评论 -
使用两种rem布局方案-实现静态苏宁易购移动端首页
使用两种rem布局方案-实现静态苏宁易购移动端首页方案1:rem+less+媒体查询htmlcommon.lessindex.less方案2:flexible.js+rem小插件小问题htmlindex.lessflexible.js方案1:rem+less+媒体查询跟其他页面不同的文件,需要新建common.less文件用媒体查询设置不同的html字体大小 因为除了首页其他页面也要尺寸为 320px 360px 375px 400px 414px 424px 480px 540px 720px原创 2021-03-29 03:11:15 · 2368 阅读 · 3 评论 -
使用Flex布局-实现静态携程网移动端首页
使用Flex布局-实现静态携程网移动端首页Flex布局思路htmlcssFlex布局思路方案:单独制作移动页面方案技术:flex布局、宽度自适应 高度固定html<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met原创 2021-03-29 02:34:08 · 579 阅读 · 0 评论 -
使用百分比布局-实现静态京东移动端首页
使用百分比布局-实现静态京东移动端首页百分比布局(流式布局)小tipshtml代码CSS代码百分比布局(流式布局)通过盒子宽度设置成百分比来根据屏幕宽度进行伸缩,不受固定像素限制,内容向两侧填充为了保护内容不会出现混乱的问题需要设置max-width: 和 min-width最大宽度和最小宽度小tipsDPG图片压缩技术京东自主研发推出DPG图片压缩技术,该技术,可直接节省用户50%的浏览流量提升了用户的网页打开速度,能够兼容jpeg,实现全平台全浏览器支持,压缩后的图片和webp的清晰原创 2021-03-28 19:13:10 · 202 阅读 · 0 评论 -
使用html+css实现-静态开源案例-品优购
使用html+css实现-静态开源案例-品优购设计目标css制作图标规范seo优化网页标题 titledescription 网站说明 显示在搜索引擎后方的解释Keywords关键词字体图标引入方法注意搭建整个页面时的路径问题html代码首页(index.html)商品列表页(list.html)商品详情页(detail.html)注册页面(register.html)CSS代码通用css(base.css)公用css(common.css)首页css(index.css)商品列表页css(list.css原创 2021-03-01 21:37:53 · 6982 阅读 · 0 评论 -
使用html+css-实现静态开源案例-学成网
使用html+css实现-静态开源案例-学成网基础开发须知开发系列工具开发流程CSS书写顺序布局流程页面制作小tipshtml代码css样式本文代码与原版的psd文件链接:https://pan.baidu.com/s/1HjnoetxZ_F8HBIUdJt-5cg 提取码:y77t基础开发须知开发系列工具PhotoShop CC2019 事先预览效果 作为蓝图Sublime3 编辑器 写代码开发Chrome 编译器 看效果做测试开发流程1.创建存放工程的文件夹2.创建首页inde原创 2020-07-17 18:51:36 · 1224 阅读 · 0 评论