HTML+CSS写网站首页

最新推荐文章于 2024-06-16 23:58:06 发布
置顶 最新推荐文章于 2024-06-16 23:58:06 发布
阅读量9.5k 收藏 273
点赞数 28
文章标签： 前端 HTML css java 计算机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45434283/article/details/102535294
版权

(html+css写网站首页)

网站图片

HTML

<html>
	<head>
		<meta charset="UTF-8">
		<title>网站建设</title>
		<link rel="stylesheet" type="text/css" href="css/Travel.css" />
	</head>
	<body>
		<div class="banner">
			<h1>网站建设</h1>
			<div class="a">
				<p></p>
			</div>
			<div class="nav">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">门户服务</a></li>
					<li><a href="#">推广产品</a></li>
					<li><a href="#">营销产品</a></li>
					<li><a href="#">SEO优化</a></li>
					<li><a href="#">关于我们</a></li>
				</ul>
			</div>
		</div>
		<div class="main">
			<img src="img/banner.JPG" width="100%" height="500px" />
		</div>
		<div class="b">
			<b><p> 营销门户</p></b>
		    <hr  />
		</div>
		<div class="c">
			<img src="img/网站建设.JPG" /></li>
			     <div class="c1">
			     	<p></p>
			     </div>
				<img src="img/gzh.JPG"/></li>
				<div class="c1">
			     	<p></p>
			     </div>
				<img src="img/小程序.JPG"/></li>
		</div>
		<div class="d">
			<div class="d1">
			     	<b><p><a href="#">网站建设</a><br></b>
			     		PC端/手机端网站 建设是企业进行互联网营销的基础</p>
			    </div>
			    <div class="d11">
			     	<p></p>
			     </div>
			<div class="d2">
			     	<b><p><a href="#">公众号搭建/运营</a><br></b>出高价请一支运营团不如把公众号交给我们</p>
			     </div>
			    <div class="d11">
			     	<p></p>
			     </div>
			<div class="d3">
			     	<b><p><a href="#">小程序</a><br></b>小程序助力企业抓住风口抢先占领“微信搜索”</p>
			     </div>
			     <div class="d11">
			     	<p></p>
			     </div>
		</div>
		<div class="e">
			<div class="e1">
				<img src="img/20161009165423_0637.jpg" width="50%" height="500px"/>
			</div>
			<div class="e2">
				<h1>营销产品</h1>
				<b><p>在对的时间找到对的人</p></b>
				<h3>朋友圈广告：以类似朋友的原创内容形式在用户朋友圈进行展示的原生广告。 通过整合亿级优质用户流量，朋友圈广告为广告主提供了一个国内与众不同的互联网社交推广营销平台。</h3>
				<h3>公众号广告：是基于微信公众平台生态，以类似公众号文章内容的形式在包括文章底部、文章中部、互选广告和视频贴片等四个广告资源位进行展示的内容广告。</h3>
				<h3>信息流广告：整合优质APP信息流广告，支持视频广告、单小图广告、三小图广告、大图广告。高效实现您的营销目标。多样的广告资源，帮助您与这些受众建立联系，将优质商业信息推送给真正需要的人。</h3>
			</div>
		</div>
		<footer>
			<div class="foot">
				<h1>关于我们</h1>
		    <div class="f">
		    	<h3>营销开户：网站建设/公众号搭建/小程序开发</h3><br>
		    	<h3>营销推广：seo优化/群发系统/软文推送</h3><br>
		    	<h3>营销裂变：微信广告/信息流广告/裂变活动</h3>
		    </div>
		    <div class="f1">
		    	<h3>公司地址：******</h3><br>
		    	<h3>咨询热线：******</h3><br>
		    	<h3>QQ：******</h3>
		    </div>
		    <div class="f2">
		    	<h3>邮箱：******@qq.com</h3><br>
		    	<h3>QQ：******</h3>
		    </div>
		    </div>
		</footer>
	</body>
</html>

css

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.banner{
	width: 100%;
	height: 100px;
	background-color:aquamarine;
	justify-content: space-between;
}
.banner h1{
	float: left;
	margin-top: 40px;
}
.banner img{
	float: left;
	margin-left:300px;
}

.nav ul{
	background-color:aquamarine;
	width: 60%;
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin-left: 25%;
	text-align: center;
}
.nav ul li{
	
	width: 100%;
	float: left;
	background-color:azure;
	margin-top: 66px;
	font-family: "宋楷";
	font-size: 25px;
	border: 1px solid greenyellow;
}
.nav ul li:hover{
	background-color:burlywood;
}
.nav a{
	text-decoration: none;
}
.main{
	width: 100%;
	height: 500px;
	background-color: aquamarine;
	margin-top: 0px;
}
.b{
	margin-top: 100px;
}
.b p{
	height: 60px;
	width: ;
	margin-left: 300px;
	margin-top: 20px;
	font-size: 30px;
	font-family: "宋体";
	color: mediumblue;
}
.c{
	margin-left: 300px;
	height: 300px;
	width: 80%;
}
.c img{
	height: 300px;
	width: 25%;
	float: left;
}
.c1{
	width: 50px;
	background-color: white;
	height: 300px;
	float: left;
}
.d{
	margin-left: 300px;
	height: 80%;
	float: left;
	font-size: 20px;
}
.d1{
	width: 27%;
	background-color: white;
	height: 300px;
	float: left;
	margin-top: 30px;
	font-family: "宋体";
}
.d2{
	width: 25%;
	background-color: white;
	height: 300px;
	float: left;
	margin-top: 30px;
	font-family: "宋体";
}
.d3{
	width: 25%;
	background-color: white;
	height: 300px;
	float: left;
	margin-top: 30px;
	font-family: "宋体";
}
.d11{
	width: 50px;
	background-color: white;
	height: 300px;
	float: left;
}
.d a{
	text-decoration: none;
}
.e{
	width: 100%;
	margin-top: 0px;
}
.e img{
	width: 40%;
	height: 500px;
	float: left;
}
.e2{
	float: left;
	width: 60%;
	height: 500px;
	background-color: grey;
}
.e2 h1{
	margin-top: 50px;
	margin-left: 100px;
	width: 80%;
}
.e2 h3{
	margin-left: 100px;
	width: 80%;
	margin-top: 30px;
}
.e2 p{
	margin-left: 100px;
	width: 80%;
	margin-top: 30px;
}

.foot{
	background-color: antiquewhite;
	width: 100%;
	height: 250px;
	float: left;
	margin-top: 50px;
}
.foot h1{
	margin-top: 50px;
	margin-left: 10%;
}
.f{
	margin-left: 20%;
	float: left;
	margin-top: 20px;
}
.f1{
	float: left;
	margin-left: 5%;
	margin-top: 20px;
}
.f2{
	float: left;
	margin-left: 5%;
	margin-top: 20px;
}
画楼夕晚
关注
  • 28
    点赞
  • 踩
  • 273
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
HTML如何制作公司网站首页（web前端期末大作业）
qq_38512792的博客
04-02 226
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站
用html写一个网站首页
weixin_42594427的博客
02-13 386
好的，下面是一个简单的HTML网页首页代码： <!DOCTYPE html> <html> <head> <title>我的网站首页</title> </head> <body> <header> <nav> <ul> ...
html+css网页设计源代码
11-07
这是一个div+css布局方式设计的一个完整的网站源代码，可用于教学或自学。
HTML和CSS基础（一）
最新发布
老王的博客
06-16 1034
介绍html和css基础，其中包括常用html元素：div,p,ul,li,img,table等，常用css属性：display，position等。
HTML网站首页代码详细知识点
爱书不爱输的程序猿
01-12 5255
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>入门案例01</title> </head> <body> <!-- 表单表标签: action:提交的地址(我理解...
HTML——简单的网站首页
热门推荐
smallAchelous的博客
04-07 3万+
学习记录帖（一） 简单的网站首页 这是我的一个记录帖，我是按照黑马程序员的视频学习的。 使用的是HBuilder，学习了html & css & js & jq & bootstrap。 成果 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
HTML+CSS+JS网页设计期末课程大作业—— 绿色化妆品HTML+CSS+JavaScript
HTML网页设计
08-10 2271
💄美妆介绍、👜美妆分享、👒 品牌化妆品官网网站 、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设......
Html+CSS网页设计
我佛很悲
03-22 1158
Html CSS网页设计 样例+注释笔记
HTML+CSS 搜狗首页
双子枫叶的博客
07-29 1169
HTML+CSS 搜狗首页展示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 搜狗首页 *{margin:0; padding:0;} #sougou{ width:
网页设计期末大作业+html+css
05-25
虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，虽然不是非要把网站做的效果很好，...
美食网站js+html+css
01-03
【美食网站js+html+css】是一个以JavaScript、HTML和CSS为核心技术的项目，旨在创建一个展示美食的网站。这个项目提供了完整的源代码，包括HTML结构文件、CSS样式表和JavaScript脚本，以及用于视觉呈现的网站图片。...
html+css 仿写网站首页.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
个人风景网站HTML+CSS+JS
05-26
【个人风景网站HTML+CSS+JS】是一个适合初学者学习的项目，旨在帮助新手了解和掌握网页设计的基础知识。这个项目结合了HTML、CSS和JavaScript这三种核心技术，用于创建一个展示风景图片和个人风格的静态网站。 HTML...
html+css网站模板网页设计源码-html个人网页设计模板.zip
05-10
HTML和CSS是构建网页设计的基础，此资源"html+css网站模板网页设计源码-html个人网页设计模板.zip"提供了一套完整的个人网页设计模板，它包含了一系列使用HTML和CSS编写的源代码。这个模板适用于初学者和有经验的...
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
html网页制作——HTML做一个公司官网首页页面（纯html代码）
html精品源码
12-18 2037
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站...
《web课程设计》使用HTML+CSS制作大学生校园二手交易网站
html精品源码
08-04 1万+
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语...
【HTML+CSS】小兔鲜儿网站首页（静态网页）
m0_63179877的博客
06-30 2733
小兔鲜儿网站首页是利用HTML+CSS进行开发，网站首页包括四部分内容，分别是快捷导航、banner图区域、新鲜好物、生鲜、尾部版权。
一个简单的HTML网页 、个人主页网页设计(HTML+CSS)
网页设计与制作
12-29 4758
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大
HTML+CSS网站开发入门指南
轻松学HTML+CSS网站开发 在本资源中，我们将探索HTML和CSS在网站开发中的应用。HTML是一种超文本链接语言，用于构建网页的结构和内容，而CSS是网页样式表，用于控制网页的外观和布局。通过学习HTML和CSS，我们可以...
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值