网页制作CSS教程:自适应圆角

网页制作CSS教程:自适应圆角的相关文章

• 
  CSS设计圆角自适应按钮教程

  标签：Web开发

  !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" head title/title meta http-equiv="Content-Type" content="text/html; charset=gb2312" / style type="text/css" !-- *{padding:0px;margin:0px;} body{font-size:12px;} h2{margin:50px;} a{text-decoratio...[ 查看全文 ]

  Oh小菲机

  221
• 
  圆角自适应宽度按钮的css实现

  标签：Web开发

  有时候我们需要一个链接看上去像按钮，所以就需要用到block属性，如果要几个按钮并排或者需要和其他文字混排的时候，inline-block就可以很好的解决这个问题。 只是不是所有人都响应了Mozilla的号召把Firefox升级到了3.0。遗憾的是，Firefox2不支持这个属性。网上查了一下，似乎有很多种建议方案，但是只有一个叫-moz-inline-stack的属性可以作为替代方案。 已测试通过的浏览器：IE6, IE7, FF2,...[ 查看全文 ]

  我的笔名叫三石

  11
• 
  DIV+CSS：网页一行两列背景自适应

  标签：Web开发

  网页布局中常有的一种情况就是网页主体部分分成一行两列；而在很多种情况下，设计师们常把左右两列的背景色设计成不同色彩，以实现内容块的明显区分；但这样的设计给布局提出了一个看似简单，而实现非常难的问题；那就是左右两列怎么样实现背景高度自适应，及左边内容高于右边时，右边背景色也要和左边一样；右边内容高于左边时，左边背景色也要和右边一样； 当年为了实现这个，我在网上查过无数的文章，...[ 查看全文 ]

  渝浪子22

  11
• 
  CSS教程：图片的自适应居中和兼容处理

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  前几天在做腾讯微博的微卖场的时候，遇到需要做图片居中的需求。也就是说，商品列表中的图片需要居中显示。因为图片是卖家自己把商品图片链接过来，商品图片的大小没有做限制和过滤。所以我们需要做的是，让图片在容器当中水平居中、垂直居中、图片自适应容器大小。图片原图大小和在容器中显示的大小有这样的关系： 假设容器大小为200像素*200像素，图片的宽为x 像素，高为y 像素，则： 当x=200,y=200时，图...[ 查看全文 ]

  tianzhaobin111

  51
• 
  用CSS控制图片自适应大小

  标签：Web开发

  图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制。 代码：   .img { max-width:600px; width:600px; width:e­xpression(document.body.clientWidth600？"600px":"auto"); overflow:hidden; } ◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。 ◎ width:600px; 在所有浏览器中图片的大小为600px; ◎...[ 查看全文 ]

  恺撒ct10

  51
• 
  Div + CSS高度自适应解决方案

  标签：Web开发

  自适应高度的问题，采用 Div + CSS 进行三列或二列布局时，事先不知道具体高度，只能根据内容的增减自适应高度，要使两列（或三列）的高度相同，用 Table 很容易实现，但采用 Div + CSS 就显得比较麻烦了。按照一般的做法，大都采用背景图填充或 JS 脚本的方法使高度相同，但这些都不是最好的办法，我认为… 下面介绍采用“隐藏容器溢出”和“正内补丁”和“负外补丁”结合的方法 主要代码： ...[ 查看全文 ]

  骨灰309

  01
• 
  用CSS使图片自适应显示宽度

  标签：Web开发

  公司的项目中需要显示由用户提供URI链接的图片，可是预先无法获知图片的尺寸大小，假如图片尺寸过大将会影响页面布局。最理想的解决方案自然是自动生成缩略图，涉及的后台工作较为复杂，用CSS进行控制是个能够接受的捷径。 假如用width属性强行设定显示尺寸似乎太不智能。幸好Firefox/Opera/IE7都提供了max-width属性支持。 假定希望图片显示宽度不超过500像素，CSS可能如下： 以下为引用的内...[ 查看全文 ]

  默momo魔

  21
• 
  CSS布局自适应高度解决方法

  标签：Web开发

  CSS布局自适应高度解决方法 这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。 先看代码： #wrap{ overflow: hidden; } #sideleft, #sideright{ ...[ 查看全文 ]

  家和小童鞋

  11
• 
  Div + CSS 高度自适应解决方案

  标签：Html CSS布局 Div+CSS XHTML

  自适应高度的问题，采用 Div + CSS 进行三列或二列布局时，事先不知道具体高度，只能根据内容的增减自适应高度，要使两列（或三列）的高度相同，用 Table 很容易实现，但采用 Div + CSS 就显得比较麻烦了。按照一般的做法，大都采用背景图填充或 JS 脚本的方法使高度相同，但这些都不是最好的办法，我认为… 下面介绍采用“隐藏容器溢出”和“正内补丁”和“负外补丁”结合的方法 主要代码： 以下是引用片...[ 查看全文 ]

  丢了梦123

  61
• 
  只用css制作圆角

  标签：Web开发

  不用图片，只用css制作圆角的另一方法。来自 html div class="curvedBox"spanspan class="r1" /spanspan class="r2" /spanspan class="r3" /spanspan class="r4" /span /spandiv class="content"Flex is a cross-platform development framework for creating rich Internet applications (RIAs). Flex enables you to create expressive,...[ 查看全文 ]

  芸豆结

  21
• 
  如何用CSS使图片自适应显示宽度

  标签：Web开发

  公司的项目中需要显示由用户提供URI链接的图片，可是预先无法获知图片的尺寸大小，如果图片尺寸过大将会影响页面布局。最理想的解决方案自然是自动生成缩略图，涉及的后台工作较为复杂，用CSS进行控制是一个可以接受的捷径。 如果用width属性强行设定显示尺寸似乎太不智能。幸好Firefox/Opera/IE7都提供了max-width属性支持。假定希望图片显示宽度不超过500像素，CSS可能如下： fit-image{ b...[ 查看全文 ]

  转身一笑脸金牛

  321
• 
  CSS3教程(2):网页边框半径和网页圆角

  标签：Web开发

  页面中圆角的实现是个很头疼的问题，虽然现在有很多种实现方法，但是都是比较麻烦的。在本文中，让我们看看如何使用CSS3 border-radius来实现圆角DIV。 跨浏览器兼容性 就像在上一篇《CSS3教程:什么是CSS3》中提到的，并不是所有的浏览器支持CSS3，但是那些比较好的浏览器选择兼容，而不是直接支持。我们有两个能使用的前缀。 前缀： -moz(例如 -moz-border-radius)用于Firefox -webkit(例如：-webkit-b...[ 查看全文 ]

  什么_都木有

  11
• 
  .clear方法解决网页自适应高度的问题

  标签：Web开发

  在制作网页的过程中，自适应问题是经常遇到，而又最让人头疼的，看了好多种解决的方法，但是都不是万能的。今天遇到这个问题，实在让我挠头，借鉴了 Shark的方法，又给了我一个新思路。当时没仔细看LBS的样式表，今天才发现，.clear用的就是这个方法。接下来，我会做个关于自适应高度问题的汇总，以便今后遇到问题时候更快解决。 为了解决浮动元素引起父元素无法获得高度的问题，我们一般在子元素的最后...[ 查看全文 ]

  wwahs5253

  31
• 
  使用CSS制作圆角效果

  标签：Web开发

  Web2.0中，圆角效果是很常见的，以前都是用图片来模仿，现在直接用css就能实现，例子代码如下 Html代码： !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" html head titleUntitled Document/title meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /head style type="text/css" body{ padding: 20px; background-color: #FFCC66; font: 100.01% "Tr...[ 查看全文 ]

  再銱吔袙寀忉

  11
• 
  网页如何自适应不同的分辨率界面

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  随着移动端设备的猛涨，现在设计师们做网页也要经常考虑如何适应这些不同分辨率的屏幕了。今天腾讯游戏TGideas的Rukki与我们分享了关于自适应不同分辨率界面的几个技巧，非常实用，建议同学们学习一下。 首先呢来看一张图： 这是2个半月腾讯游戏官网的分辨率数据，可以看出来PC端里1024*768占20%、1920*1080占14%。而这2个分辨率的显示宽度相差了接近一倍。 而现在设计师的设计稿普遍输出尺寸都是1920...[ 查看全文 ]

  八月秋初夜

  401
• 
  CSS教程:制作圆角矩形的网站头像

  标签：Web开发

  目前许多网站的个人头像都采用圆角矩形来体现，这种效果就是通过CSS与PNG透明图标来做的，下面为您介绍两种制作圆角矩形头像的方法： 好多sns的头像都使用圆角了，昨天在校内上看到了圆角头像，今天在Qzone的也看到了圆角头像，圆角头像看上去比直角的美观。 圆角头像的制作原理就是在头像上覆盖一张透明的图片，把四个角颜色设置成页面的背景颜色，中间透明， 假设我的页面底色是纯黑色的，那么这...[ 查看全文 ]

  五粮液散装酒

  21
• 
  三种全屏自适应网页视觉设计心得

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  [ 查看全文 ]

  普古玛丽护肤

  1451
• 
  CSS布局实例:上中下三行,中间自适应

  标签：Web开发

  上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中。 firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 测试通过。 对于非ie内核浏览器，通过设定display:table、display:table-row和display:table-cell来模拟表格的表现形式。 最外层#box { display:table; }，高度100%，其子层#header/#main/#footer为{ display:table-row; }，因此可以模拟表格的行效...[ 查看全文 ]

  那片花海70

  411
• 
  使TStringGrid自适应宽度

  标签：编程语言 网络编程

  procedure AutoFitable(AGrids: TStringGrid); //传入TStringGrid对像即可, 2004/10/28,CoolSlob var   I, J: Integer;   MaxLenRow: Integer;   CurRowLen: Integer; begin   inherited;   for J := 0 to AGrids.ColCount - 1 do   begin     MaxLenRow := 0;     for I := 1 to AGrids.RowCount...[ 查看全文 ]

  又遇李伯伯

  31
• 
  CSS三行三列自适应高度div布局

  标签：Web开发

  此代码欢迎各位转摘；网上有好多，但没有真正的自适应高度，看到一个自适应宽度的，还可以，没有我们长用的控制一定宽度的。 测试通过：IE5、IE5.5、IE6、IE7、FF其他的没有测试，如果有问题在下面留言。 说下主要的CSS在此页面的作用，:overflow:hidden;强制contain自适应高度(看背景)，clear:both这个就不用说啦！ [html] style type="text/css" body{text-align: center;} div{border:1px solid #f60; tex...[ 查看全文 ]

  社区医院12345

  521