制作静态网页

article/2025/9/25 10:22:54

· 首先进行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;
}*/

布局图：

效果图：

  


http://chatgpt.dhexx.cn/article/svcl0QPV.shtml

相关文章

API幂等设计

API幂等设计

API幂等就是在新增或更新数据时&#xff0c;如果多次发起同一个请求&#xff0c;只能产生一个结果。如&#xff1a;同一个订单多次提交&#xff0c;只能在数据库产生一个订单数据。我了解的基于redis实现幂等的有两种方式&#xff1a;基于token和基于请求。 基于token认证 参…
阅读更多...
Mysql实现幂等_过幂等性问题

Mysql实现幂等_过幂等性问题

一、什么是幂等？ 幂等性：多次调用方法或者接口不会改变业务状态，可以保证重复调用的结果和单次调用的结果一致。 二、使用幂等的场景 1、前端重复提交 用户注册，用户创建商品等操作，前端都会提交一些数据给后台服务，后台需要根据用户提交的数据在数据库中创建记录。如果用…
阅读更多...
分布式锁实现业务幂等

分布式锁实现业务幂等

1、前言 现如今很多系统都会基于分布式或微服务思想完成对系统的架构设计。那么在这一个系统中&#xff0c;就会存在若干个微服务&#xff0c;而且服务间也会产生相互通信调用。那么既然产生了服务调用&#xff0c;就必然会存在服务调用延迟或失败的问题。当出现这种问题&…
阅读更多...
幂等性组件

幂等性组件

根据上篇文章改进&#xff0c;并做成springbootstarter&#xff0c;依赖于redisson&#xff0c;如果redission已配置&#xff0c;则该组件可开箱即用 接口防重复提交_King_Kwin的博客-CSDN博客_接口防重复提交 本篇已做了较大的改动&#xff0c;可查看代码 idempotent: 幂等…
阅读更多...
java幂等控制_JAVA幂等性实现

java幂等控制_JAVA幂等性实现

什么是幂等&#xff1a; 贴一张百度百科的图&#xff1a; 简单来说幂等保证了只要调用接口成功,外部多次调用对系统的影响是一致的&#xff0c;也就是一个请求多次重试的问题。 需要考虑幂等的场景&#xff1a; 客户端存在多次提交或者超时重试的情况&#xff1b; 分布式架构中…
阅读更多...
幂等问题

幂等问题

点击↑上方↑蓝色“编了个程”关注我~ 每周至少一篇原创文章 这是本公众号的第 34 篇原创文章 最近比较懒&#xff0c;好几周没写文章了。还是没能坚持每周更新&#xff0c;愧对关注我的读者和自己的flag。。。 不过还好调整了过来&#xff0c;还是会继续坚持周更的。毕竟学习是…
阅读更多...
常见的幂等性解决方案

常见的幂等性解决方案

背景 我们实际系统中有很多操作&#xff0c;是不管做多少次&#xff0c;都应该产生一样的效果或返回一样的结果。 get请求一般没有幂等性需求、delete请求一般也没有幂等性需求&#xff0c;post、update视情况而定例如&#xff1a; 前端重复提交选中的数据&#xff0c;应该后…
阅读更多...
彻底理解接口幂等性

彻底理解接口幂等性

目录 背景 1. 幂等性的概念 2.什么情况需要处理接口幂等性问题&#xff1f; 2.1 select 天然自带幂等性。 2.2 insert 当我们重复插入数据的时候&#xff0c;会出现什么情况 &#xff1f; 2.3 delete 是否具有幂等性&#xff1f; 2.4 update 猜一猜是否具有天热幂等性&a…
阅读更多...
【实战】聊聊幂等设计

【实战】聊聊幂等设计

前言 大家好，今天我们一起来聊聊幂等设计。 什么是幂等为什么需要幂等接口超时，如何处理呢？如何设计幂等？实现幂等的8种方案HTTP的幂等1. 什么是幂等? 幂等是一个数学与计算机科学概念。 在数学中，幂等用函数表达式就是：f(x) = f(f(x))。比如求绝对值的函数，就是幂等…
阅读更多...
幂等性 详解

幂等性 详解

目录 一、幂等概念 1、幂等的数学概念 2. 幂等的业务概念 二、幂等概述 三、幂等场景 四、解决方案 1、token redis机制 2、乐观锁机制 3、唯一主键机制 4、去重表机制 5、门票机制 一、幂等概念 1、幂等的数学概念 如果在一元运算中&#xff0c;x 为某集合中的任…
阅读更多...
幂等 (idempotence) 的概念

幂等 (idempotence) 的概念

幂等 (idempotence) 的概念 幂等的数学概念 幂等是源于一种数学概念。其主要有两个定义 如果在一元运算中&#xff0c;x 为某集合中的任意数&#xff0c;如果满足 f(x) f(f(x)) &#xff0c;那么该 f 运算具有幂等性&#xff0c;比如绝对值运算 abs(a) abs(abs(a)) 就是幂…
阅读更多...
偏度

偏度

偏度公式如下&#xff1a; 现在想解决如何从图像上解决为正为负的问题&#xff0c;如图所示&#xff1a; 个人理解&#xff1a;偏度中的偏是针对变量相对于中心点&#xff08;期望值&#xff09;距离的一种描述&#xff1b;如果厚尾的话&#xff0c;就说明有很多点距离中心点比…
阅读更多...
偏度(skewness)

偏度(skewness)

偏度 偏度&#xff08;skewness&#xff09;&#xff0c;是统计数据分布偏斜方向和程度的度量&#xff0c;是统计数据分布非对称程度的数字特征。定义上偏度是样本的三阶标准化矩。 偏度定义中包括正态分布&#xff08;偏度0&#xff09; 算术平均值 中位数 众数&#xff0c;…
阅读更多...
策略梯度

策略梯度

Policy Gradient Methods for Reinforcement Learning with Function Approximation(PG) 在强化学习的算法中存在两种算法&#xff0c;一个是基于价值函数的算法&#xff0c;另一个是基于策略梯度的算法。为什么要提出策略梯度算法呢&#xff1f; 基于策略的学习可能会具有更好…
阅读更多...
推荐系统中的偏差

推荐系统中的偏差

推荐系统消偏 推荐系统中的偏差IPW ——逆概率加权DICE ——区分兴趣和偏差建模因果推断 推荐系统中的偏差 预估问题 我们一般会注重两种误差&#xff0c;偏差和方差&#xff0c; 方差与模型泛化能力有关&#xff1a;通常关注模型的复杂度与是否过拟合&#xff1b;偏差则表现为…
阅读更多...
特征偏度和异常值处理

特征偏度和异常值处理

&#xff08;一&#xff09;机器学习基础 - 偏度、正态化以及 Box-Cox 变换 https://my.oschina.net/mathinside/blog/4942126 对于数据挖掘、机器学习中的很多算法&#xff0c;往往会假设变量服从正态分布。例如&#xff0c;在许多统计技术中&#xff0c;假定误差是正态分布…
阅读更多...
推荐系统去偏（Debiased Recommendation）研究进展概述

推荐系统去偏（Debiased Recommendation）研究进展概述

©作者 | 张景森 学校 | 中国人民大学信息学院硕士 文章来源 | RUC AI Box 引言 推荐系统作为解决信息过载的一种重要手段&#xff0c;已经在不同的应用场景下取得了不错的效果。近些年来关于推荐系统的研究主要集中在如何设计更好的模型来适应用户行为数据&#xff0c;进而…
阅读更多...
【综述】推荐系统偏差问题 去偏最新研究进展（Bias and Debias in Recommender System）

【综述】推荐系统偏差问题 去偏最新研究进展（Bias and Debias in Recommender System）

文章目录 1. 推荐系统的反馈回路1.1 User -> Data1.2 Data -> Model1.3 Model -> User 2. 推荐系统中的Bias2.1 数据偏差(data bias)2.1.1 选择偏差(Selection Bias)2.1.2 曝光偏差(Exposure Bias)2.1.3 一致性偏差(Conformity Bias)2.1.4 位置偏差(Position Bias) 2.…
阅读更多...
数据偏度介绍和处理方法

数据偏度介绍和处理方法

偏度&#xff08;skewness&#xff09;是用来衡量概率分布或数据集中不对称程度的统计量。它描述了数据分布的尾部&#xff08;tail&#xff09;在平均值的哪一侧更重或更长。偏度可以帮助我们了解数据的偏斜性质&#xff0c;即数据相对于平均值的分布情况。 有时&#xff0c;正…
阅读更多...
【期权系列】基于偏度指数的择时分析

【期权系列】基于偏度指数的择时分析

【期权衍生指标系列】基于偏度指数的择时分析 本篇文章是基于研究报告的复现作品&#xff0c;旨在记录个人的学习过程和复现过程中的一些思路。 感谢中信期货研究员前辈的宝贵思路。 一、偏度指数 1.偏度指数简介 偏度是描述数据分布形态的统计量&#xff0c;其描述的是统…
阅读更多...
推荐文章

Copyright @ 2022~2023