WEB前端开始学习 7.29

最新推荐文章于 2024-08-20 10:34:34 发布

LiangKJZ

最新推荐文章于 2024-08-20 10:34:34 发布

阅读量189

点赞数 2

文章标签：学习 css 前端

本文链接：https://blog.csdn.net/LiangKJZ/article/details/126063426

版权

1.今天完成了第二个小项目，周六还有三个作业要完成，后面还有移动端的学习和至少一项移动端项目来完成，时间还是挺紧的。

2.JavaScript还有很多不明白的地方，明天抽时间把JavaScript的视频看了，不然光靠随堂老师讲课估计后面就跟不上了。

3.今天完成了第二小项目的第二个页面

<!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">
    <link rel="stylesheet" href="./渤海湾畔，战机夜航！.css" />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" type="text/css" media="screen"
        href="https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css" />
    <link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.css" />
    <link rel="stylesheet" href="./js/swiper-master 2/package/swiper-bundle.min.css" />
    <script src="./js/swiper-master 2/package/swiper-bundle.min.js"></script>
    <title>渤海湾畔，战机夜航！</title>
</head>

<body>
    <header>
        <div class="haed-top">
            <div class="head-navigation">
                <ul class="head-left">
                    <li>
                        <a href="#"><i class="home"></i>首页</a>
                    </li>
                    <li>
                        <a href="#">时政<i class="group"></i></a>
                    </li>
                    <li>
                        <a href="#">新闻</a>
                    </li>
                    <li>
                        <a href="#"  >评论</a>
                    </li>
                    <li>
                        <a href="#">视频</a>
                    </li>
                    <li>
                        <a href="#">财经</a>
                    </li>
                    <li>
                        <a href="#">体育</a>
                    </li>
                    <li>
                        <a href="#">教育</a>
                    </li>
                    <li>
                        <a href="#">熊猫<i class="hot"></i></a>
                    </li>
                    <li>
                        <a href="#">直播中国</a>
                    </li>
                    <li>
                        <a href="#">4K</a>
                    </li>
                </ul>
                <div>
                    <a href="#" class="live-broadcast">CCTV.直播<i class="group"></i></a>
                    <a href="#">中<i class="group"></i></a>
                    <a href="#"><i class="bth-icon"></i></a>
                </div>
                <div>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>
        </div>
        <div class="head-nav">
            <ul>
                <li><a href="">地方</a></li>
                <li><a href="">乡村振兴</a></li>
                <li><a href="">生态环境</a></li>
                <li><a href="">一带一路</a></li>
                <li><a href="">文旅美食</a></li>
                <li><a href="">海洋</a></li>
                <li><a href="">健康</a></li>
                <li><a href="">书画</a></li>
                <li><a href="">阅读</a></li>
                <li><a href="">汽车</a></li>
                <li><a href="">AI</a></li>
                <li><a href="">产业+</a></li>
                <li><a href="">网上展馆</a></li>
                <li><a href="">央视样式</a></li>
            </ul>
        </div>
    </header>
    <main>
        <div class="main">
            <div class="main-inside">
                <p class="main-nav">
                    <a href="#">央视网</a>
                    <a href="#">&gt;</a>
                    <a href="#">图片</a>
                </p>
                <p>
                    渤海湾畔，战机夜航！
                </p>
                <div class="main-source">
                    <span>来源 ： 解放军报微博 2022年07月27日 10:05</span>
                    <div>
                        <a href="#"><img src="./img/渤海湾畔，战机夜航！img/main-img/小图标/1.png" alt="">全屏观看</a>
                        <a href="#"><img src="./img/渤海湾畔，战机夜航！img/main-img/小图标/2.png" alt="">分享</a>
                        <a href="#"><img src="./img/渤海湾畔，战机夜航！img/main-img/小图标/3.png" alt="">40看过</a>
                        <a href="#"><img src="./img/渤海湾畔，战机夜航！img/main-img/小图标/4.png" alt="">手机看</a>
                    </div>
                </div>
                <div class="main-img"></div>
                <div class="main-word">
                    <h1>
                        <span>1</span>/9
                    </h1>
                    <p>连日来，海军航空大学某团连续组织夜间课目训练，通过同步展开夜间仪表、编队飞行等多个训练课目，提高部队全时段作战能力。 （吴伟、高远、任川、张上阳、吕帅、张智广）</p>
                </div>
                <p class="main-nav-2">
                    <span>推荐图集</span>
                    <a href="#">更多<span>&gt;</span></a>
                </p>
                <ul class="main-atlas">
                    <li>
                        <a href="#">
                        <img src="./img/渤海湾畔，战机夜航！img/底边的图/1.jpg" alt="">
                        <p>五老峰云海缭绕 宛如仙境</p>
                        <p>五老峰</p>
                    </a>
                    </li>
                    <li>
                        <a href="#">
                        <img src="./img/渤海湾畔，战机夜航！img/底边的图/2.jpg" alt="">
                        <p>中部战区空军航空兵某旅组织跨昼夜飞行训练</p>
                        <p>中部战区</p>
                    </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/渤海湾畔，战机夜航！img/底边的图/3.jpg" alt="">
                            <p>广东公安打掉汕尾海丰盘踞20余年违法犯罪团伙</p>
                            <p>广东</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/渤海湾畔，战机夜航！img/底边的图/4.jpg" alt="">
                            <p>草原夏日</p>
                            <p>草原</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/渤海湾畔，战机夜航！img/底边的图/5.jpg" alt="">
                            <p>安哥拉发现170克拉稀世粉钻</p>
                            <p>安哥拉</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </main>
</body>

</html>

4.这是样式

header {
    background-image: url(./img/渤海湾畔，战机夜航！img/背景2.jpg);
}

.haed-top {
    border-bottom: 2px solid rgb(171, 171, 188);
}

.head-navigation {
    width: 1300px;
    margin: 0 auto;

}

.head-navigation a {
    font-size: 15px;
    color: black;

}

.head-left {
    float: left;
}

.head-left>ul {
    float: left;
}

.head-left>li {
    float: left;
    padding: 15px;
    position: relative;
}

.head-left>li .home {
    display: inline-block;
    width: 16px;
    height: 14px;
    background-image: url(./img/渤海湾畔，战机夜航！img/导航栏img/雪碧图.png);
    background-position: -53px -102px;
    margin-right: 5px;
}

.head-left>li .group {
    display: inline-block;
    width: 13px;
    height: 8px;
    background-image: url(./img/渤海湾畔，战机夜航！img/导航栏img/向下的箭头.png);
    margin-left: 10px;
}

.head-left>li .hot {
    display: inline-block;
    width: 27px;
    height: 13px;
    background-image: url(./img/渤海湾畔，战机夜航！img/导航栏img/雪碧图.png);
    background-position: -40px -8px;
    position: absolute;
    bottom: 30px;
}

.head-navigation>div:first-of-type>a {
    float: left;
    height: 20px;
    margin: 15px 0;
    padding: 0 15px;
    border-left: 2px solid rgb(227, 227, 227);
}

.head-navigation>div:first-of-type>a>.group {
    float: right;
    width: 13px;
    height: 8px;
    background-image: url(./img/渤海湾畔，战机夜航！img/导航栏img/向下的箭头.png);
    margin-left: 10px;
    position: relative;
    top: 6px;
}

.head-navigation>div:first-of-type>a>.bth-icon {
    float: left;
    width: 51px;
    height: 20px;
    background-image: url(./img/渤海湾畔，战机夜航！img/导航栏img/雪碧图.png);
    background-position: 0 -120px;
}

.head-navigation>div:last-of-type>a {
    margin: 15px 10px;
}

.head-navigation>div:last-of-type>a:nth-of-type(1) {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(./img/渤海湾畔，战机夜航！img/导航栏img/雪碧图.png);
    background-position: -79px -60px;
}

.head-navigation>div:last-of-type>a:nth-of-type(2) {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(./img/渤海湾畔，战机夜航！img/导航栏img/雪碧图.png);
    background-position: -79px -40px;
}

.head-navigation>div:last-of-type>a:nth-of-type(3) {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(./img/渤海湾畔，战机夜航！img/导航栏img/雪碧图.png);
    background-position: -79px -20px;
}

.head-navigation>div:last-of-type>a:nth-of-type(4) {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(./img/渤海湾畔，战机夜航！img/导航栏img/雪碧图.png);
    background-position: -79px 0px;
}

.head-nav {
    padding: 10px 0;
}

.head-nav>ul {
    width: 1300px;
    margin: 0 auto;
    padding-left: 15px;
}

.head-nav>ul>li {
    display: inline-block;
    margin-right: 15px;
}

.head-nav>ul>li>a {
    color: rgb(171, 171, 188);
}

.main {
    background-color: rgb(243, 243, 243);
}

.main-inside {
    width: 1000px;
    margin: 0px auto;
    padding: 20px 100px;
    background-color: rgb(255, 255, 255);
}

.main-inside>p:nth-of-type(2) {
    font-size: 30px;
}

.main-nav {
    background-image: url(./img/渤海湾畔，战机夜航！img/main-img/红色标签.png);
    background-repeat: no-repeat;
    background-position: left center;
    margin-bottom: 20px;
}

.main-nav>a {
    color: rgb(102, 126, 181);
}

.main-nav>a:first-of-type {
    padding-left: 20px;
}

.main-source {
    margin: 20px 0;
    overflow: hidden;
}

.main-source>span {
    color: rgb(153, 153, 153);
    float: left;
}

.main-source>div {
    float: right;
}

.main-source>div>a {
    color: rgb(102, 102, 102);
    margin-left: 10px;
}

.main-source>div>a>img {
    vertical-align: middle;
    margin-right: 5px;
}

.main-img {
    width: 1000px;
    height: 666px;
    background-image: url(./img/渤海湾畔，战机夜航！img/导航栏img/big1.jpg);
    background-size: cover
}

.main-word {
    margin: 20px 0;
}

.main-word>h1 {
    font-size: 15px;
    display: inline-block;
}

.main-word>h1>span {
    font-size: 40px;
    color: red;

}

.main-word>p {
    width: 910px;
    display: inline-block;
    margin-left: 40px;
}

.main-nav-2 {
    background-image: url(./img/渤海湾畔，战机夜航！img/导航栏img/md.png);
    background-repeat: no-repeat;
    background-position: left center;
    position: relative;

}

.main-nav-2>span {
    padding-left: 40px;
    font-size: 30px;
}

.main-nav-2>a {
    position: absolute;
    right: 0;
    color: black;
}

.main-atlas {
    margin: 20px 0;
}

.main-atlas>li {
    width: 192px;
    height: 200px;
    border: 1px solid rgb(171, 171, 188);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    margin-right: 2px;
}

.main-atlas>li>a>img {
    width: 192px;
    height: 108px;
}

.main-atlas>li>a>p:first-of-type {
    font-size: 15px;
    padding: 0 5px;
    text-align: left;
    color: black;
}

.main-atlas>li>a>p:last-of-type {
    position: absolute;
    top: 180px;
    left: 5px;
    font-size: 10px;
    color: rgb(171, 171, 188);
}