简单的HTML页面

写一个火狐的首页,我设置了皮肤,背景是本地图片。
这是人家原网页的样子↓

思路

一个表单,两个按钮,三个单选框。
六个div。图片是png矢量图。或者自己截的截图。

效果图

此代码是v1.0版本,刚开始搞,还没有精细。但是基本思路就是这样,精进版放在后续的一篇文章添加CSS样式https://blog.csdn/qq_41306364/article/details/101473118中。

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body background="imgs/bg.jpg">
	<div style="margin-top: 20px">
		<button
			style="margin-left: 80px; color: #FFFFFF; background-image: linear-gradient(rgb(241, 168, 74), rgb(219, 110, 24)); border: 1px solid rgb(219, 110, 21); border-radius: 2px; box-shadow: rgb(247, 202, 127) 0px 0px 0px 1px inset; padding: 2px 4px;">设为默认浏览器</button>
		<img style="float: right; margin-right: 90px" src="imgs/1.png" />
	</div>
	<div align="center" style="margin-top: 10px">
		<form action="">
			<img alt="" src="imgs/baidu_web.png"> <input type="text"
				style="height: 30px; width: 400px">
			<button style="height: 30px">搜索</button>
			<div style="margin-right: 200px; margin-top: 10px">
				<input name="what" type="radio" value="百度" checked="checked" />百度 <input
					name="what" type="radio" value="谷歌" />谷歌 <input name="what"
					type="radio" value="淘宝" />淘宝
			</div>
		</form>
	</div>
	<div style="width:1300px;margin-left:180px;margin-top: 80px">
		<div align="center" style="float:left;margin-right:25px; margin-bottom: 25px; width: 270px; height: 160px; border: 1px; background-color: #FFFFFF;">
			<img style="margin-top: 20px" alt="" src="imgs/baidu.png">
			<div style="background-color:rgb(220,220,220);height:25px;margin-top: 38px;font-size: 13px">百度</div>
		</div>
		<div align="center" style="float:left;margin-right:25px; margin-bottom: 25px; width: 270px; height: 160px; border: 1px; background-color: #FFFFFF;">
			<img style="margin-top: 20px" alt="" src="imgs/xinlang.png">
		</div>
		<div align="center" style="float:left;margin-right:25px; margin-bottom: 25px; width: 270px; height: 160px; border: 1px; background-color: #FFFFFF;">
			<img style="margin-top: 20px" alt="" src="imgs/58.png">
		</div>
		<div align="center" style="float:left;margin-right:25px; margin-bottom: 25px; width: 270px; height: 160px; border: 1px; background-color: #FFFFFF;">
			<img style="margin-top: 20px" alt="" src="imgs/aiqiyi.png">
		</div>
		<div align="center" style="float:left;margin-right:25px; margin-bottom: 25px; width: 270px; height: 160px; border: 1px; background-color: #FFFFFF;">
			<img style="margin-top: 20px" alt="" src="imgs/taobao.png">
		</div>
		<div align="center" style="float:left;margin-right:25px; margin-bottom: 25px; width: 270px; height: 160px; border: 1px; background-color: #FFFFFF;">
			<img style="margin-top: 20px" alt="" src="imgs/jingdong.png">
		</div>
		<div align="center" style="float:left;margin-right:25px; margin-bottom: 25px; width: 270px; height: 160px; border: 1px; background-color: #FFFFFF;">
			<img style="margin-top: 20px" alt="" src="imgs/weipinhui.png">
		</div>
		<div align="center" style="float:left;margin-right:25px; margin-bottom: 25px; width: 270px; height: 160px; border: 1px; background-color: #FFFFFF;">
			<img style="margin-top: 20px" alt="" src="imgs/xiecheng.png">
		</div>
	</div>
</body>
</html>

总结

总体来说这个html页面还是很简单的,但是要继续学习很高深的就比较复杂了。


下一篇:(二)给HTML页面添加CSS样式。

更多推荐

写一个简单的HTML页面