开胃小菜

一、纯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. 关于数据库alter的一系列操作总结
			
    表操作 对于表的操作——创建(create),删除(drop)来说,基本上大家都很清楚,而作为很少被使用到的修改(alter)命令往往存在一些问题,现在做一下总结: 添加列:alter table 表 ...
    
			
    2. 
						
  2. pt-query-digest简介使用
			
    简介        pt-query-digest 是用于分析mysql慢查询的一个工具,与mysqldumpshow工具相比,py-query_digest 工具的分析结果更具体,更完善. 有时因为 ...
    
			
    3. 
						
  3. JAVA4种线程池的使用
			
    Java通过Executors提供四种线程池,分别为:newCachedThreadPool创建一个可缓存线程池,如果线程池长度超过处理需要,可灵活回收空闲线程,若无可回收,则新建线程.newFixe ...
    
			
    4. 
						
  4. linux C++ 获取服务器外网IP地址(使用系统调用system)
			
    废话不多说,直接贴代码: #include<string.h> #include<stdlib.h> #include<stdio.h> #include<s ...
    
			
    5. 
						
  5. zabbix用户管理
			
    zabbix用户管理,主要包括用户增删改查.用户报警媒介管理.用户权限管理. 安装完zabbix后,已经自带了两个用户Admin和Guests 超级管理员默认账号:Admin,密码:zabbix,这是 ...
    
			
    6. 
						
  6. [3] MQTT,mosquitto,Eclipse Paho---怎样使用 Eclipse Paho MQTT工具来发送订阅MQTT消息？
			
    在上两节,笔者主要介绍了 MQTT,mosquitto,Eclipse Paho的基本概念已经怎样安装mosquitto. 在这个章节我们就来看看怎样用 Eclipse Paho MQTT工具来发送接 ...
    
			
    7. 
						
  7. 如何免费的让网站启用https
			
    本文源自酷壳:如何免费的让网站启用HTTPS 今天,我把CoolShell变成https的安全访问了.我承认这件事有点晚了,因为之前的HTTP的问题也有网友告诉我,被国内的电信运营商在访问我的网站时加 ...
    
			
    8. 
						
  8. RabbitMQ使用技巧
			
    一. net客户端介绍    http://www.cnblogs.com/hsyzero/p/6297644.html 二. RabbitMQ消息应答 执行一个任务可能需要花费几秒钟,你可能会担心如 ...
    
			
    9. 
						
  9. 第三部分：Android 应用程序接口指南---第二节：UI---第五章 设置（Settings）
			
    第5章 设置(Settings) 应用程序通常包括允许用户修改应用程序的特性和行为的设置功能.例如,一些应用程序允许用户指定通知是否启用或指定多久使用云同步数据.如果你想要为你的应用程序提供设置,你应 ...
    
			
    10. 
						
  10. [docker]docker4种网络最佳实战
			
    参考: http://hicu.be/docker-container-network-types docker默认3中网络类型 参考: https://docs.docker.com/engine/ ...
    
			
    11.