web程序设计（前端）实验三（二）——网页设计

最新推荐文章于 2023-02-13 22:22:20 发布

巧了，我也不会

最新推荐文章于 2023-02-13 22:22:20 发布

阅读量1.6k

点赞数 2

分类专栏： html5 css3

本文链接：https://blog.csdn.net/weixin_41879980/article/details/104531518

版权

html5 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css3

3 篇文章 0 订阅

订阅专栏

设计要求：
（1）整个页面采用div布局，宽度600px，并且网页居中，下面再分3个div显示图中的3个段落，这3个div的内边距分别设置为18px 0px 0px；（上右下左）；
（2）整个body的字体设置为14px，英文字体采用Arial，中文字体依次采用“微软雅黑”（或Microsoft Yahei），采用font简写方式；
（3）标题字体采用h2，字体19px，黑色，加粗；该标题是个超链接，指向仲恺首页即可，要求去下划线；
（4）第二行的小图标来自pdf，内部文本段落的字体14px，颜色为#333；
（5）“时间”文本段落的字体13px，颜色#555；“评论”与“分享”的字体颜色#333，“评论”是超链接，当鼠标悬空在“分享”（不是超链接）上方时，字体颜色变为“#6677CC”；
这一行文字，距离每则新闻的下底边是20px；
（6）图片宽度设置为213px，高度142px，超出显示范围的图片内容将不显示，与右边字体相隔17px；
提示：以上布局可参考“新浪科技”网页。
（1）标题h2下的内容，采用一个div来包裹图片与文字，其中图片放置在div1中，该div要设置float：left属性，右方文字也采用div，不需设置浮动属性，
新闻下方的“时间”与“评论与分享”可以采用绝对定位，bottom：20px，但要父级容器，加上一个position属性；
（2）显示“时间”的文本采用div或span，采用float：left属性；显示“评论”与“分享”采用div或span，采用float：right属性。若采用div，可采用display：inline属性。
（3）在上述参考“注意”中加入class=“clearfix”，输入以下clearfix样式，消除浮动：
.clearfix:after{
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}

程序运行结果：
在这里插入图片描述

参考代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页设计</title>
    <style type="text/css">
        #id1 {
            font: 14px Arial 微软雅黑; /*设置整个div的字体样式*/
        }

        .main {
            width: 600px;
            margin: 0px auto;
        }

        .news-item {
            padding: 18px 0 20px 0px;
        }
        .news-item:after{
            clear: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
        }

        .top { /*标题*/
            text-align: center;
            background: #CCCCcc;
        }

        .image { /*图片*/
            float: left;
            width: 213px;
            height: 142px;
            overflow: hidden;
            margin-right: 17px;
        }

        .tag { /*中间的属性*/
            color: #333;
            font-size: 14px;
        }

        .bottom { /*时间，评论和分享的div*/
            position: relative;
            top: 70px;
            left: 0px;
        }

        .bottom2 { /*时间，评论和分享的div*/
            position: relative;
            top: 50px;
            left: 0px;
        }

        .time { /*时间div*/
            font-size: 13px;
            color: #555;
            float: left;
        }

        .remark { /*评论和分享的div*/
            float: right;
        }

        h2 {
            font-size: 17px;
            font-weight: bold;
            text-align: left;
            margin-top: 1px;
        }

        .a-one {
            text-decoration: none;
            color: black;
        }

        .a-two {
            color: #333;
        }

        .span-one {
            color: #333;
        }

        .span-one:hover {
            background: #6677CC;
        }
    </style>
</head>
<body id="id1">
<div class="main">
    <div class="top">有11条消息，点击查看</div>
    <div class="news-item">
        <div class="image">
            <a><img src="image/b0.jpg"/></a>
        </div>
        <div>
            <h2><a class="a-one" href="http://www.zhku.edu.cn">共享单车的大迁徒：资本、梦想和不知疲倦的人</a></h2>
            <div class="tag">
                <span>互联网</span>
            </div>
            <div class="bottom">
                <div class="time">16分钟前</div>
                <div class="remark">
                    <a class="a-two">评论</a>&nbsp&nbsp
                    <span class="span-one">分享</span>
                </div>
            </div>
        </div>
    </div>
    <hr/>
    <div class="news-item">
        <div class="image">
            <a><img src="image/b1.jpg"/></a>
        </div>
        <div>
            <h2><a class="a-one" href="http://www.zhku.edu.cn">共享单车火了而共享汽车却被吐槽 背后逻辑发人深思</a></h2>
            <div class="tag">
                <span>互联网</span>
            </div>
            <div class="bottom2">
                <div class="time">23分钟前</div>
                <div class="remark">
                    <a class="a-two">评论</a>&nbsp&nbsp
                    <span class="span-one">分享</span>
                </div>
            </div>
        </div>
    </div>
    <hr/>
    <div class="news-item">
        <div class="image">
            <a><img src="image/b2.jpg"/></a>
        </div>
        <div>
            <h2><a class="a-one" href="http://www.zhku.edu.cn">iPhone7频丢数据 苹果店员称每天好几例</a></h2>
            <div class="tag">
                <span>电信</span>
            </div>
            <div class="bottom">
                <div class="time">25分钟前</div>
                <div class="remark">
                    <a class="a-two">评论（2）</a>&nbsp&nbsp
                    <span class="span-one">分享</span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

巧了，我也不会

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
web程序设计（前端）实验三（二）——网页设计

设计要求：（1）整个页面采用div布局，宽度600px，并且网页居中，下面再分3个div显示图中的3个段落，这3个div的内边距分别设置为18px 0px 0px；（上右下左）；（2）整个body的字体设置为14px，英文字体采用Arial，中文字体依次采用“微软雅黑”（或Microsoft Yahei），采用font简写方式；（3）标题字体采用h2，字体19px，黑色，加粗；该标题是个超链...
复制链接

扫一扫