html和css简单应用实例

最新推荐文章于 2024-03-25 19:58:02 发布

Alt__

最新推荐文章于 2024-03-25 19:58:02 发布

阅读量538

点赞数 1

本文链接：https://blog.csdn.net/Alt__/article/details/101015320

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div_0{
				width: 1004px;
				height: auto;
				background-color:  gray;
			}
			.input{
				size: 7;
				border-color: red;
				background-color:indianred ;
				font-size: 11px;
				color: white;
				padding-top: 10px;
				padding-bottom: 10px;
			}
			.p{
				font-size: 50px;
				font-weight: bold;
				color: white;
				text-align: center;		
			}
			#div1{
				width: 100%;
				height: auto;
				background-color: indianred;
				padding-top: 60px;
				padding-bottom: 30px;
			}
			#div2{
				width: 100%;
				height: auto;
				background-color: white;
			}
			#div3{
				
				width: 100%;
				height: 480px;	
				background-color: lightgray;
			}
			#div3_1{
				position: relative;
			    width:50%;
			    height:380px;
			    margin-top:30px;
			    margin-left:60px;
			    background-color: white;
			    float:left;
				
			}
			#div3_1_top{
				position: relative;
			    width:300px;
			    height:180px;
			    margin-top:30px;
			    margin-left:60px;
			    background-color: white;
			    float:left;
			}
			#div3_1_bottom{
				position: relative;
			    width:300px;
			    height:160px;
			    margin-top:40px;
			    margin-left:60px;
			    background-color: white; 
			    float:left;
			}
		</style>
	</head>
	<body>
		<div id="div_0">
			<div id="div1">
				<p class="p">为WEB艺术家创造的PHP框架</p>
				<center>
				<input class="input" type="button"  name="button0" value="5.4中文文档" />
				<input class="input" type="button" name="button1" value="5.3中文文档" />
				<input class="input" type="button" name="button2" value="5.2中文文档" />
				<input class="input" type="button" name="button3" value="5.1中文文档" />
				<input class="input" type="button" name="button4" value="5.0中文文档" />
				<input class="input" type="button" name="button5" value="4.2中文文档" />
				<input class="input" type="button" name="button6" value="4.1中文文档" />
				<input class="input" type="button" name="button7" value="4.0中文文档" />
				<input class="input" type="button" name="button8" value="Lumen中文文档" />
				</center>
			</div>
			<div id="div2">
				<center>
				<table cellspacing="20px">
				
				<tr>
						<td style="font-size: 15px;">首页</td>
						<td style="font-size: 15px;">Lavarel中文文档</td>
						<td style="font-size: 15px;font-weight: bold;">Packagist中国蜡像</td>
						<td style="font-size: 15px;">Composer中文文档</td>
						<td style="font-size: 15px;">PHP中文手册</td>
						<td style="font-size: 15px;">PHP编程之道</td>
						<td style="font-size: 15px;">问答社区</td>
					</tr>
				</table>
				</center>	
			</div>
			<div id="div3">
				<div id="div3_1">
					<center><p style="font-size: 20px;font-weight: bold;">Laraver5.5将是下一个LTS版本，预计7/8月份发布</p></center>
					<center><p style="font-size: 15px;font-weight: bold;">作者：王赛·2017年02月20日</p></center>
					<br />
					<center><img src="img/1.jpg" width="370px" height="240px"/></center>
				</div>
					<div id="div3_1_top">
						<p align="left" style="font-size: 15px;font-weight: bold;">  社区</p>
						<hr color="red" width="80px" align="left">
		
						<br />
						  QQ群：462694081<br>
						<br />
						<a href="index.html" style='color: red;'>  @问答社区</a>
					</div>
					<div id="div3_1_bottom">
						<p align="left" style="font-size: 15px;font-weight: bold;">  下载</p>
						<hr color="red" width="80px" align="left">
						
						<br />
						<center><input type="button" name="button" value="Laravel&Lumen一键安装包下载" style="background-color: indianred;color: white;font-size: 15px;height: 35px;border-color: indianred;"></center>
					</div>
			</div>		
		</div>
	</body>	
</html>

网页效果：

Alt__

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html和css简单应用实例

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div_0{ width: 1004px; height: auto; backg...
复制链接

扫一扫