这个web中常见的单元布局,最好的布局方式就是利用float布局。

其中有个很关键的问题是需要清浮动。子集浮动是无法撑开父级的高度。

目前较完善的清浮动解决方案:在浮动的父级上添加.clear,达到清楚浮动的效果。

.clear{
*zoom:1; /*利用CSS hack 触发IE6,7haslayout 解决bug */
} .clear:after{
conten:'';
display:block;
clear:both;
}

以上布局结构为: 可以利用dl dt dd结构

<article id="sweden">
<dl>
<dt>...</dt>
<dd class="img"><img /></dd>
<dd>...</dd>
</dl>
<dl>
<dt>...</dt>
<dd class="img"><img /></dd>
<dd>...</dd>
</dl>
<dl>
<dt>...</dt>
<dd class="img"><img /></dd>
<dd>...</dd>
</dl> </article>

首先通过浮动布局和清浮动,做成以下布局样式,

再在需要反向浮动的dl标签上添加类名,设置反向样式。

布局思想:先从整体布局相同或相似的,再通过局部命名空间不同设置私有特殊的样式。

图片也可以添加CSS3 box-shadow属性,对于不兼容的浏览器无法显示也没关系。

.shadow{
-webkit-box-shadow:1px 2px 2px rgba(0,0,0,0.15); 
-moz-box-shadow:1px 2px 2px rgba(0,0,0,0.15); 
box-shadow:1px 2px 2px rgba(0,0,0,0.15);   /*  分别表示纵向偏移,横向偏移,模糊偏移,颜色值rgba最后为透明度 */
}

web设计_6_图片/标题/说明文字布局的更多相关文章

  1. 《无懈可击的Web设计》_灵活的文字

    常见的方法 body{ font-size:12px; } 使用像素单位的优点: 不管使用哪种浏览器或者设备来查看,文字看起来都大小一致. 为什么这么做不是无懈可击的? 以像素为单位设定文字大小之后, ...

  2. 响应式Web设计- 背景图片

    背景图片可以响应式调整大小或缩放,以下是三种不同的方式 1.如果 background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域.图片保持其比例不 ...

  3. web设计之无懈可击

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

  4. 外媒速递:十大最佳心理学概念助你提升Web设计效果

    外媒速递是核子可乐精选的近日国外媒体的精彩文章推荐,希望大家喜欢! 本期给大家推荐的是帮助你提升Web设计效果的十大最佳心理学概念.改善企业云环境协作效率的九款卓越工具.选择移动应用开发工具时要考虑的 ...

  5. CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

  6. web响应式图片设计实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  7. web设计_2_灵活的文字

    最佳设计:可以让用户自由控制任何页面的文字大小. 浏览器中用户都是可以自定义默认的文字大小的,如果使用 px,用户自行在浏览器设置中改变了文字大小后,网页上是不会变化的.我们不能排除视障用户(如近视) ...

  8. 【css】25个漂亮的响应式布局的web设计【转】

    响应的web设计的做法是提高用户的浏览质量,并在不同设备上能够完美的浏览使用,就像大前端推出的D7主题.看看下面美丽的响应的网站布局,通过本文你会在以后的设计中找到响应的web设计的灵感. 1.Mar ...

  9. 什么是响应式Web设计?怎样进行?

    http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...

随机推荐

  1. 关于Git 的管理凭据操作

    1.桌面-->2.我的电脑-->3.右击选择属性-->4.控制面板主页-->5.在用户账户和家庭安全下,选择添加或删除用户账户-->转到“主用户账户”页面-->6. ...

  2. 在phpstorm中安装、配置和运行phpunit详细教程

    前提:安装了composer 一.安装phpunit组件 右键项目文件,composer---init composer,会生成一个composer.json文件 右键项目文件,composer--- ...

  3. 14 CSS权重深入

    <!-- 继承说明: (1)进行样式选择时,不指定标签的话,该选择器是继承来的. (2)继承的选择器的优先级为0,和标签选择器的优先级无可比性. --> <!DOCTYPE html ...

  4. SLAM方向公众号、知乎、博客上有哪些大V可以关注?

    一.公众号 泡泡机器人:泡泡机器人由一帮热爱探索并立志推广机器人同时定位与地图构建(SLAM)技术的极客创办而成,通过原创文章.公开课等方式分享SLAM领域的数学理论.编程实践和学术前沿. ​ 经典文 ...

  5. java - Builder模式实例化对象

    Builder 优雅的链式调用来实现实例化对象 1.  首先在实体类中,构造一个Builder内部类,由Builder来完成Person的属性赋值,并最终执行build来完成Person的实例化 pa ...

  6. Gradle +HanLP +SpringBoot 构建关键词提取,摘要提取 。入门篇

    前段时间,领导要求出一个关键字提取的微服务,要求轻量级. 对于没写过微服务的一个小白来讲.有点赶鸭子上架,但是没办法,硬着头皮上也不能说不会啊. 首先了解下公司目前的架构体系,发现并不是分布式开发,只 ...

  7. flask高级编程 LocalStack 线程隔离

    转:https://www.cnblogs.com/wangmingtao/p/9372611.html   30.LocalStack作为线程隔离对象的意义 30.1 数据结构 限制了某些能力 30 ...

  8. ASP.NET、.NET和C#的关系是怎样的?

    1..NET是什么?.Net全称.NET Framework是一个开发和运行环境,该战略是微软的一项全新创意,它将使得“互联网行业进入一个更先进的阶段”,.NET不是一种编程语言. 简单说就是一组类库 ...

  9. Oracle数据库---包

    --根据员工号或员工姓名获取员工的信息--根据员工号或员工姓名删除员工的信息--创建包规范CREATE OR REPLACE PACKAGE overload_pkgIS FUNCTION get_i ...

  10. Spring Cloud Alibaba | Nacos配置管理

    目录 Spring Cloud Alibaba | Nacos配置管理 1. pom.xml 项目依赖 2. 在 bootstrap.properties 中配置 Nacos server 的地址和应 ...