写一个简单的HTML页面

简单的HTML页面

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

思路

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

效果图

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

代码


<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
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学习)