1. CSS3 border-radius 圆角矩形框

圆角矩形框组件是页面布局中常常用到的,利用CSS3的border-radius可非常方便的创建。

并且在横向纵向上面都有很好的扩展性和灵活性。

border-radius需要针对不用浏览器做兼容,-webkit-和-moz-部分语法还有些区别

推荐http://border-radius.com/ 直接设置圆角,自动生成代码。

注意:IE8及以下版本不兼容border-radius,不是特别重要可以不用理会,实在要兼容则需要引入背景图片做圆角。

页面具有相同圆角的矩形框组件式,则统一设置类样式,方便管理和维护。

2. 背景引入图片制作圆角矩形框

如何通过引入图片也达到横向和纵向的扩展性。

(1)需要有足够多的嵌套标签引入背景图片;

(2)背景图片要求足够的高度和宽度

(3)左上和左下角引入同一个背景图片,右上和右下角引入同一个背景图片。

结构标签为: 为别为.container  .desc  .link  .link em  四个引入背景图片,分别位于右上,左上,左下,右下。

<div class="container">
<p class="desc">This box is:</p>
<p class="link"><em><a href="#">Indestructible!</a></em></p>
</div>

背景图片1,要求足够的高度,左上角和左下角引入的是同一张图片,背景图片分别位于左上角和左下角。

背景图片2,要求足够的宽度和高度,,右上角和右下角引入的同一张图片。背景图片分为位于右上角和右下角。

3. 灵活性的箭头

当文字大小改变时,文字周围空白和箭头的两边在比例上保持一致。

(1)HTML结构代码很简单

<h2>This way!</h2>

(2)需要一个尺寸很大的箭头背景图,设置背景图位置为上下居中50%位置

(3)需要设置h2的width值,padding值都为rem单位

web设计_5_自由的框式组件的更多相关文章

  1. web设计之无懈可击

    无懈可击的web设计旨在尽可能地考虑页面元素在各个情况下都能够呈现最好的效果. 1. 思路总览 2. 灵活的文字 3. 可伸缩的导航栏 4. 可扩展的行 5. 自由的框式组件 6. 图片/标题/说明文 ...

  2. [转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

    原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因 ...

  3. 2008年最佳Web设计/前端开发技巧、脚本及资源总结

    工具&Web应用 13个可能会让你说”Thank You”的必不可少的开源应用 14个免费工具让你了解为什么人们会放弃访问你的网站 40+CSS生成器 74个我们可能已经忘记的适合网页设计师的 ...

  4. 十大响应式Web设计框架

    http://www.csdn.net/article/2014-05-13/2819739-responsive-frameworks-for-web-design 对于设计师而言,网站设计中的任意 ...

  5. 《响应式Web设计实践》学习笔记

    原书: 响应式Web设计实践 目录: 第2章 流动布局 1. 布局选项 2. 字体大小 3. 网格布局 4. 混合固定宽度和流动宽度 第3章 媒介查询 1. 视口 2. 媒介查询结构 3. 内嵌样式与 ...

  6. 浅谈响应式Web设计与实现思路

    是否还在为你的应用程序适配PC端,移动端,平板而苦苦思索呢,是否在寻找如何一套代码适配多终端方式呢,是否希望快速上手实现你的跨终端应用程序呢,是的话,那就看过来吧,本文阐述响应式UI设计相关理论基础, ...

  7. 一点响应式Web设计与实现思路

    摘要: 是否还在为你的应用程序适配PC端,移动端,平板而苦苦思索呢,是否在寻找如何一套代码适配多终端方式呢,是否希望快速上手实现你的跨终端应用程序呢,是的话,那就看过来吧,本文阐述响应式UI设计相关理 ...

  8. 响应式Web设计与CSS(下)

    4.媒体类型与媒体查询 4.1 媒体类型 依据设备能力来分离样式的能力,始于媒体类型. 媒体类型用于针对特定的环境应用样式,包括屏幕显示.打印和电视等. 通过给link元素添加media属性,可以指定 ...

  9. 响应式WEB设计的9项基本原则

    响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...

随机推荐

  1. docker系列(五):网络通信

    1 引言 之前的几篇docker系列博客说的都是单个容器或者镜像的操作.但容器,作为一种简化的操作系统,又怎能不与机器或者容器相互协同工作呢,这就需要用到容器的网络功能.docker中提供了多种不同的 ...

  2. Python自学day-1

    一.Python介绍 1.python擅长领域:     WEB开发:Django. pyramid. Tornado. Bottle. Flask. WebPy     网络编程:Twisted(牛 ...

  3. 第三章: Expressions and Flow Control

    第三章: Expressions and Flow Control一:局部变量和实例变量定义变量是指设定变量的数据类型和变量的名字,Java语言要求变量遵循先定义,再初始化,然后使用的规则.作用域:指 ...

  4. 【分页工具-spring boot】Mybatis PageHelper 集成Spring boot

    官方文档:https://github.com/pagehelper/pagehelper-spring-boot 1.引入包,测试过以下版本兼容性还是比较好的 <!--Mybatis-Spri ...

  5. 表格树控件QtTreePropertyBrowser编译成动态库(设计师插件)

    目录 一.回顾 二.动态库编译 1.命令行编译动态库和测试程序 2.vs工具编译动态库和测试程序 3.安装文档 4.测试文档 三.设计师插件编译 1.重写QDesignerCustomWidgetIn ...

  6. c# 自己实现可迭代的容器

    在c#中我们经常使用到foreach语句来遍历容器,如数组,List,为什么使用foreach语句能够遍历一个这些容器呢,首先的一个前提是这些容器都实现了IEnumerable接口,通过IEnumer ...

  7. Centos7下安装Mysql8.0

    突然发现mysql都有8.0了,且性能提升比较明显,就自己装来玩玩. centos的yum源中默认是没有mysql的,所以我们需要先去官网下载mysql的repo源并安装: 官网:http://dev ...

  8. Win32小游戏--蜘蛛纸牌

    前一段时间完成了蜘蛛纸牌的仿写,现将过程和思路记录下来 首先,为了符合复用性,在win32的基本框架中,把可变的部分用c++封装起来成为一系列虚函数,这样如果再继续写游戏的话,只需要继承这个类就可以了 ...

  9. MySQL metalock的一些技巧(写大于读的案例,以及获得锁的顺序)

    前言:元数据锁不是锁定数据,而是锁定描述数据的元数据信息.就像很多装修工人(工作线程)在室内(对象上)装修(操作),不能有其他工人(线程)把屋子拆了(表删除了). MySQL 为了数据一致性使用元数据 ...

  10. js 为何范围内随机取整要用floor,而不是ceil或者round呢

     壹 ❀ 引 我在如何使用js取任意范围内随机整数这篇博客中,列举并分析了取[n,m)与[n,m]范围内整数的通用方法,并在文章结果留了一个疑问:为什么通用方法中取整操作,我们使用Math.floor ...