开胃小菜

一、纯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. apache hbase 发布1.0.0版本
			
    今天apache发布了最新的hbase 1.0.0,下图是版本变迁历史: 详情参考: https://blogs.apache.org/hbase/entry/start_of_a_new_era
    
			
    2. 
						
  2. How to change the implementation (detour) of an externally declared function
			
    原文地址:http://stackoverflow.com/questions/6905287/how-to-change-the-implementation-detour-of-an-extern ...
    
			
    3. 
						
  3. Socket编程的UDP与TCP，应用在哪些地方
			
    随着网络技术飞速发展,网速已不再是传输的瓶颈,UDP协议以其简单.传输快的优势,在越来越多场景下取代了TCP,如网页浏览.流媒体.实时游戏.物联网. 1,网速的提升给UDP稳定性提供可靠网络保障 CD ...
    
			
    4. 
						
  4. Window 任务栏清除历史记录
			
    Window任务栏上的历史记录在很多情况下是很方便的[可以很快速的执行命令] 但如果历史记录太多可能会影响使用,经过我N长时间的研究和网络上的搜索 终于找到了清除的方法,网络上通过IE删除等方式都是无 ...
    
			
    5. 
						
  5. centos清除dns cache.
			
    # /etc/init.d/nscd restart # service nscd restart # service nscd reload # nscd -i hosts https://www. ...
    
			
    6. 
						
  6. EF6 DbModelBuilder
			
    protected override void OnModelCreating(DbModelBuilder modelBuilder) { modelBuilder.Entity<Produc ...
    
			
    7. 
						
  7. ubuntu 12.04启用休眠
			
    x86-64 与EM64区别 EM64T全称是Extended Memory 64 Technology(64位内存技术扩展技术.Intel声称“EM64T技术是Intel对IA32平台一系列技术革新 ...
    
			
    8. 
						
  8. CPP Note
			
    hello.cpp -> 编译代码g++ hello.cpp -o a -> a.out 区分大小写的编程语言 内置类型 一些基本类型可以使用一个或多个类型修饰符进行修饰: signed: ...
    
			
    9. 
						
  9. 一起SQL引发OOM的解决思路与过程(转载)
			
    在TOMCAT WEB程序的运行过程中,突然触发了内存溢出错误,检查Tomcat的localhost日志,找到如下信息: java.lang.OutOfMemoryError: Java heap s ...
    
			
    10. 
						
  10. MySQL -- Innodb中的change buffer
			
    change buffer是一种特殊的数据结构,当要修改的辅助索引页不在buffer pool中时,用来cache对辅助索引页的修改.对辅助索引页的操作可能是insert.update和delete操 ...
    
			
    11.