开胃小菜

一、纯CSS布局

  • UI效果

From: 创建一个没有表格的网页

  • 代码详情
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>
* {

    box-sizing: border-box;

}

body {

    margin:;

}

.header {

    background-color: #2196F3;

    color: white;

    text-align: center;

    padding: 15px;

}

.footer {

    background-color: #444;

    color: white;

    padding: 15px;

}

.topmenu {

    list-style-type: none;

    margin:;

    padding:;

    overflow: hidden;

    background-color: #777;

}

.topmenu li {

    float: left;

}

.topmenu li a {

    display: inline-block;

    color: white;

    text-align: center;

    padding: 16px;

    text-decoration: none;

}

.topmenu li a:hover {

    background-color: #222;

}

.topmenu li a.active {

    color: white;

    background-color: #4CAF50;

}

.column {

    float: left;

    padding: 15px;

}

.clearfix::after {

    content: "";

    clear: both;

    display: table;

}

.sidemenu {

    width: 25%;

}

.content {

    width: 75%;

}

.sidemenu ul {

    list-style-type: none;

    margin:;

    padding:;

}

.sidemenu li a {

    margin-bottom: 4px;

    display: block;

    padding: 8px;

    background-color: #eee;

    text-decoration: none;

    color: #666;

}

.sidemenu li a:hover {

    background-color: #555;

    color: white;

}

.sidemenu li a.active {

    background-color: #008CBA;

    color: white;

}


</style>

</head>


<body>






<ul class="topmenu">

  <li><a href="#home" class="active">主页</a></li>

  <li><a href="#news">新闻</a></li>

  <li><a href="#contact">联系我们</a></li>

  <li><a href="#about">关于我们</a></li>

</ul>

<div class="clearfix">

  <div class="column sidemenu">

    <ul>

      <li><a href="#flight">The Flight</a></li>

      <li><a href="#city" class="active">The City</a></li>

      <li><a href="#island">The Island</a></li>

      <li><a href="#food">The Food</a></li>

      <li><a href="#people">The People</a></li>

      <li><a href="#history">The History</a></li>

      <li><a href="#oceans">The Oceans</a></li>

    </ul>

  </div>

  <div class="column content">

    <div class="header">

      <h1>The City</h1>

    </div>

    <h1>Chania</h1>

    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>

    <p>You will learn more about responsive web pages in a later chapter.</p>

  </div>

</div>

<div class="footer">

  <p>底部文本</p>

</div>






</body>


</html>




重要组件




一、基本组件




二、CSS 实例


Goto: http://www.runoob.com/css/css-examples.html【查询实例】


CSS3新特性




一、边框


CSS3 圆角，也可详见：http://www.runoob.com/css3/css3-border-radius.html


CSS3 盒阴影


边界图片


框大小，详见：http://www.runoob.com/css3/css3-box-sizing.html


二、背景


三、渐变


四、文本效果、字体


五、2D/3D 转换


六、过渡、动画


七、多列布局


八、用户界面


resize


box-sizing


outline-offset


九、图片


十、按钮


十一、分页


十二、弹性盒子


十三、多媒体查询


Ref: CSS3 多媒体查询实例


以上仅仅记录个别要点。


日后慢慢补充。
												


											
[UI] 02 - Layout & CSS3的更多相关文章
	

    
								
  1. Duilib源码分析(五)UI布局—Layout与各子控件
		
    接下来,继续分析duilib之UI布局Layout,目前提供的布局有:VerticalLayout.HorizontalLayout.TileLayout.TabLayout.ChildLayout分 ...
    
		
    2. 
						
  2. CRM WEB UI 02搜索跳转到详细界面
		
    结合上一个,在上一个中,创建的是选择链接字段EBELN. 下面来实现点击EBELN跳转到详细界面: 1.创建ZLYTEST03_H组件,做详细界面. 2.创建概览页 DETOV. 3.创建视图集 DE ...
    
		
    3. 
						
  3. [Code::Blocks] Install wxWidgets & openCV
		
    The open source, cross platform, free C++ IDE. Code::Blocks is a free C++ IDE built to meet the most ...
    
		
    4. 
						
  4. 本人SW知识体系导航 - Programming menu
		
    将感悟心得记于此,重启程序员模式. js, py, c++, java, php 融汇之全栈系列 [Full-stack] 快速上手开发 - React [Full-stack] 状态管理技巧 - R ...
    
		
    5. 
						
  5. [Full-stack] 网页布局艺术 - Less
		
    故事背景 一个过程: template/html ----> css ----> less ----> bootstrap/flex ----> Semantic-ui fle ...
    
		
    6. 
						
  6. 【翻译】22款HTML & CSS3 UI工具包免费下载
		
    下面盘点了22款适用于网页设计的HTML&CSS3 UI工具包,并且全部都是免费的哦!喜欢就赶紧 下载或收藏吧.这些免费工具可以加速你的网页开发进程,让你有更多时间专注于其他更重要的部分.由于 ...
    
		
    7. 
						
  7. 一款css3很美的iphone注册表单样式
		
    代码如下,保存到html文件打开: <!DOCTYPE html> <html lang=""> <head> <title>Ani ...
    
		
    8. 
						
  8. Cocos2d-x 3.2 学习笔记（十四）保卫萝卜之界面UI
		
         保卫萝卜~上一篇说了使用CocoStudio制作主界面,这里来完善主界面动画及后续界面(主题界面ThemeUI.场景选择界面SelectMapUI),主要涉及的控件PageView. 学习要 ...
    
		
    9. 
						
  9. Android开发中内存和UI优化
		
    1.内存||效率 GC这东西对于开发人员用起来比较爽,但对于技术总监或产品总监来说,他们并不在乎,在乎的是用户运行App的流畅度,待你开发完了,笑眯眯的走过来,让你测试N个适配器,烦都烦死你. 说到这 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. CocosCreator项目结构
			
    1,通过 Dashboard,我们可以创建一个 Hello World 项目作为开始,创建之后的项目有特定的文件夹结构.[参考来源:官方文档] 2,初次创建并打开一个 Cocos Creator 项目 ...
    
			
    2. 
						
  2. JDBC（2）—Statement
			
    介绍: 获取到数据库连接之后,就可以对数据库进行一些增.删.改操作,但是却不能进行查询操作. 增删改操作是程序到数据库的一个操作过程,但是查询是程序到数据库--数据库返回到程序的一个过程. 步骤: 步 ...
    
			
    3. 
						
  3. Java知识回顾 （5）数组、日期与时间， StringBuffer和StringBuilder
			
    一.数组 数组对于每一门编程语言来说都是重要的数据结构之一,当然不同语言对数组的实现及处理也不尽相同. dataType[] arrayRefVar; // 首选的方法 或 dataType arra ...
    
			
    4. 
						
  4. Unity Shader-后处理：高斯模糊
			
    一.简介   上一篇文章学习了模糊的原理以及基本的模糊实现,对于清晰和模糊这个定义感觉还是比较说明问题,这里再贴出一下:“清晰的图片,各个像素之间会有明显的过渡,而如果各个像素之间的差距不是很大,那么 ...
    
			
    5. 
						
  5. 给力开源，.Net开源地址大收集
			
    一.基础类库: 1,项目名:Npoi 资源星级:★★★ (个人评的) 介绍:NPOI - 一个能帮助你直接读写office文件流的库 系统教程:http://www.cnblogs.com/tonyq ...
    
			
    6. 
						
  6. error C2039: 'SetWindowTextA' : is not a member of 'CString'
			
    m_OpenPath.SetWindowText(strPath);   错误原因:在给控件关联变量m_OpenPath时,变量类型选择错误   解决办法:
    
			
    7. 
						
  7. 手把手教你用CAB发布OCX的简单办法
			
    CAB是一种文件压缩格式,把OCX文件(ActiveX插件)压缩成CAB文件是为了发布它,这种发布方式给人感觉“浏览器会自动安装该插件”,很多朋友钟情于此.目前流行很多压缩工具,但WINRAR这类工具 ...
    
			
    8. 
						
  8. C# Chart使用总结 1 ---------关于图表数据的来源
			
    关于图表数据的来源: 1.通过XValueMember YValueMembers 设置 OleDbConnection conn = new OleDbConnection(connStr); Ol ...
    
			
    9. 
						
  9. supervisor //todo
			
    #安装easy-installyum install python-setuptools #安装 supervisoreasy_install supervisor #创建主配置文件echo_supe ...
    
			
    10. 
						
  10. 设置Linux交换分区
			
    Linux下可以创建两种类型的交换空间,一种是swap分区,一种是swap文件.前者适合有空闲的分区可以使用,后者适合于没有空的硬盘分区,硬盘的空间都已经分配完毕.例如:安装redhat的时候,你可以 ...
    
			
    11.