HTML作业1（图文混排）
程序员文章站
2022-03-07 18:28:55
...
NO.1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>传智播客设计学院</title>
<style type="text/css">
h1{font-family: Microsoft YaHei;}
</style>
</head>
<body>
<img src="imgs/1.jpg" align="left" hspace="25" alt="我是图片" title="传智播客"/>
<h1 style="font-size: 43px; color: red">传智播客设计学院</h1>
<p> <font size="3" color="#006400">传智播客设计学院</font>成立于2010年，专注于平面设计师、网页设计师、UI设计师的培养。
现开设JavaEE、Android、PHP、UI、IOS、前端、C++、网络营销、Python、云计算、全栈工程师、产品经理等培训学科，
直营分校遍布北京、上海、广州、深圳、武汉、郑州、西安、哈尔滨、长沙、济南、重庆、南京、杭州、成都、石家庄、合肥、太原、厦门等城市。</p>
<p> <font size="3" color="#006400">传智播客</font>由一群有活力、有理想、有责任的传智人组成，他们秉承“为莘莘学子改变命运而讲课，为千万学生少走弯路而著书”的使命，
坚持“务实、质量、创新、分享、专注、责任”的核心价值观，正向着建设成为中国一流的综合性职业教育集团不断迈进。</p>
<p> <font size="3" color="#006400">探索教育之路，长途漫漫。</font>传智人希望可以通过自己的努力，寻找出一条更符合人类自然成长规律的教育之路，建立起一个新的教育生态环境，
让中国的家长和孩子们在现有的教育体系之外，再多一些选择的机会。因此，“探索教育本源，开辟教育新生态”便成为了所有传智人为之奋斗的愿景。</p>
<hr/>
<p><font size="3" color="#a9a9a9"> ©传智播客设计学院宣</font></p>
</body>
</html>
NO.2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web前端开发工程师</title>
</head>
<body>
<img src="imgs/2-1.jpg" align="left" hspace="25" alt="我是图片" title="Web开发"/>
<img src="imgs/2-2.jpg" align="right" hspace="25" alt="我是图片" title="Web开发"/>
<h style="font-size: 43px; color: red">Web前端开发工程师</h>
<p> <font size="3" color="#a9a9a9">技术要求：</font></p>
<p>Web前端开发技术包括三个要素：HTML、CSS和JavaScript，随着RIA的流行和普及，Flash/Flex、Silverlight、XML和服务器端语言也是前端开发工程师应该掌握的。
随着时代的发展，前端开发技术的三要素也演变成为现今的：<u style="color: #a9a9a9">html5，css3，jquery</u>。Web前端开发工程师既要与上游的交互设计师、视觉设计师和产品经理沟通，
又要与下游的服务器端工程师沟通，需要掌握的技能非常多。这就从知识的广度上对Web前端开发工程师提出了要求。
如果要精于前端开发这一行，也许要先精十行。然而，全才总是少有的。所以，对于不太重要的知识，我们只需要<u style="color: #a9a9a9">“通”</u>即可。
但“通”到...</p>
<!--字体大小、颜色嵌套-->
<p><font size="3" color="#a9a9a9">更新时间：2018年9月11日9点（已有<font size="5" color="#006400"><strong>333</strong></font>人点赞）</font></p>
<p>相关技术文章<strong>8</strong>篇</P>
</body>
</html>
NO.3
PS：星空背景来自于 https://blog.csdn.net/StubbornAccepted/article/details/52944832
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FFF团</title>
<style type="text/css">
h1{font-family: Microsoft YaHei;}
p{font-family: Microsoft YaHei;}
.bq{float: right;}
</style>
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {
width: 100%;
height:100%;
background: #000;
background-size: 100%;
perspective: 500px;
}
.stars {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height:4px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
animation: fly 2s linear infinite;
transform-style: preserve-3d;
}
.stars:before, .stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
.stars:before {
transform: translateZ(-300px);
opacity: .6;
}
.stars:after {
transform: translateZ(-600px);
opacity: .4;
}
@keyframes fly {
from {
transform: translateZ(0px);
opacity: .6;
}
to {
transform: translateZ(300px);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="stars"></div>
<img src="imgs/2-1.jpg" align="left" hspace="25" alt="我是图片" title="Web开发"/>
<img src="imgs/2-2.jpg" align="right" hspace="25" alt="我是图片" title="Web开发"/>
<h style="font-size: 50px; color: red"><strong>FFF团圣战战前动员大会</strong></h>
<p> <font size="3" color="red">技术要求：</font></p>
<p style="font-size: 18px; color: #a9a9a9">
我们曾经深爱这个世界。
我们曾经相信公平。
可是这个罪恶的社会欺骗了我们。
如今
大战在即！
战争的号角已经吹响！
错的不是我们！
是世界！
同志们！拿起武器！是时候纠正这个错误的世界了！
你不是一个人在战斗！
有如此多的战友 谁还能阻挡我们！
胜利将会属于我们！
请高举手中的火把！圣战开始了！
诸君，
我们的火焰与十字架就在此时!
就在此刻!就在此地!熊熊的燃烧!
你们有过在空虚的夜里看着女艺人哭泣的经历吗？
你们有过在旅游圣地形单影只看着天空无声控诉的悲哀么?
你们可曾在深夜里数着好人卡入眠那种痛彻心扉的绝望吗!?
是的!我们都一样，
在这里，你不需要掩盖自己的孤单，
因为大家都是战友!
在这里，你可以倾诉你的悲痛，
因为大家都是兄弟!
在这里，你不需要在女孩子面前躲躲闪闪，
因为大家都是姐妹!
然后就靠着互相的安慰而感恩戴德?
于是就这样沉默下去?
够了?不!我想说:这远远不够!
为什么我们聚集起来?
为什么我们汇合一处?
为什么我们站在这里?
为了什么？
诸君，也许你们尚有疑惑，
也许你们感到茫然……
但是!来吧!
喊出那句口号!
来吧!
竖起那杆旗帜!
来吧!
燃起熊熊烈焰!
最后!
诸君!
这是战争!
我们现在要大声的喊出来!
“FFF团万岁!火刑架万岁!
烧烧烧烧烧烧烧烧烧烧
烧烧烧烧烧烧烧烧烧烧
烧烧烧
烧烧烧
烧烧烧
烧烧烧烧烧烧烧烧烧烧
烧烧烧烧烧烧烧烧烧烧
烧烧烧
烧烧烧
烧烧烧
烧烧烧
烧烧烧
烧烧烧
烧烧烧 烧烧烧 烧烧烧
烧 烧 烧
烧烧烧 烧烧烧 烧烧烧
烧 烧 烧
烧 烧 烧
</p>
<!--字体大小、颜色嵌套-->
<p style="color: #a9a9a9"><font size="3" color="red">更新时间：2018年9月11日9点（已有<font size="5" color="#006400"><strong>333</strong></font>人点赞）</font></p>
<p>相关技术文章<strong>8</strong>篇</P>
<hr/>
<p class="bq"><font size="3" color="#a9a9a9"> ©<u>CSDN Jia_jinjin著</u></font></p>
</body>
</html>
<script>
var w = document.documentElement.clientWidth*1.2;
var h = document.documentElement.clientHeight*1.2;
var star = document.getElementsByClassName("stars")[0];
var n = 1000;
//随机函数
function randomNum(m, n) {
return Math.floor(Math.random() * (n - m + 1) + m);
}
var str = '';
for (var i = 0; i < n; i++) {
var numX = randomNum(-w, w);
var numY = randomNum(-h, h);
var color = 'rgb(' + randomNum(0, 255) + ',' + randomNum(0, 255) + ',' + randomNum(0, 255) + ')';
str += numX +'px'+' ' + numY+'px'+' '+ color+',';
}
str = str.slice(0,-1);
star.style.boxShadow = str;
$(function(){
$('#main').fadeOut();
$('#main').fadeIn('slow');
})
</script>上一篇： MySQL使用聚合函数进行单表查询
下一篇： 物联网通信之——Mqtt