<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图文混排效果</title>
<style>
.web-developer-title {
font-size: 20px; /* 5号字体大致相当于20px */
color: #836958;
font-family: '微软雅黑', 'Microsoft YaHei', sans-serif; /* 优先使用微软雅黑,若不支持则使用系统默认无衬线字体 */
}
.tech-requirements {
font-size: 14px; /* 3号字体大致相当于14px */
color: #00659a;
font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
}
.tech1-requirements {
font-size: 14px; /* 3号字体大致相当于14px */
color: #000000;
font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
}
.tech-requirements em {
font-style: italic; /* <em>标签默认是斜体 */
}
.tech1-requirements ins {
text-decoration: underline; /* <ins>标签默认是下划线 */
color: #00659a;
}
.tech1-requirements ins span.blue-text {
color: #00659a;
}
.update-time {
font-size: 14px;
color: #00659a;
font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
}
.update-time strong {
font-size: 24px; /* 5号字体加粗大致相当于24px */
color: #f00;
}
.related-articles {
font-size: 20px;
color: #836958;
font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
}
.related-articles strong {
color: #f00;
}
img {
float: left; /* 相当于align="left" */
margin-right: 30px; /* 相当于hspace="30" */
width: 360px;
}
hr {
border: none; /* 移除默认的边框 */
height: 1px; /* 高度为1px */
background-color: #ddd; /* 设置背景色为分隔线颜色 */
margin: 20px 0; /* 上下外边距 */
}
</style>
</head>
<body>
<img src="images/1.jpg" alt="网页设计、平面设计、UI设计" />
<h2 class="web-developer-title">Web前端开发工程师</h2>
<p class="tech-requirements">技术要求:</p>
<p class="tech1-requirements"> 了解常用的一些JS框架,如jQuery、YUI等;掌握最基本的JavaScript计算方法编写;对目前互联网流行的网页制作方法(Web2.0)HTML+CSS,以及各大浏览器兼容性有较多的了解;基本掌握前沿技术(HTML5+CSS3)。<ins><em> <span class="blue-text">Web前端技术</span> </em></ins>你究竟掌握了多少...</p>
<p class="update-time">更新时间:2020年05月19日20点(已有<strong>323</strong>人点赞)</p>
<hr />
<p class="related-articles">相关技术文章<strong>8</strong>篇</p>
</body>
</html>