Blogger Information
Blog 2
fans 0
comment 0
visits 932
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css属性和html标签的配合应用--2018年8月18日22时07分(补交14日作业)
成家大少的博客
Original
446 people have browsed it

一、问答题

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


Correction status:qualified

Teacher's comments:作业缺少的尽快补上!!
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!