bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
历届学生/罗朝/项目练习/小说app/book.html Normal file
View File

@@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1137546_bpl8no2p8f.css">
<link rel="stylesheet" href="./css/book.css">
</head>
<body>
<div class="header">
<div class="header_search">
<div class="search_f">
<img class="search_one" src="./img/search.png" alt="">
<input type="text" placeholder="搜索本地或书城">
<img class="search_two" src="./img/sao.png" alt="">
</div>
<div class="search_t">
<p>分类</p>
</div>
</div>
<div class="header_menu">
<ul>
<li>精选</li>
<li>女生</li>
<li>男生</li>
<li>出版</li>
<li>VIP</li>
<li>限免</li>
</ul>
</div>
</div>
<div class="content">
<div class="banner">
<img src="./img/banner.png" alt="">
</div>
<div class="clas">
<ul>
<li>
<img src="./img/paihang.png" alt="">
<p>排行</p>
</li>
<li>
<img src="./img/huiyuan.png" alt="">
<p>会员</p>
</li>
<li>
<img src="./img/shequ.png" alt="">
<p>社区</p>
</li>
<li>
<img src="./img/mianfei.png" alt="">
<p>免费</p>
</li>
</ul>
</div>
<div class="like back-fff">
<div class="like_title">
<h3>猜你喜欢</h3>
<p>查看更多
<i class="iconfont icon-jiantou1"></i>
</p>
</div>
<div class="like_list">
<ul>
<li>
<img src="./img/item.png" alt="">
<p>名门宠婚：重生千金霸气归来</p>
</li>
<li>
<img src="./img/item.png" alt="">
<p>名门宠婚：重生千金霸气归来</p>
</li>
<li>
<img src="./img/item.png" alt="">
<p>名门宠婚：重生千金霸气归来</p>
</li>
<li>
<img src="./img/item.png" alt="">
<p>名门宠婚：重生千金霸气归来</p>
</li>
<li>
<img src="./img/item.png" alt="">
<p>名门宠婚：重生千金霸气归来</p>
</li>
<li>
<img src="./img/item.png" alt="">
<p>名门宠婚：重生千金霸气归来</p>
</li>
</ul>
</div>
</div>
<div class="like back-fff">
<div class="like_title">
<h3>猜你喜欢</h3>
<p>查看更多
<i class="iconfont icon-jiantou1"></i>
</p>
</div>
<div class="like_list">
<ul>
<li>
<img src="./img/item.png" alt="">
<p>名门宠婚：重生千金霸气归来</p>
</li>
<li>
<img src="./img/item.png" alt="">
<p>名门宠婚：重生千金霸气归来</p>
</li>
<li>
<img src="./img/item.png" alt="">
<p>名门宠婚：重生千金霸气归来</p>
</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<ul>
<li>
<img src="./img/book.png" alt="">
<p>书架</p>
</li>
<li>
<img src="./img/chat.png" alt="">
<p>书架</p>
</li>
<li>
<img src="./img/man.png" alt="">
</li>
<li>
<img src="./img/music.png" alt="">
<p>轻音乐</p>
</li>
<li>
<img src="./img/user.png" alt="">
<p>我的</p>
</li>
</ul>
</div>
</body>
</html>

155
历届学生/罗朝/项目练习/小说app/css/book.css Normal file
View File

@@ -0,0 +1,155 @@
.header {
position: fixed;
width: 100%;
background: #fff;
left: 0;
top: 0;
}
.header_search {
display: flex;
justify-content: space-between;
padding: 0.32rem 0.5rem 0 0.5rem;
align-items: center;
}
.search_f{
position: relative;
width: 15.4rem;
}
.search_f img {
position: absolute;
width: 0.65rem;
top: 0.375rem;
}
.search_one {
left: 0.6rem;
}
.search_two {
right: 0.85rem;
}
.search_f input{
padding-left: 1.675rem;
height: 1.45rem;
background-color: #e6e6e6;
border-radius: 0.712rem;
width: 100%;
box-sizing: border-box;
border: none
}
.search_t p {
height: 0.575rem;
font-size: 0.6rem;
font-weight: normal;
font-stretch: normal;
color: #010101;
}
.header_menu ul {
display: flex;
justify-content: space-around;
}
.header_menu ul li {
font-size: 0.6rem;
font-weight: normal;
font-stretch: normal;
color: #4c4c4c;
}
.header_menu {
margin-top: 0.6rem;
margin-bottom: 0.6rem;
}
.content {
margin-top: 3.9915rem;
margin-bottom: 2.45rem;
}
.banner {
height: 7.875rem;
}
.banner img{
width: 100%;
height: 7.875rem;
}
.clas {
padding-top:0.825rem;
padding-bottom: 0.95rem;
background: #fff;
}
.clas ul{
display: flex;
justify-content: space-around;
}
.clas ul li{
text-align: center;
}
.clas ul li img{
width: 1.4rem;
height: 1.4rem;
}
.clas ul li p{
font-size: 0.45rem;
font-weight: normal;
font-stretch: normal;
color: #000000;
margin-top: 0.35rem;
}
.like {
margin-top: 0.25rem;
padding-top: 0.425rem;
padding-left: 0.825rem;
padding-right: 0.825rem;
}
.like_title {
display: flex;
justify-content: space-between;
margin-bottom: 0.925rem;
align-items: flex-end;
}
.like_title h3{
font-size: 0.65rem;
font-weight: normal;
font-stretch: normal;
color: #000000;
border-left: 0.4rem solid #ff4c8a;
padding-top: 0.525rem;
padding-left: 0.35rem;
}
.like_title p{
font-size: 0.4rem;
font-weight: normal;
font-stretch: normal;
color: #4d4d4d;
}
.like_title p .icon-jiantou1{
font-size: 12px;
}
.like_list {
}
.like_list ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.like_list ul li{
margin-right: 0.65rem;
width: 5.225rem;
margin-bottom: 1.2rem;
}
.like_list ul li:nth-child(3n){
margin-right: 0;
}
.like_list ul li img{
width: 5.225rem;
height: 7.025rem;
}
.like_list ul li p{
margin-top: 0.425rem;
font-size: 0.45rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0.045rem;
color: #010101;
}

11
历届学生/罗朝/项目练习/小说app/css/clear.css Normal file
View File

@@ -0,0 +1,11 @@
body,p,ul,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
input {
outline: none;
}

33
历届学生/罗朝/项目练习/小说app/css/footer.css Normal file
View File

@@ -0,0 +1,33 @@
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #fff;
height: 2.45rem;
box-shadow: 0rem -0.1rem 0.2rem 0rem
rgba(217, 217, 217, 0.5);
font-size: 0;
}
.footer ul {
display: flex;
justify-content: space-around;
align-items: center;
padding-top: 0.3rem;
}
.footer ul li {
text-align: center;
}
.footer ul li img {
width: 0.975rem;
height: 0.975rem;
margin-bottom: 0.175rem;
}
.footer ul li p{
font-size: 0.5rem;
color: #4d4d4d;
}
.footer ul li:nth-child(3) img{
width: 1.9rem;
height: 1.9rem;
}

93
历届学生/罗朝/项目练习/小说app/css/index.css Normal file
View File

@@ -0,0 +1,93 @@
.header {
background: #169bd4;
height: 2.325rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.9rem;
box-sizing: border-box;
}
.header p {
font-size: 0.35rem;
font-weight: normal;
font-stretch: normal;
color: #ffffff;
}
.header p span{
font-size: 0.75rem;
font-weight: normal;
color: #ffffff;
}
.header_menu img{
width: 0.8rem;
height: 0.8rem;
margin-right: 0.875rem;
}
.header_menu img:last-child{
margin-right: 0;
}
.content{
padding-top: 2.3rem;
padding-bottom: 2.5rem;
}
.content_adb {
background-color: #f6f7f1;
padding: 0.675rem 0.575rem;
}
.content_adb h3 {
font-family: MicrosoftYaHei;
font-size: 0.6rem;
font-weight: normal;
letter-spacing: 0.048rem;
color: #9a825e;
margin-bottom: 0.55rem;
}
.adb_info {
display: flex;
border-top: 0.025rem solid #ede6da;
padding-top: 0.375rem;
}
.adb_info img {
width: 3.15rem;
height: 4.875rem;
}
.adb_right {
margin-left: 0.525rem;
}
.adb_right p{
font-family: MicrosoftYaHei;
font-size: 0.6rem;
font-weight: normal;
letter-spacing: 0.048rem;
color: #9a825e;
margin-bottom: 0.45rem;
line-height: 1rem;
}
.adb_right span{
padding: 0.25rem 0.3rem;
border-radius: 0.25rem;
border: solid 0.025rem #9b835d;
font-size: 0.45rem;
font-weight: normal;
letter-spacing: 0.035rem;
color: #9a825e;
text-align: center;
line-height: 0.9rem;
}
.no_book {
padding-top: 2.725rem;
text-align: center;
}
.no_book img {
width: 7.15rem;
height: 6.55rem;
}
.no_book p{
font-family: MicrosoftYaHei;
font-size: 0.45rem;
font-weight: normal;
letter-spacing: 0.035rem;
color: #737373;
margin-top: 0.575rem;
}

48
历届学生/罗朝/项目练习/小说app/css/public.css Normal file
View File

@@ -0,0 +1,48 @@
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;
}
}
@media only screen and (min-width: 320px) {
html {
font-size: 17.1px !important;
}
}
@media only screen and (min-width: 375px) {
html {
font-size: 20px !important;
}
}
@media only screen and (min-width: 768px) {
html {
font-size: 41px !important;
}
}
.fixed_top {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
body {
background-color: #e6e6e6;
}
.back-fff {
background: #fff;
}

30
历届学生/罗朝/项目练习/小说app/demo.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
border: 1px solid #000;
transform: scaleY(0.5)
}
/* 画省略号 */
.box p{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
width: 100px;
}
</style>
</head>
<body>
<div class="box">
<p>无二无别飞机文成为比较好</p>
</div>
</body>
</html>

39
历届学生/罗朝/项目练习/小说app/flex.html Normal file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex</title>
<style>
body {
margin: 0;
padding: 0;
}
.main {
display: flex;
justify-content: center;
}
.box {
width: 150px;
height: 150px;
background: red;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="main">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>

BIN
历届学生/罗朝/项目练习/小说app/img/adb_po.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
历届学生/罗朝/项目练习/小说app/img/banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 284 KiB

BIN
历届学生/罗朝/项目练习/小说app/img/book.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
历届学生/罗朝/项目练习/小说app/img/chat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/罗朝/项目练习/小说app/img/huiyuan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
历届学生/罗朝/项目练习/小说app/img/item.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
历届学生/罗朝/项目练习/小说app/img/man.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
历届学生/罗朝/项目练习/小说app/img/menu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1007 B

BIN
历届学生/罗朝/项目练习/小说app/img/mianfei.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
历届学生/罗朝/项目练习/小说app/img/music.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
历届学生/罗朝/项目练习/小说app/img/nobook.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
历届学生/罗朝/项目练习/小说app/img/paihang.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
历届学生/罗朝/项目练习/小说app/img/qian.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
历届学生/罗朝/项目练习/小说app/img/sao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/罗朝/项目练习/小说app/img/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
历届学生/罗朝/项目练习/小说app/img/shequ.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
历届学生/罗朝/项目练习/小说app/img/time.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
历届学生/罗朝/项目练习/小说app/img/user.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

73
历届学生/罗朝/项目练习/小说app/index.html Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>书架</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header fixed_top">
<div class="header_text">
<p>本周已阅读<span>0</span>分钟</p>
</div>
<div class="header_menu">
<img src="./img/qian.png" alt="">
<img src="./img/search.png" alt="">
<img src="./img/time.png" alt="">
<img src="./img/menu.png" alt="">
</div>
</div>
<div class="content">
<div class="content_adb">
<h3>我的绝美冷艳总裁</h3>
<div class="adb_info">
<img src="./img/adb_po.png" alt="">
<div class="adb_right">
<p>他的武功天下第一，泡妞无人能敌！在战场,他为兄弟两肋插刀，义薄云天！在都市，他被各类美女所缠绕。不论是冷艳总裁，极品千金，清..."</p>
<span>都市小说</span>
<span>6321人阅读</span>
</div>
</div>
</div>
<div class="no_book">
<img src="./img/nobook.png" alt="">
<p>这里空空如也，快去添加点书吧~</p>
</div>
</div>
<div class="footer">
<ul>
<li>
<img src="./img/book.png" alt="">
<p>书架</p>
</li>
<li>
<img src="./img/chat.png" alt="">
<p>书架</p>
</li>
<li>
<img src="./img/man.png" alt="">
</li>
<li>
<img src="./img/music.png" alt="">
<p>轻音乐</p>
</li>
<li>
<img src="./img/user.png" alt="">
<p>我的</p>
</li>
</ul>
</div>
</body>
</html>

21
历届学生/罗朝/项目练习/小说app/笔记.txt Normal file
View File

@@ -0,0 +1,21 @@
元素计算后的真实宽高(px) = 你代码中设置的rem * 网站html标签的font-size(浏览器默认16px)
1: 通过 媒体查询 检查 用户手机的宽度，然后动态修改 font-size
2: 通过js来检测，然后动态修改 font-size
flex 弹性盒子有12css属性
1: 有6 用在父容器
flex-direction 设置子元素是水平放置还是垂直放置
justify-content 设置元素在主轴(x)的对齐方式
align-items 设置y轴的对齐方式
flex-wrap 当一行放不下的时候，决定元素如何换行
2: 有6 用在子元素
order 设置子元素的排序，数值越小越靠start位置
flex-grow 设置元素的所占空间比
align-self 设置单个元素进行不同其他元素的布局