论坛首页 → Web前端技术论坛 →

用CSS2.0+html实现的页面,不含tr,td标签。

浏览 14090 次
锁定老帖子 主题：用CSS2.0+html实现的页面,不含tr,td标签。
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • liuzaix@gmail.com
  • 等级: 初级会员
  • 文章: 8
  • 积分: 93
   发表时间：2007-03-21  
CSS

manage_main.css文件：

body {
    margin:0px;
    border:0px;
    font-size:14px;
    font-style:normal;
    background-color: ghostwhite;
    }
   
form {
    margin:0px;
    padding:0px;
    }
   
ul {
    list-style: none;
    border: 0px;
    }
   
img {
    border:0px;
    }
   
textarea {

}

input.textInput {
    margin: 0px;
    font-size:9pt;
    font-family:arial;
    background: white;
}

input.buttonNormal {
    color: blue ;
    cursor: hand ;
}

input.buttonJianGe {
    margin-left: 50px;
    color: blue ;
    cursor: hand ;
}
   
a:link {
    color: #525252;
    text-decoration: none;
    }
   
a:visited {
    color: #525252;
    text-decoration: none;
    }
   
a:hover {
    color: blue;
    text-decoration: underline;
    }

div#part_insert {
    margin-left: 10px; margin-top: 10px; margin-bottom: 10px;
    padding: 0px;
    border: 0px;
    width: 700px;
}

#part_insert ul {  
    margin-left:  20px;
    margin-top : 10px;
    float: left;
}

#part_insert ul li.li_0 {  
    float: left;
    border: 0px;
    padding-left: 10px;
    height:  20px;
    width: 150px;
    font-weight: bolder;
    text-align: left;
    vertical-align: middle;
}

#part_insert ul li.li_1 {  
    float: left;
    border: 0px;
    padding-left: 10px;
    width: 150px;
    background-color: cyan;
    font-weight: bolder;
    text-align: left;
    vertical-align: middle;
}

#part_insert ul li.li_2 {
    padding-left: 20px;
    border: 0px;
    width: 500px;
    text-align: left;
    vertical-align: middle;
}

div#part_line {
    height: 5px;
    width: 700px;
    background-color: plum ;
}

div#part_query {
    margin-left: 8px; margin-top: 10px;
    color: green ;
}

div#part_show {
    margin-top: 10px;
    padding: 0px;
    border: 0px;
    width: 1200px;
}

#part_show ul {  
    margin-left:  0px;
    margin-top : 5px;
    float: left;
}

#part_show ul.tableHead {  
    margin:  0px; margin-top : 5px; margin-left: 0px; margin-right: 0px;
    float: left;
    background-color: cyan;
}

#part_show ul.line1 {  
    margin:  0px;
    padding-top : 5px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px;
    float: left;
    clear: left;
    background-color: #ffffff;
}

#part_show ul.line2 {  
    margin:  0px;
    padding-top : 5px;
    float: left;
    clear: left;
    background-color: gainsboro;
}

#part_show ul li {
    float: left;
    display: inline ;
    margin: 0px;
    padding: 0px;
}

div#childTable {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#childTable ul {  
    margin:  0px;
    padding: 0px;
    border: 0px;
    float: left;
    clear: left;
}

#childTable li {  
    float: left;
    display: inline ;
    margin: 0px;
    padding: 0px;
    border: 0px;
}



html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>52css.com</title>
<link rel="stylesheet" href="manage_main.css" type="text/css" />
</head>
<body>
<form action="" method="post">

<div id="part_insert">
<ul>
    <li class="li_1">姓名：</li>
    <li class="li_2"><input class="textInput" name="mingzi" size="20"/></li>
</ul>
<ul>
   <li class="li_1">性别：</li>
   <li class="li_2"><input type="radio" name="sex"/ value="male" checked="checked">男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="fmale" />女</li>
</ul>
<ul>
    <li class="li_1">出生年月：</li>
    <li class="li_2"><select name="birth_year">
                            <option value="－1">--请选择--</option>
                            <option value="1980">1980年</option>
                            <option value="1981">1981年</option>
                            <option value="1982">1982年</option>
                            <option value="1983">1983年</option>   
                    </select>
                    &nbsp;&nbsp;
                    <select name="birth_month">
                            <option value="－1">--请选择--</option>
                            <option value="1">1月</option>
                            <option value="2">2月</option>
                            <option value="3">3月</option>
                            <option value="4">4月</option>
                            <option value="1">5月</option>
                            <option value="2">6月</option>
                            <option value="3">7月</option>
                            <option value="4">8月</option>
                            <option value="1">9月</option>
                            <option value="2">10月</option>
                            <option value="3">11月</option>
                            <option value="4">12月</option>
                    </select>                   
    </li>
</ul>
<ul>
    <li class="li_1">是否已婚：</li>
    <li class="li_2"><input type="checkbox" name="marry" /></li>
</ul>
<ul>
    <li class="li_1">上传照片：</li>
    <li class="li_2"><input type="file" /></li>
</ul>
<ul>
    <li class="li_1">兴趣爱好：</li>
    <li class="li_2">
    书籍、报刊、杂志<input type="checkbox" name="faverite" value="read" />&nbsp;&nbsp;&nbsp;&nbsp;
    影音娱乐<input type="checkbox" name="faverite" value="music" />&nbsp;&nbsp;&nbsp;&nbsp;
    球类运动<input type="checkbox" name="faverite" value="ball" />&nbsp;&nbsp;&nbsp;&nbsp; <br />
    户外活动、旅游<input type="checkbox" name="faverite" value="toour" />&nbsp;&nbsp;&nbsp;&nbsp;
    电脑游戏、网络游戏<input type="checkbox" name="faverite" value="game" />&nbsp;&nbsp;&nbsp;&nbsp;
    棋牌、聚会、聊天<input type="checkbox" name="faverite" value="club"/>&nbsp;&nbsp;&nbsp;&nbsp;  
    </li>
</ul>
<ul>
    <li class="li_1">个性签名（限200字以内，不要用标签等特殊字符）：</li>
    <li class="li_2"><textarea name="tag" cols="50" rows="5"></textarea></li>
</ul>
<ul>
    <li class="li_1">有效性：</li>
    <li class="li_2"><input type="checkbox" name="avail" /></li>
</ul>
<ul>
    <li class="li_0"></li>
    <li class="li_2"><input type="button" class="buttonJianGe" name="insert" value="插入"/><span class="jianGe"></span><input type="button" class="buttonJianGe" name="modify" value="修改"/></li>
</ul>
</div>



<div id="part_line">
</div>

<div id="part_query">
姓名：<input class="textInput" name="query_mingzi" size="20" />
性别：<select name="query_sex">
    <option value="0">所有</option>
    <option value="1">男</option>
    <option value="2">女</option>
</select>
婚否：<select name="query_marry">
    <option value="0">所有</option>
    <option value="1">是</option>
    <option value="2">否</option>
</select>
有效性：<select name="query_avail">
    <option value="0">所有</option>
    <option value="1">是</option>
    <option value="2">否</option>
</select>
<input type="button" class="buttonNormal" value="查询" />
<input type="button" name="set_avail" class="buttonJianGe" value="设置有效性" />
</div>


<div id="part_show">
<ul class="tableHead" style="width: 910px;">
    <li style="width: 80px;">姓名</li>
    <li style="width: 50px;">性别</li>
    <li style="width: 100px">出生年月</li>
    <li style="width: 80px">是否已婚</li>
    <li style="width: 250px">兴趣爱好</li>
    <li style="width: 200px">个性签名</li>
    <li style="width: 50px">有效性</li>
    <li style="width: 50px">修改</li>
    <li style="width: 50px">删除</li>
</ul>
<ul class="line1" style="width: 910px;">
    <li style="width: 80px;">刘xx</li>
    <li style="width: 50px;">男</li>
    <li style="width: 100px">1983年7月18日</li>
    <li style="width: 80px">未婚</li>
    <li style="width: 250px">
    <div id="childTable">
        <ul style="width: 250px;">
            <li style="width: 150px;">书籍、报刊、杂志</li>
            <li style="width: 50px;"><a href="#">删除</a></li>
            <li style="width: 50px;"><a href="#">修改</a></li>
        </ul>
         <ul style="width: 250px">
            <li style="width: 150px;">影音娱乐</li>
            <li style="width: 50px;"><a href="#">删除</a></li>
            <li style="width: 50px;"><a href="#">修改</a></li>
        </ul>
        <ul style="width: 250px;">
            <li style="width: 150px">户外活动、旅游</li>
            <li style="width: 50px;"><a href="#">删除</a></li>
            <li style="width: 50px;"><a href="#">修改</a></li>
        </ul>
        <ul style="width: 250px;">
            <li style="width: 150px;">电脑游戏、网络游戏</li>
            <li style="width: 50px;"><a href="#">删除</a></li>
            <li style="width: 50px;"><a href="#">修改</a></li>
        </ul>
    </div>
    </li>
    <li style="width: 200px">完美世界的爱和自由<br />
                             爱自由人权民主平等多元包容
                             香宝
    </li>
    <li style="width: 50px"><input type="checkbox" /></li>
    <li style="width: 50px"><a href="#">修改</a></li>
    <li style="width: 50px"><a href="#">删除</a></li>
</ul>
<ul class="line2" style="width: 910px;">
    <li style="width: 80px;">刘xx</li>
    <li style="width: 50px;">男</li>
    <li style="width: 100px">1983年7月18日</li>
    <li style="width: 80px">未婚</li>
    <li style="width: 250px">
    <div id="childTable">
        <ul style="width: 250px;">
            <li style="width: 150px;">书籍、报刊、杂志</li>
            <li style="width: 50px;"><a href="#">删除</a></li>
            <li style="width: 50px;"><a href="#">修改</a></li>
        </ul>
         <ul style="width: 250px">
            <li style="width: 150px;">影音娱乐</li>
            <li style="width: 50px;"><a href="#">删除</a></li>
            <li style="width: 50px;"><a href="#">修改</a></li>
        </ul>
        <ul style="width: 250px;">
            <li style="width: 150px">户外活动、旅游</li>
            <li style="width: 50px;"><a href="#">删除</a></li>
            <li style="width: 50px;"><a href="#">修改</a></li>
        </ul>
        <ul style="width: 250px;">
            <li style="width: 150px;">电脑游戏、网络游戏</li>
            <li style="width: 50px;"><a href="#">删除</a></li>
            <li style="width: 50px;"><a href="#">修改</a></li>
        </ul>
    </div>
    </li>
    <li style="width: 200px">完美世界的爱和自由<br />
                             爱自由人权民主平等多元包容
                             香宝
    </li>
    <li style="width: 50px"><input type="checkbox" /></li>
    <li style="width: 50px"><a href="#">修改</a></li>
    <li style="width: 50px"><a href="#">删除</a></li>
</ul>
<ul class="line1" style="width: 910px;">
    <li style="width: 80px;">刘xx</li>
    <li style="width: 50px;">男</li>
    <li style="width: 100px">1983年7月18日</li>
    <li style="width: 80px">未婚</li>
    <li style="width: 250px">
    <div id="childTable">
        <ul style="width: 250px;">
            <li style="width: 150px;">书籍、报刊、杂志</li>
            <li style="width: 50px;"><a href="#">删除</a></li>
            <li style="width: 50px;"><a href="#">修改</a></li>
        </ul>
         <ul style="width: 250px">
            <li style="width: 150px;">影音娱乐</li>
            <li style="width: 50px;"><a href="#">删除</a></li>
            <li style="width: 50px;"><a href="#">修改</a></li>
        </ul>
        <ul style="width: 250px;">
            <li style="width: 150px">户外活动、旅游</li>
            <li style="width: 50px;"><a href="#">删除</a></li>
            <li style="width: 50px;"><a href="#">修改</a></li>
        </ul>
        <ul style="width: 250px;">
            <li style="width: 150px;">电脑游戏、网络游戏</li>
            <li style="width: 50px;"><a href="#">删除</a></li>
            <li style="width: 50px;"><a href="#">修改</a></li>
        </ul>
    </div>
    </li>
    <li style="width: 200px">完美世界的爱和自由<br />
                             爱自由人权民主平等多元包容
                             香宝
    </li>
    <li style="width: 50px"><input type="checkbox" /></li>
    <li style="width: 50px"><a href="#">修改</a></li>
    <li style="width: 50px"><a href="#">删除</a></li>
</ul>
<ul class="line2" style="width: 910px;">
    <li style="width: 80px;">刘xx</li>
    <li style="width: 50px;">男</li>
    <li style="width: 100px">1983年7月18日</li>
    <li style="width: 80px">未婚</li>
     <li style="width: 250px">
    <div id="childTable">
        <ul style="width: 250px;">
            <li style="width: 150px;">书籍、报刊、杂志</li>
            <li style="width: 50px;"><a href="#">删除</a></li>
            <li style="width: 50px;"><a href="#">修改</a></li>
        </ul>
         <ul style="width: 250px">
            <li style="width: 150px;">影音娱乐</li>
            <li style="width: 50px;"><a href="#">删除</a></li>
            <li style="width: 50px;"><a href="#">修改</a></li>
        </ul>
        <ul style="width: 250px;">
            <li style="width: 150px">户外活动、旅游</li>
            <li style="width: 50px;"><a href="#">删除</a></li>
            <li style="width: 50px;"><a href="#">修改</a></li>
        </ul>
        <ul style="width: 250px;">
            <li style="width: 150px;">电脑游戏、网络游戏</li>
            <li style="width: 50px;"><a href="#">删除</a></li>
            <li style="width: 50px;"><a href="#">修改</a></li>
        </ul>
    </div>
    </li>
    <li style="width: 200px">完美世界的爱和自由<br />
                             爱自由人权民主平等多元包容阿克林顿阿拉开的拉开的法律
                             香宝
    </li>
    <li style="width: 50px"><input type="checkbox" /></li>
    <li style="width: 50px"><a href="#">修改</a></li>
    <li style="width: 50px"><a href="#">删除</a></li>
</ul>
</div>
</form>
</body>
</html>
返回顶楼
         
  • 抛出异常的爱
  • 等级: 五钻会员
  • 性别:
  • 文章: 13663
  • 积分: 2762
  • 来自: 北京
   发表时间：2007-03-21  
F
为什么不用code或呢至少有格式
返回顶楼
          回帖地址
0 请登录后投票
  • cozone_柯中
  • 等级: 五星会员
  • 性别:
  • 文章: 225
  • 积分: 464
  • 来自: 湖北武汉北京
   发表时间：2007-03-21  
直接传个demo上来吧
返回顶楼
          回帖地址
0 请登录后投票
  • downpour
  • 等级: 五钻会员
  • 性别:
  • 文章: 1516
  • 积分: 2448
  • 来自: 上海
   发表时间：2007-03-21  
完全没有理解Web标准的含义，这个东西你写成这样，和写TR，TD有啥区别？
返回顶楼
          回帖地址
0 请登录后投票
  • netfishx
  • 等级: 五星会员
  • 性别:
  • 文章: 1052
  • 积分: 599
  • 来自: 北京
   发表时间：2007-03-21  
downpour 写道
完全没有理解Web标准的含义，这个东西你写成这样，和写TR，TD有啥区别？

同感啊，者根本就是自己实现一个table
返回顶楼
          回帖地址
0 请登录后投票
  • xiaoyu
  • 等级: 二钻会员
  • 性别:
  • 文章: 1338
  • 积分: 1339
  • 来自: 广东
   发表时间：2007-03-21  
还有, 少量代码可以用code这个标签, 但可直接运行的代码的话, 还是放附近, 或者直接贴上吧. 因为code这个标签会自动生成行号, 拷贝代码时候会把行号一起拷出来. 麻烦(消除行号).
返回顶楼
          回帖地址
0 请登录后投票
  • liuzaix@gmail.com
  • 等级: 初级会员
  • 文章: 8
  • 积分: 93
   发表时间：2007-03-22  
downpour 写道
完全没有理解Web标准的含义，这个东西你写成这样，和写TR，TD有啥区别？

只是模仿阿里巴巴网站写的，不懂标准。
返回顶楼
          回帖地址
0 请登录后投票
  • liuzaix@gmail.com
  • 等级: 初级会员
  • 文章: 8
  • 积分: 93
   发表时间：2007-03-22  
谁能告诉我实现表格嵌套的最高效、感觉最爽的方法？
返回顶楼
          回帖地址
0 请登录后投票
  • downpour
  • 等级: 五钻会员
  • 性别:
  • 文章: 1516
  • 积分: 2448
  • 来自: 上海
   发表时间：2007-03-22  
liuzaix@gmail.com 写道
谁能告诉我实现表格嵌套的最高效、感觉最爽的方法？


什么是表格嵌套，你不妨把你的页面样式截一个图上传，大家讨论一下。

不过你自己都说表格嵌套了，为啥不用table? 表格就是table，table就是表格。html标签还是应该恢复其原本的意思啊。
返回顶楼
          回帖地址
0 请登录后投票
  • kj23
  • 等级: 三星会员
  • 性别:
  • 文章: 96
  • 积分: 343
  • 来自: 上海
   发表时间：2007-03-22  
标准不是等同于css

web标准是还原html真正意义而推出的

不能为布局而布局
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics