备案控制台
开发者社区 云原生 文章 正文

CSS做的圆角页面，和书上的不完全一致

2011-06-20 669
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：     最终效果如下图：    但是，和书上说的做法不同，我是采用固定大小，然后float一个left一个right。书上也不错，先把Container和Side用in这个DIV括起来，in先margin:0 auto进行居中，并position:relative准备里面的div以它定位;里面的Container,width:500,position:absolute,top:0,left:0;右边的Side,margin:0 0 0 500px。
    最终效果如下图：
img_ed3343cf9b5e4b05cfb8637b0fc291cf.png

    但是，和书上说的做法不同，我是采用固定大小，然后float一个left一个right。书上也不错，先把Container和Side用in这个DIV括起来，in先margin:0 auto进行居中，并position:relative准备里面的div以它定位;里面的Container,width:500,position:absolute,top:0,left:0;右边的Side,margin:0 0 0 500px。这种思路也很巧妙。

以下是我的代码：
  1. !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. html xmlns="http://www.w3.org/1999/xhtml">
  3. head>
  4.     meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     style>
  6.         body{
  7.             background:#ffff99;
  8.             font:12px/1.5 Arial;
  9.         }
  10.         
  11.         .rounded h2{
  12.             margin:0;
  13.             padding:20px 20px 10px 20px;
  14.         }
  15.         
  16.         .rounded .main{
  17.             padding:10px 20px 10px 20px;
  18.             margin:-2em 0 0 0;
  19.         }
  20.         
  21.         .rounded .footer{
  22.         }
  23.         
  24.         .rounded .footer p{
  25.             padding:10px 20px 20px 20px;
  26.             margin:-2em 0 0 0;
  27.         }
  28.         
  29.         .rounded{
  30.             background:url(images3/left-top.gif) top left no-repeat;
  31.         }
  32.         
  33.         .rounded h2{
  34.             background:url(images3/right-top.gif) top right no-repeat;
  35.         }
  36.         
  37.         .rounded .main{
  38.             background:url(images3/right.gif) top right repeat-y;
  39.         }
  40.         
  41.         .rounded .footer{
  42.             background:url(images3/left-bottom.gif) bottom left no-repeat;
  43.         }
  44.         
  45.         .rounded .footer p{
  46.             background:url(images3/right-bottom.gif) bottom right no-repeat;
  47.         }
  48.         
  49.         #header,#in,#pagefooter{
  50.             margin:0 auto;
  51.         }
  52.         
  53.         #header.rounded, #in{
  54.             width:820px;
  55.         }
  56.         
  57.         #container.rounded{
  58.             width:600px;
  59.             float:left;
  60.         }
  61.         
  62.         #side.rounded{
  63.             width:200px;
  64.             float:right;
  65.         }
  66.         
  67.         #pagefooter.rounded{
  68.             clear:both;
  69.             width:820px;
  70.         }
  71.     /style>
  72. /head>
  73. body>
  74.     div id="header" class="rounded">
  75.         h2>Header/h2>
  76.         div class="main">
  77.             p>
  78.                 这是一行文本，这里作为样例，显示在圆角框。br />
  79.                 这是一行文本，这里作为样例，显示在圆角框。
  80.             /p>
  81.             p>
  82.                 这是一行文本，这里作为样例，显示在圆角框。br />
  83.                 这是一行文本，这里作为样例，显示在圆角框。
  84.             /p>
  85.         /div>
  86.         div class="footer">
  87.             p>
  88.                 这是版权信息文字。
  89.             /p>
  90.         /div>
  91.     /div>
  92.     div id="in">
  93.         div id="container" class="rounded">
  94.             h2>Container/h2>
  95.             div class="main">
  96.                 p>
  97.                     这是一行文本，这里作为样例，显示在圆角框。br />
  98.                     这是一行文本，这里作为样例，显示在圆角框。
  99.                 /p>
  100.                 p>
  101.                     这是一行文本，这里作为样例，显示在圆角框。br />
  102.                     这是一行文本，这里作为样例，显示在圆角框。
  103.                 /p>
  104.                 p>
  105.                     这是一行文本，这里作为样例，显示在圆角框。br />
  106.                     这是一行文本，这里作为样例，显示在圆角框。
  107.                 /p>
  108.             /div>
  109.             div class="footer">
  110.                 p>
  111.                     这是版权信息文字。
  112.                 /p>
  113.             /div>
  114.         /div>
  115.         div id="side" class="rounded">
  116.             h2>Side/h2>
  117.             div class="main">
  118.                 p>
  119.                     这是一行文本，这里作为样例，显示在圆角框。br />
  120.                     这是一行文本，这里作为样例，显示在圆角框。
  121.                 /p>
  122.                 p>
  123.                     这是一行文本，这里作为样例，显示在圆角框。br />
  124.                     这是一行文本，这里作为样例，显示在圆角框。
  125.                 /p>
  126.             /div>
  127.             div class="footer">
  128.                 p>
  129.                     这是版权信息文字。
  130.                 /p>
  131.             /div>
  132.         /div>
  133.     /div>
  134.     div id="pagefooter" class="rounded">
  135.         h2>Pagefooter/h2>
  136.         div class="main">
  137.             p>
  138.                 这是一行文本，这里作为样例，显示在圆角框。br />
  139.                 这是一行文本，这里作为样例，显示在圆角框。
  140.             /p>
  141.             p>
  142.                 这是一行文本，这里作为样例，显示在圆角框。br />
  143.                 这是一行文本，这里作为样例，显示在圆角框。
  144.             /p>
  145.         /div>
  146.         div class="footer">
  147.             p>
  148.                 这是版权信息文字。
  149.             /p>
  150.         /div>
  151.     /div>
  152. /body>
  153. /html>
从中进行总结：
    CSS很灵活，实现一个想法有多种方案，在不同条件下，这些方案有优有劣。千万别学的把自己僵住：认为书上的都是绝对正确的，任何条件下都可以的。别学傻了啊你。

文章标签：
前端开发
容器
关键词：
CSS页面
CSS圆角
五岳之巅
目录
相关文章
梦中千秋
|
19天前
|
前端开发
页面无法滑动-CSS: touch-action属性
页面无法滑动-CSS: touch-action属性
梦中千秋
22 0
明月看潮生
|
19天前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 004 我的第一个页面
编程笔记 html5&css&js 004 我的第一个页面
明月看潮生
35 1
晚来南风晚相识
|
19天前
css3中的圆角border-radius
css3中的圆角border-radius
晚来南风晚相识
32 0
梦回故国楼台梦
|
19天前
|
UED 开发者 容器
【专栏】Flexbox是CSS3的全新布局模式，提供灵活响应式的页面设计
【4月更文挑战第27天】Flexbox是CSS3的全新布局模式，提供灵活响应式的页面设计。其特点包括灵活性、响应式和易理解，通过主轴和交叉轴控制元素排列对齐。核心概念有容器和项目，常用于导航栏、卡片布局、响应式设计、表格和表单布局。关键属性如flex-direction定义主轴方向，justify-content和align-items控制对齐，flex属性调整项目伸缩，order改变排序。在实践中，要关注响应式、代码维护和浏览器兼容性，以优化布局和用户体验。
梦回故国楼台梦
43 4
听风者i
|
19天前
|
前端开发 数据安全/隐私保护
利用 HBuilderX 设置CSS样式会员注册页面
利用 HBuilderX 设置CSS样式会员注册页面
听风者i
21 1
梦回故国楼台梦
|
19天前
|
移动开发 前端开发 JavaScript
【专栏：HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先，简述HTML5用于构建网页内容，CSS3用于描述样式。接着，分四步展示实现过程：1) 设计包含输入框和提示信息的表单结构；2) 使用CSS3创建样式，增强视觉效果；3) 使用JavaScript监听输入事件，动态验证表单并显示错误信息；4) 测试和调试确保跨平台兼容性。通过学习，开发者能掌握创建带验证功能的表单，提升用户体验。
梦回故国楼台梦
31 7
梦回故国楼台梦
|
19天前
|
前端开发 测试技术 UED
【专栏：HTML 与 CSS 实战项目篇】实现一个在线产品展示页面
【4月更文挑战第30天】本文介绍了使用HTML和CSS创建吸引人的在线产品展示页面的实战步骤，包括页面设计规划、HTML结构搭建、CSS样式设计、具体页面实现、交互效果添加、优化与提升。通过简洁布局、产品列表和详情页设计，实现易用且具吸引力的展示效果。优化图片和代码，提升性能，以助企业在数字时代脱颖而出。
梦回故国楼台梦
65 5
你挚爱的强哥
|
19天前
|
移动开发 前端开发
【通用CSS模板】移动端H5页面统一样式.css
【通用CSS模板】移动端H5页面统一样式.css
你挚爱的强哥
13 0
小吴吴吴呀
|
19天前
CSS3设置圆角化
CSS3设置圆角化
小吴吴吴呀
18 0
hhzz
|
19天前
|
前端开发
CSS圆角大杀器，使用滤镜构建圆角及波浪效果
CSS圆角大杀器，使用滤镜构建圆角及波浪效果
hhzz
25 0