javaEE2（网站css练习：（1）-（3），结果截图）

全都通过

已于 2024-03-11 08:56:35 修改

阅读量218

点赞数

分类专栏： javaEE 文章标签： css html 前端 javascript

于 2022-11-20 10:14:49 首次发布

本文链接：https://blog.csdn.net/m0_56410670/article/details/127945803

版权

javaEE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

利用css做三线表格，居中，隔行变色。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style > 


.aaa{
background:blue;
border:none;
}
.bbb{
border:solid;
border-width:2px 0px 2px 0px;

}
.ccc{
border:none;
}
.ddd{
border:solid;
border-width:0px 0px 2px 0px;
}

</style>
</head>
<body style="text-align:center;">
<table class="bbb" align="center">
       <tr>
        <td  style="width:100px;"><b>学号 </b> </td>
        <td  style="width:50px;"><b>姓名</b></td>
        <td  style="width:50px;"><b>性别</b></td>
        <td  style="width:100px;"><b>专业</b></td>
        </tr>
</table>

<table class="ccc" align="center" >
        <tr>
        <td style="width:100px;">20171111</td>
        <td style="width:50px;">张三</td>
        <td style="width:50px;">男</td>
        <td style="width:100px;">网络工程</td>
        </tr>
</table>
        
<table class="aaa" align="center" >
        <tr>
        <td style="width:100px;">20172222</td>
        <td style="width:50px;">李四</td>
        <td style="width:50px;">女</td>
        <td style="width:100px;">计算机</td>        
        </tr>
</table>
<table class="ccc" align="center" >        
        <tr>
        <td style="width:100px;">20173333</td>
        <td style="width:50px;">王五</td>
        <td style="width:50px;">男</td>
        <td style="width:100px;">物联网</td>
        </tr>
</table>
<table class="aaa" align="center" >      
        <tr>
        <td style="width:100px;">20174444</td>
        <td style="width:50px;">赵六</td>
        <td style="width:50px;">男</td>
        <td style="width:100px;">计开发</td>
        </tr>
</table>
<table class="ddd" align="center" >        
        <tr>
        <td style="width:100px;">20175555</td>
        <td style="width:50px;">钱七</td>
        <td style="width:50px;">女</td>
        <td style="width:100px;">计测试</td>
        </tr>
</table>


</body>

</html>

用css+iframe实现html练习

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>
        #iframeTop{
            width: 100%;
            height: 80px;
            border:solid;
            border-width:0px 0px 2px 0px;
        }
        #iframeLeft{
            width: 15%;
            height: 763px;
            float: left;
            border:solid;
            border-width:0px 2px 0px 0px;

        }
        #iframeRight{
            width: 84%;
            height: 763px;
            margin-left: 1%;
        }

</style>
<body>
<div>
		    <iframe id="iframeTop"   name="iframeTop"   frameborder="0" src="top.jsp"></iframe>
		    <iframe id="iframeLeft"  name="iframeLeft"  frameborder="0" src="left.jsp"></iframe>
		    <iframe id="iframeRight" name="iframeRight" frameborder="0" src=""></iframe>
		    
</div>
</body>
</html>