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

37
历届学生/朱立伟/2019-04-08/Tabs.js Normal file
View File

@@ -0,0 +1,37 @@
// 优势，兼容性好，所有浏览器都认识
// 但是代码复杂
(function(win,doc) {
// 用来做插件的初始化配置
function Tabs (x) {
var name = "zhangs"
if(x.hasOwnProperty("name")) {
this.name = x.name
}else {
console.error("默认参数没有填写请检查")
}
}
Tabs.prototype = {
getUserName: function() {
console.log(this.name)
}
}
win.Tabs = Tabs
})(window,document)
// es6 新的语法糖
// 一般旧的浏览器不支持
// babel 帮你把高版本的js语法，转换成低版本浏览器能够认识的语法
// class Tabs{
// constructor(name) {
// this.name = name
// }
// getUserName() {
// console.log(this.name)
// }
// }

128
历届学生/朱立伟/2019-04-08/tabs切换.html Normal file
View File

@@ -0,0 +1,128 @@
<!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">
<script src="./Tabs.js"></script>
<script >
var tab = new Tabs({
name: 'zhangsan'
});
tab.getUserName();
</script>
<title>tabs切换</title>
<style>
body,ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.main {
width: 385px;
height: 300px;
margin: 10px auto;
}
.tabs_title {
overflow: hidden;
}
.tabs_title ul li {
float: left;
margin-right: 62px;
}
.active_title {
color: red;
}
.tabs_content ul li {
display: none
}
.active_content {
display: block !important;
}
</style>
</head>
<body>
<div class="main">
<div class="tabs_title">
<ul id="tabs_father">
</ul>
</div>
<div class="tabs_content">
<ul id="content_father">
</ul>
</div>
</div>
<script>
var TabTitleList = [ '热点新闻', '社会舆论', '全民聚焦', '娱乐视频' ],
TabContentList = ['热点新闻的内容', '社会舆论的内容', '全民聚焦的内容', '娱乐视频的内容'],
TabTitleHtml = ""
TabContentHtml = "",
TabFather = document.getElementById("tabs_father"),
TabContentFather = document.getElementById("content_father");
// 渲染标题
function WirteTabTitle() {
for (let i = 0; i < TabTitleList.length; i++) {
TabTitleHtml += `<li class="${ i == 0 ? 'active_title' : '' }">
${TabTitleList[i]}
</li>`
}
TabFather.innerHTML = TabTitleHtml
}
// 渲染内容
function WirteTabContent () {
for (let i = 0; i < TabContentList.length; i++) {
TabContentHtml += `<li class="${ i == 0 ? 'active_content' : '' }">
<p>${TabContentList[i]}</p>
</li>`
}
TabContentFather.innerHTML = TabContentHtml
}
// 为标题绑定悬浮事件
function BindClick () {
var TabTitleL = document.getElementsByClassName("tabs_title")[0].getElementsByTagName("li");
var TabContent = document.getElementsByClassName("tabs_content")[0].getElementsByTagName("li");
for (let i = 0; i < TabTitleL.length; i++) {
TabTitleL[i].onmouseover = function () {
for (let j = 0; j < TabTitleL.length; j++) {
TabTitleL[j].className = ""
TabContent[j].className = ""
}
TabTitleL[i].className = "active_title"
TabContent[i].className = "active_content"
}
// (function (j) {
// TabTitleL[j].onmouseover = function () {
// console.log(j)
// }
// })(i)
}
}
WirteTabTitle()
WirteTabContent()
BindClick();
</script>
</body>
</html>

16
历届学生/朱立伟/2019-04-08/笔记.txt Normal file
View File

@@ -0,0 +1,16 @@
朱立伟：
1：学习flex + rem
2：开发移动端网站
3：学习ajax基于原理，跨域解决方案
4：使用ajax开发前后端分离的项目
5：Vue.js
6：微信小程序
// 7：混合app开发( react native，uniapp，mui, flutter )
前端三大框架：
react.js vue.js angular.js
es5(js) --> es6, 7 ---> typescript(js增强版，把js变成了强类型语言，拓展了很多后端语言才有的功能)

63
历届学生/朱立伟/2019-04-08/输入框输入限制.html Normal file
View File

@@ -0,0 +1,63 @@
<!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>
<style>
.main,
textarea {
width: 403px;
height: 256px;
}
.main {
position: relative;
}
.result {
position: absolute;
right: 0;
bottom: 0;
}
.error {
color: red;
}
</style>
</head>
<body>
<div class="main">
<textarea oninput="checkNumber()" id="UserMessage" class="zhangsan" name="" cols="30" rows="10" placeholder="请输入留言"></textarea>
<div class="result">200 / 200</div>
</div>
<script>
// var 变量 ， let
// const 常量
// var username = "zhangsan"
// username = "zhangsan"
var UserMessage = document.getElementById("UserMessage");
var Result = document.getElementsByClassName("result")[0];
var TotalNumber = 200;
function checkNumber () {
var YourMessage = UserMessage.value;
if(YourMessage.length > 200) {
UserMessage.value = YourMessage.substring(0,200);
Result.innerHTML = `超过限制 / 200`;
Result.className = "result error";
}else {
Result.innerHTML = `${TotalNumber - YourMessage.length} / 200`;
Result.className = "result";
}
//Result.innerHTML = TotalNumber - YourMessage.length + " / 200"
}
</script>
</body>
</html>

95
历届学生/朱立伟/2019-04-12/index.html Normal file
View File

@@ -0,0 +1,95 @@
<!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>ajax</title>
<script src="https://cdn.bootcss.com/jquery/1.8.1/jquery.min.js"></script>
</head>
<body>
<h2 id="username"></h2>
<p>用户的爱好：</p>
<ul id="userlike">
</ul>
<script>
// JSON.parse 把符合对象{}或者数组[]格式且当前数据类型是 string 的数据转换成 标准的 对象或者数组
// 原生的ajax请求
// var http = new XMLHttpRequest();
// http.open("GET","http://127.0.0.1/my.php",true)
// http.onreadystatechange = function () {
// if(http.readyState == 4 && http.status == 200) {
// console.log(JSON.parse(http.responseText))
// }else {}
// }
// http.send()
// GET POST PUT DELETE OPTHION
$.ajax({
url: 'http://127.0.0.1/my.php',
type: 'GET',
success: function (res){
var like = JSON.parse(res);
// 原生js写法 var name = document.getElementById("username")
// jq 语法，通过id获取元素
var name = $("#username")
// 把从后端获取到的用户名添加到页面
name.text(like.title)
// 获取用户兴趣的数组
var likeList = like.like
// 遍历数组，通过 append 将 三个li依次插入到父元素 id="userlike" 中
for(var i = 0;i<likeList.length;i++){
$("#userlike").append(`<li>${likeList[i]}</li>`)
}
},
error: function(err) {
console.log(err)
alert("抱歉，您的网络不好，请稍后再试")
}
})
// 发送ajax请求的时候回存在跨域 Access-Control-Allow-Origin：http://127.0.0.1:5500
// 什么是跨域？ 其实就是浏览器的安全规则 [ 同源策略 ]
// 我们自己的： http 127.0.0.1 5500
// 浏览器会去检查我们自己的协议，域名，端口和你想要访问的网站的 协议，域名，端口 是否完全相同，
// 只要有一个不相同，就会被浏览器阻止
// 解决跨域
// 1: 后端允许跨域
// 适用场景：公司自己的前端请求公司的后端
// 2: jsonp (不是ajax请求)
// function getBackEndData(res) {
// console.log(res)
// }
// 3: 服务端代理
// A(我们自己的前端) ---> C(别人的后端服务器接口)
// 被浏览器 同源策略 组织了
// A ---> B(我们自己的后端接口，虽然也存在跨域，但是后端可以设置允许跨域)
// B ---> C
// C --> B ---> A
</script>
<!-- <script src="http://127.0.0.1/user.php?callback=getBackEndData"></script> -->
</body>
</html>

5
历届学生/朱立伟/2019-04-12/my.php Normal file
View File

@@ -0,0 +1,5 @@
<?php
header("Access-Control-Allow-Origin: *");
$content = file_get_contents("http://127.0.0.1/user.php");
echo $content;
?>

23
历届学生/朱立伟/2019-04-12/user.php Normal file
View File

@@ -0,0 +1,23 @@
<?php
// ajax 跨域的第一种方法，后端允许跨域(CROS)
// header("Access-Control-Allow-Origin: *");
// jsonp 1
// 通过 $_GET 获取 get请求参数
$back = $_GET["callback"];
// 定义数组
$list = array(
"title" => "李四",
"like" => array("骑车","编程","打游戏")
);
// jsonp 2
// json_encode 把数组转换成json格式输出给前端
// echo $back."(".json_encode($list).")";
echo json_encode($list);
?>

BIN
历届学生/朱立伟/2019-04-12/归档.zip Normal file
View File

Binary file not shown.

14
历届学生/朱立伟/2019-04-12/笔记.txt Normal file
View File

@@ -0,0 +1,14 @@
ajax : 前后端数据无刷新交互的一种方式。
1：后端渲染网站
2：前端渲染（前后端分离）
3：数据查询语言
flex + rem 实现移动端页面
jquery + ajax 实现访问数据
渲染页面

61
历届学生/朱立伟/2019-04-15/index.html Normal file
View File

@@ -0,0 +1,61 @@
<!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>rem</title>
<style>
body {
margin: 0;
}
html {
font-size: 20px;
}
.box {
width: 9.34rem;
height: 9.34rem;
float: left;
border: 1px solid #000;
box-sizing: border-box;
}
@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: 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="box_1 box">
</div>
<div class="box_2 box">
</div>
</body>
</html>

31
历届学生/朱立伟/2019-04-15/弹性盒子.html Normal file
View File

@@ -0,0 +1,31 @@
<!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>
<style>
body {
margin: 0;
}
ul li {
list-style: none;
}
.box {
display: flex;
}
</style>
</head>
<body>
<ul class="box">
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
</ul>
</body>
</html>

7
历届学生/朱立伟/2019-04-15/笔记.txt Normal file
View File

@@ -0,0 +1,7 @@
rem: 一种新的尺寸单位
元素实际宽高(px) = 你设置的rem * html 上的font-size(浏览器默认16px)
1：css 媒体查询
2：js 检查屏幕dpi，动态修改 font-siz

30
历届学生/朱立伟/项目案例/weather/app.js Executable file
View File

@@ -0,0 +1,30 @@
const express = require('express')
const app = express()
const request = require('request');
const URL = {
index: 'http://v.juhe.cn/weather/index',
key: '62a1ba7a26c06fa3720a8e91c103d5b5'
}
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Methods', '*');
res.header('Content-Type', 'application/json;charset=utf-8');
next();
});
// http://127.0.0.1:3000/weather/index
app.get('/weather/index', function (req, res) {
var cityname = req.query.cityname;
console.log(`${URL.index}?format=2&cityname=${encodeURI(cityname)}&key=${URL.key}`);
request(`${URL.index}?format=2&cityname=${encodeURI(cityname)}&key=${URL.key}`, function (error, response, body) {
res.json(JSON.parse(body))
});
})
app.listen(3000, function () {
console.log('node app listening on port 3000!')
})

7
历届学生/朱立伟/项目案例/weather/css/clear.css Executable file
View File

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

51
历届学生/朱立伟/项目案例/weather/css/index.css Executable file
View File

@@ -0,0 +1,51 @@
@charset "UTF-8";
.weather_top {
height: 12rem;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 21px;
}
.weather_top .top_number {
font-size: 4.5rem;
color: #fff;
}
.top_bottom {
font-size: .7rem;
color: #dcd8d8;
}
.weather_info {
width: 100%;
height: 5rem;
padding: 13px 10px;
border-top: 1px solid #9e9c9c;
border-bottom: 1px solid #9e9c9c;
}
.weather_info ul {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.weather_info ul li .icon {
width: 1.7em;
height: 1.7em;
}
.weather_info ul li{
text-align: center;
}
.weather_info ul li p {
font-size: 13px;
}
.weather_list {
margin-top: 20px;
margin-bottom: 20px;
}
.weather_list ul li{
display: flex;
justify-content: space-between;
padding: 0 25px;
align-items: center;
}

34
历届学生/朱立伟/项目案例/weather/edit.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>我的生活</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet" href="./css/clear.css">
</head>
<body>
<div class="page-group">
<div class="page" id='edit'>
<header class="bar bar-nav">
<a class="button button-link button-nav pull-left back" href="/docs-demos/router">
<span class="icon icon-left"></span>
返回
</a>
<h1 class='title'>路由</h1>
</header>
<div class="content">
<div class="content-block">
这是ajax 加载的新页面，点击左上角的 <a href="#" class='back'>返回</a> 按钮返回上一页。
</div>
</div>
</div>
</div>
</body>
<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
</html>

182
历届学生/朱立伟/项目案例/weather/index.html Executable file
View File

@@ -0,0 +1,182 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>我的生活</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/clear.css">
<script src="http://at.alicdn.com/t/font_1152627_w9suf9d944j.js"></script>
<style>
body,
.fg_title{
color: #fff !important;
}
.fg_content {
background: linear-gradient(315deg, #571c94 0%, #e609cf 100%);
}
.bar-nav~.content {
top: 0 !important;
padding-top: 2.2rem;
}
.fg_bar,
.fg_bar:after{
background-color: #f7f7f800 !important;
}
.fg_bar .icon {
color: #fff;
}
.icon {
width: 2em;
height: 2em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.address input {
color: #000;
}
.back-fff {
background: #fff;
}
.search input{
width: 100%;
padding: 10px;
color: #8d8d8d;
border: none;
border-bottom: 1px solid #eaeaea;
}
.search_tips p{
margin: 0;
color: #8d8d8d;
padding: 5px 0 10px 10px;
border-bottom: 1px solid #e2dfdf;
}
.item-title {
color: #5f646e;
}
.address .list-block {
margin: 0.2rem 0;
}
.address .icon{
color: #000;
padding-top: 6px;
}
</style>
</head>
<body>
<div class="page-group">
<!-- 单个page ,第一个.page默认被展示-->
<div class="page">
<!-- 标题栏 -->
<header class="bar bar-nav fg_bar">
<a class="icon icon-me pull-left open-panel"></a>
<a class="icon icon-edit pull-right open-city"></a>
<h1 class="title fg_title">合肥</h1>
</header>
<!-- 这里是页面内容区 -->
<div class="content fg_content">
<div class="weather_top">
<div class="top_number">
19°
</div>
<div class="top_bottom">
晴 | 空气 | 良
</div>
</div>
<div class="weather_info">
<ul>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tianqi"></use>
</svg>
<p>天气</p>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-thermometer"></use>
</svg>
<p>温度</p>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-feng"></use>
</svg>
<p>风力</p>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fangxiangpai"></use>
</svg>
<p>风向</p>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shidu"></use>
</svg>
<p>湿度</p>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-taiyangrichu"></use>
</svg>
<p>紫外线</p>
</li>
</ul>
</div>
<div class="weather_list">
<ul>
</ul>
</div>
</div>
</div>
</div>
<div class="popup popup-city">
<header class="bar bar-nav">
<a class="icon icon-left pull-left close-popup"></a>
<h1 class="title">城市管理</h1>
</header>
<div class="content address">
<div class="list-block">
<ul>
</ul>
</div>
</div>
</div>
<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel back-fff panel-left panel-reveal">
<div class="content">
<div class="search">
<input type="text" placeholder="请输入搜索城市">
</div>
<div class="search_tips"></div>
</div>
</div>
<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script src="./js/index.js"></script>
<script>
var weather = new _weather();
</script>
</body>
</html>

1
历届学生/朱立伟/项目案例/weather/js/iconfont.js Executable file
View File

File diff suppressed because one or more lines are too long

160
历届学生/朱立伟/项目案例/weather/js/index.js Executable file
View File

@@ -0,0 +1,160 @@
// 任务
// 1: 第二次打开app，请求的数据还是上一次的城市数据
(function(bom,dom) {
// 自执行函数
// js 模拟类
// this 指向
function Weather() {
this.cityList = ['合肥','蚌埠','六安','铜陵','黄山'];
this.localCity = [];
this.BaseUrl = {
index: 'http://127.0.0.1:3000/weather/index'
};
this.init()
}
Weather.prototype = {
init: function () {
this.getCityName()
this.getCityList()
this.get("合肥", (res) => {
this.RenderingPage(res)
});
},
getCityName() {
var self = this,len = 0;
$(".search input").on("input", function () {
if( $(this).val().length < len) {
$(".search_tips").empty()
}
self.cityList.forEach((value,index,city) => {
if ($(this).val() == value) {
$(".search_tips").empty()
$(".search_tips").append(`<p style="color: red;">${value}</p>`)
len = $(this).val().length;
self.CityNameClick()
}
});
})
},
CityNameClick() {
var self = this;
$(".search_tips p").on("click", function() {
// 如果是第一次打开app使用 localCity 数组存放数据然后set进localStorage
if (localStorage.getItem("city") == null) {
self.localCity.push($(this).text())
localStorage.setItem("city",JSON.stringify(self.localCity))
} else { // 如果第二次使用app，先读本地已经有的 city，然后将新的城市添加进去，最后set进localStorage
var lcoal = JSON.parse(localStorage.getItem("city"))
lcoal.push($(this).text())
localStorage.setItem("city",JSON.stringify(lcoal))
}
self.get($(this).text(), function(res){
self.RenderingPage(res)
$.closePanel()
})
})
},
RenderingPage(data) {
var future = data.future
var sk = data.sk
var today = data.today
$(".fg_title").text(today.city);
// 当前温度
$(".top_number").text(`${sk.temp}°`)
// 温度下面的信息
$(".top_bottom").text(`${sk.wind_direction} | ${sk.wind_strength} | ${sk.humidity}`)
// 构造一个新的今天的天气数组
var weather_list = [today.weather,today.temperature,sk.wind_strength,sk.wind_direction,sk.humidity,today.uv_index];
// 将今天的详细数据遍历到 weather_info 的 li上
$(".weather_info ul li").each(function(index){
$(this).find("p").text(weather_list[index]);
});
$(".weather_list ul").empty();
// 通过 forEach 遍历未来7天的数据构造成li标签，然后依次追加到 weather_list ul 中
future.forEach(function(value,index,arr){
$(".weather_list ul").append(` <li>
<p>${value.week}</p>
<p>${value.weather}</p>
<div class="wendu">
<span>${value.temperature.substring(0,3)}</span>
~
<span>${value.temperature.substring(4)}</span>
</div>
</li>`)
});
$.hideIndicator()
},
getCityList() {
var self = this;
$(".open-city").on("click", function() {
var list = JSON.parse(localStorage.getItem("city"))
$(".address ul").empty();
list.forEach(function(value,index,arr){
$(".address ul").append( `<li class="item-content">
<div class="item-media">
<span class="icon icon-remove"></span>
</div>
<div class="item-inner">
<div class="item-title">城市名</div>
<div class="item-after">${value}</div>
</div>
</li>`)
});
$.popup('.popup-city');
$(".address ul li").on("click",function() {
self.get($(this).find(".item-after").text(),function(res){
self.RenderingPage(res)
$.closeModal('.popup-city')
})
})
})
},
get: function (params,callback) {
$.showIndicator()
$.ajax({
url: this.BaseUrl.index,
type: "GET",
data: {
cityname: params
},
success: function (res) {
callback(res.result)
},
error: function (err) {
$.toast("获取天气信息失败，请联系管理员");
}
})
}
}
bom._weather = Weather
})(window,document)

16
历届学生/朱立伟/项目案例/weather/package.json Executable file
View File

@@ -0,0 +1,16 @@
{
"name": "weather",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"dev": "node app.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.4",
"request": "^2.88.0"
}
}

39
历届学生/朱立伟/项目案例/小说app/css/clear.css Normal file
View File

@@ -0,0 +1,39 @@
html {
font-size: 20px !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: 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;
}
}
body,ul,p{
margin: 0;
padding: 0;
}
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;
right: 0px;
width: 100%;
background: #fff;
box-shadow: 0rem -0.2rem 0.4rem 0rem rgba(217, 217, 217, 0.5);
height: 2.5rem;
}
.footer ul {
display: flex;
justify-content: space-around;
width: 100%;
height: 100%;
align-items: center;
padding-top: .1rem;
}
.footer ul li {
text-align: center;
}
.footer ul li img {
width: 1.2rem;
height: 1.2rem;
}
.footer ul li p {
font-size: .5rem;
color: #4d4d4d;
}
.footer .main img{
width: 1.9rem;
height: 1.9rem;
}

125
历届学生/朱立伟/项目案例/小说app/css/index.css Normal file
View File

@@ -0,0 +1,125 @@
.search {
display: flex;
justify-content: space-between;
padding: 0.325rem 0.5rem 0 0.5rem;
align-items: center;
}
.search_class p{
font-size: 0.6rem;
color: #010101;
}
.search_left{
position: relative;
}
.search_left input{
background-color: #e6e6e6;
border-radius: 0.712rem;
border: none;
padding-left: 1.675rem;
box-sizing: border-box;
padding-top: 0.45rem;
padding-bottom: 0.45rem;
width: 15.4rem;
}
.search_left img{
position: absolute;
width: 0.65rem;
height: 0.65rem;
top: 50%;
margin-top: -6.5px;
}
.search_left img:first-child {
left: 0.6rem;
}
.search_left img:last-child {
right: 0.85rem;
}
.menu ul {
display: flex;
justify-content: space-around;
height: 45px;
align-items: center;
}
.menu ul li{
font-size: 0.6rem;
color: #4c4c4c;
}
.banner {
width: 100%;
height: 7.875rem;
background: #8d8d8d;
}
.banner img{
width: 100%;
}
.class_menu ul {
display: flex;
justify-content: space-around;
padding-top: 0.825rem;
padding-bottom: 0.95rem;
background: #fff;
}
.class_menu ul li {
text-align: center;
}
.class_menu ul li img {
width: 1.4rem;
height: 1.4rem;
}
.class_menu ul li p {
font-size: 0.45rem;
color: #000000;
margin-top: 0.35rem;
}
.list_book {
}
.book_item {
padding-top: 0.425rem;
padding-left: 0.85rem;
padding-right: 0.85rem;
margin-top: 0.25rem;
}
.item_title {
display: flex;
justify-content: space-between;
margin-bottom: 0.925rem;
height: 1.15rem;
align-items: center;
}
.item_title p{
font-size: 0.65rem;
color: #000000;
border-left: 0.4rem solid #ff4c8a;
padding-left: 0.35rem;
padding-top: 0.525rem;
}
.item_title span{
font-size: 0.4rem;
color: #4d4d4d;
padding-top: 0.525rem;
}
.book_content ul {
display: flex;
flex-wrap: wrap;
}
.book_content ul li {
margin-right: 0.59rem;
margin-bottom: 1.2rem;
}
.book_content ul li:nth-child(3n) {
margin-right: 0;
}
.book_content ul li img {
width: 5.225rem;
height: 7rem;
}
.book_content ul li p {
font-size: .6rem;
letter-spacing: 0.045rem;
color: #000000;
width: 5rem;
}

16
历届学生/朱立伟/项目案例/小说app/css/public.css Normal file
View File

@@ -0,0 +1,16 @@
body {
background-color: #e6e6e6;
}
.back-fff {
background: #fff;
}
.content{
padding-bottom: 50px;
padding-top: 84.5px;
}
.header {
position: fixed;
left: 0;
width: 100%;
top: 0;
}

BIN
历届学生/朱立伟/项目案例/小说app/img/banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 285 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/item_1.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/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/ph.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 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/sq.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
历届学生/朱立伟/项目案例/小说app/img/tubiao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/朱立伟/项目案例/小说app/img/user.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
历届学生/朱立伟/项目案例/小说app/img/vip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

171
历届学生/朱立伟/项目案例/小说app/index.html Normal file
View File

@@ -0,0 +1,171 @@
<!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">
<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">
<title>小说app</title>
</head>
<body>
<div class="main">
<div class="header back-fff">
<div class="search">
<div class="search_left">
<img src="./img/search.png" alt="">
<input type="text" placeholder="搜索本地或书城">
<img src="./img/sao.png" alt="">
</div>
<div class="search_class">
<p>分类</p>
</div>
</div>
<div class="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="class_menu">
<ul>
<li>
<img src="./img/ph.png" alt="">
<p>排行</p>
</li>
<li>
<img src="./img/vip.png" alt="">
<p>会员</p>
</li>
<li>
<img src="./img/sq.png" alt="">
<p>社区</p>
</li>
<li>
<img src="./img/mianfei.png" alt="">
<p>免费</p>
</li>
</ul>
</div>
<div class="list_book">
<div class="book_item back-fff">
<div class="item_title">
<p>猜你喜欢</p>
<span>查看更多</span>
</div>
<div class="book_content">
<ul>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
</ul>
</div>
</div>
<div class="book_item back-fff">
<div class="item_title">
<p>猜你喜欢</p>
<span>查看更多</span>
</div>
<div class="book_content">
<ul>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<ul>
<li>
<img src="./img/book.png" alt="">
<p>书架</p>
</li>
<li>
<img src="./img/tubiao.png" alt="">
<p>书城</p>
</li>
<li class="main">
<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>
</div>
</body>
</html>