day1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<style type="text/css">
table {
border-collapse: collapse;
}
td, tr {
border: 1px solid;
}
</style>
</head>
<body>
<div>
<form action="" method="POST">
<table>
<caption>个人信息</caption>
<tr>
<td>姓名：</td>
<td><label><input type="text"></label></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="male" id="male"><label for="male">男</label>
<input type="radio" name="sex" value="female" id="female"><label for="female">女</label>
<input type="radio" name="sex" value="secret" id="secret"><label for="secret">保密</label>
</td>
</tr>
<tr>
<td>出生日期</td>
<td><label><input type="date"></label></td>
</tr>
<tr>
<td>身高：</td>
<td><input type="text" id="height"><label for="height">cm</label></td>
</tr>
<tr>
<td>男/女神照骗：</td>
<td><input type="file" value="选择文件"></td>
</tr>
<tr>
<td>银行卡密码：</td>
<td><label><input type="password"></label></td>
</tr>
<tr>
<td>喜欢的电影类型：</td>
<td>
<label>
<select name="area">
<option value="movieType1">电影1</option>
<option value="movieType2">电影2</option>
<option value="movieType3">电影3</option>
<option value="nil" selected>--请选择电影类型--</option>
</select>
</label>
</td>
</tr>
<tr>
<td>特长：</td>
<td>
<input type="checkbox" name="hobby" value="noddle" id="noddle"> <label for="noddle">下面</label>
<input type="checkbox" name="hobby" value="baseball" id="baseball"> <label for="baseball">篮球</label>
</td>
</tr>
<tr>
<td>如果中了五百万，你会？</td>
<td><label><textarea name="desc" rows="10" cols="30"></textarea></label></td>
</tr>
<tr>
<td colspan="2">
<fieldset>
<legend>健康信息</legend>
<label for="h">height</label><input type="text" id="h">
<label for="w">weight</label><input type="text" id="w">
</fieldset>
</td>
</tr>
<tr>
<td style="text-align: center" colspan="2">
<input type="submit" value="提交信息">
<input type="button" value="重置">
<input type="button" value="这是一个普通的按钮">
<input type="submit" value="我也是按钮" disabled>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2</title>
</head>
<body>
<div style="width: 270px">
<div style="font-size: 20px">旅行家专栏</div>
<img style="margin: 20px 0" src="xb.png" alt="">
<div style="font-size: 18px">西北偏北</div>
<p style="size: 14px">西北就是远方。是苍老的浮云。是清真寺。是牛羊肉。是北方的河。是干了的黄可。是野性。是沉默。</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3</title>
</head>
<body style="margin: 0">
<div style="width: 166px">
<img src="qhtf.png" alt="">
<div style="color: rgb(153,153,155);font-size: 14px">清华同方精锐台式办公电脑整机集成显卡</div>
<div style="color: rgb(240,3,21);margin: 8px">
<span>¥</span>
<span style="font-size: 18px"><strong>2499.00</strong></span>
<span style="color: rgb(180,179,177)"><del>¥4000</del></span>
</div>
</div>
</body>
</html>
day2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<style type="text/css">
.img {
list-style: none;
width: calc(100% / 2);
box-sizing: border-box;
border: 1vw transparent solid;
}
img {
width: 100%;
height: 100%;
}
.cont {
margin: 0 1%;
display: flex;
flex-flow: wrap;
}
.title {
text-align: center;
font-size: 2vw;
letter-spacing: 1vw;
}
</style>
</head>
<body>
<div style="margin: 0 15vw">
<div>
<div class="title">
<h2>精彩推荐</h2>
</div>
<div class="cont">
<div class="img">
<img src="https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/2999740.jpg"
alt="回看：pcyqq任贤齐">
</div>
<div class="img">
<img src="https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/2992385.jpg"
alt="PC+YQQ：乐见大牌：上白石萌音">
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
img {
width: 100%;
height: 100%;
}
li {
list-style: none;
}
.cont {
list-style: none;
}
.item {
width: calc(100% / 5);
box-sizing: border-box;
border: 1vw transparent solid;
}
.lst {
display: flex;
flex-flow: wrap;
}
.nav-list, .nav-list-green {
margin: 1vw;
width: calc(100% / 6);
box-sizing: border-box;
text-align: center;
font-size: 1.75vw;
}
.nav-list-green {
color: rgb(49, 198, 186);
}
.navList {
display: flex;
margin: 0 5vw;
}
.title {
text-align: center;
font-size: 2vw;
letter-spacing: 1vw;
}
h4 {
margin: 0;
font-weight: normal;
font-size: 1.65vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.desc {
color: rgb(178, 153, 178);
font-size: 1.5vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div>
<div style="margin: 0 15vw">
<div class="title">
<h2>新碟首发</h2>
</div>
<div class="nav">
<div class="navList">
<a class="nav-list-green" onmouseover="this.className='nav-list-green'"
onmouseleave="this.className='nav-list'">内地</a>
<a class="nav-list" onmouseover="this.className='nav-list-green'"
onmouseleave="this.className='nav-list'">港台</a>
<a class="nav-list" onmouseover="this.className='nav-list-green'"
onmouseleave="this.className='nav-list'">欧美</a>
<a class="nav-list" onmouseover="this.className='nav-list-green'"
onmouseleave="this.className='nav-list'">韩国</a>
<a class="nav-list" onmouseover="this.className='nav-list-green'"
onmouseleave="this.className='nav-list'">日本</a>
<a class="nav-list" onmouseover="this.className='nav-list-green'"
onmouseleave="this.className='nav-list'">其他</a>
</div>
</div>
<div>
<div class="cont">
<ul class="lst">
<li class="item">
<div>
<div>
<a><img src="//y.gtimg.cn/music/photo_new/T002R300x300M0000011RzyV4QQSDO_2.jpg"
alt="恋夏记"><i></i><i></i></a>
</div>
<h4>
<a>恋夏记</a>
</h4>
<div class="desc" title="冯提莫">
<a>冯提莫</a>
</div>
</div>
</li>
<li class="item">
<div>
<div>
<a><img src="//y.gtimg.cn/music/photo_new/T002R300x300M0000010tX7z4gJjPb_1.jpg"
alt="十日弹"><i></i><i></i></a>
</div>
<h4>
<a>十日弹</a>
</h4>
<div class="desc" title="李泉">
<a>李泉</a>
</div>
</div>
</li>
<li class="item">
<div>
<div>
<a><img src="//y.gtimg.cn/music/photo_new/T002R300x300M000001X2gLL1ycgAp_1.jpg"
alt="猫常常给我人类的感受"><i></i><i></i></a>
</div>
<h4>
<a>猫常常给我人类的感受</a>
</h4>
<div class="desc" title="焦迈奇 / 万物之与动物相遇">
<a>焦迈奇</a>/
<a>万物之与动物相遇</a>
</div>
</div>
</li>
<li class="item">
<div>
<div>
<a><img src="//y.gtimg.cn/music/photo_new/T002R300x300M0000005Ye6X0Wkalo_1.jpg"
alt="美丽生灵"><i></i><i></i></a>
</div>
<h4>
<a>美丽生灵</a>
</h4>
<div class="desc" title="李健">
<a>李健</a>
</div>
</div>
</li>
<li class="item">
<div>
<div>
<a><img src="//y.gtimg.cn/music/photo_new/T002R300x300M0000031i5Q748S0SP_1.jpg"
alt="Limerence"><i></i><i></i></a>
</div>
<h4>
<a>Limerence</a>
</h4>
<div class="desc" title="TGM-林超泽">
<a>TGM-林超泽</a>
</div>
</div>
</li>
<li class="item">
<div>
<div>
<a><img src="//y.gtimg.cn/music/photo_new/T002R300x300M000004AlNrN2QP1Lw_1.jpg"
alt="BURN"><i></i><i></i></a>
</div>
<h4>
<a>BURN</a>
</h4>
<div class="desc" title="S.K.Y天空少年">
<a>S.K.Y天空少年</a>
</div>
</div>
</li>
<li class="item">
<div>
<div>
<a><img src="//y.gtimg.cn/music/photo_new/T002R300x300M000000g8qvn2qdjug_1.jpg"
alt="我是七穗"><i></i><i></i></a>
</div>
<h4>
<a>我是七穗</a>
</h4>
<div class="desc" title="七穗">
<a>七穗</a>
</div>
</div>
</li>
<li class="item">
<div>
<div>
<a><img src="//y.gtimg.cn/music/photo_new/T002R300x300M000004RrROl2QX0wn_2.jpg"
alt="说唱新世代 第4期"><i></i><i></i></a>
</div>
<h4>
<a>说唱新世代 第4期</a>
</h4>
<div class="desc" title="说唱新世代">
<a>说唱新世代</a>
</div>
</div>
</li>
<li class="item">
<div>
<div>
<a><img src="//y.gtimg.cn/music/photo_new/T002R300x300M000002WbHnp2Jr95L_1.jpg"
alt="跨界歌王第五季 第10期"><i></i><i></i></a>
</div>
<h4>
<a>跨界歌王第五季 第10期</a>
</h4>
<div class="desc" title="跨界歌王">
<a>跨界歌王</a>
</div>
</div>
</li>
<li class="item">
<div>
<div>
<a><img src="//y.gtimg.cn/music/photo_new/T002R300x300M000000LrBQp2PCaAR_1.jpg"
alt="乐队的夏天2 第12期"><i></i><i></i></a>
</div>
<h4>
<a>乐队的夏天2 第12期</a>
</h4>
<div class="desc" title="乐队的夏天">
<a>乐队的夏天</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
day3
<!--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
overflow: hidden;
height: 300px;
}
li {
float: left;
width: 50px;
transition: width 0.5s;
}
li:hover {
width: 450px;
}
</style>
</head>
<body>
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
</ul>
</body>
</html>
-->
<!--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
img {
width: 100%;
height: 100%;
}
.fakeAll {
height: 450px;
width: 325px;
overflow: hidden;
position: relative;
}
.fake {
top: 0.5vw;
right: 0.5vw;
position: absolute;
border-radius: 0.25vw;
background-color: green;
color: white;
padding: 0 .5vw;
}
.fakeUpdate {
bottom: .5vw;
right: .5vw;
position: absolute;
color: white;
}
</style>
</head>
<body>
<div class="fakeAll">
<img src="images/22.webp" alt="">
<span class="fake">盗版</span>
<span class="fakeUpdate">不更新</span>
</div>
</body>
</html>
-->
<!--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
img {
width: 100%;
height: 100%;
}
.fakeAll {
height: 450px;
width: 325px;
overflow: hidden;
position: relative;
}
.bg {
}
.play {
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div class="fakeAll">
<img class="bg" src="images/22.webp" alt="">
<img class="play" src="images/播放.png" alt="">
</div>
</body>
</html>
-->
<!--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
font-size: 1.5vw;
width: 10vw;
top: 50%;
right: 0;
position: fixed;
transform: translateY(-50%);
}
li {
text-align: center;
padding: 1vw 1vw;
background-color: #25262b;
color: #a1a2a4;
}
li:hover {
color: green;
}
</style>
</head>
<body>
<ul>
<li>好康的</li>
<li>好康的</li>
<li>好康的</li>
<li>好康的</li>
<li>好康的</li>
<li>好康的</li>
<li>好康的</li>
<li>好康的</li>
<li>好康的</li>
<li>好康的</li>
</ul>
</body>
</html>
-->
<!--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
font-size: 1.5vw;
width: 180px;
top: 30%;
right: 50px;
position: fixed;
transform: translateY(-50%);
background-color: white;
border-radius: 20px;
border: 1px solid #dedcdc;
padding: 0 0 10px 0;
}
ul:hover {
box-shadow: 0 0 20px green;
}
li {
text-align: center;
background-color: white;
color: #ededef;
padding: 5px 0;
}
img {
width: 100%;
height: 100%;
}
.fake {
color: #a1a2a4;
text-align: center;
margin: 0 auto 10px auto;
}
.dw {
color: white;
padding: 8px 2px;
width: 130px;
background-color: rgb(100,209,156);
border-radius: 26px;
text-align: center;
margin: 0 auto;
}
.icon {
width: 102px;
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<ul>
<li class="icon"><img src="http://imgcache.gtimg.cn/mediastyle/yqq/img/logo.png" alt=""></li>
<li class="fake">呸呸呸呸呸呸呸呸呸呸呸</li>
<li class="dw">没图标的下载</li>
</ul>
</body>
</html>
-->
<!--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: deepskyblue;
margin: 100px;
box-shadow: 0 0 100px dodgerblue;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
-->
<!--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box {
height: 100px;
width: 100px;
margin: 100px;
background-color: dodgerblue;
opacity: 1;
box-shadow: deepskyblue;
}
.box:hover {
opacity: 0;
transition-property: opacity;
transition-duration: 3s;
transition-timing-function: linear;
transition-delay: 1s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
img {
width: 100%;
height: 100%;
}
.cont {
width: 184px;
height: 248px;
}
.cover {
width: 164px;
height: 164px;
position: relative;
}
.play {
opacity: 0;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.play:hover {
opacity: 0.8;
transition: opacity 1s;
}
.cir {
width: 49px;
height: 49px;
background-color: white;
border-radius: 50%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.tri {
width: 0;
height: 0;
border-style: solid;
border-width: 13px 0 13px 20px;
border-color: transparent transparent transparent black;
position: absolute;
border-radius: 1px;
top: 42%;
left: 46%;
}
.tri-box {
opacity: 0.8;
}
.title {
}
.singer {
color: gray;
}
</style>
</head>
<body>
<div class="cont">
<div class="cover">
<img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000003n1Tk02mdYQ9_1.jpg" alt="">
<div class="play">
<div class="cir"></div>
<div class="tri-box">
<div class="tri"></div>
</div>
</div>
</div>
<div class="title">Laundry</div>
<div class="singer">神山羊</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
@font-face {
font-family: 'fontello';
src: url('./font/fontello.eot?69149623');
src: url('./font/fontello.eot?69149623#iefix') format('embedded-opentype'),
url('./font/fontello.woff?69149623') format('woff'),
url('./font/fontello.ttf?69149623') format('truetype'),
url('./font/fontello.svg?69149623#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
* {
padding: 0;
margin: 0;
}
.cont {
position: fixed;
right: 50px;
bottom: 50px;
}
li {
width: 40px;
height: 40px;
list-style: none;
text-align: center;
border: gray 1px solid;
line-height: 40px;
margin: 0 0 2px 0;
}
.up {
font-family: fontello;
font-size: 24px;
}
.callback {
font-size: 14px;
}
.movie {
font-family: fontello;
font-size: 24px;
}
</style>
</head>
<body>
<ul class="cont">
<li class="up"></li>
<li class="callback">反馈</li>
<li class="movie"></li>
</ul>
</body>
</html>
day4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
margin-top: 10px;
}
li {
list-style: none;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: deepskyblue;
float: left;
margin-left: 10px;
}
li:nth-child(1) {
animation: dotAnima 1s infinite 0s;
}
li:nth-child(2) {
animation: dotAnima 1s infinite calc(1s/3);
}
li:nth-child(3) {
animation: dotAnima 1s infinite calc(2s/3);
}
@keyframes dotAnima {
0%, 100% {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
</style>
</head>
<body>
<ul class="dot">
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
day5
fuck y.qq.com
i = 0;
Export["Z:\\" <> ToString[i++] <> ".png", #]& /@ ImageCrop /@ Flatten[ImagePartition[..., Scaled[{1/9, 1/2}]]]
open System.Text.RegularExpressions
open System.Net
let data =
"""
"""
[<EntryPoint>]
let main argv =
let re = Regex("""\/\/qpic.y.qq.com\/music_cover\/.+?\/300\?n=1""")
seq { for i in re.Matches(data) -> i}
|> Seq.distinct
|> Seq.iteri (fun i x -> (new WebClient()).DownloadFile("https:"+x.Value,i.ToString() + ".jpg"))
0