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

最新推荐文章于 2024-04-08 23:34:57 发布
原创 最新推荐文章于 2024-04-08 23:34:57 发布 · 3.7k 阅读 · 15 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#使用div建立一个简单的前端页面 #简单网页制作

本文提供了一个实际的HTML网页布局设计案例，包括logo、导航菜单、轮播图、商品展示等部分，并通过CSS进行了详细的样式设置。 
<!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>

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


//简单的页面截图展示




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

接口性能优化宝典：解决性能瓶颈的策略与实践
曾经“等你生日那天”都遥远得像未来，如今却可欢愉的挥手说“下个十年见”
12-01 173万+
本文深入探讨了提升接口性能的多种策略，涵盖了数据库优化、远程调用、异步处理、事务优化、缓存机制、分库分表等方面的技术。通过直面常见性能瓶颈，本文详细讲解了如何优化 SQL 执行效率、避免重复调用、减少事务复杂性、提高并发度，并提供了实际应用的最佳实践和技术方案。此外，文章还结合具体的案例，阐述了如何通过合理选择和设计优化方案，解决常见的性能问题，帮助开发者构建高效、可扩展的系统架构。
大学生HTML期末作业网页：使用DIV+CSS技术制作一个简单的小说网站 (3个页面 登录+注册+首页 ) (1)
最新发布
dreamweaver网页设计
06-19 923
🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】 🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新
一个简单的前端页面（新手版）
weixin_65030370的博客
04-08 425
今天的页面是一个简单的新闻热度排列，包括实现页面的跳转以及文字颜色随鼠标移动的变化都在页面里呈现。多学多练，你一定会有更高的提升！
一个简单的前端页面
mycomdet的专栏
03-12 1368
<html> <head> <script> function myFunction(x,y) { z = x + y; str = x + " + " + y + " = " + z; alert(str);
初学前端第一个简单html页面
qq_45383769的博客
01-25 641
第一个简单html页面 首先呢，在目录上新建一个html文件 一般常用的是html：5 它会自动帮我们补全代码结构 在body中随便输入一点东西就好了，然后右键新建的文件，运行 这样就成功啦： 然后代码中的title和网页窗口的名字是对应关系： 当然了，可以随意修改： 这里呢再介绍一个< a >标签，用来跳转链接使用的，比如咱跳转百度： 点击百度一下，就跳转到百度啦。当然我们会发现它是在当前页面跳转的，那我想在一个新窗口打开呢： 这样就会在新的窗口打开百度啦。 ...
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 7万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
大学生HTML期末作业网页：使用DIV+CSS技术制作一个简单的小说网站 (3个页面 登录+注册+首页 )
weixin__BJ050106的博客
08-12 2217
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语......
50个Div+CSS模板助力前端学习与实践
综上所述，“div + css 50个模板”不仅仅是一个简单的资源集合，更是通往专业前端工程师之路的重要阶梯。它融合了HTML结构设计、CSS样式控制、响应式布局、页面重构、代码优化等多项核心技能，充分体现了“学习前端...
如何使用vue创建一个完整的前端项目
千锋教育
03-09 1086
安装Node.js和npm：Vue.js是基于Node.js开发的，因此在开始搭建Vue项目之前，需要先安装Node.js和npm（Node.js的包管理器）。以上就是搭建Vue项目的完整流程。需要注意的是，在实际开发中还需要了解Vue.js的基本语法和常用API，以及如何使用Vue插件、组件、路由等功能来实现具体的业务需求。安装Vue CLI：Vue CLI是Vue.js官方提供的命令行工具，可以帮助我们快速创建和管理Vue项目。编写代码：项目创建成功并启动之后，就可以开始编写Vue代码了。
html前端简单页面,HTML初学简单页面结构
weixin_29081163的博客
06-03 211
页面结构练习_何问起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...
前端页面构建
Major_S的博客
03-25 336
前端页面构建前端页面构建前端页面构建 一 登录注册页面 二 三 四 五 六 七 八 九 十 十一 十二 十三 十四 十五 十六 十七 十八 十九 二十 二十一 二十二 二十三
用DIV+CSS技术制作一个简单的网页 我的家乡主题
VX_WJ88950106的博客
08-13 556
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web...
用前端写一个网页（新手必看）
weixin_65030370的博客
04-04 3740
一个简单的前端界面
新建一个页面
weixin_39037804的博客
09-03 448
今天我刚好要做一个单页面来展示某些东西。 就一起来看看吧，初学者写的不好请自闭双眼。 先上代码吧，大家看看有什么需要修改的地方。 1 <!DOCTYPE html> 2 <html lang="...
1新建一个vue前端页面
m0_46430862的博客
07-22 271
建立新的页面
div+css搭建网站
learnerq的博客
11-12 981
一，分析页面结构 如一个页面有导航栏 该结构在分析时应从大到小进行分析 首先是一个大div里面套有3个小div 中间的div是一个ul li结构 一，应设置body的属性比如字体大小和类型 二，应设置父div的宽，高由内容填充 三，导航栏 第一部分是一张图片设置它的margin-right和float为left 第二部分是一个ul li结构的导航条
【Web前端笔记02】如何构建一个简单的HTML页面
Asix-小码的博客
06-30 531
###一些简单且基础的网页标签 <!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 301
<!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
使用vue3技术,创建一个前端导航页面
09-26
### 回答1： 好的，以下是使用Vue 3创建前端导航页面的步骤： 1. 安装Vue 3 首先需要在你的项目中安装Vue 3。你可以使用npm或者yarn进行安装。在命令行中运行如下命令： ``` npm install vue@next ``` 或者 ``` yarn add vue@next ``` 2. 创建Vue实例 在你的HTML文件中创建一个Vue实例。你可以通过`<script>`标签将Vue实例引入到你的HTML文件中。在Vue实例中，你需要定义一个`data`属性，该属性包含一个数组，用于存储导航链接的信息。如下所示： ```html <div id="app"> <ul> <li v-for="link in links" :key="link.id"> <a :href="link.url">{{ link.text }}</a> </li> </ul> </div> <script> const app = Vue.createApp({ data() { return { links: [ { id: 1, text: '首页', url: '/' }, { id: 2, text: '新闻', url: '/news' }, { id: 3, text: '关于我们', url: '/about' }, { id: 4, text: '联系我们', url: '/contact' } ] } } }) app.mount('#app') </script> ``` 在这个例子中，我们定义了一个`data`属性，其中包含了一个包含导航链接信息的数组。然后，我们使用`v-for`指令在`<ul>`元素中遍历数组，并使用`v-bind`指令动态绑定链接的`href`属性和链接文本的`text`属性。 3. 样式处理 现在我们已经有了导航链接，我们需要添加一些样式来使页面看起来更好。我们可以使用CSS或者SCSS来为页面添加样式。下面是一个简单的样式表： ```css ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; } li { margin: 0 10px; } a { color: #333; text-decoration: none; font-size: 16px; font-weight: 600; } ``` 这个样式表设置了`<ul>`元素的样式为一个水平列表，每个列表项之间有一定的间距。链接的样式包括字体颜色、字体大小和字体粗细。 4. 添加动态数据 我们可以让页面更加动态，通过使用Vue的计算属性和方法，根据不同条件动态添加导航链接。 ```html <div id="app"> <ul> <li v-for="link in links" :key="link.id"> <a :href="link.url">{{ link.text }}</a> </li> <li v-if="isLoggedIn"><a href="/dashboard">仪表板</a></li> </ul> </div> <script> const app = Vue.createApp({ data() { ### 回答2： 使用Vue3技术创建前端导航页面非常简单。首先，我们需要安装Vue3，并创建一个新的Vue应用程序。 接下来，我们可以创建一个名为Navigation的组件，用于呈现导航页面的内容。在该组件中，我们可以定义一个数据属性，用于保存导航条目的信息。每个导航条目可以包含一个标题和一个URL。 然后，我们可以在组件的模板中使用Vue的指令和插值语法，动态地生成导航菜单。我们可以使用v-for指令在导航条目的数组上循环，并使用v-bind指令绑定要显示的数据。我们还可以使用v-bind指令绑定一个点击事件处理程序，当用户点击导航条目时，可以执行相关操作。 最后，我们可以在应用程序的主组件中导入并使用Navigation组件。我们可以在模板中放置一个导航菜单的div，并在其中使用Navigation组件来呈现导航页面的内容。 使用Vue3的响应式特性，当导航条目的信息发生变化时，导航页面会自动更新。这使得我们可以轻松地添加、编辑或删除导航条目。 总之，使用Vue3技术创建一个前端导航页面是非常简单的。通过建立一个导航组件，使用Vue的指令和插值语法来动态生成导航菜单，并使用Vue的响应式特性来自动更新页面，我们可以轻松地创建一个灵活且易于维护的导航页面。 ### 回答3： 使用Vue 3技术可以轻松地创建一个功能强大的前端导航页面。首先，我们可以使用Vue 3的组件化开发特性，将页面拆分为多个组件，使代码更加模块化和可维护。 在创建导航页面的时候，可以使用Vue Router来管理路由。Vue Router是Vue官方提供的路由管理工具，它可以帮助我们在前端实现多页面间的跳转和路由配置。 在导航页面中，我们可以创建一个顶部导航栏组件和一个左侧菜单栏组件。顶部导航栏组件可以包含网站的Logo、搜索框和用户登录信息，可以通过Vue的数据绑定和计算属性来实现动态展示。 左侧菜单栏组件可以根据用户权限动态生成菜单列表，通过Vue的条件渲染和循环渲染来实现。当用户点击菜单项时，可以通过Vue Router的路由配置来跳转到相应的页面。 除了基本的导航功能，我们还可以使用Vue 3的动画特性来实现页面过渡效果，让导航页面更加流畅和美观。例如，可以给菜单栏添加展开和收起的动画，让用户操作更加友好。 最后，我们可以使用Vue 3的状态管理工具Vuex来管理全局的状态和数据。例如，可以通过Vuex来保存用户登录信息、菜单权限等数据，方便在各个组件中进行访问和更新。 总结来说，使用Vue 3技术可以实现一个功能强大的前端导航页面，具备模块化、动态路由、动画效果和全局状态管理等特性，提升用户体验并方便后续的扩展和维护。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值