CSS
关注
分享
扫一扫
ljs_coding
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
【CSS】模仿携程网h5静态页面
模仿的是导航栏的部分，主要是为了应用伸缩布局的相关知识和熟悉知识点。 效果图 源代码 <!DOCTYPE html> <html> <head> <title>携程网</title> <style type="text/css"> *{/*第一步清除默认*/ margin: 0; p...原创 2019-02-21 15:01:10 · 2042 阅读 · 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 · 3072 阅读 · 2 评论 -
【CSS】圣杯布局实现1
圣杯布局： 什么是圣杯布局？三栏布局，左右两栏随着浏览器缩放宽度不变，中间栏自适应 知识点：浮动、定位、padding和margin的区别 我没有使用大部分教程的方法，但是效果相同。步骤如下： 第一步.定义基本结构和样式 <!DOCTYPE html> <html> <head> <title>圣杯布局</title> &...原创 2019-02-21 20:21:04 · 273 阅读 · 0 评论 -
【CSS】圣杯布局实现2
采用和上一篇不一样的方法来实现圣杯布局 第一步，依然是定义基本结构和样式。 <!DOCTYPE html> <html> <head> <title>圣杯布局</title> <style type="text/css"> *{ margin: 0; padding:0; ...原创 2019-02-21 21:26:18 · 423 阅读 · 0 评论 -
【CSS】双飞翼布局
双飞翼布局和圣杯布局实现的是一样的效果，中间栏自适应，两侧栏宽度固定。不同的地方在于同样设置main宽度为100%,为避免内容遮挡采取的方式不同，在main中又添加了一个div设置它的margin：0px 200px;即可。而且内容也不需要设置word-break即可包裹在中间有效区域。 完整源代码 <!DOCTYPE html> <html lang="en"> &...原创 2019-02-21 21:39:29 · 229 阅读 · 0 评论 -
【CSS】"开门大吉"动画实现
顾名思义，“开门大吉”指的是鼠标悬浮在块内的时候出现开门效果，显示出底部的图片。 知识点：3d变形、透视、translate移动 效果图： 完整源代码 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ ...原创 2019-02-22 13:45:47 · 1038 阅读 · 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 · 2645 阅读 · 0 评论 -
Flex布局
目前看到的博客中最通俗易懂且详尽的一篇https://www.cnblogs.com/qcloud1001/p/9848619.html原创 2019-06-28 14:52:22 · 175 阅读 · 0 评论