![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
lengyuefengqing
这个作者很懒,什么都没留下…
展开
-
Flex 布局教程:语法篇
网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就转载 2016-07-03 16:42:26 · 287 阅读 · 0 评论 -
flex布局教程:实例
你会看到,不管是什么布局,Flex往往都可以几行命令搞定。我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面,最多可以放置9个点。下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo转载 2016-07-03 16:45:23 · 390 阅读 · 0 评论 -
html+css 漂亮的登陆界面
Login.htmlhtml lang="en">head> meta charset="UTF-8"> title>Titletitle> link href="style.css" rel="stylesheet" type="text/css">head>body>div class="wrapper"> div class="header"原创 2016-07-03 17:19:32 · 34041 阅读 · 0 评论 -
实现tab切换的功能
实现如下图Tab切换的功能html代码: html> head> meta charset="utf-8"> title>DEMOtitle> head> body> div class="wrapper"> ul class="tabs"> li class="selected">Tab1li>转载 2016-07-03 19:37:54 · 674 阅读 · 0 评论 -
点击按钮,弹出对话框
html代码: html> head> meta charset="utf-8"> title>JS Bintitle> head> body> button id="show">点我1button> div class="wrapper"> div class="inner"> div class="box">转载 2016-07-03 19:52:49 · 1964 阅读 · 0 评论 -
下拉菜单
1、静态网页下拉菜单html+css标签项目列表标签链接float浮动display:block属性position属性规定元素的定位 注意点:ul li{ float: left;//垂直列表改成水平列表 width: 90px; line-height: 40px;//垂直居中 text-align: center;//水平居原创 2016-07-07 21:31:01 · 1410 阅读 · 0 评论 -
html+css span和div 布局
html>html lang="en">head> meta charset="UTF-8"> title>Titletitle>head>body> div> span style="display: inline-block;float: left">标题 span> p style="padding-left:48px;原创 2016-07-20 15:42:48 · 989 阅读 · 0 评论