开胃小菜

一、纯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. 利用dockerfile定制镜像
			
    利用dockerfile定制镜像 镜像的定制就是定制每一层所添加的配置.文件.如果可以吧每一层修改.安装.构建.操作的命令都写入到一个脚本,用脚本来构建.定制镜像,这个脚本就是dockerfile.  ...
    
			
    2. 
						
  2. ADODB 手册
			
        PHP ADODB1.99版手册 (修正版)   PHP ADODB 1.99版手册中文翻译 <修正版> ADODB PHP 在数据库的支持上是很令人称道的,几乎所有的知名数据库系 ...
    
			
    3. 
						
  3. unity 打包编译记录
			
    1.放到Plugins目录下的贴图不会打包进去 2.放到Plugins目录下的dll会自动打包,代码也会打包 3.放在Resources目录下的资源会自动打包 4.放在StreamingAssets目 ...
    
			
    4. 
						
  4. 全景分割pipeline搭建
			
    全景分割pipeline搭建 整体方法使用语义分割和实例分割结果,融合标签得到全景分割结果: 数据集使用:panoptic_annotations_trainval2017和cityscapes; p ...
    
			
    5. 
						
  5. eclipse-修改启动JDK版本
			
    打开eclipse安装目录下的eclipse.ini文件,将红色内容加入 -vm ../Java/jdk1.6.0_26/bin (或者指向具体目录:D:/software/jdk_1.8u91/bi ...
    
			
    6. 
						
  6. Revit中如何给不同构件着色
			
    在Revit构件密集,默认的显示模式难以区分不同构件的区别,比如建筑立面有很多不同的机电管道,风管.水管,电缆桥架等,可一个给不同的机电管线添加不同的颜色,以示其区别,如下图所示,完成着色后,各种不同 ...
    
			
    7. 
						
  7. 源码版本管理工具 :TFS  GIT
			
    至于svn  ..忽略不计了... 集中式代码管理 CVCS 模式:TFS 分布式代码管理 DVCS 模式:git 两者比较大的差别:tfs 只有一个中央仓储,其他副本都要与中央仓储进行更新.git  ...
    
			
    8. 
						
  8. Swift 柯里化
			
    前言 由于柯里化在业务层的应用较少,所以从 Swift 3.0 开始移除了柯里化的用法,但是 Swift 的很多底层特性是使用柯里化来表达的. 1.柯里化 1.1 柯里化简介 柯里化(Currying ...
    
			
    9. 
						
  9. 11g新特性 -- Virtual Private Catalogs
			
    在oracle 11g之前版本中,如果用户只是需要访问recovery catalog 中的某个数据库,但是我们却只能将整个recovery catalog授权给他,无法做到严格限制. 现在,virt ...
    
			
    10. 
						
  10. 跟我学SharePoint2013视频培训课程——版本控制示例(15)
			
    课程简介 第15天,SharePoint 2013版本控制示例 视频 SharePoint 2013 交流群 41032413
    
			
    11.