练习（京东图片，导航左侧，网易列表，3school导航条，京东轮播图/电影卡片）

木一叶liuyue

已于 2022-03-19 10:59:17 修改

阅读量252

点赞数

分类专栏：前段文章标签： css

于 2021-07-31 21:42:48 首次发布

本文链接：https://blog.csdn.net/Kerryliuyue/article/details/119281323

版权

前段专栏收录该内容

47 篇文章 0 订阅

订阅专栏

图片列表

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片列表</title>
    <link rel="stylesheet" href="/css/reset.css">
</head>
<style>
    body{
        background-color: aliceblue;
    }
    .img-list{
        height:465px;
        width:190px;
        background-color:bisque;
        margin:0 auto;
        /* overflow: hidden; 有没有这句感觉也无所谓*/
    }
    .img-list li:not(:last-child){
        /*排除掉最后一个的下边距*/
        margin-bottom: 9px;
    }
    .img-list img{
        /*使用100%这种方法，可以使大小图片都能填充，不必专门设置图片格式*/
        width:100%;
      
    }
</style>

<body>

    <!--这是第一种写法，这种写法简单，但是后面那种写法变成了块元素，写法更加方便 
<div class="box1">
          <a href="https://pro.jd.com/mall/active/mHMwHt4sHg2JiBs7Yeg8ogUPu4w/index.html">
        <img src="./图片/京东练习1.png" alt="京东"></a>
        <br><br><br>
        <a href="https://channel.jd.com/furniture.html">
        <img src="./图片/京东练习1.png" alt="京东"></a>
        <br><br><br>
        <a href="https://bg.jd.com/">
        <img src="./图片/京东练习1.png" alt="京东"></a>
        </div>
        -->
     <ul class="img-list">
        <li><a href=""><img src="./picture/1 (1).png" alt="上"></a></li>
        <li><a href=""><img src="./picture/1 (2).png" alt="中"></a></li>
        <li><a href=""><img src="./picture/1 (3).png" alt="下"></a></li>
    </ul>

</body>

</html>

京东左侧导航

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东的左侧导航</title>
</head>
<style>
    body {
        background-color: skyblue;
    }

    .left-nav {
        width: 190px;
        height: 150px;
        padding: 10px 0;
        background-color: #fff;
        margin: 50px auto;
        /*上下和左右（居中） */
    }
 /*设置菜单内部的item*/
    .left-nav .item{
        height:25px;
        /*要让一个文字在父元素中垂直居中,
        只需要设置父元素的line-height和height大小一样*/
        line-height: 25px;
          /*为了使文字向内挤
        如果设置为margin-left，hover的时候就会有一块不显示背景颜色*/
        padding-left: 18px;

        font-size: 12px;/*这一步加下面的设置，会使斜杠小一些*/
      
    }

    /*设置一个鼠标移入item的状态*/
    .item:hover {
        background-color: #d9d9d9;
    }
    /*设置超链接的格式*/
    .item a{
        font-size: 14px;
        color: black;
        /*去除下划线*/
        text-decoration: none;
    }
.item a:hover{
   
    /*是设置点击时的颜色，而不是背景颜色
     background-color: #c81623;
    */
    color: #c81623;
}

</style>

<body>
    <!--
        创建一个外层容器（ nav(div) div(div) ul(li) )
    -->
    <nav class="left-nav">
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">电脑</a>/
            <a href="#">办公</a>

        </div>
        <div class="item">
            <a href="#">家具</a>/
            <a href="#">家居</a>/
            <a href="#">厨具</a>/
            <a href="#">用品</a>
        </div>
        <div class="item">
            <a href="#">男装</a>/
            <a href="#">女装</a>/
            <a href="#">童装</a>
        </div>
        <div class="item">
            <a href="#">首饰</a>/
            <a href="#">包包</a>/
            <a href="#">鞋子</a>
        </div>

    </nav>
</body>

</html>

网易新闻列表

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页新闻</title>
</head>
<link rel="stylesheet" href="/css/reset.css">
<style>
    /*去除所有超链接的下划线*/
    a {
        text-decoration: none;
    }

    .new-wrapper {
        height：358px;
        width: 235px;
        margin: 50px auto;
        background-color: #bfa;
        border-top: 1px solid #ddd;
     
    }

    .new-img {
        /*指定一个高度(就是图片的高度)，下面的文字就不会向上移动了*/
        height: 190px;
    }

    .new-title {
        /*行内块，为了边框和文字一致  文字多宽，边框就多宽*/
        display: inline-block;
        height: 30px;
        
        border-top: 1px red solid;
        /*通过margin-top使上移，让红色边框压住上面边框*/
        margin-top: -1px;
        /* line-height: 40px;
       第二种方法，变成padding-top 10px;再把总高度改为30px
       */
        padding-top: 5px;
    }

    /*设置title中超链接的样式*/
    .new-title a {
        color: #40406B;
        /*设置文字的加粗*/
        font-weight: bold;
        ;
    }

    .img-title {
        color: rgb(75, 65, 46);
        margin-top: -25px;
        font-weight: bold;
        margin-left: 45px;
    }

    .new-list {
        margin-top: 8px;
        /*设置左侧的边距
         padding-left: 10px;*/
       
        padding-bottom: 2px;
    }

    .new-list li {
        /*设置间距*/   margin-bottom: 8px;
   

    }

    .new-list li a {
        font-size: 14px;
        color: black;
    }

    .new-list li a:hover {
        color: red;
    }
    /*加上特殊符号*/
    .new-list li::before{

        content:'■';
        color:rgb(179, 177, 167);
        margin-right: 6px;
        font-size: 12px;

    }
/*另一种方法


    li::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 4px;
        background-color: black;
        margin-bottom: 4px;
        margin-left: 10px;
    }
*/
</style>

<body>
    <!--创建外部容器-->
    <div class="new-wrapper">

        <h2 class="new-title"> <a href="#">体育</a></h2>
<!--
也可以是这种
     <div class="title">
            <h2>
                <a href="#">军事</a>
                <i>·</i>
                <a href="#">航空</a>
            </h2>
        </div>
-->

        <div class="new-img">
            <a href="#">

                <img src="./picture/fu (1).png" alt="">
                <h3>日本自卫队成立宇宙作战群</h3>
            </a>
        </div>

        <ul class="new-list">
            <li><a href="#">这是第一个标题我是的</a></li>
            <li><a href="#">的辅导班与计划的改变</a></li>
            <li><a href="#">惹人突然运费从阿热伤</a></li>
        </ul>
    </div>
</body>

</html>

w3school导航条

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>w3school导航条</title>
    <link rel="stylesheet" href="../css重置样式表/reset.css">
</head>

<style>
    .list {
        width: 1205px;
        height: 50px;
        background-color: aqua;
        margin: 50px auto;
    }

    .list li {
       
        /*设置lineheight和list一样，就可以填满了，这个时候height写不写就不重要了*/
        /* height: 50px; */
        line-height: 50px;
        float: left;


    }

    .list li a {
        /* 宽度给超链接a，那么不是字的地方也可以点击， */
        /*现在给a设置高度宽度，但是a是行内元素，没办法设置，需要将a设置为块元素*/
        display: block;/*不设置的话，就没有办法点击*/

        color: #777;
        font-size: 18px;
        padding: 0 39px;

    }

    .list li a:hover {

        background-color: blue;

    }
</style>

<body>
    <ul class="list">
        <li><a href="">HTML/CSS</a></li>
        <li><a href="">Browser Side</a></li>
        <li><a href="">Server Side</a></li>
        <li><a href="">Programming</a></li>
        <li><a href="">XML</a></li>
        <li><a href="">Web Building</a></li>
        <li><a href="">Reference</a></li>
    </ul>
</body>

</html>

京东轮播图

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东轮播图</title>
    <link rel="stylesheet" href="../css重置样式表/reset.css">
</head>
<style>
    /*还是有点小bug的，点击那个点可以看到*/
    .img-list {
        width: 260px;
        height: 200px;
        margin: 30px auto;
        /*想让a相对于img-list定位，就需要让img-list有定位，
        为了不影响img-list,我们将定位设置为relative，
        因为relative不设置top，它的性质就不会改变*/
        position: relative;
    }

    .img-list li {
        /*将所有的图片重叠在一起*/
        position: absolute;
    }
.img-list li:nth-child(3){
    /* 任意设定想要先显示的照片,括号里面的数字是第一张照片*/
    z-index:1;
}
    .pointer {
        /*确保处在页面的最上面*/
       z-index: 9999;
        position: absolute;
         /*想让a相对于img-list定位，就需要让img-list有定位，
        为了不影响img-list,我们将定位设置为relative，
        因为relative不设置top，它的性质就不会改变*/
        bottom:22px;
        left:10px
    }      
    .pointer a{
        background-color: red;
        /*a是行内元素，首先设置成块元素，才能设置宽高，否则不会显示*/
        display: block;
        width:9px;
        height: 9px;
        border-radius: 50%;/*使正方形成为圆形*/
       float: left;/*让三个小圆点横过来*/
       margin-left: 5px;
       box-sizing: content-box;/*这两种实操一下就能看出来差别*/
       /* box-sizing: border-box; */
       border:solid 1px transparent;
    
    }

    .pointer a:hover{
        border:2px  solid rgba(255, 255, 255, 0.8);
        box-shadow:0 0 2px rgba(255, 255, 255, 0.8) ;
        
    }
</style>

<body>
    <ul class="img-list">
        <li><a href="javascript:;"><img src="./picture/1 (1).png" alt="京东轮播图图片"></a></li>
        <li><a href="javascript:;"><img src="./picture/1 (2).png" alt="京东轮播图图片"></a></li>
        <li><a href="javascript:;"><img src="./picture/1 (3).png" alt="京东轮播图图片"></a></li>

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

</body>

</html>

电影卡片-自制

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影卡片制作</title>
    <link rel="stylesheet" href="../css重置样式表/reset.css">
    <link rel="stylesheet" href="../font/css/all.css">
</head>
<style>
    .nav {
        height: 375px;
        width: 238px;
        background-color: white;
        border: 1px solid rgb(187, 182, 182);
        box-shadow: 0 0 10px rgba(133, 131, 131, 0.5);
        margin: 50px auto;
    }

    .words {
        margin: 10px 0;

    }

    .title,
    .category,
    .info {

        margin: 0 5px 10px 8px;
        color: rgb(111, 106, 116);
    }

    .star-list {
        border-top: 2px solid rgba(0, 0, 0, .2);
    }

    .star {
        padding-left: 10px;
    }

    .star li {
        float: left;
        margin: 10px 0 0 2px;
        font-size: 20px;
    }

    /*也可以给前两个设置一个类，对类进行设计颜色*/
    .star li:not(:nth-child(n+3)) {
        color: yellowgreen;
    }

    .star-list a {
        float: right;
        margin: 10px 20px 0 0;
        font-size: 20px;
    }
</style>

<body>
    <div class="nav">
        <div class="pic"> <a href=""><img src="./picture/1 (1).png" alt=""></a></div>
        <div class="words">
            <h2 class="title">Animation films</h2>
            <h3 class="category"><i class="fas fa-map-marker-alt"></i>
                Animations</h3>
            <p class="info">Lorem lpsum is simply dummy text of the printing & typesetting industry</p>


        </div>
        <div class="star-list">
            <ul class="star">
                <li><i class="fas fa-star"></i></li>
                <li><i class="fas fa-star"></i></li>
                <li><i class="fas fa-star"></i></li>
                <li><i class="fas fa-star"></i></li>
            </ul>
            <a href="javscript:;"><i class="fas fa-frog"></i></a>
        </div>
    </div>
</body>

</html>

木一叶liuyue

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
练习（京东图片，导航左侧，网易列表，3school导航条，京东轮播图/电影卡片）

图片列表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
复制链接

扫一扫