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="#">></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>></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);
}