CSS
关注
分享
扫一扫
ljs_coding
这个作者很懒，什么都没留下…
展开
-
【CSS】模仿携程网h5静态页面
模仿的是导航栏的部分，主要是为了应用伸缩布局的相关知识和熟悉知识点。效果图源代码<!DOCTYPE html><html><head> <title>携程网</title> <style type="text/css"> *{/*第一步清除默认*/ margin: 0; p...原创 2019-02-21 15:01:10 · 1973 阅读 · 0 评论 -
margin-left:0和margin-left:-100%有什么区别？
乍一看我以为这两者是一样的..然后，测试一下<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;原创 2019-02-21 19:41:26 · 3027 阅读 · 2 评论 -
【CSS】圣杯布局实现1
圣杯布局：什么是圣杯布局？三栏布局，左右两栏随着浏览器缩放宽度不变，中间栏自适应知识点：浮动、定位、padding和margin的区别我没有使用大部分教程的方法，但是效果相同。步骤如下：第一步.定义基本结构和样式<!DOCTYPE html><html><head> <title>圣杯布局</title> &...原创 2019-02-21 20:21:04 · 250 阅读 · 0 评论 -
【CSS】圣杯布局实现2
采用和上一篇不一样的方法来实现圣杯布局第一步，依然是定义基本结构和样式。<!DOCTYPE html><html><head> <title>圣杯布局</title> <style type="text/css"> *{ margin: 0; padding:0; ...原创 2019-02-21 21:26:18 · 384 阅读 · 0 评论 -
【CSS】双飞翼布局
双飞翼布局和圣杯布局实现的是一样的效果，中间栏自适应，两侧栏宽度固定。不同的地方在于同样设置main宽度为100%,为避免内容遮挡采取的方式不同，在main中又添加了一个div设置它的margin：0px 200px;即可。而且内容也不需要设置word-break即可包裹在中间有效区域。完整源代码<!DOCTYPE html><html lang="en">&...原创 2019-02-21 21:39:29 · 196 阅读 · 0 评论 -
【CSS】"开门大吉"动画实现
顾名思义，“开门大吉”指的是鼠标悬浮在块内的时候出现开门效果，显示出底部的图片。知识点：3d变形、透视、translate移动效果图：完整源代码<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{ ...原创 2019-02-22 13:45:47 · 957 阅读 · 0 评论 -
【CSS】图片栏无缝滚动效果实现
效果图思路分析：第一步，定义div>ul>li*7,因为有7张图片。第二步，设置div的宽度高度以及li的浮动，保证它们全部在div内的同一行。第三步，实现滚动。用到了动画相关知识点，即animation: move 5s linear infinite;@keyframes move{ from{ transform: translateX(0...原创 2019-02-22 14:24:06 · 2590 阅读 · 0 评论 -
Flex布局
目前看到的博客中最通俗易懂且详尽的一篇https://www.cnblogs.com/qcloud1001/p/9848619.html原创 2019-06-28 14:52:22 · 156 阅读 · 0 评论