first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,16 @@
/* 专门用来重置浏览器默认样式的 */
body, p,ul,li,h1,h2,h3,h4,h5,h6,input{
margin: 0;
padding: 0;
}
input {
outline: none;
}
li {
list-style: none;
}
a {
text-decoration: none;
}

View File

@@ -0,0 +1,126 @@
.header {
width: 100%;
height: 2.5rem;
background-color: #000000;
opacity: 0.7;
position: fixed;
left: 0;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.6rem;
box-sizing: border-box;
}
.open {
width: 3.6rem;
height: 1.3rem;
background-color: #d0302c;
border-radius: 0.2rem;
font-family: PingFangSC-Medium;
font-size: 0.6rem;
color: #ffffff;
text-align: center;
line-height: 1.3rem;
}
.header img {
height: 1.625rem;
}
.content {
margin-top: 50px;
}
.video {
height: 211px;
}
.video .banner {
width: 100%;
}
.video_info {
position: relative;
}
.video_info::after {
content: "";
position: absolute;
width: 100%;
transform: scaleY(0.5);
height: 1px;
bottom: -10px;
left: 0;
background: #e5e5e5;
}
.video_info .title{
font-family: PingFangSC-Bold;
font-size: 0.9rem;
line-height: 1.425rem;
color: #333333;
margin-top: 1.475rem;
margin-bottom: 0.75rem;
}
.video_info .time{
font-family: PingFangSC-Medium;
font-size: 0.575rem;
color: #999999;
margin-bottom: 0.675rem;
}
.video_info .video_action{
display: flex;
justify-content: space-between;
}
.video_action .action_left{
display: flex;
}
.video_action img{
width: 0.65rem;
vertical-align: middle;
}
.video_action span{
font-family: PingFangSC-Medium;
font-size: 0.6rem;
color: #999;
}
.video_action .collect{
margin-right: 1.5rem;
}
.about{}
.about .title{
height: 2.5rem;
line-height: 2.5rem;
margin-top: 0.45rem;
}
.about .content_1{
overflow-x: scroll;
}
.about .content_1 ul{
display: flex;
}
.about .content_1 ul li{
width: 6.85rem;
margin-right: 0.275rem;
}
.about .content_1 .pic{
position: relative;
width: 6.85rem;
height: 3.9rem;
}
.about .content_1 .pic img{
width: 100%;
height: 100%;
}
.about .content_1 .pic span{
position: absolute;
font-family: PingFangSC-Medium;
font-size: 0.55rem;
color: #ffffff;
right: 0.325rem;
bottom: 0.325rem;
}
.about .content_1 .mess{
font-size: 0.7rem;
line-height: 1.175rem;
color: #666;
margin-top: 0.6rem;
}

View File

@@ -0,0 +1,16 @@
/* 存放公共css的 */
.theme_red {
color: blue;
}
.left {
float: left;
}
.right {
float: right;
}
.p_575 {
padding: 0 0.575rem;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 394 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

View File

@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rem</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
<style>
html {
font-size: 20px;
}
@media only screen and (min-width: 400px) {
html {
font-size: 21.33333333px !important;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 22.08px !important;
}
}
@media only screen and (min-width: 480px) {
html {
font-size: 25.6px !important;
}
}
</style>
</head>
<body>
<div class="header">
<img src="./img/logo.png" alt="">
<div class="open">打开</div>
</div>
<div class="content">
<div class="video">
<img class="banner" src="./img/banner.png" alt="">
</div>
<div class="video_info p_575">
<p class="title">香港24小时 | 8月25日发生了什么暴力局面再次升级</p>
<div class="time">2019-04-30 10:45</div>
<div class="video_action">
<div class="action_left">
<div class="collect">
<img src="./img/collect_small.png" alt="">
<span>收藏</span>
</div>
<div class="zan">
<img src="./img/collect_small.png" alt="">
<span>12</span>
</div>
</div>
<div class="action_right">
<span>简介</span>
<img src="./img/collect_small.png" alt="">
</div>
</div>
</div>
<div class="about p_575">
<div class="title">相关推荐</div>
<div class="content_1">
<ul>
<li>
<div class="pic">
<img src="./img/banner.png" alt="">
<span>03:07</span>
</div>
<div class="mess">
一生中总要有个夏天给海岛我的9天8夜
</div>
</li>
<li>
<div class="pic">
<img src="./img/banner.png" alt="">
<span>03:07</span>
</div>
<div class="mess">
一生中总要有个夏天给海岛我的9天8夜
</div>
</li>
<li>
<div class="pic">
<img src="./img/banner.png" alt="">
<span>03:07</span>
</div>
<div class="mess">
一生中总要有个夏天给海岛我的9天8夜
</div>
</li>
<li>
<div class="pic">
<img src="./img/banner.png" alt="">
<span>03:07</span>
</div>
<div class="mess">
一生中总要有个夏天给海岛我的9天8夜
</div>
</li>
<li>
<div class="pic">
<img src="./img/banner.png" alt="">
<span>03:07</span>
</div>
<div class="mess">
一生中总要有个夏天给海岛我的9天8夜
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,13 @@
flex
rem :响应式的尺寸单位
基准值
网页默认的基准值(html) 16px
实现基准值修改:
1css 媒体查询
2js