制作静态网页

已于 2023-03-29 20:56:29 修改
阅读量2.3k 收藏 19
点赞数
分类专栏： HTML+CSS 文章标签： 前端 html css
于 2022-09-20 18:42:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52291147/article/details/126958517
版权

· 首先进行CSS样式布局，根据样图进行块级标签分布，为每一个块级标签设置颜色以查看布局是否正确，最好是每设置一个块级标签颜色就查看一次是否排布正确，这样可以及时发现问题并解决问题；等到每一块区域都划分完成后，可将颜色删除。

· 接着将素材或文本放入块级标签中，不对的地方再调。

HTML：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新浪微博</title>
		<link rel="stylesheet" type="text/css" href="css/sina.css"/>
	</head>
	<body>
		<header><div><img src="img/logo.png"/></div></header>
		<section>
			<div class="left">
				<div class="left_banner">
					<img src="img/banner.jpg" style="width: 730px;height: 182px;"/>
				</div>
				<div class="left_hot">
					<img src="img/icon_hot.gif"/>正在热议：<a href="https://www.baidu.com/" style="text-decoration: underline;">
					<font size="3">全国两会</font></a>
					<a href="#" style="text-decoration: underline;"><font size="3">欧冠<font></font></a>
					<a href="#" style="text-decoration: underline;"><font size="3">两会微愿景<font></a>
					<a href="#" style="text-decoration: underline;"><font size="3">代表委员微博</font></a>
					<a href="#" style="text-decoration: underline;"><font size="3">春暖花开</font></a>
					<a href="#" style="text-decoration: underline;"><font size="3">旭日阳刚</font></a>
					<a href="#" style="text-decoration: underline;"><font size="3">小沈阳</font></a>
					<a href="#" style="text-decoration: underline;"><font size="3">西单女孩</font></a>
				</div>
				<div class="left_user">
					<div class="left_user_left">
						<div class="left_user_left_elite1">
							<img src="img/icon_elite.gif"/><strong>这些人正在使用微博</strong><hr />
						</div>
						<div class="left_user_left_noavatar1">
							<table border="0" style="border-spacing: 50px 7px;">
								<tr>
									<td><img src="img/noavatar.gif"/><br /><a href="#">张三</a></td>
									<td><img src="img/noavatar.gif"/><br /><a href="#">李四</a></td>
									<td><img src="img/noavatar.gif"/><br /><a href="#">王五</a></td>
								</tr>
								<tr>
									<td><img src="img/noavatar.gif"/><br /><a href="#">张三</a></td>
									<td><img src="img/noavatar.gif"/><br /><a href="#">李四</a></td>
									<td><img src="img/noavatar.gif"/><br /><a href="#">王五</a></td>
								</tr>
								<tr>
									<td><img src="img/noavatar.gif"/><br /><a href="#">张三</a></td>
									<td><img src="img/noavatar.gif"/><br /><a href="#">李四</a></td>
									<td><img src="img/noavatar.gif"/><br /><a href="#">王五</a></td>
								</tr>
							</table>
						</div>
						<div class="left_user_left_elite2">
							<img src="img/icon_elite.gif"/><strong>有趣的人</strong><hr />
						</div>
						<div class="left_user_left_noavatar2">
							<table border="0" style="border-spacing: 50px 7px;">
								<tr>
									<td><img src="img/noavatar.gif"/><br /><a href="#">张三</a></td>
									<td><img src="img/noavatar.gif"/><br /><a href="#">李四</a></td>
									<td><img src="img/noavatar.gif"/><br /><a href="#">王五</a></td>
								</tr>
								<tr>
									<td><img src="img/noavatar.gif"/><br /><a href="#">张三</a></td>
									<td><img src="img/noavatar.gif"/><br /><a href="#">李四</a></td>
									<td><img src="img/noavatar.gif"/><br /><a href="#">王五</a></td>
								</tr>
								<tr>
									<td><img src="img/noavatar.gif"/><br /><a href="https://www.baidu.com/">张三</a></td>
									<td><img src="img/noavatar.gif"/><br /><a href="https://www.baidu.com/">李四</a></td>
									<td><img src="img/noavatar.gif"/><br /><a href="https://www.baidu.com/">王五</a></td>
								</tr>
							</table>
						</div>
					</div>
					<div class="left_user_right">
						<div class="left_user_right_elite">
							<img src="img/icon_elite.gif"/><strong>大家正在说</strong><hr />
						</div>
						<div class="left_user_right_noavatar">
							<table border="0" cellspacing="10">
								<tr>
									<td rowspan="2"><img src="img/noavatar.gif"/></td>
									<td><a href="https://www.baidu.com/" style="text-decoration: underline;">赵六</a>:2012年的第一场雪</td>
								</tr>
								<tr>
									<td>2分钟前</td>
								</tr>
								<tr>
									<td rowspan="2"><img src="img/noavatar.gif"/></td>
									<td><a href="https://www.baidu.com/" style="text-decoration: underline;">冯七</a>:H&M三月上架新品目录，同学们先看好了，再去逛吧</td>
								</tr>
								<tr><td>2分钟前</td></tr>
								<tr>
									<td rowspan="2"><img src="img/noavatar.gif"/></td>
									<td><a href="https://www.baidu.com/" style="text-decoration: underline;">赵六</a>:2012年的第一场雪</td>
								</tr>
								<tr>
									<td>2分钟前</td>
								</tr>
								<tr>
									<td rowspan="2"><img src="img/noavatar.gif"/></td>
									<td><a href="https://www.baidu.com/" style="text-decoration: underline;">冯七</a>:H&M三月上架新品目录，同学们先看好了，再去逛吧</td>
								</tr>
								<tr><td>2分钟前</td></tr>
								<tr>
									<td rowspan="2"><img src="img/noavatar.gif"/></td>
									<td><a href="https://www.baidu.com/" style="text-decoration: underline;">赵六</a>:2012年的第一场雪</td>
								</tr>
								<tr>
									<td>2分钟前</td>
								</tr>
								<tr>
									<td rowspan="2"><img src="img/noavatar.gif"/></td>
									<td><a href="https://www.baidu.com/" style="text-decoration: underline;">冯七</a>:H&M三月上架新品目录，同学们先看好了，再去逛吧</td>
								</tr>
								<tr><td>2分钟前</td></tr>
								<tr>
									<td rowspan="2"><img src="img/noavatar.gif"/></td>
									<td><a href="https://www.baidu.com/" style="text-decoration: underline;">赵六</a>:2012年的第一场雪</td>
								</tr>
								<tr>
									<td>2分钟前</td>
								</tr>
							</table>
						</div> 
					</div>
				</div>
			</div>
			<div class="right">
				<div class="right_login"><img src="img/login.gif"/></div>
				<div class="right_top">
					<div class="top" style="text-align: center;width: 280px;">
						<img src="img/title_top10.gif" style="margin: 0 auto;"/>
					</div>
					<div class="toptable">
						<table cellspacing="5" style="text-align: center;width: 280px;">
							<tr>
								<td><img src="img/num_1.gif"/>姚&emsp;晨</td>
								<td>6,665,064</td>
							</tr>
							<tr>
								<td><img src="img/num_2.gif"/>小&emsp;S</td>
								<td>5,728,619</td>
							</tr>
							<tr>
								<td><img src="img/num_3.gif"/>赵&emsp;薇</td>
								<td>5,503,863</td>
							</tr>
							<tr>
								<td><img src="img/num_4.gif"/>蔡康永</td>
								<td>5,126,106</td>
							</tr>
							<tr>
								<td><img src="img/num_5.gif"/>谢&emsp;娜</td>
								<td>4,756,902</td>
							</tr>
							<tr>
								<td><img src="img/num_6.gif"/>何&emsp;炅</td>
								<td>4,731,390</td>
							</tr>
							<tr>
								<td><img src="img/num_7.gif"/>杨&emsp;幂</td>
								<td>4,336,483</td>
							</tr>
							<tr>
								<td><img src="img/num_8.gif"/>李冰冰</td>
								<td>4,215,463</td>
							</tr>
							<tr>
								<td><img src="img/num_9.gif"/>黄健翔</td>
								<td>4,163,532</td>
							</tr>
							<tr>
								<td><img src="img/num_10.gif"/>李开复</td>
								<td>4,143,714</td>
							</tr>
						</table>
					</div>
						<div class="toptext">
							<table border="0" style="margin-left: auto;margin-right: auto;">
								<tr>
									<td><img src="img/icon_mobile.gif"/></td>
									<td>如何使用手机上微博</td>
								</tr>
								<tr>
									<td>&emsp;</td>
									<td>WAP版微博地址：t.sina.cn</td>
								</tr>
								<tr>
									<td>&emsp;</td>
									<td>更多方式>></td>
								</tr>
							</table>
					    </div>
				    </div>
			    </div>
		</section>
		<footer style="background-color: lightblue">
			<table>
				<tr>
					<td>
					<div>
				<a href="https://m.weibo.cn/" style="text-decoration: underline;">帮助</a>
				<a href="https://m.weibo.cn/" style="text-decoration: underline;">意见反馈</a>
				<a href="https://m.weibo.cn/" style="text-decoration: underline;">微博认证及和合作</a>
				<a href="https://m.weibo.cn/" style="text-decoration: underline;">开放平台</a>
				<a href="https://m.weibo.cn/" style="text-decoration: underline;">微博招聘</a>
				<a href="https://m.weibo.cn/" style="text-decoration: underline;">新浪网导航</a>
				&emsp;
			        </div>
			        <div>
				客服电话：400 690 0000 提示音后按1键（按当地市话标准计费）
				&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			        </div>
		            </td>
			    <td>
				<div>新浪公司 版权所有</div>
				<div>语言：中文（简体）&emsp;&emsp;&emsp;</div>
			    </td>
			    <td>
				    <img src="img/jubao.gif"/>
			    </td>
				</tr>
			</table>
		</footer>
	</body>
</html>

CSS样式：

*{
	margin: 0px;
	padding: 0px;
}
a{
	text-decoration: none;
}
ul{
	list-style: none;
}
header,section,footer{
	width: 1020px;
	margin: 0 auto;
}
header,footer{
	height: 60px;
}
section{
	margin: 1px auto;
	overflow: hidden;
}
section>div{
	float: left;
}
.left{
	width: 730px;
	float: left;
}
.left_banner{
	height: 182px;
}
.left_hot{
	height: 35px;
	background-color: yellowgreen;
}
.left_user{
	height: 542px;
}

.left_user_left{
	width: 355px;
	float: left;
}
.left_user_left_elite1{
	height: 35px;
}
.left_user_left_noavatar1{
	height: 241px;
	text-decoration: underline;
}
.left_user_left_elite2{
	height: 35px;
}
.left_user_left_noavatar2{
	height: 241px;
	text-decoration: underline;
}

.left_user_right{
	width: 375px;
	float: left;
} 
.left_user_right_elite{
	height: 30px;
}
.left_user_right_noavatar{
	height: 512px;
}

.right{
	width:280px;
	float: left;
}
.right_login{
	height:400px ;
}
.right_top{
	height:359px ;
}
.top{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
/* .toptext{
	margin-left: auto;
	margin-right: auto;
}
 */

布局图：

效果图：

  

数星星呀
关注
  • 0
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
制作一个简单HTML静态网页（HTML+CSS）
HTML网页设计
08-02 3597
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒...
HTML+CSS个人静态网页设计
aghewugwe的博客
08-13 3万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
html静态页面源代码 静态网页制作代码【CSS+DIV】
06-27
html静态页面源代码 静态网页制作代码【CSS+DIV】 HTML静态页面(CSS+DIV) 这是期末老师HTML老师布置的。本来要求一个，但我做了三个。 主要是CSS+DIV做的（3个项目）。 对于页面的布局，代码的规格，命名，都很清晰明了。
HTML静态网页作业——基于html+css+javascript+jquery+bootstarp响应式成都家乡介绍网页
最新发布
网页设计与制作 | HTML+CSS+JS
05-17 445
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——
网页静态化
qq_43514335的博客
09-10 164
网页静态化案例 什么是网页静态化 FreeMarker 是一个用 Java 语言编写的模板引擎，它基于模板来生成文本输出。FreeMarker与 Web 容器无关，即在 Web 运行时，它并不知道 Servlet 或 HTTP。它不仅可以用作表现层的实现技术，而且还可以用于生成 XML，JSP 或 Java 等。 为什么要用网页静态化 一、减轻服务器负担，浏览网页无需调用系统数据库。 二、有利于搜...
制作静态注册网页
python_UTF_8的博客
07-20 2066
环境搭建：pycharm+python3.6 核心技术：CSS+HTML 小编这次给大家带来制作静态注册网页，话不多说，先看效果图（本次制作参照百度注册页面）: 第一步：打开pycharm 建一个新的HTML5文件，引入CSS重置样式（一般网页会自带CSS样式） 建议大家制作自己的网页时都重置一下样式，另外找一张自己比较喜欢的背景图作为注册页面的背景 注：如果图片像素与网页冲突可以修改图片像素（最好将网页边框大小修改成符合图片像素规格） 第二步：基本框架的建立（页面的文字以及边框..
网页制作静态网页
02-27
很基础的静态网页 网页虽小，各功能齐全，完全符合作业要求 课程大作业
自主制作静态网页
12-05
NO.1旅游网，支持天气查询，地图功能，租车，酒店的预定等
静态网页制作课程设计
01-07
包含首页以及商城源代码，一共两千多行，欢迎下载一起交流
使用HTML制作静态网站（圣诞节案例）
w1404273025的博客
04-13 1万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言最近学习了HTML基础，做了一个网页一、案例展示二、使用步骤1.HTML代码：2.oldman.html 前言 最近学习了HTML基础，做了一个网页 一、案例展示 案例图展与项目位置如下： 二、使用步骤 1.HTML代码： 代码如下： 圣诞节案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&.
静态网页的制作（从入门到精通）
2202_75991121的博客
04-15 1562
开发一个疫情专区网页
前端学习——静态网页制作
RX1125的博客
01-23 3331
前端学习——静态网页制作1学习内容2. 成果展示 1学习内容 综合运用HTML、CSS知识制作静态网页。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京吃食府</title> <link rel="stylesheet" href="css/index.css "> </head> <b
静态页面设计
weixin_44051236的博客
05-22 1257
第一步 制作静态页面之We-UI的使用 首先，制作静态页面，即没有相关的跳转和数据库的读取，单纯是一个页面，这个借助于微信开发者工具便可以实现 一些比较典型的组件，比如说搜索框，登录按钮借助于We-UI来实现（简直是太好用了） We-UI的使用方法： （1）首先要下载以下它的包导入到项目中，下载到官网上下载 （2）然后将它的整个js文件用WebStorm打开 （3）打开演示网站这里是超链接https://weui.io/，或者直接用手机打开小程序的演示，找到需要演示的效果，再找到对应的js文件，拷贝里面需要
html旅游网站设计与实现——绿色古典旅游景区 HTML+CSS+JavaScript
热门推荐
HTML网页设计
07-29 3万+
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的...
网页设计 制作静态网页
04-10
以下是制作静态网页的基本步骤： 1. 使用文本编辑器创建一个新的HTML文件。 2. 在HTML文件中编写网页的结构和内容，包括标题、段落、图像、链接等。 3. 使用CSS样式表来设置网页的样式和布局，包括颜色、字体、边距...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值