博客列表 >css属性和html标签的配合应用--2018年8月18日22时07分(补交14日作业)

css属性和html标签的配合应用--2018年8月18日22时07分(补交14日作业)

成家大少的博客
成家大少的博客原创
2018年08月18日 22:21:47448浏览

一、问答题

1,学习php为什么必须掌握HTML?

2.为什么选择PHP开发动态网站?

二、编程题

要求:

制作一张表格,要求使用到:<table><tr>+<th>,<tr>+<td>,<h2>,<p>,<ul>+<li>,<img>,<a>允许使用有限的CSS进行样式美化,但不可以过量。

实例

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>表格标签应用</title>
    	<style pype="text/txt">
        table{ 
        	  border-collapse: collapse;/*折叠表格线*/
              width: 800px;
              text-align: center;
              margin: 30px auto;/*整体居中*/
             }

    	table caption{ font-size: 2rem;/*1rem=10px*/
                      margin-bottom: 20px;
                      font-weight: bolder;/*加粗*/
                      color: #666                      
    	             }

    	table tr:first-child/*选择table标签下的tr的第一行*/ { background-color:lightgreen;   

    	        }
        table tr:hover { background-color: #efefef;
        	            color:coral;
                      }

    	table, th, td{border: 1px solid #666    

    	             }
    	table tr td img {
                        padding: 5px;
                        border-radius:10px;/*圆角*/
    	           } 
    	           /*将a标签模拟成按钮*/ 
    	table tr td a{/*去掉下划线*/
                      text-decoration-line: none;

                      width: 150px;
                      height: 50px;	
                      border:1px solid black;
                      background:white;
                      color:black;
                      border-radius:8px;
    	             }           
         table tr td a:hover{
                             background:black;
                             color:white;
                            }
    	</style>
    </head>
    <body>
    
    <table>
        <caption>笔记本电脑排行榜</caption>
    	<tr>
    		<th>排行榜</th>
    		<th>品排</th>
    		<th>价格</th>
    		<th>网友评分</th>
    		<th>图片缩略图</th>
    		<th>地址</th>
    	</tr>
        <tr>
    		<td>1</td>
    		<td>平果电脑</td>
    		<td>¥8000</td>
    		<td>五星</td>
    		<td><img src="https://2c.zol-img.com.cn/product/152_220x165/410/ceKqX7JWBXa0c.jpg" width="100"></td>
    		<td><a href="http://detail.zol.com.cn/notebook/index401365.shtml">点击这里</a></td>
    	</tr>
    	<tr>
    		<td>2</td>
    		<td>联想电脑</td>
    		<td>¥6800</td>
    		<td>四星</td>
    		<td><img src="https://2a.zol-img.com.cn/product/185_220x165/364/ceRKUq3vsfuQ.jpg" width="100" ></td>
    		<td><a href="http://detail.zol.com.cn/notebook/index1180706.shtml">点击这里</a></td>
    	</tr>
        <tr>
    		<td>3</td>
    		<td>华硕电脑</td>
    		<td>¥5000</td>
    		<td>五星</td>
    		<td><img src="https://2d.zol-img.com.cn/product/181_220x165/193/cenZL6uTXLfUo.jpg" width="100"></td>
    		<td><a href="http://detail.zol.com.cn/notebook/index1167313.shtml">点击这里</a></td>
    	</tr>
        <tr>
    		<td>4</td>
    		<td>戴尔电脑</td>
    		<td>¥4500</td>
    		<td>五星</td>
    		<td><img src="https://2b.zol-img.com.cn/product/176_220x165/639/ceA9zn1hCHts.jpg" width="100"></td>
    		<td><a href="http://detail.zol.com.cn/notebook/index1154272.shtml">点击这里</a></td>
    	</tr>
        <tr>
    		<td>5</td>
    		<td>惠普电脑</td>
    		<td>¥4000</td>
    		<td>五星</td>
    		<td><img src="https://2b.zol-img.com.cn/product/191_220x165/645/ceD8CFBqaASw.jpg" width="100"></td>
    		<td><a href="http://detail.zol.com.cn/notebook/index1215789.shtml">点击这里</a></td>
    	</tr>

    </table>
    </body>
    </html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ截图20180818221812.jpg


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议