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,38 @@
text-decoration: none; 去除a标签的下划线
font-family 字体
line-height 设置行高
设置单行文字的 垂直对齐
text-align: center;
设置水平方向的对其方式
注意:
line-height
text-align
只可以设置文字(div内部的文字)
标签 内部 块标签 要居中的时候
margin: 0 auto
font-weight 加粗
letter-spacing 设置字符间距
text-shadow: x轴偏移 y轴偏移 阴影模糊度 阴影颜色; 文字阴影
box-shadow: 盒子阴影 一般给块标签设置的
border: none; 去除边框
outline: none; 去除外边框
border-radius 圆角
background-attachment: fixed; 背景图不随页面滚动
overflow: scroll; hidden 决定超过父元素的部分如何显示
float 浮动 让元素放一行
子元素设置浮动后,父元素就会没有高度,解决方案:
手动设置height
overflow: hidden;
clear: both;

View File

@@ -0,0 +1,63 @@
<!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">
<title>baidu</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/baidu.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3446711_md7snkwkv5.css">
</head>
<body>
<div class="mian">
<div class="top hidden">
<img class="left"
src="https://dss2.bdstatic.com/5bVYsj_p_tVS5dKfpU_Y_D3/res/r/image/2021-3-4/hao123%20logo.png" alt="">
<div class="search hidden">
<div class="search_c left">
<span class="wenzi left ">网页</span>
<span></span><i class="iconfont icon-jinrujiantou-copy left "></i></span>
<input type="text" class="left" placeholder="搜索一下">
<div class="shuzi right">3</div>
</div>
<div class="button left">
百度一下
</div>
</div>
<div class="top_r hidden">
<i class="iconfont icon-dian right">
<span class="r_right">马斯克强制员工坐班 德工会回怼 </span>
</i>
</div>
</div>
<div class="">
<ul class="list hidden">
<li class="left">
<a href="">俄乌冲突100天 透露10大信号 </a>
<span class="yellow">热</span>
</li>
<li class="left hidden">
<a href="">俄乌冲突100天 透露10大信号 </a><span class="yellow left">热</span>
</li>
<li>
<a href="">俄乌冲突100天 透露10大信号 </a><span class="yellow">热</span>
</li>
<li class="left">
<a href="">俄乌冲突100天 透露10大信号 </a><span class="yellow">热</span>
</li>
<li>
<a href="">俄乌冲突100天 透露10大信号 </a><span class="yellow">热</span>
</li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,140 @@
<!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">
<title>重写
</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/bu.css">
</head>
<body>
<div class="root">
<div class="mian">
<div class="title">
热点内容
· · · · · ·
<span>(更多)</span>
</div>
<div class="content hidden">
<div class="content_l left hidden">
<ul class="picture left hidden">
<li>
<img src="https://img1.doubanio.com/view/photo/albumcover/public/p2867343799.webp" alt="">
<div class="text">
花痴
<span>207张照片</span>
</div>
</li>
<li>
<img src="https://img1.doubanio.com/view/photo/albumcover/public/p2867343799.webp" alt="">
<div class="text">
花痴
<span>207张照片</span>
</div>
</li>
<li>
<img src="https://img1.doubanio.com/view/photo/albumcover/public/p2867343799.webp" alt="">
<div class="text">
花痴
<span>207张照片</span>
</div>
</li>
<li>
<img src="https://img1.doubanio.com/view/photo/albumcover/public/p2867343799.webp" alt="">
<div class="text">
花痴
<span>207张照片</span>
</div>
</li>
</ul>
<ul class="list hidden">
<li class="first left">
<a href="">论家庭关系里好好说话的重要性</a>
<div class="mm">
manjon的日记
</div>
<p>今天晚上22:30的时候,老爸给我打电话,说的无非是天气热了,注意防暑之类的日常问候,我刚洗完澡,正打算去洗衣服,于是聊了几分钟和老爸说我要去洗衣服了,打算挂掉...</p>
</li>
<li>
<a href="">论家庭关系里好好说话的重要性</a>
</li>
<li>
<a href="">论家庭关系里好好说话的重要性</a>
</li>
<li>
<a href="">论家庭关系里好好说话的重要性</a>
</li>
<li>
<a href="">论家庭关系里好好说话的重要性</a>
</li>
</ul>
</div>
<div class="content_r right">
<div class="guanggao">
<img src="https://img9.doubanio.com/view/dale-online/dale_ad/public/f88c6fae4537279.jpg" alt="">
<div class="dingwei">广告</div>
</div>
<div class="button">
<div class="hot">
热门话题
&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·
<span>(去话题广场)</span>
</div>
<ul class="n">
<li>
<a href="">
那些沉睡在城市中的“烂尾楼”
</a>
<div class="liulan">
1.9万次浏览
</div>
</li>
<li>
<a href="">
那些沉睡在城市中的“烂尾楼”
</a>
<div class="liulan">
1.9万次浏览
</div>
</li>
<li>
<a href="">
那些沉睡在城市中的“烂尾楼”
</a>
<div class="liulan">
1.9万次浏览
</div>
</li>
<li>
<a href="">
那些沉睡在城市中的“烂尾楼”
</a>
<div class="liulan">
1.9万次浏览
</div>
</li>
<li>
<a href="">
那些沉睡在城市中的“烂尾楼”
</a>
<div class="liulan">
1.9万次浏览
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,46 @@
<!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">
<title>Document</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3445167_ty2cnwz6bgn.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<style>
.menu > li {
float: left;
margin-right: 10px;
}
.drop {
display: none;
}
.menu > li:hover .drop {
display: block !important;
}
</style>
</head> -->
<body>
<ul>
<li>
首页1
</li>
<li>
首页1
</li>
<li>
首页1
<ul>
<li>首页1-1</li>
<li>首页1-1</li>
<li>首页1-1</li>
<li>首页1-1</li>
</ul>
</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,102 @@
.mian {
width: 1520px;
height: 121px;
margin: 0 auto;
}
.top {
width: 1190px;
height: 46px;
margin: 0 auto;
margin-top: 20px;
}
.top img {
width: 128px;
height: 40px;
margin-top: -2px;
}
.top .search {
width: 900px;
height: 44px;
}
.search .search_c {
width: 443px;
border-radius: 10px 0 0 10px;
border: 2px solid #4E6EF2;
border-right: 0 !important;
text-align: center;
margin-left: 10px;
line-height: 40px;
height: 40px;
}
.top .search .wenzi {
color: #9195a3;
font-size: 12px;
padding-left: 10px;
}
.top .search input {
height: 16px;
padding: 12px 33px 12px 15px;
margin-left: 10px;
caret-color: #333;
font-size: 16px;
}
.top .search .shuzi {
height: 18px;
width: 18px;
color: #626675;
background-color: red;
text-align: center;
font-size: 12px;
border-radius: 50px;
line-height: 18px;
margin-right: 10px;
margin-top: 10px;
}
.search .button {
width: 112px;
height: 45px;
background-color: #4E6EF2;
color: #fff;
font-size: 17px;
border-radius: 0 10px 10px 0;
text-align: center;
line-height: 45px;
}
.top .top_r{
}
.top_r i{
width: 120px;
/* line-height: 17px; */
font-size: 12px;
color: #666;
margin-top: -12px;
}
.top_r .r_right {
}
.list {
padding: 20px 10px 10px 300px;
}
.list li {
}
.list li a {
color: #333;
font-size: 13px;
}
.yellow{
width: 16px;
height: 16px;
margin-left: 2px;
background-color: #FF9812;
text-align: center;
color: #fff;
line-height: 16px;
border-radius: 4px;
}

View File

@@ -0,0 +1,148 @@
.root {
width: 100%;
}
.mian {
width: 950px;
margin: 0 auto;
margin-top: 10px;
}
.title {
width: 655px;
font-size: 15px;
color: #072;
margin: 0 0 12px 0;
line-height: 150%;
}
.title span {
font-size: 10px;
color: #666666;
}
.content {
width: 950px;
height: 510px;
}
.content .content_l {
width: 655px;
}
.content .content_l .picture {
width: 360px;
margin: -10px 0 0 -10px;
}
.content .content_l .picture li {
float: left;
margin: 10px 0 0 10px;
}
.content .content_l .picture li img {
width: 170px;
height: 170px;
}
.content .content_l .picture li .text {
font-size: 12px;
color: #37a;
}
.content .content_l .picture li .text span {
color: #999;
}
.content .content_l .list {
width: 275px;
float: right;
}
.content .content_l .list .first{
}
.content .content_l .list li a{
color: #37a;
}
.content .content_l .list .first .mm {
color: #999;
}
.content .content_l .list .first p{
color: #666;
line-height: 1.62;
margin-bottom: 15px;
}
.content .content_l .list li{
font-size: 12px;
margin: 10px 0 0 10px;
}
.content .content_r {
width: 265px;
}
.content .content_r .guanggao{
width: 250px;
height: 120px;
position: relative;
}
.content .content_r .guanggao img{
width: 250px;
height: 120px;
}
.content .content_r .guanggao .dingwei{
width: 32px;
height: 20px;
font-size: 12px;
position: absolute;
color: rgb(255, 255, 255);
line-height: 20px;
text-align: center;
background-color: rgba(0, 0, 0, 0.3);
right: 0px;
bottom: 0px;
}
.content .content_r .button {
margin-bottom: 30px;
}
.content .content_r .button .hot{
font-size: 15px;
color: #072;
margin: 0 0 12px 0;
line-height: 150%;
}
.content .content_r .button .hot span{
font-size: 12px ;
line-height: 150%;
color: #666666;
}
.content .content_r .button .news {
margin-top: -4px;
}
.content .content_r .button .news li {
font-size: 12px;
margin-top: 10px;
}
.content .content_r .button .news li a {
color: #37a;
margin-bottom: 6px;
font-size: 14px;
line-height: 1.3;
}
.content .content_r .button .news li .liulan {
margin-bottom: 15px;
font-size: 13px;
line-height: 1;
color: #aaaaaa;
}

View File

@@ -0,0 +1,24 @@
/* 清除浏览器默认样式 */
body,h1,h2,h3,h4,h5,h6,ul,li,p {
margin: 0;
padding: 0;
}
html {
font-size: 0;
}
li {
list-style: none;
}
input {
border: none;
outline: none;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}

View File

@@ -0,0 +1,129 @@
/* .juzhong {
width: 1520px;
height: 510px;
} */
.mian {
width: 950px;
margin: 0 auto;
margin-top: 10px;
}
.mian_l {
width: 655px;
height: 423px;
}
.mian_l .title {
font: 15px Arial, Helvetica, sans-serif;
color: #072;
margin: 0 0 12px 0;
line-height: 150%;
}
}
.mian_l .title span{
font: 12px Arial, Helvetica, sans-serif;
line-height: 150%;
color: #666666;
}
.list {
width: 350px;
margin-right: 30px;
color: #999;
}
.list ul{
margin: -10px 0 0 -10px;
}
.list ul li{
float: left;
width: 170px;
vertical-align: top;
font-size: 12px;
margin: 10px 0 0 10px;
zoom: 1;
}
.list ul li img{
width: 170px;
max-height: 170px;
}
.list ul li .text{
color: #37a;
}
.list ul li .text span {
color: #999 !important;
}
.news{
zoom: 1;
color: #666;
width: 275px;
}
.news ul{
font-size: 12px;
}
.mian_l .news ul .first{
margin-top: 0;
}
.mian_l .news ul li {
margin-top: 12px;
height: 20px;
}
.mian_l .news ul li a {
color: #37a;
}
.mian_r{
float: right;
width: 265px;
margin-left: 30px;
margin-top: -423px;
}
.mian_r img{
width: 256px;
height: 125px;
margin: 10px 0px;
}
.mian_r .button{
height: 329px;
}
.mian_r .button .b_hot{
font: 15px Arial, Helvetica, sans-serif;
color: #072;
margin: 0 0 12px 0;
line-height: 150%;
height: 22.5px;
}
.mian_r .button .b_hot span{
font: 12px Arial, Helvetica, sans-serif;
line-height: 150%;
color: #666666;
}
.mian_r .button ul{
margin-top: -4px;
height: 298.2px;
}
.mian_r .button ul li{
margin-top: 10px;
color: #999;
line-height: 1;
margin-bottom: 15px;
}
.mian_r .button ul li a{
color: #37a;
margin-bottom: 6px;
font-size: 14px;
line-height: 1.3;
}
.mian_r .button ul li .liulan{
margin-bottom: 15px;
font-size: 13px;
line-height: 1;
color: #aaaaaa;
}

View File

@@ -0,0 +1,198 @@
.manner {
width:1130px ;
margin: 0 auto;
}
.mian {
width: 1130px;
height: 300px;
/* //水平juzhong */
}
.mian_l{
width: 813px;
height: 275px;
}
.mian_l .top {
height: 40px;
line-height: 40px;
background-color: #f1f1f1;
padding: 0 14px;
font-weight: normal;
border-bottom: 1px solid #e1e1e1;
}
.mian_l .top .text {
font-size: 18px;
color: black;
}
.mian_l .top a {
float: right;
font-size: 12px;
color: #006699;
margin-top: -39px;
}
.list {
width: 813px;
height: 234px;
padding: 0 0 0 18px;
}
.list li {
float: left;
width: 184px;
padding: 10px 0 9px;
margin-right: 14px;
display: inline;
height: 20px;
line-height: 20px;
white-space: nowrap;
overflow: hidden;
}
.list li i {
color: #4c4c4c;
font-size: 10px;
}
.list li a {
color: #4c4c4c;
padding: 0 0 0 10px;
font-size: 14px;
}
.mian_r {
border: 1px solid #e1e1e1;
width: 300px;
height: 276px;
background: #fff;
margin: 0 0 22px 0;
margin-top: -275px;
}
.mian_r .r_top {
height: 41px;
}
.mian_r .r_top a {
float: left;
height: 40px;
line-height: 40px;
text-align: center;
width: 148px;
width: 50%;
border-bottom: 1px solid #e0e0e0;
font-size: 14px;
color: #3e3e3e;
background-color: #f5f6f5;
box-sizing: border-box;
}
.mian_r .r_top .r_top_l {
background-color: #fff !important;
border-bottom: none !important;
}
.mian_r .r_button {
width: 274px;
height: 214px;
}
.mian_r .r_button .text1 {
height: 38px;
margin: 10px 0;
float: left;
width: 272px;
font-size: 14px;
color: #e1e1e1;
border: 1px solid #d5d5d5;
margin-left: 15px;
margin-top: 10px;
}
.mian_r .r_button .text2 {
height: 38px;
margin: 10px 0;
float: left;
width: 272px;
font-size: 14px;
color: #e1e1e1;
border: 1px solid #d5d5d5;
margin-left: 15px;
margin-top: 10px;
}
.mian_r .r_button .foget {
width: 274px;
height: 19.5px;
overflow: hidden;
}
.mian_r .r_button .foget li{
}
.mian_r .r_button .foget li a {
font-size: 12px;
color: #006699;
}
.mian_r .r_button .denglu {
width: 274px;
height: 28px;
color: #fff;
font-size: 14px;
margin-left: 10px;
}
.mian_r .r_button .denglu .dl {
width: 130px;
height: 28px;
line-height: 28px;
background-color: #3086f2;
border-radius: 2px;
text-align: center;
margin-left: 10px;
}
.mian_r .r_button .denglu .wx {
width: 130px;
height: 28px;
line-height: 28px;
background-color: #00be00;
margin-left: 10px;
text-align: center;
color: #fff;
overflow: hidden;
border-radius: 2px;
margin-top: -28px;
}
.mian_r .r_button .banner {
width: 274px;
height: 30px;
margin-left: 10px;
}
.mian_r .r_button .banner li {
margin-top: 35px;
margin-left: 20px;
height: 21px;
}
.mian_r .r_button .banner li a {
width: 42px;
height: 20px;
line-height: 20px;
}
.mian_r .r_button .banner li .qq {
font-size: 14px;
color: #3c3c3c;
}
.mian_r .r_button .banner li .qq i{
color: #006699;
font-size: 14px;
}
.mian_r .r_button .banner a li i:last-child{
font-size: 10px;
color: #2284E2;
}

View File

@@ -0,0 +1,56 @@
.mian {
width: 280px;
}
.title {
height: 20px;
width:100%;
color: #969696;
font-size: 14px;
margin-bottom: 15px;
}
.content li {
margin-bottom: 15px;
}
.content li .picture {
width: 48px;
height: 48px;
border-radius: 100%;
margin-right: 10px;
}
.content .content_top {
width: 222px;
margin-top: 5px;
}
.content .content_top .name {
font-size: 14px;
color: #333;
}
.content .content_top .item_r {
color: #42c02e;
font-size: 13px;
}
.content .content_top .item_r i{
font-size: 10px !important;
}
.content .introduce{
margin-top: 2px;
font-size: 12px;
color: #969696;
}
.bottom {
height: 35px;
width: 280px;
border: 1px solid #dcdcdc;
border-radius: 4px;
background-color: #f7f7f7;
font-size: 13px;
line-height: 35px;
text-align: center;
color: #787878;
}
.bottom i {
font-size: 13px;
}

View File

@@ -0,0 +1,16 @@
/* 公共使用率高的css代码 */
.themeColor {
color: #969696;
}
.left {
float: left;
}
.right {
float: right;
}
.hidden {
overflow: hidden;
}

View File

@@ -0,0 +1,84 @@
.juzhong {
width: 1200px;
height: 532px;
margin: 0 auto;
}
.mian{
width: 1200px;
height: 532px;
}
.title{
height: 114px;
line-height: 114px;
text-align: center;
font-size: 30px;
color: black;
font-weight: 700;
letter-spacing: 20px;
}
.mune{
height: 50px;
text-align: center;
font-size: 15px;
margin-left: 340px;
}
.mune li {
margin: 0 24px;
color :#333;
float: left;
}
.mune .active{
color: #31c27c;
}
.list{
height: 310px;
margin-right: -20px;
}
.list ul{}
.list ul li{
font-size: 14px;
height: 224px;
float: left;
margin-right: 20px;
}
.list ul li img {
height: 224px;
width: 224px;
}
.list ul li .text{
color: #000;
font-weight: 400;
}
.list ul li .bofang{
color: #999;
height: 22px;
}
.button{
height: 53px;
line-height: 53px;
}
.button ul{
width: 90px;
margin: 0 auto;
}
.button ul .active{
background: rgba(0, 0, 0, 0.3) !important;
}
.button ul li{
width: 12px;
height: 12px;
margin: 0 8px;
border-radius: 100%;
background: #e6e6e6;
float: left;
margin-top: 20.5px;
}

View File

@@ -0,0 +1,102 @@
.mian {
width: 490px;
height: 452px;
background-color: #FFFFFF;
box-shadow: 0px 1px 3px rgb(18 18 18 / 20%);
border-radius: 4px;
margin-top: 10px;
margin-left: 10px;
}
.mian .title {
width: 442px;
height: 72px;
border-bottom: 1px solid #EBEBEB;
margin-left: 24px;
}
.title .text {
color: #121212;
font-size: 20px;
font-weight: 600;
line-height: 72px;
}
.list {
width: 442px;
height: 304px;
font-size: 15px;
}
.list .red {
width: 18px;
height: 18px;
background-color: red;
color: #FFFFFF;
border-radius: 4px;
text-align: center;
line-height: 18px;
}
.list li:first {
height: 42px;
margin-top: 90px;
margin-left: 24px;
}
.list li {
height: 42px;
margin-top: 50px;
margin-left: 24px;
}
.list li a {
margin-left: 4px;
color: #121212;
font-weight: 600;
}
.list li .wenzi {
margin-top: 6px;
margin-left: 22px;
font-size: 12px;
color: #999999;
}
.list .green {
width: 18px;
height: 18px;
background-color: green;
color: #FFFFFF;
border-radius: 4px;
text-align: center;
line-height: 18px;
}
.list .blue {
width: 18px;
height: 18px;
background-color: blue;
color: #FFFFFF;
border-radius: 4px;
text-align: center;
line-height: 18px;
}
.list .yellow {
width: 18px;
height: 18px;
background-color: yellow;
color: #FFFFFF;
border-radius: 4px;
text-align: center;
line-height: 18px;
}
.button{
width: 442px;
height: 46px;
margin-left: 24px;
line-height: 24px;
}
.button .hot {
color: #8590A6;
font-size: 14px;
font-weight: 500;
margin-top: 50px;
}
.button i{
margin-left: -6px;
padding-top: -4px;
}

View File

@@ -0,0 +1,210 @@
.mian {
width: 1200px;
margin: 0 auto;
}
.title {
height: 44px;
line-height: 44px;
}
.title .title_l {
font-size: 24px;
font-weight: 400;
color: #333;
font-family: 'Microsoft YaHei';
}
.title .title_l span {
margin-right: 8px;
font-weight: 700;
}
.title_r {
}
.title_r li {}
.title_r li a{
font-size: 12px;
float: left;
}
.title .title_r li::after {
content: " ";
width: 0.5px;
height: 12px;
background: #ccc;
display: inline-block;
margin-top: 17px;
margin-left: 7.5px;
margin-right: 7.5px;
}
.title .title_r li a i {
font-size: 12px;
zoom: 0.8;
}
.title .title_r li:last-child::after {
width: 0 !important;
}
.content {
height: 516px;
}
.content .content_l{
width: 300px;
height: 100%;
}
.top {
height: 281px;
background: #52a7d9;
}
.top_t {
background: #1d89bf;
height: 38px;
line-height: 38px;
padding-left: 20px;
padding-right: 15px;
box-sizing: border-box;
}
.top_t .hot {
color: #fff;
font-size: 16px;
}
.top_t ul{
width: 167px;
}
.top_t ul li{
font-size: 14px;
color: #fff;
float: left;
width: 55px;
text-align: center;
}
.top_t ul .active{
background: #52a7d9;
}
.button_list {
padding: 20px 0 10px 20px;
}
.button_list li {
height: 30px;
line-height: 30px;
}
.button_list li:nth-child(1) span,
.button_list li:nth-child(2) span,
.button_list li:nth-child(3) span{
background: #fff;
color: #1d89bf;
}
.button_list li span {
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
display: inline-block;
font-size: 12px;
color: #fff;
}
.button_list li a {
font-size: 12px;
color: #fff;
margin-left: 10px;
}
.more {
height: 53px;
text-align: center;
line-height: 53px;
color: #fff;
font-size: 14px;
border-top: 1px dashed #1d89bf;
width: 260px;
margin: 0 auto;
}
.button {
height: 235px;
padding-top: 25px;
padding-left: 20px;
background: #f5f5f5;
}
.button .button_top{
font-size: 16px;
color: #666;
margin-bottom: 5px;
}
.button ul {}
.button ul li {
float: left;
margin-right: 20px;
margin-bottom: 11.5px;
}
.button ul li a{
font-size: 14px;
}
.content_r{
width: 900px;
height: 100%;
}
.r_list{
border-top: 1px solid #ebebeb;
}
.r_list li{
float: left;
padding: 20px 20px 15px;
width: 184px;
height: 195px;
border-right: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb
}
.r_list li img{
width: 160px;
}
.r_list li .title{
font-size: 14px;
word-break: break-all;
}
.r_list li price{
font-size: 12px;
color: #999;
}
.r_list li price span{
font-size: 18px;
color: #f33;
}
.yuan {
height: 53px;
line-height: 53px;
border-right: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
box-sizing: border-box;
}
.yuan ul{
width: 90px;
margin: 0 auto;
}
.yuan ul .active{
background: #42afa7 !important;
}
.yuan ul li{
width: 12px;
height: 12px;
margin: 0 3px;
border-radius: 100%;
background: #e6e6e6;
float: left;
margin-top: 20.5px;
}

View File

@@ -0,0 +1,77 @@
.mian {
width: 1000px;
height: 93px;
margin: 0 auto;
box-sizing: border-box;
}
.logo {
width: 272px;
height: 88px;
margin-top: 40px;
}
.search {
}
.search .tuijian {
margin-top: 45px;
font-size: 12px;
margin-left: 10px;
}
.search .tuijian li{
width: 42px;
height: 20px;
color: #666;
float: left;
}
.search .tuijian li .active{
color: #333;
font-weight: bold;
}
.search_button {
width: 469px;
height: 36px;
margin-top: 6px;
margin-left: 10px;
}
.search_button input {
width: calc(469px - 80px);
height: 36px;
border: 1px solid #ccc;
box-sizing: border-box;
border-right: none;
padding-left: 7px;
font-size: 14px;
}
.search_button .search_text {
width: 80px;
height: 100%;
background: #3686f1;
color: #fff;
font-size: 16px;
text-align: center;
line-height: 36px;
}
.picture {
margin-top: -5px;
}
.picture li{
float: left;
text-align: center;
margin-right: 18px;
}
.picture li:last-child{
margin-right: 0 !important;
}
.picture a {
color: #1f4f88;
font-size: 12px;
}
.picture img {
width: 20px;
height: 20px;
}

View File

@@ -0,0 +1,115 @@
<!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">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/douban.css">
</head>
<body>
<div class="juzhong">
<div class="mian hidden">
<div class="mian_l hidden">
<div class="title hidden">
热点内容
· · · · · ·
<span>(更多)</span>
</div>
<div class="list hidden">
<ul>
<li>
<img src="https://img1.doubanio.com/view/photo/albumcover/public/p2633666057.webp" alt="">
<div class="text">
好好吃早饭
<span>330张照片</span>
</div>
</li>
<li>
<img src="https://img1.doubanio.com/view/photo/albumcover/public/p2633666057.webp" alt="">
<div class="text">
好好吃早饭
<span>330张照片</span>
</div>
</li>
<li>
<img src="https://img1.doubanio.com/view/photo/albumcover/public/p2633666057.webp" alt="">
<div class="text">
好好吃早饭
<span>330张照片</span>
</div>
</li>
<li>
<img src="https://img1.doubanio.com/view/photo/albumcover/public/p2633666057.webp" alt="">
<div class="text">
好好吃早饭
<span>330张照片</span>
</div>
</li>
</ul>
</div>
<div class="news">
<ul>
<li class="first">
<a href="">媒介蒙太奇 之 观看奥运</a>
<p>媒介蒙太奇·观看奥运 I 2000年9月某天,我刚下课,经过北大某老教学楼旁的某老食堂,里面突然爆出剧烈的欢呼声。那大约是悉尼奥运某场乒乓球或羽毛球决赛,学生们...</p>
</li>
<li>
<a href="">媒介蒙太奇 之 观看奥运</a>
</li>
<li>
<a href="">媒介蒙太奇 之 观看奥运</a>
</li>
<li>
<a href="">媒介蒙太奇 之 观看奥运</a>
</li>
<li>
<a href="">媒介蒙太奇 之 观看奥运</a>
</li>
</ul>
</div>
</div>
<div class="mian_r">
<img src="https://img9.doubanio.com/view/dale-online/dale_ad/public/f88c6fae4537279.jpg" alt="">
<div class="button">
<div class="b_hot">
热门话题
· · · · · ·
<span>(去话题广场)</span>
</div>
<ul class="hot_list">
<li>
<a href="">你记忆中的粽子味道</a>
<div class="liulan">1.9万次浏览</div>
</li>
<li>
<a href="">你记忆中的粽子味道</a>
<div class="liulan">1.9万次浏览</div>
</li>
<li>
<a href="">你记忆中的粽子味道</a>
<div class="liulan">1.9万次浏览</div>
</li>
<li>
<a href="">你记忆中的粽子味道</a>
<div class="liulan">1.9万次浏览</div>
</li>
<li>
<a href="">你记忆中的粽子味道</a>
<div class="liulan">1.9万次浏览</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,103 @@
<!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">
<title>豆丁</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/douding.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3446711_rervreono9h.css">
</head>
<body>
<div class="manner">
<div class="mian hidden">
<div class="mian_l">
<div class="top">
<div class="text">
文档分类
</div>
<span class="hidden">
<a href="">更多></a>
</span>
</div>
<ul class="list hidden">
<li>
<span><i class="iconfont icon-plus left"></i></span>
<a href="">幼儿/小学教育</a>
</li>
<li>
<span><i class="iconfont icon-plus left"></i></span>
<a href="">幼儿/小学教育</a>
</li>
<li>
<span><i class="iconfont icon-plus left"></i></span>
<a href="">幼儿/小学教育</a>
</li>
<li>
<span><i class="iconfont icon-plus left"></i></span>
<a href="">幼儿/小学教育</a>
</li>
<li>
<span><i class="iconfont icon-plus left"></i></span>
<a href="">幼儿/小学教育</a>
</li>
<li>
<span><i class="iconfont icon-plus left"></i></span>
<a href="">幼儿/小学教育</a>
</li>
</ul>
</div>
<div class="mian_r right">
<div class="r_top hidden">
<a href="" class="left r_top_l">登录</a>
<a href="" class="left">注册</a>
</div>
<div class="r_button">
<input type="text" class="text1" placeholder="用户名/邮箱/手机号">
<input type="password" class="text2" placeholder="请输入密码">
<div class="foget">
<ul class="hidden">
<li class="right">
<a href="">
| 立即注册
</a>
</li>
<li class="right">
<a href="">
忘记密码?
</a>
</li>
</ul>
</div>
<div class="denglu hidden">
<div class="dl left">登录</div>
<div class="wx right"><i class="iconfont icon-weixin"></i> 微信登陆</div>
</div>
<div class="banner">
<ul class="hidden">
<li class="left">
<a href="" class="qq"><i class="iconfont icon-QQ1"></i>QQ |</a>
</li>
<li class="left">
<a href="" class="qq"><i class="iconfont icon-QQ1"></i>QQ |</a>
</li>
<li class="left">
<a href="" class="qq"><i class="iconfont icon-QQ1"></i>QQ |</a>
</li>
<li class="left">
<a href="" class="qq">更多<i class="iconfont icon-z044-copy"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,90 @@
<!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">
<title>jianshu</title>
<link rel="stylesheet" href="http:////at.alicdn.com/t/font_3446711_p0mkwyehl4g.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/jianshu.css">
</head>
<body>
<div class="mian">
<div class="title hidden">
<div class="title_l left">
推荐作者
</div>
<div class="title_r right">
<i class="iconfont icon-shuaxin"></i>
<span class="title_r_refresh">换一批</span>
</div>
</div>
<ul class="content">
<li class="hidden">
<img class="picture left"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="图片未找到">
<div class="content_top hidden">
<div class="name left">卢璐说</div>
<div class="item_r right">
<i class="iconfont icon-plus"></i>
<span class="follow">关注</span>
</div>
</div>
<div class="introduce">写了2154.9k字 · 34.8k喜欢</div>
</li>
<li class="hidden">
<img class="picture left"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="图片未找到">
<div class="content_top hidden">
<div class="name left">卢璐说</div>
<div class="item_r right">
<i class="iconfont icon-plus"></i>
<span class="follow">关注</span>
</div>
</div>
<div class="introduce">写了2154.9k字 · 34.8k喜欢</div>
</li>
<li class="hidden">
<img class="picture left"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="图片未找到">
<div class="content_top hidden">
<div class="name left">卢璐说</div>
<div class="item_r right">
<i class="iconfont icon-plus"></i>
<span class="follow">关注</span>
</div>
</div>
<div class="introduce">写了2154.9k字 · 34.8k喜欢</div>
</li>
<li class="hidden">
<img class="picture left"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="图片未找到">
<div class="content_top hidden">
<div class="name left">卢璐说</div>
<div class="item_r right">
<i class="iconfont icon-plus"></i>
<span class="follow">关注</span>
</div>
</div>
<div class="introduce">写了2154.9k字 · 34.8k喜欢</div>
</li>
</ul>
<div class="bottom">
<span>查看全部</span>
<i class="iconfont icon-jinrujiantou"></i>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,67 @@
<!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">
<title>QQ音乐</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/qqmusic.css">
</head>
<body>
<div class="juzhong">
<div class="mian hidden">
<div class="title">
歌单推荐
</div>
<ul class="mune hidden">
<li class="active">为你推荐</li>
<li>情歌</li>
<li>短视频热歌</li>
<li>经典国语</li>
<li>情歌</li>
</ul>
<div class="list hidden">
<ul>
<li>
<img src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1" alt="">
<div class="text">贺峻霖 | 少年十七未来山海共期</div>
<div class="bofang">播放量:43.5万</div>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1" alt="">
<div class="text">贺峻霖 | 少年十七未来山海共期</div>
<div class="bofang">播放量:43.5万</div>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1" alt="">
<div class="text">贺峻霖 | 少年十七未来山海共期</div>
<div class="bofang">播放量:43.5万</div>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1" alt="">
<div class="text">贺峻霖 | 少年十七未来山海共期</div>
<div class="bofang">播放量:43.5万</div>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1" alt="">
<div class="text">贺峻霖 | 少年十七未来山海共期</div>
<div class="bofang">播放量:43.5万</div>
</li>
</ul>
</div>
<div class="button">
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,58 @@
<!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">
<title>知乎</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/zhihu.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3446711_md7snkwkv5.css">
</head>
<body>
<div class="mian hidden">
<div class="title left">
<div class="text">
近期热点
</div>
</div>
<div class="list">
<ul>
<li>
<span class="red left">1</span>
<a href="" >上海解封是不是太突然了?</a>
<div class="wenzi">260 万浏览 · 1044 关注 · 466 回答</div>
</li>
<li>
<span class="green left">2</span>
<a href="" >上海解封是不是太突然了?</a>
<div class="wenzi">260 万浏览 · 1044 关注 · 466 回答</div>
</li>
<li>
<span class="blue left">3</span>
<a href="" >上海解封是不是太突然了?</a>
<div class="wenzi">260 万浏览 · 1044 关注 · 466 回答</div>
</li>
<li>
<span class="yellow left">4</span>
<a href="" >上海解封是不是太突然了?</a>
<div class="wenzi">260 万浏览 · 1044 关注 · 466 回答</div>
</li>
</ul>
</div>
<div class="button">
<div class="hot">查看全部热点问题
<span><i class="iconfont icon-jinrujiantou "></i></span>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,190 @@
<!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">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/zol-leave.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3446711_rervreono9h.css">
</head>
<body>
<div class="mian">
<div class="title hidden">
<div class="title_l left">
<span>2F</span>
笔记本电脑
</div>
<ul class="title_r right">
<li class="left">
<a href="">
联想
</a>
</li>
<li class="left">
<a href="">
联想
</a>
</li>
<li class="left">
<a href="">
联想
</a>
</li>
<li class="left">
<a href="">
联想
</a>
</li>
<li class="left">
<a href="">
更多
<i class="iconfont icon-z044-copy"></i>
</a>
</li>
</ul>
</div>
<div class="content hidden">
<div class="content_l left">
<div class="top">
<div class="top_t">
<div class="hot left">热度排行</div>
<ul class="right">
<li class="active">
品牌
</li>
<li>
品牌
</li>
<li>
品牌
</li>
</ul>
</div>
<ul class="button_list">
<li>
<span>1</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>2</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>3</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>4</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>5</span>
<a href="">惠普暗影精灵6</a>
</li>
</ul>
<div class="more">查看更多排行榜</div>
</div>
<div class="button">
<div class="button_top">
热门搜索
</div>
<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>
</ul>
</div>
</div>
<div class="content_r left">
<ul class="r_list hidden">
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/256GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/256GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/256GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/256GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/256GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/256GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/256GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/256GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
</ul>
<div class="yuan">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,64 @@
<!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">
<title>zol</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/zol.css">
</head>
<body>
<div class="mian">
<img class="logo left" src="https://icon.zol-img.com.cn/mainpage/2019logo/festival/2022duanwu-logo_2x.png"
alt="图片未找到">
<div class="search hidden">
<ul class="tuijian left">
<li>
综合
</li>
<li>
综合
</li>
<li>
综合
</li>
<li>
综合
</li>
<li>
综合
</li>
</ul>
<div class="search_button">
<input type="text" class="left" placeholder="搜索框">
<div class="search_text left">搜索一下</div>
</div>
<ul class="picture right">
<li>
<a href="">
<img src="https://icon.zol-img.com.cn/mainpage/iconfont/201909/down-APPicon@2x.png" alt="">
<div>下载App</div>
</a>
</li>
<li>
<a href="">
<img src="https://icon.zol-img.com.cn/mainpage/iconfont/201909/down-APPicon@2x.png" alt="">
<div>下载App</div>
</a>
</li>
<li>
<a href="">
<img src="https://icon.zol-img.com.cn/mainpage/iconfont/201909/down-APPicon@2x.png" alt="">
<div>下载App</div>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,234 @@
.meun {
width: 240px;
height: 100%;
position: fixed;
z-index: 999;
border-right: 1px solid #e6e6e8;
box-sizing: border-box;
}
.meun .logo {
width: 146px;
height: 36px;
margin: 0 auto;
display: block;
margin-top: 18px;
margin-bottom: 34px;
}
.meun ul {
padding: 0 28px;
}
.meun ul li {
height: 40px;
line-height: 40px;
margin-bottom: 8px;
}
.meun ul .active {
background: #f7f7f7;
border-radius: 3px;
}
.meun ul li a{}
.meun ul li a img {
vertical-align: text-top;
margin-left: 4.5px;
margin-top: -18px;
}
.meun ul li a span {
font-size: 16px;
color: #111622;
}
.header {
position: fixed;
width: calc(100% - 240px);
height: 64px;
left: 240px;
z-index: 999;
border-bottom: 1px solid #e6e6e8;
background: #fff;
box-sizing: border-box;
}
.header .search{
width: 440px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #e6e6e8;
border-radius: 3px;
box-sizing: border-box;
margin: 14px 0 0 32px;
}
.header .search input {
background: #0000;
height: 100%;
padding-left: 17px;
width: 343px;
box-sizing: border-box;
}
.header .search .but{
position: relative;
height: 100%;
width: 75px;
padding-left: 20px;
line-height: 34px;
}
.header .search .but::before {
content: " ";
position: absolute;
width: 1px;
height: 16px;
background-color: #e6e6e6;
top: 50%;
left: 0;
margin-top: -8px;
}
.header .search .but span {
font-size: 16px;
color: #666;
}
.header .login{
width: 611px;
}
.header .login .menu_two {
line-height: 64px;
}
.header .login .menu_two li {
float: left;
margin-right: 16px;
padding-right: 10px;
font-size: 14px;
color: #111622;
}
}
.header .login .menu_two li a{}
.header .login .menu_two li a i {}
.header .login .menu_two li a span {
/* font-size: 14px;
color: #111622; */
}
.header .login .log_reg {
margin-top: 14px;
}
.header .login .log_reg li:first-child {
border: 1px solid #e6e6e8;
height: 30px;
border-radius: 5px;
padding: 0 8px;
}
.header .login .log_reg li:last-child {
padding:0 26px;
height: 30px;
background-color: #ff2626;
border-radius: 5px;
color: #fff;
}
.header .login .log_reg li {
float: left;
line-height: 32px;
margin-right: 24px;
font-size: 14px;
color: #111622;
}
.header .login .log_reg li i {}
.header .login .log_reg li span {}
.content {
width: calc(100% - 240px);
padding: 32px 0 0 32px;
height: 100%;
background-color: #fafafa;
margin-left: 240px;
padding-top: 64px;
box-sizing: border-box;
}
.content .first{
}
.content .first img {
width: 600px;
height: 266.26px;
border-radius: 3px;
}
.content li{
float: left;
padding-right: 16px;
margin-top: 44px;
}
.content li .dingwei{
position: relative;
}
.content li .dingwei img {
width: 292px;
height: 164px;
margin-bottom: 17px;
border-radius: 3px;
}
.content li .dingwei .zhibo {
width: 36px;
height: 20px;
line-height: 20px;
background: red;
color: #fff;
font-size: 12px;
border-radius: 10px;
position: absolute;
left: 12px;
top: 12px;
padding: 0 12px 0 22px;
background-image: url(https://pic.rmb.bdstatic.com/baidu-rmb-video-cover-1/2022-5/1652689008111/9557bd3b37a1.gif);
background-size: 12px 12px;
background-repeat: no-repeat;
background-position: 6px;
}
.content li .dingwei .shuzhi {
font-size: 14px;
color: #fff;
text-align: right;
line-height: 30px;
box-sizing: border-box;
padding: 0 12px;
position: absolute;
bottom: 12px;
right: 12px;
height: 30px;
width: 100%;
}
.content li .cont_b{
width: 292px;
}
.content li .cont_b img{
width: 36px;
height: 36px;
border-radius: 100%;
float: left;
}
.content li .cont_b .tietle{
font-size: 16px;
color: #111622;
line-height: 22px;
font-weight: 500;
}
.content li .cont_b .name,
.content li .cont_b .bofang{
font-size: 14px;
color: #505666;
line-height: 22px;
font-weight: 400;
margin-left: 39px;
}

View File

@@ -0,0 +1,223 @@
<!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">
<title>好看视频</title>
<link rel="stylesheet" href="../6.2作业/css/clear.css">
<link rel="stylesheet" href="../6.2作业/css/public.css">
<link rel="stylesheet" href="./css/haokan.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3445167_it6ine1mov8.css">
</head>
<body>
<div class="mian">
<div class="meun">
<img class="logo" src="./img/logo.png" alt="">
<ul>
<li class="active">
<a href="">
<img src="./img/caidan.svg" alt="">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/caidan.svg" alt="">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/caidan.svg" alt="">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/caidan.svg" alt="">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/caidan.svg" alt="">
<span>首页</span>
</a>
</li>
</ul>
</div>
<div class="header">
<div class="search left">
<input class="left" type="text" placeholder="搜索">
<div class="but left">
<i class="iconfont icon-sousuo"></i>
<span>搜索</span>
</div>
</div>
<div class="login right hidden">
<ul class="menu_two hidden left">
<li>
<a href="">
<i class="iconfont icon-sousuo"></i>
<span>下载客户端</span>
</a>
</li>
<li>
<i class="iconfont icon-sousuo"></i>
<span>创作中心</span>
</li>
<li>
<i class="iconfont icon-sousuo"></i>
<span>消息</span>
</li>
</ul>
<ul class="log_reg hidden right">
<li>
<i class="iconfont icon-sousuo"></i>
<span>上传视频</span>
</li>
<li>
<span>登 录</span>
</li>
</ul>
</div>
</div>
<ul class="content hidden">
<li class="first">
<img class="tupian" src="./img/first.png" alt="">
</li>
<li>
<div class="dingwei hidden">
<img src="https://pics5.baidu.com/feed/80cb39dbb6fd5266f21d74dd60e1e521d60736cc.jpeg?token=c038382b2d3ad92cd25fa36fc4206b15"
alt="">
<div class="zhibo">直播中</div>
<div class="shuzhi">0:22</div>
</div>
<div class="cont_b hidden">
<img src="./img/touxiang.jpeg" alt="">
<div class="tietle">浙江牛人研发的“自动吸鱼器”火了,鱼虾鳝鱼天天吃不完</div>
<div class="name">丽莎爱运动</div>
<div class="bofang">3次观看 · 正在直播</div>
</div>
</li>
<li class="dd">
<div class="dingwei hidden">
<img src="https://pics5.baidu.com/feed/80cb39dbb6fd5266f21d74dd60e1e521d60736cc.jpeg?token=c038382b2d3ad92cd25fa36fc4206b15"
alt="">
<div class="zhibo">直播中</div>
<div class="shuzhi">0:22</div>
</div>
<div class="cont_b hidden">
<img src="./img/touxiang.jpeg" alt="">
<div class="tietle">浙江牛人研发的“自动吸鱼器”火了,鱼虾鳝鱼天天吃不完</div>
<div class="name">丽莎爱运动</div>
<div class="bofang">3次观看 · 正在直播</div>
</div>
</li>
<li class="dd">
<div class="dingwei hidden">
<img src="https://pics5.baidu.com/feed/80cb39dbb6fd5266f21d74dd60e1e521d60736cc.jpeg?token=c038382b2d3ad92cd25fa36fc4206b15"
alt="">
<div class="zhibo">直播中</div>
<div class="shuzhi">0:22</div>
</div>
<div class="cont_b hidden">
<img src="./img/touxiang.jpeg" alt="">
<div class="tietle">浙江牛人研发的“自动吸鱼器”火了,鱼虾鳝鱼天天吃不完</div>
<div class="name">丽莎爱运动</div>
<div class="bofang">3次观看 · 正在直播</div>
</div>
</li>
<li class="dd">
<div class="dingwei hidden">
<img src="https://pics5.baidu.com/feed/80cb39dbb6fd5266f21d74dd60e1e521d60736cc.jpeg?token=c038382b2d3ad92cd25fa36fc4206b15"
alt="">
<div class="zhibo">直播中</div>
<div class="shuzhi">0:22</div>
</div>
<div class="cont_b hidden">
<img src="./img/touxiang.jpeg" alt="">
<div class="tietle">浙江牛人研发的“自动吸鱼器”火了,鱼虾鳝鱼天天吃不完</div>
<div class="name">丽莎爱运动</div>
<div class="bofang">3次观看 · 正在直播</div>
</div>
</li>
<li class="dd">
<div class="dingwei hidden">
<img src="https://pics5.baidu.com/feed/80cb39dbb6fd5266f21d74dd60e1e521d60736cc.jpeg?token=c038382b2d3ad92cd25fa36fc4206b15"
alt="">
<div class="zhibo">直播中</div>
<div class="shuzhi">0:22</div>
</div>
<div class="cont_b hidden">
<img src="./img/touxiang.jpeg" alt="">
<div class="tietle">浙江牛人研发的“自动吸鱼器”火了,鱼虾鳝鱼天天吃不完</div>
<div class="name">丽莎爱运动</div>
<div class="bofang">3次观看 · 正在直播</div>
</div>
</li>
<li class="dd">
<div class="dingwei hidden">
<img src="https://pics5.baidu.com/feed/80cb39dbb6fd5266f21d74dd60e1e521d60736cc.jpeg?token=c038382b2d3ad92cd25fa36fc4206b15"
alt="">
<div class="zhibo">直播中</div>
<div class="shuzhi">0:22</div>
</div>
<div class="cont_b hidden">
<img src="./img/touxiang.jpeg" alt="">
<div class="tietle">浙江牛人研发的“自动吸鱼器”火了,鱼虾鳝鱼天天吃不完</div>
<div class="name">丽莎爱运动</div>
<div class="bofang">3次观看 · 正在直播</div>
</div>
</li>
<li class="dd">
<div class="dingwei hidden">
<img src="https://pics5.baidu.com/feed/80cb39dbb6fd5266f21d74dd60e1e521d60736cc.jpeg?token=c038382b2d3ad92cd25fa36fc4206b15"
alt="">
<div class="zhibo">直播中</div>
<div class="shuzhi">0:22</div>
</div>
<div class="cont_b hidden">
<img src="./img/touxiang.jpeg" alt="">
<div class="tietle">浙江牛人研发的“自动吸鱼器”火了,鱼虾鳝鱼天天吃不完</div>
<div class="name">丽莎爱运动</div>
<div class="bofang">3次观看 · 正在直播</div>
</div>
</li>
<li class="dd">
<div class="dingwei hidden">
<img src="https://pics5.baidu.com/feed/80cb39dbb6fd5266f21d74dd60e1e521d60736cc.jpeg?token=c038382b2d3ad92cd25fa36fc4206b15"
alt="">
<div class="zhibo">直播中</div>
<div class="shuzhi">0:22</div>
</div>
<div class="cont_b hidden">
<img src="./img/touxiang.jpeg" alt="">
<div class="tietle">浙江牛人研发的“自动吸鱼器”火了,鱼虾鳝鱼天天吃不完</div>
<div class="name">丽莎爱运动</div>
<div class="bofang">3次观看 · 正在直播</div>
</div>
</li>
<li class="dd">
<div class="dingwei hidden">
<img src="https://pics5.baidu.com/feed/80cb39dbb6fd5266f21d74dd60e1e521d60736cc.jpeg?token=c038382b2d3ad92cd25fa36fc4206b15"
alt="">
<div class="zhibo">直播中</div>
<div class="shuzhi">0:22</div>
</div>
<div class="cont_b hidden">
<img src="./img/touxiang.jpeg" alt="">
<div class="tietle">浙江牛人研发的“自动吸鱼器”火了,鱼虾鳝鱼天天吃不完</div>
<div class="name">丽莎爱运动</div>
<div class="bofang">3次观看 · 正在直播</div>
</div>
</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1 @@
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.173 4.66l4 2.588A4 4 0 0 1 20 10.606V17a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4v-6.394a4 4 0 0 1 1.827-3.358l4-2.588a4 4 0 0 1 4.346 0zM12 12.358a.8.8 0 0 0-.8.8v3.338a.8.8 0 1 0 1.6 0v-3.338a.8.8 0 0 0-.8-.8z" fill="#111622" fill-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 319 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 704 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

View File

@@ -0,0 +1,342 @@
body {
background: #f2f2f2;
}
.header {
padding-left: 0.3rem;
height: 0.9rem;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
left: 0;
top: 0;
background-color:#ffffff;
font-weight: 900;
box-sizing: border-box;
z-index: 999;
}
.header img {
width: 0.2rem;
height: 0.33rem;
}
.header span {
font-size: 0.34rem;
color: #333333;
}
.content {
margin-top: .9rem;
margin-bottom: 1rem;
width: 100%;
box-sizing: border-box;
}
.content .address {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
background: #ffffff;
}
.content .address .address_t {
padding-left: 0.3rem;
padding-top: 0.21rem;
display: flex;
align-items: center;
width: 100%;
}
.content .address .address_t .address_t_l {
width: 100%;
}
.content .address .address_t .address_t_l .top {
font-size: 0.3rem;
color: #333333;
}
.content .address .address_t .address_t_l .top span {
}
.content .address .address_t .address_t_l .top .name {
margin-right: 0.52rem;
font-weight: 600;
}
.content .address .address_t .address_t_l .down {
font-size: 0.24rem;
color: #333333;
margin-top: 0.17rem;
margin-bottom: 0.2rem;
}
.content .address .address_t img {
width: 0.14rem;
height: 0.26rem;
margin-right: 0.3rem;
}
.content .address img {
height: 0.06rem;
margin-bottom: 0;
width: 100%;
}
.content .select {
width: 100%;
background: #ffffff;
font-size: 0.28rem;
color: #333333;
display: flex;
justify-content: space-between;
margin-top: 0.19rem;
padding-top: 0.31rem;
padding-bottom: 0.26rem;
}
.content .select .select_l {
margin-left: 0.26rem;
}
.content .select .select_r {
margin-right: 0.44rem;
}
.content .select .select_r span {}
.content .select .select_r img {
width: 0.31rem;
height: 0.06rem;
}
.content .list {
width: 100%;
margin-top: 0.16rem;
background: #ffffff;
}
.content .list .list_t {
display: flex;
align-items: center;
justify-items: flex-start;
padding-top: 0.2rem;
padding-bottom: 0.17rem;
}
.content .list .list_t .room {
width: 0.24rem;
height: 0.22rem;
margin-left: 0.24rem;
margin-right: 0.06rem;
}
.content .list .list_t span {
font-size: 0.26rem;
color: #333333;
margin-right: 0.16rem;
}
.content .list .list_t .more {
width: 0.1rem;
height: 0.19rem;
}
.content .list ul {
padding-top: 0.29rem;
padding-bottom: 0.28rem;
border-bottom: solid 0.01rem #f2f2f2;
border-top: solid 0.01rem #f2f2f2;
}
.content .list ul li {
display: flex;
justify-content: center;
}
.content .list ul li img {
padding-left: 0.24rem;
width: 2rem;
height: 1.65rem;
margin-right: 0.36rem;
}
.content .list ul li .li_r {
width: 100%;
}
.content .list ul li .li_r .titel {
font-size: 0.28rem;
color: #333333;
width: 3.18rem;
margin-bottom: 0.14rem;
}
.content .list ul li .li_r .color {
display: flex;
justify-content: flex-start;
margin-bottom: 0.18rem;
}
.content .list ul li .li_r .color span {
font-size: 0.2rem;
color: #999999;
margin-right: 0.36rem;
}
.content .list ul li .li_r .Price {
display: flex;
justify-content: space-between;
align-items: center;
}
.content .list ul li .li_r .Price .Price_p {
font-size: 0.34rem;
color: #ea4e3d;
}
.content .list ul li .li_r .Price .Price_n {
font-size: 0.2rem;
color: #999999;
margin-right: 0.76rem;
}
.content .list .list_b {
width: 100%;
box-sizing: border-box;
}
.content .list .list_b .order {
font-size: 0.3rem;
color: #333333;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding-left: 0.3rem;
box-sizing: border-box;
}
.content .list .list_b .order span {
padding-top: 0.3rem;
padding-bottom: 0.28rem;
margin-right: 0.31rem;
width: 1.6rem;
}
.content .list .list_b .order input {
width: 100%;
}
.content .list .list_b .discount {
font-size: 0.24rem;
color: #333333;
border-bottom: solid 0.01rem #f2f2f2;
border-top: solid 0.01rem #f2f2f2;
padding-left: 0.3rem;
}
.content .list .list_b .discount .discount_t {
display: flex;
justify-content: space-between;
padding-top: 0.22rem;
margin-right: 0.26rem;
}
.content .list .list_b .discount .discount_t .jiage{
color: #f09c48;
}
.content .list .list_b .discount .discount_t span {
}
.content .list .list_b .discount .discount_b {
display: flex;
justify-content: space-between;
margin-bottom: 0.16rem;
margin-top: 0.24rem;
}
.content .list .list_b .discount .discount_b span {
margin-right: 0.23rem;
}
.content .list .list_b .gender {
font-size: 0.3rem;
color: #333333;
display: flex;
justify-content: space-between;
margin-right: 0.26rem;
padding-top: 0.3rem;
padding-bottom: 0.25rem;
padding-left: 0.3rem;
}
.content .list .list_b .gender .zongjia {
font-size: 0.34rem;
color: #ea4e3d;
}
.footer {
width: 100%;
height: 1rem;
position: fixed;
left: 0;
bottom: 0;
background-color:#ffffff;
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 0.22rem;
box-sizing: border-box;
z-index: 999;
}
.footer .footer_sum {
font-size: 0.26rem;
color: #c6c6c6;
}
.footer .heji {
font-size: 0.26rem;
color: #999999;
margin-left: 0.14rem;
margin-right: 0.27rem;
}
.footer .footer_m {
font-size: 0.24rem;
color: #000000;
font-weight: 600;
}
.footer .monery {
font-size: 0.3rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.2rem;
letter-spacing: 0.007rem;
color: #000000;
margin-left: 0.06rem;
margin-right: 0.42rem;
font-weight: 600;
}
.footer .sum {
font-size: 0.28rem;
color: #ffffff;
width: 1.92rem;
height: 0.66rem;
background-color: #5697f4;
border-radius: 0.33rem;
display: flex;
align-items: center;
justify-content: center;
margin-right: 0.24rem;
}

View File

@@ -0,0 +1,161 @@
<!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">
<title>22</title>
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="./22.css">
<script src="../js/rem.js"></script>
</head>
<body>
<div class="header line">
<img src="./img/fanhui.png" alt="">
<span>填写订单</span>
<div></div>
</div>
<div class="content">
<div class="address">
<div class="address_t">
<div class="address_t_l">
<div class="top">
<span class="name">张晓明</span>
<span>186****0019</span>
</div>
<div class="down">
上海市黄浦区中山南路128号千古美城1楼1210室
</div>
</div>
<img src="./img/more.png" alt="">
</div>
<img src="./img/bule.png" alt="">
</div>
<div class="select">
<div class="select_l">选择支付方式</div>
<div class="select_r">
<span>在线支付</span>
<img src="./img/dian.png" alt="">
</div>
</div>
<div class="list">
<div class="list_t">
<img class="room" src="./img/room.png" alt="">
<span>路易斯女装旗舰店</span>
<img class="more" src="./img/more.png" alt="">
</div>
<ul>
<li>
<img src="./img/chanping.png" alt="">
<div class="li_r">
<div class="titel">真丝连衣裙2019春夏新款
杭州大牌气质修……</div>
<div class="color">
<span>颜色:黑白</span>
<span>尺码:L</span>
</div>
<div class="Price">
<span class="Price_p">¥160.00</span>
<span class="Price_n">X1</span>
</div>
</div>
</li>
</ul>
<div class="list_b">
<div class="order">
<span>订单备注</span>
<input type="text" placeholder="有什么想对商家留言的可以在这里说">
</div>
<div class="discount">
<div class="discount_t">
<span>优惠抵用</span>
<span class="jiage">¥5</span>
</div>
<div class="discount_b">
<span>快递费用</span>
<span>免费包邮</span>
</div>
</div>
<div class="gender">
<span>商品金额</span>
<span class="zongjia">¥155.00</span>
</div>
</div>
</div>
<div class="list">
<div class="list_t">
<img class="room" src="./img/room.png" alt="">
<span>路易斯女装旗舰店</span>
<img class="more" src="./img/more.png" alt="">
</div>
<ul>
<li>
<img src="./img/chanping.png" alt="">
<div class="li_r">
<div class="titel">真丝连衣裙2019春夏新款
杭州大牌气质修……</div>
<div class="color">
<span>颜色:黑白</span>
<span>尺码:L</span>
</div>
<div class="Price">
<span class="Price_p">¥160.00</span>
<span class="Price_n">X1</span>
</div>
</div>
</li>
<li>
<img src="./img/chanping.png" alt="">
<div class="li_r">
<div class="titel">真丝连衣裙2019春夏新款
杭州大牌气质修……</div>
<div class="color">
<span>颜色:黑白</span>
<span>尺码:L</span>
</div>
<div class="Price">
<span class="Price_p">¥160.00</span>
<span class="Price_n">X1</span>
</div>
</div>
</li>
</ul>
<div class="list_b">
<div class="order">
<span>订单备注</span>
<input type="text" placeholder="有什么想对商家留言的可以在这里说">
</div>
<div class="discount">
<div class="discount_t">
<span>优惠抵用</span>
<span class="jiage">¥5</span>
</div>
<div class="discount_b">
<span>快递费用</span>
<span>免费包邮</span>
</div>
</div>
<div class="gender">
<span>商品金额</span>
<span class="zongjia">¥315.00</span>
</div>
</div>
</div>
</div>
<div class="footer">
<span class="footer_sum">共3件,</span>
<span class="heji">合计:</span>
<span class="footer_m">¥</span>
<span class="monery">5999.00</span>
<div class="sum">结算(2)</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,313 @@
body {
/* width: 100%;
background: url(./img/backgruod.png);
background-size: 100%; */
}
.header {
height: 0.9rem;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
left: 0;
top: 0;
padding: 0 0.37rem;
box-sizing: border-box;
}
.header .header_l {
width: 0.42rem;
height: 0.42rem;
}
.header .header_c {
display: flex;
justify-content: flex-start;
}
.header .header_c li {
font-size: 0.3rem;
color: #fefefe;
text-shadow: 0.01rem 0.01rem white;
letter-spacing: 0.04rem;
}
.header_c .active{
position: relative;
}
.header_c .active::after{
content: "";
position: absolute;
height: 0.03rem;
width: 0.4rem;
background: white;
bottom: -0.12rem;
left: 50%;
transform: translateX(-50%);
}
.header .header_r {
width: 0.43rem;
height: 0.43rem;
}
.content {
position: relative;
height: calc(100vh - 1rem);
}
.content_img {
width: 100%;
height: calc(100vh - 1rem);
object-fit: cover;
}
.content .content_l {
position: absolute;
bottom: 0;
left: 0.3rem;
}
.content .content_l .address {
display: flex;
align-items: center;
}
.content .content_l .address img {
width: 0.28rem;
height: 0.26rem;
/* margin-left: 0.37rem; */
margin-right: 0.1rem;
}
.content .content_l .address .didian {
font-size: 0.26rem;
color: #ffc600;
}
.content .content_l .shopping {
display: flex;
justify-content: flex-start;
align-items: center;
background-color: #ffffff;
width: 5.85rem;
height: 1.68rem;
/* margin-left: 0.3rem; */
margin-top: 0.22rem;
}
.content .content_l .shopping img {
width: 1.48rem;
height: 1.48rem;
margin-left: 0.09rem;
}
.content .content_l .shopping .shopping_l {
margin-left: 0.15rem;
position: relative;
flex: 1;
}
.content .content_l .shopping .shopping_l .title{
font-size: 0.28rem;
color: #333333;
margin-top: 0.28rem;
}
.content .content_l .shopping .shopping_l .jiage{
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 0.18rem;
margin-bottom: 0.23rem;
}
.content .content_l .shopping .shopping_l .jiage span{
font-size: 0.28rem;
color: #333333;
}
.content .content_l .shopping .shopping_l .jiage .jingxuan{
font-size: 0.2rem;
color: #fffefe;
width: 0.6rem;
height: 0.24rem;
background-color: #ea4e3d;
border-radius: 0.12rem;
display: flex;
align-items: center;
justify-content: center;
margin-left: 0.03rem;
}
.content .content_l .shopping .shopping_l .sell {
font-size: 0.2rem;
color: #626262;
margin-bottom: 0.17rem;
}
.content .content_l .shopping .shopping_l .tubiao {
width: 0.46rem;
height: 0.46rem;
background-color: #333333;
border-radius: 100%;
position: absolute;
bottom: 0.17rem;
right: 0.34rem;
display: flex;
align-items: center;
}
.content .content_l .shopping .shopping_l .tubiao img {
width: 0.27rem;
height: 0.27rem;
}
.content .content_l .music {
display: flex;
align-items: center;
margin-top: 0.27rem;
}
.content .content_l .music img {
width: 0.27rem;
height: 0.28rem;
/* margin-left: 0.3rem; */
margin-right: 0.13rem;
}
.content .content_l .music .music_name{
font-size: 0.24rem;
color: #ffffff;
}
.content .content_r {
position: absolute;
z-index: 1;
bottom: 0.14rem;
right: 0.19rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 0;
}
.content .content_r li {
font-size: 0.2rem;
color: #ffffff;
}
.content .content_r .touxiang {
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
}
.content .content_r .touxiang .tou {
width: 0.96rem;
height: 0.97rem;
border: 0.03rem solid #ffffff;
border-radius: 50%;
}
.content .content_r .touxiang .add {
width: 0.34rem;
height: 0.33rem;
border-radius: 50%;
background-color: #ea4e3d;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 0.3rem;
bottom: -7px;
}
.content .content_r .touxiang .add img{
width: 0.23rem;
height: 0.23rem;
}
.content .content_r .dianzan {
text-align: center;
}
.content .content_r .dianzan img {
width: 0.68rem;
height: 0.63rem;
margin-top: 0.35rem;
}
.content .content_r .dianzan p {}
.content .content_r .share {
text-align: center;
}
.content .content_r .share img {
width: 0.67rem;
height: 0.8rem;
margin-bottom: 0.08rem;
margin-top: 0.2rem;
}
.content .content_r .share p {}
.content .content_r .pinglun {
text-align: center;
}
.content .content_r .pinglun img {
width: 0.7rem;
height: 0.7rem;
margin-top: 0.2rem;
}
.content .content_r .pinglun p {
margin-top: 0.13rem;
}
.content .content_r .shopping {
text-align: center;
}
.content .content_r .shopping img {
width: 0.61rem;
height: 0.61rem;
margin-top: 0.28rem;
}
.content .content_r .shopping p {
margin-top: 0.08rem;
}
.footer{
height: 1rem;
width: 100%;
position: fixed;
bottom: 0;
right: 0;
background-color: #141414;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 0.39rem;
padding-right: 0.54rem;
box-sizing: border-box;
z-index: 999;
}
.footer li {
font-size: 0.24rem;
color: #ffffff;
}
.footer .active{
font-size: 0.3rem;
color: #ffffff;
position: relative;
}
.footer .active::after{
content: "";
position: absolute;
height: 0.03rem;
width: 0.4rem;
background: white;
bottom: -0.12rem;
left: 50%;
transform: translateX(-50%);
}

View File

@@ -0,0 +1,93 @@
<!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">
<title>39</title>
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./39.css">
<script src="./js/rem.js"></script>
</head>
<body>
<div class="header">
<img class="header_l" src="./img/sao.png" alt="">
<ul class="header_c">
<li class="active" >推荐</li>
<li>关注</li>
<li>直播</li>
</ul>
<img class="header_r" src="./img/search.png" alt="">
</div>
<div class="content">
<img class="content_img" src="./img/backgruod.png" alt="">
<div class="content_l">
<div class="address">
<img src="./img/shop.png" alt="">
<div class="didian"> 美林美妆合肥店 >7KM</div>
</div>
<div class="shopping">
<img src="./img/shangping.png" alt="">
<div class="shopping_l">
<div class="title">夏季网纱半身裙中长款纱……</div>
<div class="jiage">
<span>¥68.00</span>
<div class="jingxuan">精选</div>
</div>
<div class="sell">
已卖1020
</div>
<div class="tubiao">
<img src="./img/car.png" alt="">
</div>
</div>
</div>
<div class="music">
<img src="./img/music.png" alt="">
<div class="music_name">你像花儿一样美(DJ)版</div>
</div>
</div>
<ul class="content_r">
<li class="touxiang">
<img class="tou" src="./img/tou.png" alt="">
<div class="add">
<img src="./img/jia.png" alt="">
</div>
</li>>
<li class="dianzan">
<img src="./img/heart.png" alt="">
<p>71.1W</p>
</li>
<li class="share">
<img src="./img/share.png" alt="">
<p>分享</p>
</li>
<li class="pinglun">
<img src="./img/comment.png" alt="">
<p>评论</p>
</li>
<li class="shopping">
<img src="./img/shopping.png" alt="">
<p>购物袋</p>
</li>
</ul>
</div>
<ul class="footer">
<li class="active">
首页
</li>
<li>好友</li>
<li>圈子</li>
<li>购物车</li>
<li>我的</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,24 @@
/* 清除浏览器默认样式 */
body,h1,h2,h3,h4,h5,h6,ul,li,p {
margin: 0;
padding: 0;
}
html {
font-size: 0;
}
li {
list-style: none;
}
input {
border: none;
outline: none;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 999 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

View File

@@ -0,0 +1,12 @@
; (function (doc, win, undefined) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (clientWidth === undefined) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (doc.addEventListener === undefined) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);

View File

@@ -0,0 +1,27 @@
/* 公共使用率高的css代码 */
.themeColor {
color: #969696;
}
.line::after {
content: " ";
position: absolute;
width: 100%;
bottom: 0;
height: 1px;
left: 0;
background: #cfcfcf;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.line::after {
transform: scaleY(0.5);
}
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.line::after {
transform: scaleY(0.33);
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1,17 @@
<!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">
<title>Document</title>
</head>
<body>
</body>
<script>
var ajax = new XMLHttpRequest()
</script>
</html>

View File

@@ -0,0 +1,24 @@
/* 清除浏览器默认样式 */
body,h1,h2,h3,h4,h5,h6,ul,li,p {
margin: 0;
padding: 0;
}
html {
font-size: 0;
}
li {
list-style: none;
}
input {
border: none;
outline: none;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}

View File

@@ -0,0 +1,27 @@
/* 公共使用率高的css代码 */
.themeColor {
color: #969696;
}
.line::after {
content: " ";
position: absolute;
width: 100%;
bottom: 0;
height: 1px;
left: 0;
background: #cfcfcf;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.line::after {
transform: scaleY(0.5);
}
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.line::after {
transform: scaleY(0.33);
}
}

View File

@@ -0,0 +1,12 @@
; (function (doc, win, undefined) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (clientWidth === undefined) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (doc.addEventListener === undefined) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);

View File

@@ -0,0 +1,193 @@
<!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">
<title>红包雨</title>
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
img {
width: 80px;
height: 96px;
position: fixed;
top: -96px;
}
.dialog {
position: fixed;
width: 100%;
height: 100%;
background: #0000008c;
z-index: 9999;
display: none;
}
.center {
width: 40%;
background: #fff;
padding: 15px 10px;
border-radius: 4px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.title {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ebe9e9;
}
.content {
padding: 20px 0;
text-align: center;
}
.footer {
display: flex;
justify-content: flex-end;
}
.footer .ok {
padding: 3px 15px;
background: #2a6bf4;
color: #fff;
font-size: 13px;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="dialog">
<div class="center">
<div class="title">提示</div>
<div class="content"></div>
<div class="footer">
<div class="ok">确定</div>
</div>
</div>
</div>
</body>
<script>
// 1 随机创建 红包
// 获取屏幕宽度(x),减去 红包的宽度,高度-
// 2 红包运动
//
// 3 点击开红包
//
var { clientWidth, clientHeight } = document.body;
var createdNumber = null, clickImg = null, count = 0;
// 创建红包
function CreatedHb() {
var img = document.createElement("img");
var x = Math.random() * (clientWidth - 80)
img.src = "./hb.png";
img.move = 0;
img.style.left = `${x}px`;
img.onclick = () => {
count += 1;
if (count <= 3) {
clickImg = img;
clearInterval(createdNumber)
_("img").forEach(v => {
clearTimeout(v.time)
})
WinPrize();
} else {
$(".content").innerText = "三次抽奖已经用完"
$(".dialog").style.display = "block"
}
}
$("body").appendChild(img)
motion(img, -96)
}
function WinPrize() {
$(".dialog").style.display = "block"
var num = Math.random();
if (num > 0 && num <= 0.5) {
$(".content").innerText = "恭喜您中了九折"
} else if (num > 0.51 && num <= 0.995) {
$(".content").innerText = "恭喜您中了八折"
} else {
$(".content").innerText = "恭喜您中了五折"
}
}
// 关闭按钮
$(".footer .ok").onclick = () => {
$(".dialog").style.display = "none"
$("body").removeChild(clickImg)
clearTimeout(clickImg.time)
_("img").forEach(v => {
motion(v, -96)
})
auto();
}
function motion(el, top) {
el.time = setTimeout(function fn() {
el.move += 4;
if (el.move > (clientHeight + 96)) {
$("body").removeChild(el)
clearTimeout(el.time)
} else {
el.style.top = `${top + el.move}px`
el.time = setTimeout(fn, 1000 / 60)
}
}, 1000 / 60)
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
function auto() {
createdNumber = setInterval(() => {
CreatedHb()
}, 500)
}
auto()
</script>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

View File

@@ -0,0 +1,38 @@
<!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">
<title>Document</title>
</head>
<body>
<button>点我</button>
<div style="display: block;" class="text">哈哈哈哈</div>
</body>
<script>
var button = $("button"), text = $(".text");
//定义一个变量存放html的button 以及class为text的div
button.onclick = function() {
//定义按钮点击事件
if (text.style.display == "block") {
text.style.display = "none"
//如果当前div显示就让它隐藏
} else {
text.style.display = "block"
text.style.color = `hsl(${Math.random() * 360},100%,50%)`
//否则就让它显示 并且设置随机颜色 random()是从0——1中随机生成一个随机数
}
}
function $(className) {
return document.querySelector(className)
}
//定义一个通用方法传递className的值
</script>
</html>

View File

@@ -0,0 +1,85 @@
<!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">
<title>Document</title>
<style>
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 10px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<ul class="title">
<li class="active">首页</li>
<li>社会</li>
<li>军事</li>
<li>科技</li>
</ul>
<ul class="content">
<li class="active">首页 的内容</li>
<li>社会 的内容</li>
<li>军事 的内容</li>
<li>科技 的内容</li>
</ul>
</body>
<script>
var titleLi = _(".title li"),contentLi = _(".content li")
//定义一个变量存放所有html里面title content 里面的li
titleLi.forEach(function(v,i){
//对titleli 进行遍历 v存放titleli里面的值 i存放的是下标
v.onclick = function () {
//对v(titleli里面的值)设置点击事件
titleLi.forEach(function(value,item){
//再次对titleli进行遍历 value存放titleli里面的值 item存放的是下标
value.className = ""
//对所有titleli里面的数值class属性设为空值
contentLi[item].className = ""
//对所有contentLi里面的数值class属性设为空值(因为下标相对应)
})
v.className = "active"
//对点击的v设置 active 属性
contentLi[i].className = "active"
//因为titleli 和 contentli 里面的下标相对应 所以contentli也可以使用
//并且给contentli 用下标对应的li 也设置 active 属性
}
})
function _(className){
return document.querySelectorAll(className)
}
//querySelectorAll 设置所有元素
</script>
</html>

View File

@@ -0,0 +1,203 @@
<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">
<title>Document</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.hearder {
width: 100%;
height: 45px;
position: fixed;
left: 0;
right: 0;
top: 0;
background: #fff;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
box-sizing: border-box;
border-bottom: 1px solid #dadada;
}
.hearder img {
width: 20px;
height: 20px;
}
.content {
margin-top: 45px;
}
.content li {
height: 40px;
display: flex;
align-items: center;
border-bottom: 1px solid #dadada;
padding: 0 10px;
}
.refresh {
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
position: fixed;
left: 50%;
z-index: 998;
background: #fff;
border-radius: 100%;
box-shadow: 0px 0px 9px #858585;
margin-left: -15px;
transition: all 0.1s;
}
.refresh img {
width: 100%;
height: 100%;
}
.rotate {
animation: rotateAction 1s linear infinite;
}
@keyframes rotateAction {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="hearder">
<span>热门视频</span>
</div>
<ul class="content">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
<li>列表7</li>
<li>列表8</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
<li>列表7</li>
<li>列表8</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
<li>列表7</li>
<li>列表8</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
<li>列表7</li>
<li>列表8</li>
</ul>
<div class="refresh" style="top: 10px;">
<img src="./img/refrash.png" alt="">
</div>
</body>
<script>
var startY = 0, moveY = 0, endY = 0;
if (isTop()) {
addMove();
} else {
window.addEventListener(`scroll`, () => isTop() ? addMove() : '')
console.log(isTop());
}
function addMove() {
$(".content").addEventListener('touchstart', (e) => {
startY = e.targetTouches[0].pageY;
});
$(".content").addEventListener('touchstart', (e) => {
if(isTop()) {
moveY = e.targetTouches[0].pageY;
if (moveY > startY) {
e.preventDefault();
var sTop = moveY - startY;
if(sTop > 120) {
$(".refresh").style = `
top :${sTop}px
transform: rotate(${sTop * 3}deg)
`;
}
}
}
});
$(".content").addEventListener('touchend', (e) => {
endY = e.changedTouches[0].pageY;
var eTop = endY - startY;
if (eTop <= 60) {
$(".refresh").style = `
top: 10px;
transform: rotate(0deg);
`;
}else {
$(".refresh").className = "refresh rotate"
$(".refresh").style = `
top: 80px;
transform: rotate(0}deg);
`;
setTimeout(() => {
$(".refresh").style = `
top: 10px;
transform: rotate(0deg);
`;
$(".refresh").className = "refresh"
}, 2000)
}
});
}
function isTop() {
return document.documentElement.scrollTop == 0 ? true : false
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,97 @@
<!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">
<title>右键菜单</title>
<style>
body {
height: 100vh;
}
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 152px;
border-radius: 6px;
box-shadow: 2px 2px 9px #d7d7d7;
display: none;
position: fixed;
}
li {
height: 40px;
padding: 0 15px;
box-sizing: border-box;
line-height: 40px;
}
</style>
</head>
<body>
<ul>
<li>新建文件夹</li>
<li>上传文件</li>
<li>上传文件夹</li>
<li>刷新网页</li>
</ul>
</body>
<script>
$("body").oncontextmenu = function (e) {
//设置在网页上的右击事件 并且(e)代表的是右击事件的形参
e.preventDefault();
//取消网页上自带的右击事件
var { x, y } = e;
var { w, h } = document.body;
//定义两个数组一个存放当前右击的x轴 y轴坐标
//另一个存放页面的宽和高 注意:要给boby设置高度
if (w - x < 152 && h - y < 160) {
//如果屏幕宽度减去当前右击x轴坐标小于我们所定义元素宽度
// 并且屏幕高度减去当前右击y轴坐标小于我们所定义元素高度时
$("ul").style = `
top: ${y - 160}px;
left: ${x - 152}px;
display: block;
`
//我们所定义的元素所在位置为元素自身所在的x,y轴减去元素本身的宽高
//也就是当在右下角点击时弹窗在左上
} else if (w - x < 152) {
$("ul").style = `
top: ${y}px;
left: ${x - 152}px;
display: block;
`
//
} else if (h - y < 160) {
$("ul").style = `
top: ${y - 160}px;
left: ${x}px;
display: block;
`
} else {
$("ul").style = `
top: ${y}px;
left: ${x}px;
display: block;
`
}
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,81 @@
<!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">
<title>Document</title>
<style>
body {
height: 100vh;
}
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
span {
position: fixed;
}
</style>
</head>
<body>
</body>
<script>
var textArr = ['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善'];
var index = 0;
$("body").onclick = function (e) {
var {x , y} = e;
var span = document.createElement("span");
span.innerText = textArr[index]
span.style = `
left:${x}px;
top: ${y}px;
`;
index++
index > 11 ? index = 0 :''
span.move = 0
$("body").appendChild(span)
function motion() {
span.move += 4;
if (span.move > 100) {
setTimeout(() => $("body").removeChild(span), 300)
// clearTimeout(time)
cancelAnimationFrame(time)
} else {
span.style.top = `${y - span.move}px`
time = requestAnimationFrame(motion)
}
}
motion ()
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,67 @@
<!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">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="请输入关键字">
<ul>
</ul>
</body>
<script>
var arr = ['今天天气真好', 'html学习', '不喜欢html', '热爱学习', '天气不好,是阴天', '不喜欢学习'];
//定义一个数组
var cunfang = [], input = $("input");
//定义一个空数组 以及一个变量
input.oninput = function () {
//定义一个用户在input搜索框中输入时发生事件
cunfang = []
//数组清空
if (input.vlue != 0) {
//当搜索框有有数据时
arr.forEach(function (v, i) {
//通过foreach遍历arr数组中的所有元素存放在v中,下标在i中
if (v.includes(input.vlue)) {
//通过includes判断输入时的值是否在arr数组中
var span = `<span style="color:red">${input.vlue}</span>`
cunfang.push(v.replace(input.vlue, span))
//如果在向cunfang数组添加v中的值并且使相同字符串变成红色
}
});
renderLi();
//调用renderLi函数
}
else {
$("ul").innerHTML = ""
//否则就清空
}
}
function renderLi() {
$("ul").innerHTML = ""
//先清空字符串
cunfang.forEach(function (v, i) {
$("ul").innerHTML += `<li>${v}</li>`
//再遍历cunfang组数向里面添加v值
})
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,170 @@
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
width: 100%;
height: 100vh;
background-image: url("../img/back.png");
background-size: contain;
/* 等比缩放,按照某一边来覆盖显示区域的,若区域大于图片的比例,会有白边,图片不会变形 */
position: relative;
overflow: hidden;
/* 超过部分隐藏 */
user-select: none;
/* 属性规定是否能选取元素的文本 */
}
.ground {
position: absolute;
width: 100%;
height: 112px;
/* 高度为图片本身高度 */
left: 0;
right: 0;
bottom: 0;
}
.pause {
z-index: 1111;
}
.ground img {
position: absolute;
width: 100%;
height: 100%;
}
.bird {
width: 34px;
height: 24px;
position: absolute;
left: 100px;
transition: all linear 0.15s;
/* 设置所有属性都有动画属性 以相同速度开始至结束的过渡效果 */
z-index: 999;
}
.result {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 30px;
z-index: 999;
}
.up {
transform: rotate(-38deg);
}
.down {
transform: rotate(90deg);
}
.sg {
width: 55px;
position: absolute;
}
@keyframes birdShake {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(0px);
}
}
/* 定义一个动画实现来回移动的过程 */
@keyframes yellowbird {
0% {
background: url("../img/hn1.png");
}
50% {
background: url("../img/hn2.png");
}
100% {
background: url("../img/hn3.png");
}
}
@keyframes bluebird {
0% {
background: url("../img/ln1.png");
}
50% {
background: url("../img/ln2.png");
}
100% {
background: url("../img/ln3.png");
}
}
@keyframes redbird {
0% {
background: url("../img/red1.png");
}
50% {
background: url("../img/red2.png");
}
100% {
background: url("../img/red3.png");
}
}
/* 定义一个动画使小鸟有3种动作 */
/* .bird_one {
background: url("../img/hn1.png");
} */
/* 小鸟的初始状态 */
.start {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -40%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 999;
}
.start .difficulty {
cursor: pointer;
background: #00000036;
font-size: 20px;
border-radius: 4px;
}
.start .difficulty .simpleMode{
margin-bottom: 10px;
}
.niao {
position: absolute;
top: 55%;
left: 45%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.niao .yellow {
margin-right: 20px;
}
.niao .blue {
margin-right: 20px;
}
.start .reset {
width: 60px;
margin-top: 20px;
cursor: pointer;
/* 是在计算机中将光标呈现为指示链接的指针(一只手) */
}
.show {
display: block;
}
.hidden {
display: none;
}
/* 定义两个通用css */

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Some files were not shown because too many files have changed in this diff Show More