制作3--网易新闻右侧图文列表（html/css）

效果图：

制作思路：
[html]
1.整体用div标签嵌套div（标题）、div（图片）、ul>li*4（列表）
2.标题中军事和航空都可以点击，所以用a标签嵌套h2标签，·用span标签
3.图片可以被点击，用a标签嵌套img、h3标签
4.列表可点击，li标签嵌套a标签，a标签中放入文字
[css]
5.给大div设置宽、高、背景颜色、上边框
6.给标题div指定高度，设置上边框（由于是块元素，要想只在文字上有边框，要将块元素变成行内块元素）
标题div的边框和大div的边框相差1px，需要标题div往上移1px，用margin-top=-1px;
7.设置标题中超链接的样式，清除下划线、字体颜色、字体大小、字体加粗
8.设置·的颜色、字体大小、上下左右内边距（将其变成行内块元素）
9.设置图片的高度，如果没有设置下方元素会上移
10.设置图片的文字效果，字体颜色、字体大小、字体加粗，字体上移到图片上方margin-top=-25px;，往右移20px，margin和padding都可以
11.设置新闻列表，上面距离20px
12.设置ul上外边距
13.设置li中文字，字体大小、字体颜色
14.设置ul左外边距
15.鼠标移入标题或者文字列表，字体变红，hover
16.设置项目符号方块，伪元素，字体大小、字体颜色、内容发方块、外边距

代码：
right_list.html

<body>
    <div class="news-wrapper">
        <div class="news-title">
            <a href="javascript:;">军事</a>
            <span>·</span>
            <a href="javascript:;">航空</a>
        </div>
        <div class="news-img">
            <a href="javascript:;">
                <img src="../img/73b5ad86j00qhkhqv0065c000s600e3c (1).jpg" alt="">
                <h3 class="img-title">东部战区海军航空兵全天飞行训练</h3>
            </a>
        </div>
        <ul class="news-list">
            <li>
                <a href="#">阿塞拜疆发布轰炸士兵视频 炮弹落下只剩一片</a>
            </li>
            <li>
                <a href="#">美军等了40年的装备终于入役 遭吐槽与中国</a>
            </li>
            <li>
                <a href="#">波音告别多年大本营 "现金牛"机型生产南迁</a>
            </li>
            <li>
                <a href="#">全球航空发动机巨头宣布系列融资计划</a>
            </li>
        </ul>
    </div>
</body>

style.css

body {
    background-color: burlywood;
}

a {
    text-decoration: none;
}

.news-wrapper {
    width: 300px;
    height: 358px;
    background-color: #FFFFFF;
    /* 设置居中 */
    margin: 50px auto;
    /* 设置上边框 */
    border-top: 1px #DDDDDD solid;
}

.news-title {
    /* 为了边框和文字宽度一致，需要将h2转换为行内块元素 */
    display: inline-block;
    height: 41px;
    border-top: 1px red solid;
    /* 将元素网上移，盖住上边框 */
    margin-top: -1px;
}

.news-title a {
    color: #404040;
    font-size: 16px;
    font-weight: bold;
}

.news-title a:hover {
    color: red;
}

.news-title span {
    display: inline-block;
    color: #888888;
    padding: 10px 2px 10px 2px;
    font-size: 16px;
}

.news-img {
    height: 150px;
}

.news-img .img-title {
    color: #FFFFFF;
    font-size: 14px;
    margin-top: -25px;
    font-weight: bold;
    padding-left: 30px;
}

.news-list {
    margin-top: 24px;
}

.news-list li {
    margin-bottom: 17px;
}

.news-list li::before {
    content: '■';
    color: rgb(218, 218, 218);
    font-size: 1px;
    margin-right: 2px;

}

.news-list li a:hover {
    color: red;
}

.news-list li a {
    font-size: 14px;
    color: #666666;
}
posted @ 2020-10-03 00:54  悦颜悦色，柠月清风  阅读(619)  评论(0)    收藏  举报