css
关注
分享
扫一扫
辰逸博客
会不定时的写。
展开
-
Bootstrap 前端开发框架
Bootstrap 前端开发框架Bootstrap 来自TWitter（推特）， 是目前最受欢迎的前端框架。bootstrap 是基于HTML、CSS和JavaScript的， 它简洁灵活，使得web开发更加快捷。中文官网： http://www.bootcss.com/官网：http://getbootstrap.com/推荐使用：http://bootstrap.css88.com/...原创 2019-11-25 14:18:38 · 3220 阅读 · 1 评论 -
rem适配方案与移动端web开发之响应式布局
rem适配方案1. 让一些不能等比自适应的元素， 达到当设备尺寸发生改变的时候，等比例适配当前设备。2. 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当HTML字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。1. rem实际开发适配方案 1. 按照设计与设备宽度的比例，动态计算并设置html根标签的font-size 大小； （媒体...原创 2019-11-24 15:47:03 · 747 阅读 · 0 评论 -
Less 基础
Less 基础1.CSS是一门非程序语言， 没有变量、函数、SCOPE（作用域）等概念。 1. CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。 2. 不方便维护及扩展，不利于复用。 3. CSS没有很好的计算能力。 4. 非前端开发工程师来讲，往往会因为缺少CSS编程经验而很难写出组织良好且易于维护的CSS代码项目。css的缺点：<!D...原创 2019-11-23 01:50:34 · 346 阅读 · 0 评论 -
rem基础、 媒体查询、 引入资源 （理解）
rem基础rem单位 rem（root em）是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html） 设置font-size=12px； 非根元素设置width：2rem；则换成px表示就是24px。命令演示：<!DOCTYPE html><html lang="en">...原创 2019-11-21 23:40:19 · 371 阅读 · 0 评论 -
制作 携程网移动端首页
1. 技术选型 方案： 我们采取单独制作移动页面方案 技术： 布局采取flex布局 2. 设置视口标签以及引入初始化样式 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale...原创 2019-11-21 00:57:31 · 4263 阅读 · 1 评论 -
移动web开发之flex布局
1. flex布局体验传统布局 flex弹性布局 兼容性好 操作方便，布局极为简单，移动端应用很广泛布局繁琐 PC端浏览器支持情况较 局限性，不能再移动端很好的布局 IE 11或更低版本，...原创 2019-11-20 02:19:26 · 465 阅读 · 0 评论 -
移动布局中的 4. 移动端开发选择 5. 移动端技术解决方案 6. 移动端常见布局
4. 移动端开发选择1. 移动端主流方案1.单独制作移动端页面（主流）： 京东商城手机版、淘宝触屏版、苏宁易购手机版。2.响应式页面兼容移动端（其次）三星手机官网。2.单独移动端页面（主流）通常情况下，网址域名前面加m（moblie）可以打开移动端。通过判断设备，如果是移动设备，如果是移动设备打开，则跳转到移动端页面。 比如： m.taobao.com m.jd.com ...原创 2019-11-19 00:06:28 · 457 阅读 · 0 评论 -
移动布局中的 1.移动端基础 2.视口 3.二倍图
1. 移动端基础1. 浏览器现状 PC端常见浏览器： 360浏览器、谷歌浏览器、QQ浏览器、百度浏览器、 搜狗浏览器、IE浏览器。 移动端常见浏览器：UC浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器、360安全浏览器、 谷歌浏览器、搜狗浏览器、搜狗手机浏览器、猎豹浏览器、以及其他杂牌浏览器。国内的UC和QQ，百度等手机浏览器都是根据webkit修改过来的内核，国内...原创 2019-11-18 02:13:12 · 531 阅读 · 0 评论 -
3D转换
3D 转换我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。**有什么特点：** 近大远小。 物体后面遮挡不可见。 当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。1. 三维坐标系三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 x轴 ： 水平向右 注意： x右边是正值，左边是负值。 y轴 ： 垂...原创 2019-11-17 01:20:28 · 830 阅读 · 0 评论 -
CSS3中的动画
动画动画（animation） 是css中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个， 或一组动画常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。1. 动画的基本使用制作动画分为两步：先定义动画再使用（调用）动画用keyfames定义动画（类似定义类选择器） @keyframes 动画名称{...原创 2019-11-16 01:47:08 · 962 阅读 · 2 评论 -
2D转换之旋转与缩放
2D转换之旋转 rotate2D转换指的是让元素在2维平面内顺时针旋转或者逆时针旋转。1. 语法： transform：rotate（度数）2. 重点： 1. rotate里面跟度数，单位是deg 比如 rotate（45deg）。 2. 角度为正时，顺时针，负时，为逆时针。 3. 默认旋转的中心是元素的中心点。命令演示：<...原创 2019-11-15 00:52:28 · 1741 阅读 · 1 评论 -
css3 2D转换
2D转换2D转换的概念：转换（transform）是css3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。转换（transform）你可以简单理解为变形。 比如这张擎天柱：1. 移动： translate2. 旋转： rotate3. 缩放： scale1. 二维坐标系2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系 。2. 2D...原创 2019-11-14 00:19:17 · 290 阅读 · 0 评论 -
品优购首页布局与logo优化
品优购首页布局命名集合： Document 名称 说明 快捷导航栏 shortcut 头部 ...原创 2019-11-13 01:41:56 · 1201 阅读 · 0 评论 -
字体图标
字体图标图片是由诸多的优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的“http请求”者都会大大降低网页的性能的。更重要的是图片不能很好地进行“缩放”，此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被从新“宠幸”啦。。这就是字体图标（iconfont）。1. 字体图标优点可以做出跟图片一样可以做的事情，改变透明度、旋转度、等...但是本质其实是...原创 2019-11-12 00:09:53 · 422 阅读 · 3 评论 -
css三角形之美与品优购项目
CSS三角形之美div{ width: 0; height: 0; line-height:0; font-size: 0; border-top: 10px solid red; border-right:10px solid green; ...原创 2019-11-11 01:48:52 · 562 阅读 · 0 评论 -
滑动门与 margin负值之美
1.滑动门先来体会一下现实中的滑动门，或者你可以叫做推拉门：滑动门出现的背景制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？为了是各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术，他从新的角度构建页面，是各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用...原创 2019-11-10 02:53:50 · 603 阅读 · 0 评论 -
vertical-align 垂直对齐 与 溢出的文字 省略号显示 css精灵技术（sprite）重点
1.vertical-align 垂直对齐 1. 有宽度的块级元素居中对齐，时margin：0 auto 2. 让文字居中对齐，是text-align：center； 但是我们从来没有讲过有垂直居中的属性 vertical-align垂直对齐，他只针对于行内元素或行内块元素， vertical-align ：baseline |top |middle |bott...原创 2019-11-08 21:15:41 · 552 阅读 · 0 评论 -
元素的显示与隐藏、CSS用户界面样式
1. 元素的显示与隐藏1. 目的：让一个元素在页面中消失或者显示出来。2. 场景：类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！1.1 display显示（重点）1. display设置或检索对象是否及如何显示。display：none 隐藏对象display：block 除了转换为块级元素之外，同时还有显示元素的意思。2. 特点：隐藏之后，不再保留位...原创 2019-11-08 01:06:58 · 1136 阅读 · 0 评论