自己写的无图片圆角DIV盒子Box —— 仿百度知道

最新推荐文章于 2024-06-02 17:37:01 发布

原创最新推荐文章于 2024-06-02 17:37:01 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#百度 #div #stylesheet #html #c

Web开发（脚本和动态语言）专栏收录该内容

51 篇文章

订阅专栏

HTML代码：

 
 <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圆角无图片DIV - z.En - http://blog.youkuaiyun.com/zenwong/ (http://www.b-Yes.com/)</title>
<link href="box.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div>
        <div class="top_and_dow">
            <div class="box_1"></div>
            <div class="box_2"></div>
            <div class="box_3"></div>
            <div class="box_4"></div>
        </div>
        <div class="center">
            <h1>已解决</h1>
            <div class="body"><a href="http://blog.youkuaiyun.com/zenwong">z.En - http://blog.youkuaiyun.com/zenwong (http://www.b-Yes.com/)A餐B餐C餐桃猪牛肉混合菜虾;烤牛肉土耳其香肠牛排;炒鸡蛋面包烩肉饭;薄饼可可桔子饮料维生素丸咖啡香蕉杏仁脆饼苹果饮料花椰菜鸡尾;水果布丁葡萄汁饮料冰淇淋航天食品的包装要求，一是保证在失重情况下使用，二是重量轻体积小。一般有罐装(铝罐或双金属罐)、盒装(复水食品盒)和袋装(复水饮料袋、蒸煮袋、铝塑复合袋等)。美国航天飞机使用的复水盒采用硅橡胶隔膜来防止加水后漏水，使加水操作更为方便可靠。苏联/俄罗斯使用的复水食品包装是软塑料袋，加工比较简单。美国航天飞机还使用复水软料袋，它的加水原理与复水食品盒相同。救生食品可采用软塑料内包装和硬塑料外包装。救生饮水可采用马口铁罐或塑料瓶包装</a>
            </div>
        </div>
        <div class="top_and_dow">
            <div class="box_4"></div>
            <div class="box_3"></div>
            <div class="box_2"></div>
            <div class="box_1"></div>
        </div>
    </div>
</body>
</html>

CSS文件：

  /* z.En - http://blog.youkuaiyun.com/zenwong/ (http://www.b-Yes.com/)*/
 *{
     font-size:14px;
 }
 a:link {
     text-decoration: none;
 }
 a:visited {
     text-decoration: none;
 }
 a:hover {
     text-decoration: none;
 }
 a:active {
     text-decoration: none;
 }
 a{
     color:#000000;
     cursor:default;
 }
 .top_and_dow{
     width:auto;
     height:3px;
 }
 .top_and_dow .box_1{
     width:200px;/*这里是center样式的width减4*/
     height:1px;
     font-size:0px;
     overflow:hidden;
     background:#e5ada7;
     
     margin-left:3px;
 }
 .top_and_dow .box_2{
     width:200px;/*这里是center样式的width减4*/
     height:1px;
     font-size:0px;
     overflow:hidden;
     background:#fed6d2;
     border-left:2px solid #e5ada7;
     border-right:2px solid #e5ada7;
     
     margin-left:1px;
 }
 .top_and_dow .box_3{
     width:202px;/*这里是center样式的width减2*/
     height:1px;
     font-size:0px;
     overflow:hidden;
     background:#fed6d2;
     border-left:1px solid #e5ada7;
     border-right:1px solid #e5ada7;
     
     margin-left:1px;
 }
 .top_and_dow .box_4{
     width:204px;/*这里要等于center样式的width*/
     height:1px;
     font-size:0px;
     overflow:hidden;
     background:#fed6d2;
     border-left:1px solid #e5ada7;
     border-right:1px solid #e5ada7;
     
     margin-left:0px;
 }
 .center{
     width:204px;/*这里是你希望的Box的width*/
     height:auto;
     background:#fed6d2;
     border-left:1px solid #e5ada7;
     border-right:1px solid #e5ada7;
     
     margin-left:0px;
 }
 .center h1{
     display:block;
     margin:0px;
     padding:0px;
     padding-left:5px;
     line-height:24px;
 }
 .body{
     width:198px;/*这里是center样式的width减6*/
     margin:0px 3px;
     height:auto;
     background:#FFFFFF;
}