web入门练手案例(一)

下面是一些web入门案例和实现的代码,带有部分注释,倘若代码中有任何问题或疑问,欢迎留言交流~

新闻页面

案例描述:

互联网的发展使信息的传递变得方便、快捷,浏览新闻称为用户获取信息的重要渠道。下面将实现一个简易的新闻开头页面:

目标效果:

在这里插入图片描述
实现代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新闻页面</title><style>h2 {text-align: center;}.newTime {text-align: center;}.newTime span{/* 字体大小和颜色 */font-size: 12px;color:rgba(0,0,0,0.5);text-align: center;}.newTime a {font-size: 12px;color: black;text-decoration: none;}p {/* 首行缩进两字符 */text-indent:2em ;/* 设置左对齐 */text-align: left;}</style>
</head>
<body><h2>新媒体的大势所趋</h2><div class="newTime"><span>更新时间:2019年12月16日14时08分 来源:</span><a href="#">来源社区</a></div><br><hr><p>近年来,随着移动互联网的蓬勃发展,公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展,运营人员在企业中的价值也不断被放大和受到重视,很多企业在做线上营销时都还会考虑“两微一抖”,也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。</p>
</body>
</html>

图文混排

案例描述

一个引人入胜的网页,往往包含很多图片。合理的是哟个图文混排,能使枯燥的网页变得丰富多彩。下面将实现一个简易的图文混排页面:

实现效果

在这里插入图片描述

实现代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Web前端开发工程师招聘信息</title><style>img {/* 只设置图片的宽时,高会自动按原比例显示。只设置高时宽同理 */width: 300px;/* 设置图片左排列,实现图片居左文字div居右的效果 */float: left;/* 设置图片与文字中间的空隙 */margin-right: 20px;}h3 {color: rgba(0,0,0,0.7);}.firstP {font-size: 14px;}.secondP {font-size: 15px;text-indent: 2em;/* 单纯text-indent:2em,无法达到缩进效果,需要加display:block */display: block;}a {color: rgba(0, 0,0,0.8);/* 斜体 */font-style: italic;/* 下划虚线样式 */text-decoration: underline dashed;}.newTime {font-size: 12px;color: rgba(0,0,0,0.5);}.special {color: black;font-size: 16px;/* 设置为粗体 */font-weight: bold;}.footer {font-size: 14px;}</style>
</head>
<body><!-- alt属性指的是当图片加载不出时,显示的文字 --><img src="../image/web_er.png" alt="前端工程师"><div><h3>Web前端开发工程师</h3><p class="firstP">技术要求:</p><span class="secondP">了解常用的JS框架,如jQuery、YUI等,掌握最基本的JavaScript计算方法编写;对目前互联网流行的网页制作方法(Web2.0)HTML+CSS,以及各大浏览器兼容性有较多的了解;基本掌握前沿技术(HTML5+CSS3)。<a href="#">Web前端技术</a>,你究竟掌握多少...<!-- a标签可以嵌入到span标签中 --></span><br><br><span class="newTime">更新时间:2015年05月19日20点(已有<span class="special">323</span>人点赞)</span><hr><p class="footer">相关技术文章8篇</p></div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/328234.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

详细教程!VMware Workstation Pro16 安装 + 创建 win7 虚拟机!

嚯嚯嚯&#xff0c;很多宝子都想拥有自己不同的操作系统环境&#xff0c;用于学习或项目搭建。买服务器费钱&#xff0c;虚拟机则成为了一个很好的选择。本文详细介绍VMware Workstation Pro 16安装及win7虚拟机创建&#xff0c;保姆级教程奉上&#xff01; 一、准备工作 VMw…

掏心经验分享,软考中项0基础入门篇!

想备考下半年中项&#xff08;系统集成项目管理工程师&#xff09;的朋友&#xff0c;不知道如何了解软考中项&#xff0c;今天给大家整理一篇关于我自己在备考软考时的一些考量和踩过的一些坑。&#xff08;无广&#xff0c;放心看&#xff09; 很多小伙伴总是听大家说软考中…

Linux 服务器配置共享文件夹(NFS)

一、准备三台 linux 服务器 三台服务器: manger:172.16.11.178 ap1:172.16.11.179 ap2:172.16.11.180 /root/serverfiles/ 为共享目录 二、配置步骤 1、在服务端01的机器上安装nfs和rpcbind程序 yum -y install nfs* yum -y install rpcbind* 2、在安装完nfs以及rpcb…

Leecode热题100---11:盛最多水的容器

题目&#xff1a; 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xff1a;你不能倾…

使用单目相机前后帧特征点匹配进行3D深度估计的方法

在计算机视觉和机器人领域&#xff0c;三维空间感知是实现环境理解和交互的核心技术之一。特别是在资源受限的场合&#xff0c;使用针孔模型的单目相机进行深度估计成为了一种既经济又实用的解决方案。单目深度估计技术依赖于从连续视频帧中提取和匹配特征点&#xff0c;以估计…

RT-Thread中使用Mqtt

环境&#xff1a; 开发板&#xff1a;Panduola&#xff08;stm32L475&#xff09; KEIL5 开发环境 rtthread 4.0.3内核 使用ENV 配置Rtt MQTT 1.MQTT介绍 ​ 客户端 Client 使用MQTT的程序或设备。客户端总是通过网络连接到服务端。它可以发布应用消息给其它相关的客户端。订…

RocketMQ:新增consumer消费组group从最新消息开始消费skip last offset message

场景 想创建一个新的consumer去消费一个已经再使用的topic时&#xff0c;默认情况下会从topic中的第一条消息开始消费&#xff0c;大多数情况是需要从最新的消息开始。然后再使用CONSUME_FROM_LAST_OFFSET设置时并不会对新的consumer生效&#xff0c;它只是在停用consumer重新启…

Google I/O 2024:探索未来AI技术的无限可能

近日&#xff0c;Google I/O 2024大会圆满落幕&#xff0c;带给我们一场关于人工智能的盛宴。在这场大会上&#xff0c;Google推出了一系列令人激动的AI新功能和工具&#xff0c;让我们得以一窥未来的科技发展。今天&#xff0c;就让我来为大家总结一下这些亮点吧&#xff01; …

压力测试及常用的压测工具!

前言 压力测试是一种评估系统性能的方法&#xff0c;通过模拟大量用户同时访问系统或执行特定操作&#xff0c;以测试系统的负载能力和稳定性。 压力测试可以帮助发现系统在高负载情况下的性能瓶颈、错误或故障&#xff0c;从而提前进行优化和改进。在进行压力测试时&#xf…

吴恩达深度学习笔记:优化算法 (Optimization algorithms)2.7

目录 第二门课: 改善深层神经网络&#xff1a;超参数调试、正 则 化 以 及 优 化 (Improving Deep Neural Networks:Hyperparameter tuning, Regularization and Optimization)第二周&#xff1a;优化算法 (Optimization algorithms)2.7 RMSprop 第二门课: 改善深层神经网络&am…

「Python绘图」绘制同心圆

python 绘制同心圆 一、预期结果 二、核心代码 import turtle print("开始绘制同心圆") # 创建Turtle对象 pen turtle.Turtle() pen.shape("turtle") # 移动画笔到居中位置 pen.pensize(2) #设置外花边的大小 # 设置填充颜色 pen.fillcolor("green&…

【大数据】计算引擎MapReduce

目录 1.概述 1.1.前言 1.2.大数据要怎么计算&#xff1f; 1.3.什么是MapReduce&#xff1f; 2.架构 3.工作流程 4.shuffle 4.1.map过程 4.2.reduce过程 1.概述 1.1.前言 本文是作者大数据系列专栏的其中一篇&#xff0c;专栏地址&#xff1a; https://blog.csdn.ne…

NVM镜像源报错:Could not retrieve https://npm.taobao.org/mirrors/node/index.json.

NVM镜像源报错&#xff1a;Could not retrieve https://npm.taobao.org/mirrors/node/index.json. 淘宝前端node镜像源已更换 NVM安装教程&#xff1a;http://t.csdnimg.cn/dihmG 背景 笔者在安装版本切换工具NVM时&#xff0c;配置完镜像源后&#xff0c;在控制台输入&#x…

使用FFmpeg处理RTSP视频流并搭建RTMP服务器实现图片转直播全流程

目录 一、FFmpeg安装与配置二、搭建并配置Nginx RTMP服务器三、从RTSP视频流提取帧并保存为图片四、将图片序列转换为视频五、将视频推送为直播流六、将图片序列推送为直播流七、播放实时流 场景&#xff1a;如何通过FFmpeg工具链&#xff0c;从RTSP视频流中按秒抽取帧生成图片…

六西格玛管理培训对企业有哪些实际帮助?

当下&#xff0c;企业要想脱颖而出&#xff0c;不仅要有创新思维和敏锐的市场洞察力&#xff0c;更要有高效的管理体系和严谨的质量控制手段。而六西格玛管理培训正是这样一项能够帮助企业实现提质增效、提升竞争力的关键举措。那么&#xff0c;六西格玛管理培训对企业究竟有哪…

超级数据查看器 教程合集 整理版本 pdf格式 1-31集

点击下载 超级数据查看器 教程合集整理版本 pdf格式https://download.csdn.net/download/qq63889657/89311725?spm1001.2014.3001.5501

SQL Server共享功能目录显示灰色无法自行选择

SQL Server共享功能目录显示灰色无法自行调整 一、 将之前安装SQL Server卸载干净 二、 清空注册表 1. 打开注册表&#xff0c;winR&#xff0c;输入regedit 2. 注册表-》编辑-》查找&#xff0c;输入C:\Program Files\Microsoft SQL Server\ 3. 注册表-》编辑-》查找&#x…

量子计算机接入欧洲最快超算!芬兰加快混合架构算法开发

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 文丨浪味仙 排版丨沛贤 深度好文&#xff1a;1900字丨7分钟阅读 摘要&#xff1a;芬兰技术研究中心&#xff08;VTT&#xff09;与 CSC 展开合作&#xff0c;基于量子计算机超算架构进行算法开…

Git大文件无法直接push用git lfs track 上传大文件具体操作

Git 因为大文件push失败 回退到git add前用git lfs track单独添加大文件 以下work flow仅代表个人解决问题的办法&#xff0c;有优化流程的欢迎交流 回退到git add前 以下指令回退一个commit git reset --soft HEAD~1以下指令撤销所有git add操作&#xff0c;但不删除本地修…

泰盈科技IPO终止:客户集中度高,业绩未达目标,高管薪酬较高

近日&#xff0c;上海证券交易所披露的信息显示&#xff0c;泰盈科技集团股份有限公司&#xff08;下称“泰盈科技”&#xff09;及其保荐人中金公司撤回上市申请文件。因此&#xff0c;上海证券交易所决定终止对该公司首次公开发行股票并在主板上市的审核。 据贝多财经了解&am…