使用div建立一个简单的前端页面

最新推荐文章于 2024-05-17 07:36:11 发布
最新推荐文章于 2024-05-17 07:36:11 发布
阅读量3.5k 收藏 13
点赞数 3
分类专栏： 前端 文章标签： 使用div建立一个简单的前端页面 简单网页制作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Future_LL/article/details/79722268
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<style type="text/css">
			/*取消文本的下划线*/
			a{
				text-decoration: none;  /*超链接文办的下划线去掉*/
			}
			
			/*设置整个网页的边框*/
			#page{
				border: 1px solid black;
			}
			
			/*设置logo*/
			#logo{
				height: 55px;
				overflow: hidden;  /*清除浮动   只要超出这个高度就会隐藏掉 */
				border: 1px solid black;
				margin: 1px;
			}
			
			/*设置logo里的超链接*/
			.kop{
				float:right;
				width: 80px;
				height: 50px;   /*块元素的高*/
				text-align: center;
				line-height:50px;   /*行高  字体上下居中*/
				position: relative;  /*相对定位*/
				top: -90px;
			}
			
			/*设置logo中的两个图片*/
			.picture1{
				padding-left: 50px;
			}
			.pictrue2{
				display: block;
				margin: 0 auto;
				position: relative;
				top: -55px;
			}
			
			/*设置菜单的背景高宽*/
			#menu{
				background-color: black;
				height: 35px;
				padding-top: 8px;
				padding-left: 10px;
				border: 1px solid black;
				margin: 1px;
			}
			
			/*两个段落标签、正品保障和轮播图的边框设置*/
			#label,
			#goods,
			#play,
			#advisement{
				border: 1px solid black;
				margin: 1px;
			}
			
			/*表示最新商品和最热商品右半部分的整体*/
			.right{
				position:absolute;  /*绝对定位*/
				top:40px;
			}
			
			/*表示整个最新商品和最热商品的框架*/
			.content{
				width:100%;
				height:540px;
				position:relative;    /*相对定位*/
				border: 1px solid black;
				margin: 1px;
			}
			
			/*将最新商品和最热商品的分层为上下两个部分*/
			.right_top,
			.right_bottom{
				float:right;   /*全部浮动到右边*/
			}
			
			/*用列标的形式表示商品电饭煲*/
			ul{
				list-style: none;  /*去掉列表前的标识符*/
				float: right;
				margin-right: 30px; 
			}
		</style>
	</head>
	<body>
		<table>
			<div id="page">
				<!--存放logo部分-->
				<div id="logo">
					<img src="../img/logo.gif" class="picture1"/>
					<img src="../img/header.jpg" class="pictrue2"/>
					<a href="#" class="kop"><font size="3">登录</font></a>
					<a href="#" class="kop"><font size="3">注册</font></a>
					<a href="#" class="kop"><font size="3">购物车</font></a>
				</div>
				
				<!--菜单部分-->
				<div id="menu">
					 <a href="#"><font color="white" size="4">首页</font></a> 
					 <a href="#"><font color="white" size="4">手机数码</font></a> 
					 <a href="#"><font color="white" size="4">家用电器</font></a> 
					 <a href="#"><font color="white" size="4">生活用品</font></a> 
					 <a href="#"><font color="white" size="4">电脑办公</font></a> 
				</div>
				
				<!--轮播图-->
				<div id="play">
					<img src="../img/1.jpg" width="100%"/>
				</div>
				
				<!--热门商品-->
				<div class="content">
					<div class="top">
						<font size="6">热门商品</font>
						<img src="../img/title2.jpg" />
					</div>
					
					<div class="left">
						<img src="../img/big01.jpg" width="210px"/>
					</div>
					
					<div class="right">
						<div class="right_top">
							<img src="../img/middle01.jpg" />
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
						</div>
						<div class="right_bottom">
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
						</div>
					</div>
				</div>
				
				<!--广告-->
				<div id="advisement" >
					<img src="../img/ad.jpg" width="100%"/>
				</div>
				
				<!--最新商品-->
				<div class="content">
					<div class="top">
						<font size="6">热门商品</font>
						<img src="../img/title2.jpg" />
					</div>
					
					<div class="left">
						<img src="../img/big01.jpg" width="210px"/>
					</div>
					
					<div class="right">
						<div class="right_top">
							<img src="../img/middle01.jpg" />
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
						</div>
						<div class="right_bottom">
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
							<ul>
								<li><img src="../img/small08.jpg"  /></li>
								<li><a href="#">电饭煲</a></li>
								<li>200¥</li>
							</ul>
						</div>
					</div>
				</div>
				
				<!--正品保障-->
				<div id="goods">
					<img src="../img/footer.jpg" width="100%"/>
				</div>
				
				<!--两个段落标签-->
				<div align="center" id="label">
					<p>
						<a href="#">关于我们</a>  
						<a href="#">联系我们</a>  
						<a href="#">招贤纳士</a>  
						<a href="#">法律声明</a>  
						<a href="#">友情链接</a>  
					</p>
					<p>
						Copyright<sup>&reg;</sup>西部开源<sup>&copy;</sup>
					</p>
			</div>
		</table>
	</body>
</html>

//页面所需要的图片素材；


//简单的页面截图展示




//三张图片按照网页的顺序排列；

Future_LL
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
初学前端第一个简单html页面
qq_45383769的博客
01-25 508
第一个简单html页面 首先呢，在目录上新建一个html文件 一般常用的是html：5 它会自动帮我们补全代码结构 在body中随便输入一点东西就好了，然后右键新建的文件，运行 这样就成功啦： 然后代码中的title和网页窗口的名字是对应关系： 当然了，可以随意修改： 这里呢再介绍一个< a >标签，用来跳转链接使用的，比如咱跳转百度： 点击百度一下，就跳转到百度啦。当然我们会发现它是在当前页面跳转的，那我想在一个新窗口打开呢： 这样就会在新的窗口打开百度啦。 ...
一个简单的前端页面
mycomdet的专栏
03-12 1261
<html> <head> <script> function myFunction(x,y) { z = x + y; str = x + " + " + y + " = " + z; alert(str);
Web前端最新DIV+CSS常用网页制作布局技术技巧(1)，2024年最新腾讯前端开发面试
最新发布
2401_84435768的博客
05-17 899
由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！14.说一下 Vue 和 React 的认识，做一个简单的对比。15.Vue 的 nextTick 的原理是什么？12.vue-router 有哪些钩子函数?3.你是如何理解 Vue 的响应式系统的?6.Vue 中 key 值的作用？
html前端简单页面,HTML初学简单页面结构
weixin_29081163的博客
06-03 129
页面结构练习_何问起body {background: #CCC;}.index {max-width: 90%;background: #3F0;margin: 0px auto;}.head {width: 100%;height: 60px;}.head a {min-width: 12.5%;height: auto;background: #4A69A6;color: #FFF;font...
vue 下拉框_前端页面的简单学习与项目搭建（主要针对HTML和VUE的学习）
weixin_39564368的博客
12-11 167
备注：只是本人的自学与备注，自己本身不是做前端的，只是简单搭建一些前端的东西，自己玩的。一、HTML简单的回顾（一）HTML 基本结构<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <!-- he...
前端页面构建
Major_S的博客
03-25 265
前端页面构建前端页面构建前端页面构建 一 登录注册页面 二 三 四 五 六 七 八 九 十 十一 十二 十三 十四 十五 十六 十七 十八 十九 二十 二十一 二十二 二十三
【JavaScript源代码】ajax jquery实现页面某一个div的刷新效果.docx
12-27
8. **前端与后端通信**：通过Ajax，前端和后端之间建立了通信桥梁，前端通过发送数据请求，后端处理数据并返回，前端接收并更新页面，形成一个完整的异步数据交换流程。 总的来说，这个示例展示了如何利用jQuery的...
海康视频流前端播放使用(vue版本ws通信)
11-24
Vue.js 是一个非常流行的前端框架，而WebSocket协议则提供了双向通信的能力，使得实时性成为可能。本篇文章将深入探讨如何在Vue项目中利用WebSocket与海康设备进行交互，实现视频流的前端播放。 首先，我们需要理解...
实现一个简易的聊天室功能
09-02
在IT行业中，构建一个简易的聊天室功能是常见的应用场景，特别是在Web开发中。这个任务通常涉及到实时通信技术，其中WebSocket是一种常用的选择。本篇将详细阐述如何利用WebSocket和React技术来实现一个简单的聊天室...
RegnierHugo_5_11032021:建立一个电子商务网站
04-08
【标题】：“RegnierHugo_5_11032021：建立一个电子商务网站” 【描述】：“＃RegnierHugo_5_11032021”这个描述似乎是一个项目或者任务的标识，可能指的是在2021年3月11日由Regnier Hugo进行的关于构建电子商务...
前端项目——小米官网首页
11-15
总的来说，这个项目通过div和css展示了如何构建一个静态的前端页面，重点在于布局和视觉效果的实现。对于前端初学者，这是一个极好的起点，能够帮助他们掌握基础的HTML结构和CSS样式控制，同时也提供了一个实践CSS3...
用DIV+CSS技术制作一个简单的网页 我的家乡主题
VX_WJ88950106的博客
08-13 486
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web...
新建一个页面
weixin_39037804的博客
09-03 372
今天我刚好要做一个单页面来展示某些东西。 就一起来看看吧，初学者写的不好请自闭双眼。 先上代码吧，大家看看有什么需要修改的地方。 1 <!DOCTYPE html> 2 <html lang="...
1新建一个vue前端页面
m0_46430862的博客
07-22 197
建立新的页面
div+css搭建网站
learnerq的博客
11-12 907
一，分析页面结构 如一个页面有导航栏 该结构在分析时应从大到小进行分析 首先是一个大div里面套有3个小div 中间的div是一个ul li结构 一，应设置body的属性比如字体大小和类型 二，应设置父div的宽，高由内容填充 三，导航栏 第一部分是一张图片设置它的margin-right和float为left 第二部分是一个ul li结构的导航条
【Web前端笔记02】如何构建一个简单的HTML页面
Asix-小码的博客
06-30 465
###一些简单且基础的网页标签 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><!--设置字符集--> <li...
前端页面操作
weixin_30871905的博客
01-04 236
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 资产领用审批详情</title> <meta name="viewport" content="width=device-wi...
js跳转新页面，指定div加载新页面
Vicco的博客
07-20 1万+
1、在当前页面上跳转新页面 window.open('#要载入的界面'); window.open('graphReportController.do?list&id=dzdxz'); window.open('webpage/com/nuist/singleStationInfo/stationInfoTab.jsp'); onclick="javascript:window.open('w
学会Web UI框架--Bootstrap，快速搭建出漂亮的前端界面
热门推荐
景天科技苑
03-10 1万+
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。 Bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架。 是一个用于快速开发Web应用程序和网站的前端框架。 Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷。
使用vue3技术,创建一个前端导航页面
09-26
总之，使用Vue3技术创建一个前端导航页面是非常简单的。通过建立一个导航组件，使用Vue的指令和插值语法来动态生成导航菜单，并使用Vue的响应式特性来自动更新页面，我们可以轻松地创建一个灵活且易于维护的导航页面...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值