运用CSS选择器、CSS文本相关样式及高级特性重新设计页面效果。实现图文混排

本文介绍了Web前端开发工程师所需的技术要求,包括熟练掌握jQuery和YUI等JS框架,了解Web2.0的HTML+CSS技术,以及对浏览器兼容性和HTML5+CSS3的熟悉程度。更新时间为2020年5月19日,获得了323个点赞,还列出了相关技术文章的数量。
摘要由CSDN通过智能技术生成

<!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">&nbsp;&nbsp;&nbsp;&nbsp;了解常用的一些JS框架,如jQuery、YUI等;掌握最基本的JavaScript计算方法编写;对目前互联网流行的网页制作方法(Web2.0)HTML+CSS,以及各大浏览器兼容性有较多的了解;基本掌握前沿技术(HTML5+CSS3)。<ins><em>&nbsp;<span class="blue-text">Web前端技术</span>&nbsp;</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>

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值