个人学习成果训练——网页的一小部分（萌新可以看看，代码中有注释，帮助很大，有点基础就可以看懂）内容（超链接图片排列、导航条、侧边导航条、网易新闻）

本文链接：https://blog.youkuaiyun.com/qq_45623543/article/details/109961472

《个人学习笔记十六》

文章目录

《个人学习笔记十六》
超链接图片排列练习：
- 方法一：
- 方法二：
导航条练习：
侧边导航练习：
网易新闻练习：
- 补充：

超链接图片排列练习：

方法一：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片排列</title>
    <link rel="stylesheet" href="./CSS/reset.css">
    <style>
        /*  设置背景颜色，便于观察*/
        
        body {
            background-color: pink;
        }
        /* 设置ul的大小
           使其居中便于观察
           背景颜色
           隐藏溢出 */
        
        .picture-list {
            width: 190px;
            height: 460px;
            margin: 50px auto;
            background-color: rgb(228, 231, 31);
            overflow: hidden;
        }
        /* 设置每个图片下面边距 */
        
        li {
            margin-bottom: 14px;
        }
        /* 设置每个图片大小 */
        
        .picture-list img {
            width: 190px;
            height: 140px;
        }
    </style>
</head>

<body>
    <ul class="picture-list">
        <li>
            <a href="https://blog.youkuaiyun.com/qq_45623543/article/details/109656655"> <img src="./picture/01/1.jpg" alt=""></a>


        </li>
        <li>
            <a href="javascript:;"><img src="./picture/01/2.jpg" alt=""></a>


        </li>
        <li>
            <a href="javascript:;"><img src="./picture/01/3.jpg" alt=""></a>
        </li>
    </ul>


</body>

</html>

浏览器显示结果：
在这里插入图片描述

方法二：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片排列</title>
    <link rel="stylesheet" href="./CSS/reset.css">
    <style>
        body {
            background-color: rgb(241, 158, 158);
        }
        
        div {
            height: 460px;
            width: 190px;
            background-color: rgb(46, 10, 131);
            margin: 50px auto;
        }
        
        div img {
            height: 140px;
            width: 190px;
            margin-bottom: 14px;
        }
    </style>
</head>


<body>
    <div>
        <a href="https://blog.youkuaiyun.com/qq_45623543/article/details/109656655"><img src="./picture/01/1.jpg" alt=""></a>
        <a href="javascript:;"><img src="./picture/01/2.jpg" alt=""></a>
        <a href="javascript:;"><img src="./picture/01/3.jpg" alt=""></a>
    </div>



</body>

</html>

浏览器显示结果：
在这里插入图片描述

导航条练习：

注意：导航条样式模仿于W3shool

<!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>
        /* 
        设置最外围ul的高度宽度
        ui背景颜色
        使其居中
        */
        
        .nav {
            width: 1210px;
            height: 48px;
            background-color: #E8E7E3;
            margin: 100px auto;
        }
        /* 设置无序排列
           向左浮动
           每一行的高度（使上下居中）
        */
        
        li {
            float: left;
            line-height: 48px;
        }
        /* 
           把超链接改为块元素
           删除超链接文本下划线
           设置超链接颜色
           字体大小
           内边距
        */
        
        a {
            display: block;
            text-decoration: none;
            color: #777777;
            font-size: 18px;
            padding: 0 42px;
        }
        /* 
            因为模仿的W3Shool的导航条，为了用简单的代码还原，保留原宽度，需要改变最后一个元素的宽度
        */
        
        li:last-child a {
            padding: 0 44px 0 45px
        }
        /* 
            超链接背景颜色
            选中后字体的颜色       
        */
        
        a:hover {
            background-color: #3f3f3F;
            color: #E8E7E3;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="https://blog.youkuaiyun.com/qq_45623543/article/details/109656655">HTML/CSS</a>
        </li>
        <li>
            <a href="#">Browser Side</a>
        </li>
        <li>
            <a href="#">Sever 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="#">Rnference</a>
        </li>
    </ul>
</body>

</html>

浏览器显示结果：
在这里插入图片描述

侧边导航练习：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左侧导航</title>
    <style>
        /* 背景颜色，便于观察，可不要 */
        
        body {
            background-color: rgb(30, 207, 169);
        }
        /* 设置nav的大小
           背景颜色
           使其居中便于设计 */
        
        .text1 {
            width: 190px;
            height: 450px;
            padding: 10px 0;
            background-color: #fff;
            margin: 50px auto;
        }
        /* 设置div高度
           与第二个标签配合使文本更好的居中
           两者经常连用
           设置左内边距 */
        
        .text2 {
            height: 25px;
            line-height: 25px;
            padding-left: 18px;
        }
        /* 设置每一行超链接文本被选中后的颜色 */
        
        .text2:hover {
            background-color: #d9d9d9;
        }
        /* 超链接文本颜色
           字体大小
           去掉下划线 */
        
        a {
            color: black;
            font-size: 14px;
            text-decoration: none;
        }
        /* 超链接被选中后的颜色 */
        
        a:hover {
            color: red;
        }
        /* 设置“/”的样式 */
        
        span {
            padding: 0 2px;
            font-size: 12px;
        }
    </style>
</head>

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

    </nav>

</body>

</html>

浏览器显示结果：
在这里插入图片描述

网易新闻练习：

注意：样式借鉴于网易新闻侧面推荐新闻

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易新闻练习</title>
    <link rel="stylesheet" href="./CSS/reset.css">
    <style>
        /*做的时候先给body背景换一下方便做，做完了便于观察可以再注释掉*/
        
        body {
            background-color: aquamarine;
        }
        /* 首先从上往下做，先调节div的大小，设置背景颜色，为了便于观察把div居中（当然这里是自愿也可以不这样。为其设置一个上边框 */
        
        .text-title {
            height: 358px;
            width: 300px;
            background-color: #fff;
            margin: 50px auto;
            border-top: solid 1px #E7E7E7;
        }
        /* 设计“军事·航空" 设置高度 字体加粗*/
        /* 设置这四个字上面的红线
           首先把块元素改为行内块元素
           在设置上边框
           因为要与div上边框重叠所以上外边框设置为-1px
        
        */
        
        .title1 {
            height: 40px;
            font-weight: bold;
            display: inline-block;
            border-top: solid 1px red;
            margin-top: -1px;
        }
        /* 设置图像高度防止下面的文字因“俄武直造导弹命中爆出巨大火球”这句话位置改变而变 */
        
        img {
            height: 150px;
        }
        /* 设置“俄武直造导弹命中爆出巨大火球 *首先文本居中，
           然后通过设置上外边框往上移动
           字体颜色
           字体加粗*/
        
        .title2 {
            text-align: center;
            margin-top: -30px;
            color: white;
            font-weight: bold;
        }
        /* 这里将所有超链接的选中字体改为红色 */
        
        a:hover {
            color: red;
        }
        /* 设置超链接的颜色
        去掉下划线 */
        
        a {
            color: black;
            text-decoration: none;
        }
        /* 这里是为了摆正下面新闻标题的位置 */
        
        ul {
            margin-top: 30px;
        }
        /* 这里设置最下面四个标题样式
           改为块元素方便修改上下边距
           修改字体大小、颜色 */
        
        li a {
            display: block;
            padding-bottom: 10px;
            font-size: 14px;
            color: #677189;
        }
        /* 最后面四条标题每一个前面都有一个方点。用伪元素设置 */
        
        li a::before {
            content: "■";
            color: #DDDDDD;
            font-size: 2px;
        }
    </style>
</head>

<body>
    <div class="text-title">
        <a href="#">
            <h3 class="title1">军事·航空</h3>
        </a>
        <a href="https://news.163.com/">
            <img src="./picture/03/3b2058bbj00qjk3pp002wc000s600e3c.webp" alt="">

            <h4 class="title2">俄武直造导弹命中爆出巨大火球</h4>
        </a>
        <ul>
            <li>
                <a href="https://blog.youkuaiyun.com/qq_45623543/article/details/109656655"> 飞行员的救星，美国装备新型救援直升机</a>
            </li>
            <li>
                <a href="#"> 细节无可挑剔！俄罗斯军队重演保卫莫斯科</a>
            </li>
            <li>
                <a href="#"> SpaceX第二次载人发射在本周末升空</a>
            </li>
            <li>
                <a href="#"> 航拍江西仙女湖风光 云雾缭绕如山水画卷</a>
            </li>
        </ul>

    </div>
</body>

</html>

浏览器显示结果：
在这里插入图片描述

补充：

上面图片里添加文字并组成链接，那是为没学过背景图片设置的人准备的
下面是通过将图片设计为背景，以此来添加文字

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 150px;
            width: 300px;
            background-image: url(./picture/03/3b2058bbj00qjk3pp002wc000s600e3c.webp);
            margin: 100px auto;
        }
        
        h4 {
            color: white;
            text-align: center;
            line-height: 150px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div>
        <h4>俄武直造导弹命中爆出巨大火球</h4>
    </div>
</body>

</html>