故事背景


一个过程:

template/html ----> css ----> less ----> bootstrap/flex ----> Semantic-ui

flex是css3新增内容, less是css3的预编译器,bootstrap是一系列css3 class合集

Semantic-ui作为一款开发框架,帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。

响应式布局 based on Semantic-ui as following:

 

进化史


一、HTML 基础

Goto: [Node.js] 07 - Html and Http

 
 

二、CSS 基础

Goto: [UI] 01 - CSS

  • 选择器
选择器 class 选择器
id 选择器

分组方式简写法

也可以嵌套写法

也可以组合写法

  • 样式表
优先级
1 (内联样式)Inline style
2 (内部样式)Internal style sheet
3 (外部样式)External style sheet
4 浏览器默认样式 
  • 属性控制

背景、文本、列表、表格、可见、内联。

  • 空间位置

首先、要了解盒子模型。

其次、position定位属性的五个值。

之后、图片浮动效果。

最后、对齐。

  • 伪类、伪元素

冒号后面紧跟着的一些特性。

三、CSS 布局

Goto: [UI] 02 - Layout & CSS3

这里展示了 通过基本的CSS创建的页面风格;与之后的bootstrap做对比。

四、jQuery

Ref: [UI] 06 - jQuery

  • 组件 与 jQuery 事件
<script>
$(document).ready( function(){
$("button").click( function(){   # <button>...</button>
$("#test").hide();         # <p id="test">...</p>
});
});
</script>
  • 效果

淡入淡出、下拉菜单、动画

Callback 方法、链(Chaining)

  • DOM 操作 
HTML 设置内容,设置属性,插入内容,删除元素。
CSS 设置一个或多个属性,返回属性。
  • 对象 size 获取

高宽,内高宽,外高宽。

  • 获取对象 - 遍历

获得parents, childern, siblings

  • AJAX

Ref: Difference between $.ajax() and $.get() and $.load()

get() 和post() 就是ajax() 的get方法和post方法,

load() 也一样,但是load()可以加载到一个选定的元素中。

  • jQuery 插件

一些高级控件的使用。

Bootstrap


bootstrap是一个响应式框架,基于Jquery。

[UI] 03 - Bootstrap: component

[UI] 04 - Bootstrap: layout & navigation

[UI] 05 - Bootstrap: built-in components

一、基础操作

排版 主标题、副标题
内容强调
对齐风格
代码
表格
表单 水平表单
下拉选择框
文本框(包括验证)
复选框、单选按钮
按钮
图片 图像
图标
网格系统 详见原链接

二、菜单栏

导航条

  - 按钮下拉菜单

  - 一组按钮构成导航

  - 导航与按钮下拉菜单结合

分页导航

翻页导航

标签

三、内置组件

缩略图配文字和链接(按钮)

警示框 - 逐渐消失

进度条 - 五颜六色版本

媒体对象 - 图片与文字的布局

列表组 - 含标签

面板 - 圆角且内部分块

弹出窗口 - dialog box

PHP 模板


一、PHP 视图

Ref: [Laravel] 04 - Blade templates

section, yield, extends, parent 四个关键字。

continue...

[Full-stack] 网页布局艺术 - Less的更多相关文章

  1. 在网页布局中合理使用inline formating context(IFC)

    引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.

  2. 一、HTML和CSS基础--网页布局--如何用css进行网页布局

    什么叫做布局? 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合. 网页设计的特点 网页可以自适应宽度 网页的高度理论上可以无限延长 网页分栏 分栏又称为分列,常见的布局分为:一列布局 ...

  3. 大设计时代:针对超大网页布局的一些思考和建议 [Aseoe]

    对于有些设计项目来说,老套的设计模式并不奏效,你需要设计的大点,要比以往设计的元素还要大,因此就非常适合采用超大网页布局.无论是采用大块大块的背景照片还是背景视频,超大网页布局的效果非常显著:极具视觉 ...

  4. 利用css进行网页布局

    网页布局: 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式.传达信息的同时有美感.网页设计特点(相对纸媒来说). ...

  5. [CSS属性设置,盒子模型,网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  6. 利用@media screen实现网页布局的自适应

    利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...

  7. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  8. MasonJS – 创建完美的砌体结构网页布局

    MasonJS 插件用来解决目前大多数的网格系统使用中的问题——间距.当使用 Masonry,Isotope 或任何其他网格插件时,布局中会出现空白或边缘参差不齐的情况.MasonJS 可以帮助你填补 ...

  9. 《精通CSS网页布局》读书报告 ----2016-12-5补充

    第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦!  (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...

随机推荐

  1. python:函数中五花八门的参数形式(茴香豆的『回』字有四种写法)

    毫不夸张的说,python语言中关于函数参数的使用,是我见过最为灵活的,随便怎么玩都可以,本文以数学乘法为例,演示几种不同的传参形式: 一.默认参数 def multiply1(x, y): retu ...

  2. Revit API PickPoint过滤条件

    //过滤选择,加上过滤条件,没有看出来差别. [TransactionAttribute(Autodesk.Revit.Attributes.TransactionMode.Manual)] publ ...

  3. 详解Paint的setColorFilter(ColorFilter filter)

    一.简介 setColorFilter(ColorFilter filter) 设置颜色过滤,这个方法需要我们传入一个ColorFilter参数同样也会返回一个ColorFilter实例.我们在set ...

  4. SpringMVC拦截器详解

    拦截器是每个Web框架必备的功能,也是个老生常谈的主题了. 本文将分析SpringMVC的拦截器功能是如何设计的,让读者了解该功能设计的原理. 重要接口及类介绍 1. HandlerExecution ...

  5. Linux下 $(cd `dirname $0`;pwd)

    在命令行状态下单纯执行 $ cd `dirname $0` 是毫无意义的.因为他返回当前路径的".".这个命令写在脚本文件里才有作用,他返回这个脚本文件放置的目录,并可以根据这个目 ...

  6. stm32型号解读

      ST意法半导体在牵手ARM后可以说是做的非常成功,抓住了从普通MCU到ARM的市场转变的机会.由于ST公司的STM32系列ARM 使用了完善的库开发,作为芯片的应用者不用从底层的寄存器来实现每个功 ...

  7. [C++] const与重载

    下面的两个函数构成重载吗? void M(int a){} //(1) void M(const int a){} //(2) 下面的呢? void M(int& a){} //(3) voi ...

  8. Python中调用自然语言处理工具HanLP手记

    手记实用系列文章: 1 结巴分词和自然语言处理HanLP处理手记 2 Python中文语料批量预处理手记 3 自然语言处理手记 4 Python中调用自然语言处理工具HanLP手记 5 Python中 ...

  9. 使用quicklz缩小程序体积

    目录 简述 压缩和解压代码 压缩代码 解压代码 将二进制文件生成C数组程序代码 简述 有一个需求是这样的,写的一个程序内置了一个很大的文件(实际就是抓取epsg.io的内容里面的epsg.io.jso ...

  10. Chrome禁止http自动转为https

    解决方法 在Chrome浏览器地址栏输入chrome://net-internals/#hsts 在Delete domain security policies 中输入要删除自动转换的域名 原因 将 ...