京东图片列表、左侧导航栏、网易新闻列表、京东页面布局、京东轮播图

最新推荐文章于 2022-10-03 16:03:03 发布

图图马

最新推荐文章于 2022-10-03 16:03:03 发布

阅读量970

点赞数 2

分类专栏：笔记文章标签： html css

本文链接：https://blog.csdn.net/Natural_mengniu/article/details/118338963

版权

笔记专栏收录该内容

11 篇文章 3 订阅

订阅专栏

文章目录

京东图片列表
京东左侧导航栏
网易新闻列表：
京东页面布局
京东轮播图

京东图片列表

在这里插入图片描述
代码如下：

<head>
    <meta charset="UTF-8">
    <title>京东右侧栏</title>
    <link rel="stylesheet" href="./css/reset.css">

    <style>
        body{
            background-color: antiquewhite; /*方便看ul的背景颜色，仅限展示效果*/
        }
        .ul-list{
            width: 190px;
            height: 470px;
            overflow: hidden; /*裁剪溢出的部分*/
            background-color: #f4f4f4;
            margin: 0 auto; /*使图片居中，仅在演示使使用*/
        }
        .ul-list li{
        /*设置li的位置，两个li中间的空隙*/
            margin-bottom: 10px;
        }
        .ul-list img{
        /*设置图片的大小，填满ul*/
            width: 100%;
        }
    </style>
</head>
<body>
    <ul class="ul-list">
        <li>    
            <a href="https://www.baidu.com">
            <img src="./img/1.jpg" alt="电视影音">
            </a>
        </li>

        <li>    
            <a href="https://www.baidu.com">
            <img src="./img/2.jpg" alt="电视影音">
            </a>
        </li>

        <li>    
            <a href="https://www.baidu.com">
            <img src="./img/3.jpg" alt="电视影音">
            </a>
        </li>
    </ul>
</body>
</html>

效果展示：
在这里插入图片描述

京东左侧导航栏

在这里插入图片描述
代码：

<head>
    <meta charset="UTF-8">
    <title>京东左侧导航栏</title>
    <link rel="stylesheet" href="./css/reset.css">

    <style>
        body {
            background-color: skyblue;
        }

        div {
            width: 190px;
            height: 470px;
        }

        ul {
            width: 190px;
            height: 450px;
            background-color: rgb(254, 254, 254);
            padding: 10px 0;
            margin-top: 10px;
        }

        li { /*无width，所以width为auto，所以不会溢出，
        如果设置宽度，则应该设置172px，否则会溢出*/
            height: 25px; 
            line-height: 25px; /*使文字在 li 中居中*/
            padding-left: 18px;
        }

        a {
            font-size: 14px;
            text-decoration: none; /*使超链接的下划线消失*/
            color: #515151;
        }

        a:hover {
            color: red;
        }

        li:hover {
            background-color: rgb(217, 217, 217);
        }

        .a {
            font-size: 12px;
            padding: 1px;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>
                <a href="javascript:;">家用电器</a>
            </li>
            <li>
                <a href="javascript:;">手机</a><span class="a">/</span><a href="javascript:;">运营商</a><span
                    class="a">/</span><a href="javascript:;">数码</a>
            </li>
            <li>
                <a href="javascript:;">电脑</a><span class="a">/</span><a href="javascript:;">办公</a>
            </li>
            <li>
                <a href="javascript:;">家居</a><span class="a">/</span><a href="javascript:;">家具</a><span
                    class="a">/</span><a href="javascript:;">家装</a><span class="a">/</span><a href="javascript:;">厨具</a>
            </li>
            <li>
                <a href="javascript:;">男装</a><span class="a">/</span><a href="javascript:;">女装</a><span
                    class="a">/</span><a href="javascript:;">童装</a><span class="a">/</span><a href="javascript:;">内衣</a>
            </li>
            <li>
                <a href="javascript:;">美妆</a><span class="a">/</span><a href="javascript:;">个护清理</a><span
                    class="a">/</span><a href="javascript:;">宠物</a>
            </li>
            <li>
                <a href="javascript:;">女鞋</a><span class="a">/</span><a href="javascript:;">箱包</a><span
                    class="a">/</span><a href="javascript:;">钟表</a><span class="a">/</span><a href="javascript:;">珠宝</a>
            </li>
            <li>
                <a href="javascript:;">男鞋</a><span class="a">/</span><a href="javascript:;">运动</a><span
                    class="a">/</span><a href="javascript:;">户外</a>
            </li>
            <li>
                <a href="javascript:;">房产</a><span class="a">/</span><a href="javascript:;">汽车</a><span
                    class="a">/</span><a href="javascript:;">汽车用品</a>
            </li>
            <li>
                <a href="javascript:;">母婴</a><span class="a">/</span><a href="javascript:;">玩具乐器</a>
            </li>
            <li>
                <a href="javascript:;">食品</a><span class="a">/</span><a href="javascript:;">酒类</a><span
                    class="a">/</span><a href="javascript:;">生鲜</a><span class="a">/</span><a href="javascript:;">特产</a>
            </li>
            <li>
                <a href="javascript:;">艺术</a><span class="a">/</span><a href="javascript:;">礼品鲜花</a><span
                    class="a">/</span><a href="javascript:;">农资绿植</a>
            </li>
            <li>
                <a href="javascript:;">医药保健</a><span class="a">/</span><a href="javascript:;">计生情趣</a>
            </li>
            <li>
                <a href="javascript:;">图书</a><span class="a">/</span><a href="javascript:;">文娱</a><span
                    class="a">/</span><a href="javascript:;">教育</a><span class="a">/</span><a
                    href="javascript:;">电子书</a>
            </li>
            <li>
                <a href="javascript:;">机票</a><span class="a">/</span><a href="javascript:;">酒店</a><span
                    class="a">/</span><a href="javascript:;">旅游</a><span class="a">/</span><a href="javascript:;">生活</a>
            </li>
            <li>
                <a href="javascript:;">理财</a><span class="a">/</span><a href="javascript:;">众筹</a><span
                    class="a">/</span><a href="javascript:;">白条</a><span class="a">/</span><a href="javascript:;">保险</a>
            </li>
            <li>
                <a href="javascript:;">安装</a><span class="a">/</span><a href="javascript:;">维修</a><span
                    class="a">/</span><a href="javascript:;">清洗</a><span class="a">/</span><a href="javascript:;">二手</a>
            </li>
            <li>
                <a href="javascript:;">工业品</a>
            </li>
        </ul>
    </div>
</body>

</html>

效果展示：
在这里插入图片描述

网易新闻列表：

在这里插入图片描述

代码如下：

<head>
    <meta charset="UTF-8">
    <title>网易新闻列表</title>

    <link rel="stylesheet" href="./css/reset.css">

    <style>
        a{
            text-decoration: none; /*去除下划线*/
        }
        .news-wrapper{/*设置容器的样式*/
            width: 300px; /*容器的宽*/
            height: 357px;/*容器的高*/
            margin: 50px auto;/*使容器居中显示，便于观察*/
            border-top: 1px #ddd solid; /*容器的上边框*/
        }
        .news-title{/*设置标题h2*/
            display: inline-block; /*使得news-title成为行内块元素，
            因此达到标题的红色的边框与字体内容的长度一致*/
            height: 30px;/*标题的高度*/
            border-top: 1px red solid;/*标题的上边框*/
            margin-top: -1px;/*使标题的上边框上移1px，与容器的上边框重合*/
            line-height: 30px; /*使得news-title的字体在h2居中*/

        }
        .news-title a{/*设置标题h2中的链接样式*/
            color: #40406b;/*标题的颜色*/
            font-weight: bold;/*字体加粗*/
        }
        .news-title a:hover{
            color: red;/*鼠标移入标题的状态*/
        }
        .news-img{
            height: 150px;/*图片的高度*/
        }

        .news-img .img-title{/*设置图片和图片标题*/
            color: #fff;/*图片上的标题文字颜色*/
            margin-top: -30px;/*使图片的标题上移到图片的上面显示*/
            padding-left: 30px;/*使图片标题右移*/
            font-weight: bold;/*加粗图片标题*/
        }
        .news-list{/*设置新闻列表*/
            margin-top: 20px;/*设置列表与图片链接块间隔20px*/
        }
        .news-list li{/*设置列表中个列表的间隔17px*/
            margin-top: 17px;
        }
        .news-list li a{/*设置列表中链接的字体大小和颜色*/
            font-size: 14px;
            color: #666;

        }
        .news-list li::before{/*设置列表前面的小方块*/
            content: "■";
            color: rgb(218, 218, 218);
            font-size: 12px;
            margin-right: 4px;
        }
        .news-list li a:hover{
            color: red;/*鼠标移入列表的状态*/
        }

    </style>


</head>

<body>

    <div class="news-wrapper">

            <h2 class="news-title"> 
                <a href="javascript:;">军事</a>
            </h2>

        <div class="news-img">
            <a href="javascript:;">
                <img src="./img/4.jpg" alt="">
                <h3 class="img-title">费德勒3-0晋级温网32强创纪录</h3>
            </a>
        </div>

            <ul class="news-list">
                <li>
                    <a href="javascript:;">总决赛，保罗来了！</a>
                </li>
                <li>
                    <a href="javascript:;">保罗当年如果去了马刺，能和伦纳德一起拿总冠军</a>
                </li>
                <li>
                    <a href="javascript:;">【考古】04男篮VS塞黑：你相信奇迹吗？</a>
                </li>
                <li>
                    <a href="javascript:;">少 年 的 你</a>
                </li>
            </ul>

    </div>

</body>

效果展示如下：
在这里插入图片描述

京东页面布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页的布局</title>

    <style>
        header, main, footer, .search{
            width: 1000px;
            margin: 0 auto;
        }

        header{
            height: 50px;
            background-color: skyblue;
        }
        .search{
            height: 100px;
            background-color: lightseagreen;
            margin: 10px auto;
        }

        main{
            height: 350px;
            background-color:#bfa;
            margin: 10px auto;
        }

        nav, article, aside{
            float: left;
            height: 100%;
        }

        nav{
            width: 200px;
            background-color: yellowgreen;
        }

        article{
            width: 580px;
            background-color: cadetblue;
            margin: 0 10px;
        }
        
        .slideshow{
            width: 400px;
            height: 100%;
            background-color: darkgreen;
            float: left;
        }
        .img-list{
            width: 170px;
            height: 100%;
            background-color: forestgreen;
            float: left;
            margin-left: 10px;
        }

        aside{
            width: 200px;
            background-color: green;
        }
        footer{
            height: 100px;
            background-color: orange;
        }

    </style>
</head>
<body>
    
    <!-- 创建头部 -->
    <header></header>
        <!-- 创建搜索栏 -->
        <div class="search"></div>

    <!-- 创建主体 -->
    <main>
        <!-- 左侧导航 -->
        <nav></nav>
            <!-- 中间的内容 -->
            <article>
                <!-- 轮播图 -->
                <div class="slideshow"></div>
                    <!-- 图片列表 -->
                    <div class="img-list"></div>
            </article>
                <!-- 右边边栏 -->
                <aside></aside>
    </main>

    <!-- 创建底部 -->
    <footer></footer>
</body>
</html>

效果展示：
在这里插入图片描述

京东轮播图

网页效果：
在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东轮播图练习</title>
    <link rel="stylesheet" href="../css/reset.css">

    <style>
        /* 设置图片的容器 */
        .img-list{
            width: 590px;
            height: 470px;
            margin: 100px auto;
        /* 设置ul，相对定位，使ul不脱离文档流 */
            position: relative;
        }
        /* 设置li */
        .img-list li{
            position: absolute;
        }
        /* 通过修改元素的层级来显示指定的图片 */
        .img-list li:nth-child(1){
            z-index: 1;
        }
        /* 设置导航点的样式 */
        .pointer{
            position: absolute;
            z-index: 9999;
            left: 40px;
            bottom: 20px;
        }
        .pointer a{
            /* 设置元素向右移动 */
            float: left;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin: 0px 2px;
            background-color: rgba(255, 255, 255,.4);
            /* 将背景颜色设置到内容区，边框和内边距不在有背景颜色 */
            background-clip: content-box;
            border: 2px solid transparent;

        }
        .pointer a.active,
        .pointer a:hover{
            background-color: #fff;
            border: 2px solid rgba(255, 255, 255,.4);
        }
    </style>
</head>
<body>

        <ul class="img-list">

            <li><a href="javascript:;"><img src="../image/1.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="../image/2.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="../image/3.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="../image/4.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="../image/5.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="../image/6.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="../image/7.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="../image/8.jpg" alt=""></a></li>

            <div class="pointer">
                <a class="active" href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </div>
        </ul>

</body>
</html>