尚硅谷前端-京东左侧导航栏及网易新闻列表练习——CSS

嘻嘻哈哈二郎神

已于 2022-12-18 19:51:29 修改

阅读量1k

点赞数 2

分类专栏：实战练习 CSS 文章标签：前端 html

于 2022-07-09 15:22:20 首次发布

本文链接：https://blog.csdn.net/weixin_70320000/article/details/125680561

版权

实战练习同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

CSS

11 篇文章 2 订阅

订阅专栏

跟着尚硅谷老师的练习，记录一下自己做的内容，查漏补缺。

一、京东左侧导航栏

1、第一次自己做的代码（未看老师讲解视频前做的）：

确定整个京东图片列表的大小 470 * 190

细节：图片的背景颜色

一、京东左侧导航栏

1、第一次自己做的代码（未看老师讲解视频前做的）：

<!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">
    <style>
        /* 设置左侧导航栏 */
        ul.left-nevi{
            /* 设置宽度，高度，padding，margin,背景颜色 */
            width:190px;
            height: 450px;
            padding: 10px 0;
            margin: 10px;
            background-color: #fff;
            font-size: 0;
        }
        ul.left-nevi>li{
            margin-left:18px;
            height:25px;
        }
        a:hover{
            color:red;
        }
        a,span{
            font-size:12px;
        }
    </style>
</head>
<body>
    <ul class="left-nevi">
        <li>
            <a href="javascript:;">家用电器</a>
        </li>
        <li>
            <a href="https://www.baidu.com">手机</a>
            <span>/</span>
            <a href="https://www.baidu.com">运营商</a>
            <span>/</span>
            <a href="https://www.baidu.com">数码</a>
             
        </li>
        <li>
            <a href="javascript:;">电脑</a><span>/</span><a href="javascript:;">办公</a>
        </li>
        <li>
            <a href="javascript:;">家居</a>
            <span>/</span>
            <a href="javascript:;">家具</a>
            <span>/</span>
            <a href="javascript:;">家装</a>
            <span>/</span>
            <a href="javascript:;">厨具</a>
        </li>
        <li>
            <a href="javascript:;">男装</a>
            <span>/</span>
            <a href="javascript:;">女装</a>
            <span>/</span>
            <a href="javascript:;">童装</a>
            <span>/</span>
            <a href="javascript:;">内衣</a>          
        </li>
        <li>
            <a href="javascript:;">美妆</a>
            <span>/</span>
            <a href="javascript:;">个护清洁</a>
            <span>/</span>
            <a href="javascript:;">宠物</a>          
        </li>
        <li>
            <a href="javascript:;">女鞋</a>
            <span>/</span>
            <a href="javascript:;">箱包</a>
            <span>/</span>
            <a href="javascript:;">钟表</a>
            <span>/</span>
            <a href="javascript:;">珠宝</a>        
        </li>
        <li>
            <a href="javascript:;">男鞋</a>
            <span>/</span>
            <a href="javascript:;">运动</a>
            <span>/</span>
            <a href="javascript:;">户外</a>       
        </li>
        <li>
            <a href="javascript:;">房产</a>
            <span>/</span>
            <a href="javascript:;">汽车</a>
            <span>/</span>
            <a href="javascript:;">汽车用品</a>     
        </li>
        <li>
            <a href="javascript:;">母婴</a>
            <span>/</span>
            <a href="javascript:;">玩具乐器</a>
        </li>
        <li>
            <a href="javascript:;">食品</a>
            <span>/</span>
            <a href="javascript:;">酒类</a>
            <span>/</span>
            <a href="javascript:;">生鲜</a>
            <span>/</span>
            <a href="javascript:;">特产</a>          
        </li>
        <li>
            <a href="javascript:;">艺术</a>
            <span>/</span>
            <a href="javascript:;">礼品鲜花</a>
            <span>/</span>
            <a href="javascript:;">农资绿植</a>         
        </li>
        <li>
            <a href="javascript:;">医药保健</a>
            <span>/</span>
            <a href="javascript:;">计生情趣</a>
          
        </li>
        <li>
            <a href="javascript:;">图书</a>
            <span>/</span>
            <a href="javascript:;">文娱</a>
            <span>/</span>
            <a href="javascript:;">教育</a>
            <span>/</span>
            <a href="javascript:;">电子书</a>           
        </li>
        <li>
            <a href="javascript:;">机票</a>
            <span>/</span>
            <a href="javascript:;">酒店</a>
            <span>/</span>
            <a href="javascript:;">旅游</a>
            <span>/</span>
            <a href="javascript:;">生活</a>          
        </li>
        <li>
            <a href="javascript:;">理财</a>
            <span>/</span>
            <a href="javascript:;">众筹</a>
            <span>/</span>
            <a href="javascript:;">白条</a>
            <span>/</span>
            <a href="javascript:;">保险</a>     
        </li>
        <li>
            <a href="javascript:;">安装</a>
            <span>/</span>
            <a href="javascript:;">维修</a>
            <span>/</span>
            <a href="javascript:;">清洗</a>
            <span>/</span>
            <a href="javascript:;">二手</a>       
        </li>
        <li>
            <a href="javascript:;">
                工业品
            </a>
        </li>
    </ul>
    
</body>
</html>

总结：

第一次写的时候很多东西没注意到，在做该左侧导航栏的时候，首先应先布置好结构（注意每个字词都是一个超链接），然后用CSS进行样式修改，要注意到点有：

1.该导航栏的布局大小（宽度，高度，padding,margin,背景颜色等）；

2.鼠标移入到每个词时，颜色改变，同时由于词是超链接，自带下划线，但是京东页面没有，所以应当去掉超链接下划线（使用text-decoration:none;），设置词的颜色及字体大小

3.鼠标移入到每行时，每行还会出现背景颜色，第一次做的时候忘记设置；

4.注意词间的斜杠与词间有间隙，所以可给斜杠设置一个padding，此时就需要在创建结构时，把斜杠放在行内元素span中。

2、看完老师视频后跟着写的代码：

<!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">
    <style>
        /* 设置左侧导航栏 */
        .left-nevi{
            /* 设置宽度，高度，padding，margin,背景颜色 */
            width:190px;
            height: 450px;
            padding: 10px 0;
            margin: 10px;
            background-color: #fff;
            
        }
        .left-nevi>li{
            /* margin-left:18px; 这样设置之后每行文字左边的margin-left（18px）不属于li块元素了，
            以至其背景颜色不是添加给整行的，故设置margin-left不正确*/
            padding-left: 18px;
            height:25px;
            /* 要让一个文字在父元素中垂直居中，只需将父元素的line-height设置为一个和父元素height一样的值 */
            line-height: 25px;
            /* 设置字体大小为0，以使下面行内元素没有空格 */
            font-size:0px;
        }
        /* 设置鼠标移入的状态 */
        .left-nevi>li:hover{
            background-color: rgb(217,217,217);
        }
        .left-nevi a:hover{
            color:red;
        }
        /* 设置超链接的样式 */
        .left-nevi a{
            /* 设置字体的颜色 */
            color:#333;
            /* 去掉超链接的下划线 */
            text-decoration:none;
            font-size:14px;
        }
        .left-nevi span{
            padding: 0 2px;
            font-size:12px;
        }
        
    </style>


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

注意点及总结

1.基本结构：可选用不同创建方法，nav(div), div(div), ul(li)，我在此使用的是第三个ul(li);

2.因为需要把斜杠放在span元素中，但需要注意若将span与超链接分行写时，则会在网页中它俩之间会有空格（span和a都属于行内元素），我在网上搜索了删除行内元素间的空白的方法（目前的基础只看懂两种，所以也只写了两种）：

删除行内元素间的空白的方法

第一种方法：

将行内元素连着写，中间不要有空格

如：<span>a</span><span>b</span>

第二种方法：

为父元素设置font-size为0,子元素再根据需要设置字体大小

3.要让一个文字在父元素中垂直居中，只需将父元素的line-height设置为一个和父元素height一样的值

4.将超链接的下划线去掉使用text-decoration属性 text-decoration:none

二、网易新闻列表

1、自己做的结构

网易新闻图片获得的页面与尚硅谷老师的有点不同

代码：

<!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>Document</title>
    
    <!-- <link rel="stylesheet" href="../css/reset.css"> -->
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .news{
            width: 300px;
            height: 303px;
            margin: 30px;
            background-color: rgb(255,255,255);
        }
        .news h2{
            border-top:1px #f34540 solid;
            font-size:16px;
            font-weight:bold;
            margin-top: -1px;
            padding:6px 0px 10px 0px;
        }
        .news h3{
            height: 40px;
            line-height: 40px;
            
        }
        .news h3 span{
            color: white;
            background-color: rgb(243,69,64);
            font-size: 14px;
            width:55px;
            height:40px;
        }
        .news h3 a{
            text-decoration: none;
            color:black;
            border-right:1px #f6f6f6 solid;
            border-bottom:1px #f6f6f6 solid;
            width:244px;
        }
        .news ul{
            width:300px;
            height:120px;
            margin-top:11px;
        }
        .news li{
            list-style: square;
            font-size:14px;
            height:30px;
            line-height: 30px;
            /* padding-left:15px; */
        }
        .news li>a{
            color:rgb(102,102,122);
            text-decoration: none;
        }
        .news a:hover{
            color:red;
        }
    </style>
</head>
<body>
    <div class="news">
        <div>
            <h2>新闻专题</h2>
        </div>
        <a href="javascript:;"><img src="./练习的截图/网易新闻.webp"></a>
        <h3>
            <span>HOT</span>
            <strong><a href="javascript:;">神十四发射圆满成功</a></strong>
           
        </h3>
        <ul>
            
            <li><a href="javascript:;">聚焦2022年全国高考</a></li>
            <li><a href="javascript:;">随便写写的</a></li>
            <li><a href="javascript:;">内容和网易新闻不同</a></li>
            <li><a href="javascript:;">随便看看</a></li>
        </ul>
    </div>
</body>
</html>

看着网易新闻页面感觉内容挺少，但自己做起来真的一塌糊涂，写出来的效果和要做的差别还比较明显，真的要注意各个细节框架等。

2、看视频后做的代码：

<!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>Document</title>
    
    <link rel="stylesheet" href="../css/reset.css">
    <style>
       
        .news{
            width: 300px;
            height: 303px;
            margin: 30px;
            background-color:#fff;
            border-top: 1px solid #ddd;
            
        }
        .news-title{
            /* border-top:1px #f34540 solid; */
            /* font-size:16px; */
            
            /* 为了边框和文字宽度一致，需要将h2转换为行内元素 */
            display:inline-block;
            height: 24px;
            border-top: 1px red solid;
            /* 通过margin-top将h2上移，盖住上边框 */
            margin-top: -1px;
            padding:6px 0px 10px 0px;
            /* 设置文字加粗效果 */
            font-weight:bold;
        }
        .news h3{
            height: 40px;
            line-height: 40px;
            font-weight:bold;
            margin-top: -5px;
            
        }
        .news h3 span{
            display: inline-block;
            color: white;
            background-color: rgb(243,69,64);
            font-size: 14px;
            width:40px;
            height:40px;
            padding-left:15px;
        }
        .news h3 a{
            display: inline-block;
            text-decoration: none;
            color:black;
            border-right:1px #f6f6f6 solid;
            border-bottom:1px #f6f6f6 solid;
            width:238px;
            margin-top:-1px;
        }
        .news ul{
            width:300px;
            height:120px;
            margin-top:11px;
        }
        .news li{
            
            font-size:14px;
            height:30px;
            line-height: 30px;
            
        }
        .news li::before{
            content:'.';
            font-size: 12px;
            margin-right: 10px;
        }
        .news li>a{
            color:rgb(102,102,122);
            text-decoration: none;
        }
        .news a:hover{
            color:red;
        }
    </style>
</head>
<body>
    <!-- 创建新闻列表的外侧容器 -->
    <div class="news">
        <!-- 创建标题标签 -->
        <h2 class="news-title">新闻专题</h2>
        
        <a href="javascript:;"><img src="./练习的截图/网易新闻.webp"></a>
        <h3>
            <span>HOT</span>
            <a href="javascript:;">神十四发射圆满成功</a>
        </h3>
        <ul>
            
            <li><a href="javascript:;">聚焦2020年全国高考</a></li>
            <li><a href="javascript:;">随便写写的</a></li>
            <li><a href="javascript:;">内容和网易新闻不同</a></li>
            <li><a href="javascript:;">随便看看</a></li>
        </ul>
    </div>
</body>
</html>

还是有很多不懂的，做的还是不是很完善，有码友可以指出错误啥的更好了，可以学习进步！

嘻嘻哈哈二郎神

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
尚硅谷前端-京东左侧导航栏及网易新闻列表练习——CSS

跟着尚硅谷老师的练习，记录一下自己做的内容，查漏补缺。目录一、京东左侧导航栏 1、第一次自己做的代码（未看老师讲解视频前做的）：总结： 2、看完老师视频后跟着写的代码：注意点及总结删除行内元素间的空白的方法二、网易新闻列表1、自己做的结构2、看视频后做的代码.........
复制链接

扫一扫