CSS
关注
分享
扫一扫
dq_095
软件工程师一位
展开
-
html5 移动端 手机端 Meta设置 总结如下：
1、强制让页面的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览。<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>2、 WebApp全屏模式 隐藏地址栏。...原创 2018-09-04 21:42:51 · 4000 阅读 · 0 评论 -
纯CSS画三角形（带边框）
实例一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .find-d原创 2018-10-09 00:07:38 · 12100 阅读 · 0 评论 -
css a链接使用特效
a链接使用特效一：<div class="service_hot_wrapper_look_more"><a href="">查看全部</a></div>.service_hot_wrapper_look_more{ margin: 0 auto; margin-top: 0px; padding-bottom: 7px; ...原创 2018-09-29 14:56:44 · 889 阅读 · 0 评论 -
html + css 隐藏超出浏览器窗口的内容纵向内容
css 隐藏超出浏览器窗口的内容关键代码： html,body { width: 100%; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; }结果：浏览器没有水平的滚动条，只有纵向滚动条html,body { width: 100%; ...原创 2018-09-27 15:11:34 · 1300 阅读 · 0 评论 -
移动端 meta 解释
移动端 meta 解释<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">name属性值 代表设备（电脑，平板，手机，tv，打印设备）content属性值 :...原创 2018-09-05 18:33:17 · 202 阅读 · 0 评论 -
移动HTML5 前端性能优化指南
PC优化手段在Mobile侧同样适用 在Mobile侧我们提出三秒钟渲染完成首屏指标 基于第二点，首屏加载3秒完成或使用Loading 基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB Mobile侧因手机配置原因，除加载外 渲染速度也是优化重点 基于第五点，要合理处理代码 减少渲染损耗 基于第二、第五点，所有影响首屏加载...原创 2018-09-05 18:12:00 · 193 阅读 · 0 评论 -
利用 @media screen 实现网页布局的自适应,@media screen and
利用 @media screen 实现网页布局的自适应,@media screen and开始研究响应式web设计，CSS3 Media Queries是入门。Media Queries 其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。 换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。 那么，Media Q...原创 2018-09-05 14:57:50 · 80579 阅读 · 1 评论 -
页面添加锚点 的 三种方式
HTML中的链接，正确的说法应该称作”锚点“，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页， 通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作”精准链接”的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。 类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。 锚点链接对...原创 2018-09-05 12:34:15 · 1972 阅读 · 0 评论 -
CSS3 边框圆角 展示示例（附代码）
边框圆角 展示示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3 边框</title> <style> body, ul,原创 2018-09-05 12:20:28 · 2502 阅读 · 0 评论 -
边框阴影
边框阴影 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>drop-shadows</title> <style> body原创 2018-09-04 23:59:40 · 463 阅读 · 0 评论 -
CSS3 : target伪类 实现Tab切换效果
CSS3 : target伪类 实现Tab切换效果 本Tab切换效果纯CSS3制作，无任何JavaScript<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .tablist {原创 2018-09-04 23:49:25 · 501 阅读 · 0 评论 -
html5/css3 响应式布局介绍 及 设计流程
html5/css3 响应式布局介绍 利用css3的media query媒体查询功能。 移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 一个普通的自适应显示的三栏网页，当你用不同的终端来查看这个页面的时候，他会根据几种终端来显示不同的样式，在电脑上是三列，在pad上应该也是 三列，在大屏手机上是三行，在屏幕...原创 2018-09-04 23:33:58 · 390 阅读 · 0 评论 -
CSS3属性 transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）（附代码）
CSS3属性 transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate） 在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。一.旋转 rotate用法：transform: rotate(45deg); 共一个参数“角度”，单位deg为度的意思...原创 2018-09-04 22:32:59 · 18281 阅读 · 0 评论 -
CSS爆炸级操作与总结
一、基础1、复位 &amp;amp;amp;amp;amp;lt;style type=&amp;amp;amp;amp;quot;text/css&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt; * { box-sizing: border-box; padding: 0; margin: 0; } &amp;amp;amp;am原创 2018-10-28 23:09:21 · 573 阅读 · 1 评论