web入门练手案例（一）

news2024/11/20 16:25:58

下面是一下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>