web设计_5_自由的框式组件
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_自由的框式组件的更多相关文章
- web设计之无懈可击
无懈可击的web设计旨在尽可能地考虑页面元素在各个情况下都能够呈现最好的效果. 1. 思路总览 2. 灵活的文字 3. 可伸缩的导航栏 4. 可扩展的行 5. 自由的框式组件 6. 图片/标题/说明文 ...
- [转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用
原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因 ...
- 2008年最佳Web设计/前端开发技巧、脚本及资源总结
工具&Web应用 13个可能会让你说”Thank You”的必不可少的开源应用 14个免费工具让你了解为什么人们会放弃访问你的网站 40+CSS生成器 74个我们可能已经忘记的适合网页设计师的 ...
- 十大响应式Web设计框架
http://www.csdn.net/article/2014-05-13/2819739-responsive-frameworks-for-web-design 对于设计师而言,网站设计中的任意 ...
- 《响应式Web设计实践》学习笔记
原书: 响应式Web设计实践 目录: 第2章 流动布局 1. 布局选项 2. 字体大小 3. 网格布局 4. 混合固定宽度和流动宽度 第3章 媒介查询 1. 视口 2. 媒介查询结构 3. 内嵌样式与 ...
- 浅谈响应式Web设计与实现思路
是否还在为你的应用程序适配PC端,移动端,平板而苦苦思索呢,是否在寻找如何一套代码适配多终端方式呢,是否希望快速上手实现你的跨终端应用程序呢,是的话,那就看过来吧,本文阐述响应式UI设计相关理论基础, ...
- 一点响应式Web设计与实现思路
摘要: 是否还在为你的应用程序适配PC端,移动端,平板而苦苦思索呢,是否在寻找如何一套代码适配多终端方式呢,是否希望快速上手实现你的跨终端应用程序呢,是的话,那就看过来吧,本文阐述响应式UI设计相关理 ...
- 响应式Web设计与CSS(下)
4.媒体类型与媒体查询 4.1 媒体类型 依据设备能力来分离样式的能力,始于媒体类型. 媒体类型用于针对特定的环境应用样式,包括屏幕显示.打印和电视等. 通过给link元素添加media属性,可以指定 ...
- 响应式WEB设计的9项基本原则
响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...
随机推荐
- HTML连载7-表单练习
昨天因为晚上有事情,未更新,但是今天中午发也不晚,因为是同一天只是时间早晚而已,因此今日傍晚还将更新一次,废话不多说. 1.表单的综合练习,我们要创建一个综合的注册页面.运用到我们前面所学的所有知识. ...
- 自定义实现一个loghub(或kafka)的动态分片消费者负载均衡?
一般地,像kafka之类的消息中间件,作为一个可以保持历史消息的组件,其消费模型一般是主动拉取方式.这是为了给消费者足够的自由,回滚或者前进. 然而,也正是由于将消费消息的权力交给了消费者,所以,消费 ...
- 数据库之MySQL的基本使用
数据库简介 数据库 数据库就是一种特殊的文件,其中存储着需要的数据:关系型数据库核心元素: 数据行(记录) 数据列(字段) 数据表(数据行的集合) 数据库(数据表的集合) Ubuntu进入数据库: 1 ...
- 模型model
django的ORM系统 ORM概念:对象关系映射(Object Relational Mapping,简称ORM)ORM的优势:不用直接编写SQL代码,只需像操作对象一样从数据库操作数据. 模型类必 ...
- POJ 2455:Secret Milking Machine(二分+最大流)
http://poj.org/problem?id=2455 题意:给出n个点和m条无向路,每条路都有一个长度.从1点到n点要走t次两两互不重合的路.求出每条1->n的路中相邻两点最大值的最小值 ...
- 关于过两级mux的时序约束的添加(一个非常经典的时序约束问题)
非常开心自己的微信公众号: <数字集成电路设计及EDA教程> 关注者超过了1700 里面主要讲解数字IC前端.后端.DFT.低功耗设计以及验证等相关知识,并且讲解了其中用到的各种EDA工具 ...
- springboot自动装配(1)---@SpringBootApplication注解怎么自动装配各种组件
1.对于springboot个人认为它就是整合了各种组件,然后提供对应的自动装配和启动器(starter) 2.@SpringBootApplication注解其实就是组合注解,通过它找到自动装配的注 ...
- Java第二次作业——数组和String类
Java第二次作业--数组和String类 学习总结 1.学习使用Eclipse关联jdk源代码,查看String类的equals()方法,截图,并学习其实现方法.举例说明equals方法和==的区别 ...
- 18.linux基础优化
1.linux系统的基础优化 (1)关闭selinux sed -i 's#SELINUX=enforcing#SELINUX=disabled#g' /etc/selinux/config 临时关闭 ...
- SQL Server 表结构操作
一.创建表 --直接定义主外键 create table wallet( ID ) primary key, ,) not null, Name ) default '余额', Member_ID ) ...