开胃小菜

一、纯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. 自动部署tomcat 脚本
			
    自动部署tomcat 脚本 . /etc/init.d/functions #调用系统函数 yum -y install java >/dev/null TAR="apache-tom ...
    
			
    2. 
						
  2. Cocos Creator的小点
			
    声明的时候,变量如此:但用的时候就变成了border,找了很久的问题,一直没找到啊,后来就发现命名的时候和内置的一定不要太相似否则后悔的只能是自己: cc.Class({ extends: cc.Co ...
    
			
    3. 
						
  3. spring cloud——feign为GET请求时的对象参数传递
			
    一.问题重现 楼主在使用feign进行声明式服务调用的时候发现,当GET请求为多参数时,为方便改用DTO对象进行参数传递.但是,在接口调用时feign会抛出一个405的请求方式错误: {"t ...
    
			
    4. 
						
  4. Revit API创建房间
			
    start [Transaction(TransactionMode.Manual)] [Regeneration(RegenerationOption.Manual)] );             ...
    
			
    5. 
						
  5. [Asp.net core]bootstrap分页
			
    摘要 一直在用前后端分离,在一个后台管理的页面中,尝试封装了一个辅助类. 类 /// <summary> /// 分页viewmodel /// </summary> ///  ...
    
			
    6. 
						
  6. 解决springboot druid 数据库批量更新错误问题
			
    原文:https://www.2cto.com/kf/201712/706399.html springboot druid 数据库多SQL错误multi-statement not allow Ca ...
    
			
    7. 
						
  7. CUDA_ERROR_OUT_OF_MEMORY
			
    E tensorflow/stream_executor/cuda/cuda_driver.cc:1002] failed to allocate 198.83M (208486400 bytes)  ...
    
			
    8. 
						
  8. Core Animation学习总结
			
    文件夹: The Layer Beneath The Layer Tree(图层树) The Backing Image(寄宿层) Layer Geometry(图层几何学) Visual Effec ...
    
			
    9. 
						
  9. Permutations II leetcode java
			
    题目: Given a collection of numbers that might contain duplicates, return all possible unique permutat ...
    
			
    10. 
						
  10. eclipse里面使用Maven搭建web工程
			
    一.建立Maven项目 使用Eclipse的maven构建一个web项目,以构建SpringMVC项目为例: 1.1 选择建立Maven Project 选择File -> New ->  ...
    
			
    11.