Html+Css小tips:网易新闻右侧窗口

最新推荐文章于 2024-07-25 18:31:14 发布

嘀啦哒

最新推荐文章于 2024-07-25 18:31:14 发布

阅读量168

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_48451943/article/details/119764002

版权

20210817：新闻列表和默认样式去除

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        body {
            font-family: "Microsoft YaHei", 微软雅黑, sans-serif;
        }

        a {
            text-decoration: none;
        }
        
        .news-wrapper {
            width: 300px;
            margin: 50px auto;
            background-color: #ffffff;

        }

        .box-title {
            height: 42px;
            border-top: 1px #dddddd solid;
            line-height: 40px;
        }
        /* 通过该样式使h2上移，盖住上边款 */
        .news-title {           
            display: inline;
            padding-top: 9px;
            border-top: 1px #f34540 solid;
        }

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

        .news-img {
            height: 150px;
            margin-top: 4px;
        }

        .news-img .img-title {
            /* 设置图片的文字效果 */
            margin-top: -30px;
            color: #ffffff;
            font-weight: bold;
            padding-left: 30px;
        }

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

        .news-list li {
            float: left;
            font-size: 14px;
            height: 30px;
            line-height: 30px;
        }
        /* 通过伪元素设置li标签前面的列表标记 */
        .news-list li::before {          
            content: '■';
            color: #dddddd;
            font-size: 1px;
            margin-right: 6px;
            display: block;
            float: left;
        }

        .news-list li a {
            font-size: 14px;
            color: #666666;

        }

        .news-list li a:hover {
            color: #c81623;
        }
    </style>
</head>

<body>
    <!-- 设置一个新闻列表的外部容器 -->
    <div class="news-wrapper">
        <!-- 标题容器 -->
        <div class="box-title">
            <h2 class="news-title">
                <a href="javascript:;">体育</a>
            </h2>
        </div>
        <div class="news-img">
            <a href="javascript:;">
                <img src="./img/2.jpg" alt="美军阿富汗现场惊现绝密飞机">
                <h3 class="img-title">美军阿富汗现场惊现绝密飞机</h3>
            </a>
        </div>
        <ul class="news-list">
            <li><a href="javascript:;">重生的“东阳魔女”</a></li>
            <li><a href="javascript:;">为了踢球拒绝哈佛的英超“学霸”</a></li>
            <li><a href="javascript:;">吴刚有多强，拿他怎么办？</a></li>
            <li><a href="javascript:;">这个综艺咖，在CBA竟能混下去？</a></li>
        </ul>
    </div>
</body>

</html>

*难点：
1、在这我们无法像往常一样通过设置margin值来使h2的上边框与div的上边框重合，所以引用了行内块元素（inline-block），使h2能通过margin上移，达到两个边框重合。
2、列表中li标签前面的标记，我们可以通过::before伪元素来代替list-style对li标签前面的标记更仔细的设置样式，再使伪元素成为块元素，接着使用float使其与li标签对齐。
3.由于代码本身保有一定的格式，所以link，引用删除原有样式，代码如下：
*

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

嘀啦哒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html+Css小tips:网易新闻右侧窗口

20210817：新闻列表和默认样式去除<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="styl
复制链接

扫一扫