博客列表 >前端基础-html与css应用制作表格(2018年8月14日)

前端基础-html与css应用制作表格(2018年8月14日)

大白鲸的博客
大白鲸的博客原创
2018年08月15日 16:33:061299浏览

作业1:

学习php为什么要必需掌握html?

前端开发主要是指静态页面的编写,主要用到三个工具:HTML,CSS,javascript。后端也称服务器端,运行在服务器环境中,前端html代码,由浏览器负责解释并执行;后端代码,例如php,由服务器上的特殊程序来运行;php就是用来动态生成HTML代码的,为php程序的运行结果就是html,所有要学好html。

为什么选择php开发动态网站?

目前流行的动态网站开发语言除了php,还有Java、python、asp等,而php作为开发语言流行的重要原因是开发速度快,入门起步快,版本更新快,迭代快等优点。php也是动态开发语言中唯一可以将html融入编程代码中运行的开发语言。

作业2:

表格实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格</title>
	<style type="text/css">
        table{                               /*定义表格属性*/
            width: 700px;                    /*定义表格整体宽度值;*/
            text-align: center;              /*定义表格内文本格式剧中显示*/
            border-collapse: collapse;       /*定义表格线合并为一条线*/
        }
        table caption{                       /*定义表格的标题的文本属性*/
        	font-weight: bold;               /*定义字体为粗体*/
        	font-size: 2rem;                 /*定义字体大小值,1rem=10px*/
        	margin-bottom: 20px;             /*定义元素的下外边距*/
        	color: #888;                     /*定义字体颜色*/

        }
        table,th,td{                         /*定义表格、表头、列的属性*/
            border: 1px solid #999;          /*定义边框属性,格式:border:border-width(边框宽度) border-style(边框样式) border-color(边框颜色),不设定其中某个值也不会出现错误。*/
            height: 50px;                    /*定义高度值*/

        }
        table thead{                         /*定义表格内的表头的属性*/
        	background-color: lightgreen;    /*定义背景颜色值*/

        }
        table tr:hover{                      /*定义表格内的行的属性*/
        	background-color: #efefef;       /*定义背景颜色值*/
        	color: coral;                    /*定义表格内字体颜色值*/

        }
        img{                                 /*定义图片属性*/
        	padding: 5px;                    /*定义图片边框粗细值*/
        	border-radius: 8px;              /*定义图像边角圆滑度*/
            width: 50px;                     /*定义图片宽度,定义其中一个值图片会按比例缩放*/
        }
        td a{                                /*定义单元格内的a标签属性值*/
        	text-decoration: none;           /*定义取消a标签默认的下划线链接显示*/
        	width: 140px;                    /*定义标签宽度值*/
        	height: 30px;					 /*定义标签高度值*/
        	padding: 5px;				     /*定义边框线的粗细值*/
        	border: 1px solid black;         /*同上*/
        	background-color: white;         /*同上*/
        	border-radius: 5px;				 /*同上*/
        	color: black;					 /*同上*/
        }
        td a:hover{
        	background-color: #777;
        	color:#fff;
        }

	</style>
	<script type="text/javascript">
											 // 页内脚本设置元素

	</script>
</head>
<body>
	<table>
	    <caption>购物清单</caption>
	    <thead>
            <tr>
                <td>编号</td>
                <td>名称</td>
                <td>类别</td>
                <td>制造商</td>
                <td>缩略图</td>
                <td>价格</td>
                <td>数量</td>
                <td>操作</td>
            </tr>
	    </thead>
	    <tbody>
            <tr>
                 <td>001</td>
                 <td>台式计算机</td>
                 <td>办公设备</td>
                 <td>联想</td>
                 <td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534331022262&di=38d192ee2ac978a5207820a27631038a&imgtype=0&src=http%3A%2F%2Fpic.66zhuang.com%2Fzxrj%2Fpics%2Fimage%2F2015-03-04%2Feaa42d171c27ed0df624a787b2107437.jpg"></td>
                 <td>5600</td>
                 <td>10</td>
                 <td><a href="http://php.cn">定购</a></td>
            </tr>
            <tr>
                 <td>002</td>
                 <td>便携式计算机</td>
                 <td>办公设备</td>
                 <td>联想</td>
                 <td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534331852696&di=e9a3732674fcf8a753953404de337df5&imgtype=0&src=http%3A%2F%2Fpic15.photophoto.cn%2F20100617%2F0037037554403146_b.jpg"></td>                 
                 <td>7700</td>
                 <td>3</td>
                 <td><a href="http://php.cn">定购</a></td>
            </tr>
            <tr>
                 <td>003</td>
                 <td>台式计算机</td>
                 <td>办公设备</td>
                 <td>惠普</td>
                 <td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534331984993&di=68c2a35086059f0d38a59df4de60a597&imgtype=0&src=http%3A%2F%2Fimg.article.pchome.net%2F00%2F40%2F35%2F65%2F1.jpg"></td>                 
                 <td>6600</td>
                 <td>14</td>
                 <td><a href="http://php.cn">定购</a></td>
            </tr>
            <tr>
                 <td>004</td>
                 <td>打印机</td>
                 <td>办公设备</td>
                 <td>联想</td>
                 <td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534332034308&di=03c4843e3c4a35207de005c8431d5054&imgtype=0&src=http%3A%2F%2Fs10.sinaimg.cn%2Fmw690%2F003u8hxqgy6DP9lFXNn09%26690"></td>                 
                 <td>799</td>
                 <td>5</td>
                 <td><a href="http://php.cn">定购</a></td>
            </tr>
            <tr>
                 <td>005</td>
                 <td>投影仪</td>
                 <td>办公设备</td>
                 <td>明基</td>
                 <td><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1313282296,4273023193&fm=27&gp=0.jpg"></td>                 
                 <td>2430</td>
                 <td>9</td>
                 <td><a href="http://php.cn">定购</a></td>
            </tr>                                                
	    </tbody>


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

运行实例 »

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


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