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,148 @@
.head{
width: 1190px;
margin: 0 auto;
}
.up{
overflow: hidden;
height: 46px;
margin-bottom: 8px;
width: 100%;
}
.up img{
width: 128px;
height: 40px;
float: left;
}
.search{
float: left;
overflow: hidden;
}
.together{
margin-left: 16px;
float: left;
display: inline-block;
border: 2px solid #4662d9;
border-radius: 8px 0 0 8px;
border-right: none;
}
.des{
float: left;
overflow: hidden;
display: inline-block;
height: 39px;
line-height: 39px;
}
.des span{
float: left;
color: #9195a3;
font-size: 12px;
padding-left: 14px;
padding-right: 3px;
}
.des i{
float: left;
font-size: 12px;
}
.search input{
float: left;
border: none;
outline: none;
padding: 10px 33px 10px 15px;
width: 400px;
font-size: 16px;
color: #9195b8;
}
.search input:focus{
border: none;
outline:none;
}
.point{
float: left;
width: 18px;
height: 18px;
border-radius: 20px;
font-size: 12px;
background-color: #FC561F;
text-align: center;
line-height: 18px;
color: white;
margin-top: 9px;
margin-right: 12px;
}
.search button{
float: left;
font-size: 17.5px;
background: #4E6EF2;
color: #fff;
border: 2px solid #4662d9;
border-radius: 0 8px 8px 0;
border-left: none;
padding: 8px 24px 8px 24px;
}
.other{
float: left;
}
.other li{
font-size: 12px;
list-style: disc;
margin-left: 42px;
width: 120px;
color: #999;
margin-top: 8px;
}
/* 更改圆点大小伪类选择器 */
.other li::marker{
font-size: 18px;
background-color: #999;
}
.other li:hover{
color: crimson;
text-decoration: underline;
}
.down{
overflow: hidden;
width: 669px;
margin-left: 160px;
}
.down ul{
float: left;
width: calc(100% - 16px);
}
.down li{
color: #333;
font-size: 13px;
float: left;
margin-right: 18px;
}
.down i{
float: left;
}
.down li > p{
display: inline-block;
}
.down li > p:nth-child(2){
background-color: #FF455B;
width: 16px;
height: 16px;
border-radius: 4px;
color: #fff;
text-align: center;
line-height: 16px;
}

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>Document</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_3447676_osrf8u8rgh.css">
<link rel="stylesheet" href="clear.css">
<link rel="stylesheet" href="Jpublic.css">
<link rel="stylesheet" href="Baidu.css">
</head>
<body>
<div class="head">
<div class="up">
<img src="https://dss2.bdstatic.com/5bVYsj_p_tVS5dKfpU_Y_D3/res/r/image/2021-3-4/hao123%20logo.png" alt="显示错误">
<div class="search">
<div class="together">
<div class="des">
<span>网页</span>
<i class="iconfont icon-xiala"></i>
</div>
<input type="text" placeholder="请输入查询文字">
<div class="point">3</div>
</div>
<button>百度一下</button>
</div>
<ul class="other">
<li>男子登顶珠峰后411天辗转7国回国</li>
</ul>
</div>
<div class="down">
<ul>
<li>
刘洋三来拍:挥手、敬礼、比心
</li>
<li>
<p>是谁在缔造越南经济神话?</p>
<p>新</p>
</li>
<li>
刘洋三来拍:挥手、敬礼、比心
</li>
<li>
刘洋三来拍:挥手、敬礼、比心
</li>
<li>
<p>刘洋三来拍:挥手、敬礼、比心</p>
<p>新</p>
</li>
<li>
<p>刘洋三来拍:挥手、敬礼、比心</p>
<p>新</p>
</li>
</ul>
<i class="iconfont icon-xiala"></i>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,147 @@
.kind{
width: 935px;
margin: 0 auto;
}
.head{
overflow: hidden;
margin-bottom: 12px;
}
.head p{
font-size: 14px;
color: #072;
float: left;
}
.head span{
font-size: 12px;
float: left;
}
.head a{
color: #37a;
}
.head a:hover{
background-color: #37a;
color: white;
}
.content{
overflow: hidden;
}
.content_l{
float: left;}
.content_l ul{
width: 350px;
overflow: hidden;
margin-right: 30px;
}
.content_l li{
float: left;
margin: 10px 10px 0 0;
}
.content_l li:nth-child(2n){
margin-right: 0;
}
.content_l li img{
width: 170px;
height: 170px;
}
.content_l li a{
color: #37a;
font-size: 12px;
}
.content_l li span{
color: #999;
font-size: 12px;
}
.content_l li a:hover{
background-color: #37a;
color: white;
}
.content_m{
float: left;
width: 275px;
}
.content_m a{
color: #37a;
font-size: 12px;
}
.top .introduce{
color: #999;
font-size: 12px;
}
.top p{
color: #666;
font-size: 12px;
}
.content_m .down{}
.content_m .down li{
margin-top: 12px;
}
.content_m a:hover{
background-color: #37a;
color: white;
}
.content_r{
float: left;
margin-left: 30px;
}
.content_r .up{
width: 250px;
height: 125px;
background-size: 100%;
background-image: url("https://img9.doubanio.com/view/dale-online/dale_ad/public/d699ff43c998a56.jpg");
padding-top:101px;
padding-left: 218px;
box-sizing: border-box;
margin-bottom: 10px;
}
.up .ad{
font-size: 12px;
padding: 4px;
color: rgb(255, 255, 255);
background-color: rgba(0, 0, 0, 0.3);
display: inline-block;
}
.content_r .middle{
margin-bottom: 12px;
}
.content_r .middle p{
font-size: 14px;
color: #072;
display: inline-block;
}
.content_r .middle span{
font-size: 12px;
}
.content_r .middle span:hover{
background-color: #37a;
color: white;
}
.button a{
color: #37a;
font-size: 14px;
margin-bottom: 6px;
}
.button p{
color: #aaaaaa;
font-size: 13px;
margin-bottom: 15px;
}
.button a:hover{
background-color: #37a;
color: white;
}

View File

@@ -0,0 +1,126 @@
<!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="clear.css">
<link rel="stylesheet" href="Jpublic.css">
<link rel="stylesheet" href="Douban.css">
</head>
<body>
<div class="kind">
<div class="head">
<p>
热点内容&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·
</p>
<span>(&nbsp;<a href="">更多</a>&nbsp;)</span>
</div>
<div class="content">
<div class="content_l">
<ul>
<li>
<img src="https://img3.doubanio.com/view/photo/albumcover/public/p2553611440.webp" alt="">
<div class="des">
<a href="">不能进入历史的历史</a>
<span>&nbsp;19张照片</span>
</div>
</li>
<li>
<img src="https://img3.doubanio.com/view/photo/albumcover/public/p2433358700.webp" alt="">
<div class="des">
<a href="">練習簿 | sketchbook</a>
<span>&nbsp;30张照片</span>
</div>
</li>
<li>
<img src="https://img2.doubanio.com/view/photo/albumcover/public/p2396530441.webp" alt="">
<div class="des">
<a href="">我的宾得67II日记</a>
<span>&nbsp;199张照片</span>
</div>
</li>
<li>
<img src="https://img1.doubanio.com/view/photo/albumcover/public/p2633666057.webp" alt="">
<div class="des">
<a href="">好好吃早饭</a>
<span>&nbsp;330张照片</span>
</div>
</li>
</ul>
</div>
<div class="content_m">
<div class="top">
<a href="">叶芝和他的拜占庭诗篇</a>
<p class="introduce">purplepine的日记</p>
<p>去年四月,赋闲在家的我偶然地和一位朋友译起了叶芝的诗。此前我对这位二十世纪的大诗人和现代主义文学奠基人所知甚少,这样直接上手翻译,一开始自然如行雾中,但不带先入...</p>
</div>
<div class="down">
<ul>
<li>
<a href="">根据真实案件改编的悬疑小说:死去的人,真的会为了复仇而活过来吗?</a>
</li>
<li>
<a href="">论家庭关系里好好说话的重要性</a>
</li>
<li>
<a href="">男友为我过生日没花一分钱,该不该分手?</a>
</li>
<li>
<a href="">媒介蒙太奇 之 观看奥运</a>
</li>
<li>
<a href="">两个月108公里,业余游泳爱好者路在何方</a>
</li>
<li>
<a href="">一名平凡读者的买书总结</a>
</li>
</ul>
</div>
</div>
<div class="content_r">
<div class="up">
<div class="ad">广告</div>
</div>
<div class="middle">
<p>热点话题&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·</p>
<span>(&nbsp;<a href="">去话题广场</a>&nbsp;)</span>
</div>
<div class="button">
<ul>
<li>
<a href="">你记忆中的粽子味道</a>
<p>2.3万次浏览</p>
</li>
<li>
<a href="">各地端午习俗考</a>
<p>120.1万次浏览</p>
</li>
<li>
<a href="">端午包粽子大赛</a>
<p>120.7万次浏览</p>
</li>
<li>
<a href="">看展记</a>
<p>9456.5万次浏览</p>
</li>
<li>
<a href="">那些沉睡在城市中的“烂尾楼”</a>
<p>新话题 · 8419次浏览</p>
</li>
<li>
<a href="">囤物癖的居家生活指南</a>
<p>10.1万次浏览</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,71 @@
.content{
width: 280px;
}
.up {
width: 100%;
font-size: 14px;
color: #969696;
margin-bottom: 15px;
display: inline-block;
box-sizing: border-box;
}
.up .other i{
font-size: 14px;
}
.middle{
width: 100%;
}
.middle li{
overflow: hidden;
margin-bottom: 15px;
}
.middle li img{
width: 48px;
height: 48px;
border-radius: 50%;
margin-right: 10px;
}
.middle li .name .name_up{
width: calc(280px - 58px);
}
.middle li .name .name_up .name_up_l{
color: #333;
font-size: 14px;
padding-top: 5px;
margin-right: 60px;
}
.middle li .name .name_up .name_up_r{
color: #42c02e;
font-size: 13px;
margin-top: 5px;
}
.middle li .name .name_up .name_up_r i{
font-size: 13px;
}
.middle li .name .name_bottom{
color: #969696;
font-size: 12px;
margin-top: 7px;
}
.down{
border: 1px solid #dcdcdc;
background-color:#f7f7f7;;
border-radius: 4px;
font-size: 13px;
color: #787878;
text-align: center;
line-height: 35.229px;
height: 35.229px;
}
.down span{}
.down i{
font-size: 12px;
font-weight: 600;
}

View File

@@ -0,0 +1,94 @@
<!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_3447676_7otp41co3fx.css">
<link rel="stylesheet" href="clear.css">
<link rel="stylesheet" href="Jpublic.css">
<link rel="stylesheet" href="J.css">
<body>
<div class="content">
<div class="up hidden">
<div class="author left">推荐作者</div>
<div class="other right">
<i class="iconfont icon-shuaxin"></i>
<span>换一批</span>
</div>
</div>
<ul class="middle">
<li>
<img class="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="name left">
<div class="name_up hidden">
<div class="name_up_l left">卢璐说</div>
<div class="name_up_r right">
<i class="iconfont icon-jiahao1"></i>
<span>关注</span>
</div>
</div>
<div class="name_bottom">写了2154.9k字 · 34.8k喜欢</div>
</div>
</li>
<li>
<img class="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="name left">
<div class="name_up hidden">
<div class="name_up_l left">卢璐说</div>
<div class="name_up_r right">
<i class="iconfont icon-jiahao1"></i>
<span>关注</span>
</div>
</div>
<div class="name_bottom">写了2154.9k字 · 34.8k喜欢</div>
</div>
</li>
<li>
<img class="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="name left">
<div class="name_up hidden">
<div class="name_up_l left">卢璐说</div>
<div class="name_up_r right">
<i class="iconfont icon-jiahao1"></i>
<span>关注</span>
</div>
</div>
<div class="name_bottom">写了2154.9k字 · 34.8k喜欢</div>
</div>
</li>
<li>
<img class="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="name left">
<div class="name_up hidden">
<div class="name_up_l left">卢璐说</div>
<div class="name_up_r right">
<i class="iconfont icon-jiahao1"></i>
<span>关注</span>
</div>
</div>
<div class="name_bottom">写了2154.9k字 · 34.8k喜欢</div>
</div>
</li>
<li>
<img class="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="name left">
<div class="name_up hidden">
<div class="name_up_l left">卢璐说</div>
<div class="name_up_r right">
<i class="iconfont icon-jiahao1"></i>
<span>关注</span>
</div>
</div>
<div class="name_bottom">写了2154.9k字 · 34.8k喜欢</div>
</div>
</li>
</ul>
<div class="down">
<span>查看全部</span>
<i class="iconfont icon-dayufuhao"></i>
</div>
</div>
</body>
</html>

View File

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

View File

@@ -0,0 +1,127 @@
.recommend{
margin: 0 auto;
}
.title{
font-size: 22px;
color: #000;
height: 40px;
font-weight: 500;
text-align: center;
background-color: #f3f3f3;
padding-top: 50px;
padding-bottom: 24px;
}
.menu{
text-align: center;
background-color: #f8f8f8;
height: 50px;
}
.menu li{
font-size: 12px;
color: #333;
font-weight: 400;
display: inline-block;
margin: 0 24px;
}
.menu .active{
color: #31c27c;
}
.menu li:hover{
color: #31c27c;
}
.icon ul{
overflow: hidden;
width: 898px;
margin: 0 auto;
background-color: #fdfdfd;
}
.icon li{
width: 170px;
float: left;
margin-right: 12px;
}
.icon li:last-child{
margin-right: 0;
}
.icon img{
width: 100%;
height: 170px;
margin-bottom: 10px;
}
.icon p{
font-size: 10px;
}
.icon p:nth-child(3){
color: #999;
font-size: 10px;
}
.icon p:nth-child(2){
width: 100%;
overflow: hidden;
/* //单行文本溢出显示省略号 */
text-overflow: ellipsis;
/* //单行文本不会换行 */
white-space: nowrap;
}
.more ul{
text-align: center;
margin-top: 40px;
}
.more li{
width: 6px;
height: 6px;
border-radius: 50%;
background-color: rgba(0,0,0,.1);
display: inline-block;
margin-left: 17px;
}
.more .active{
background-color: rgba(0,0,0,.3);
}
.more li:hover{
background-color: rgba(0,0,0,.3);
}
/* .icon .imgs{
width: 100%;
height: 170px;
background-image: url('https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1');
background-size: 100%;
padding: calc((100% - 50px)/2);
box-sizing: border-box;
transition: all ease 1s;
}
.icon .imgs .play_btn{
background: #ffffff;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
opacity: 0;
transition: all ease 0.5s;
}
.icon .imgs:hover{
background-size: 110%;
}
.icon .imgs:hover .play_btn{
opacity: 1;
}
.icon .imgs .play_btn i{
font-size: 20px;
line-height: 50px;
} */

View File

@@ -0,0 +1,80 @@
<!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_3447676_jqloxblwkk.css">
<link rel="stylesheet" href="clear.css">
<link rel="stylesheet" href="Jpublic.css">
<link rel="stylesheet" href="QQmusic.css">
</head>
<body>
<div class="recommend">
<div class="title">歌&nbsp单&nbsp推&nbsp荐</div>
<div class="menu">
<ul>
<li class="active">为你推荐</li>
<li>英语</li>
<li>短视频热歌</li>
<li>经典</li>
<li>官方歌单</li>
<li>情歌</li>
</ul>
</div>
<div class="icon">
<ul>
<li>
<img src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1"
alt="">
<p>贺峻霖 | 少年十七未来山海共期</p>
<p>播放量:43.6万</p>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/OgCriaBUhCkBZmhEuP4OI4rTq7nEvhfN6ejlhWFStShtqr5TIGxSUbQ/300?n=1"
alt="">
<p>[情感片段] .每首都是一个故事</p>
<p>播放量:4157.5万</p>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/r9ZyNKibEJFHSPoVPMRgbXsWZbvIlw1Vdfxr9gOGRF1ENt2aEV4RibQvWicK747NLSb/300?n=1"
alt="">
<p>节奏卡点|超燃来袭开启休闲模式</p>
<p>播放量:1420.5万</p>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/dq5UenayM4jZR6dQv1kVk81DCJpAO9icbPe3nicM10bbz8micIlywX03w/300?n=1"
alt="">
<p>【沉迷学习】轻音乐助力效率加倍</p>
<p>播放量:3841.1万</p>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/or9WvCN6ENQ50YuvJ76Qfiba7MPk46sKDFnxUibvdBWBbsWWKZq9FMXw/300?n=1"
alt="">
<p>极致踩点丨B站高燃混剪收录单</p>
<p>播放量:2461.5万</p>
</li>
<!-- <div class="imgs">
<div class="play_btn">
<i class="iconfont icon-bofang"></i>
</div>
</div> -->
</ul>
</div>
<div class="more">
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,89 @@
.top{
margin: 0px auto;
overflow: hidden;
/* auto没用不知道怎么调所以用了上课提了一嘴的弹性盒子 */
display: flex;
align-items: center;
justify-content: center;
}
.top .logo img{
height: 88px;
width: 272px;
margin-top: 6px;
float: left;
}
.search{
padding-top: 18px;
margin-left: 64px;
float: left;
}
.search .search_up{
margin-bottom: 8px;
}
.search .search_up ul{
font-size: 12px;
color: #333;
overflow: hidden;
}
.search .search_up ul .ps{
font-weight: 700;
}
.search .search_up li{
margin-right: 15px;
float: left;
}
.search .search_down{
overflow: hidden;
}
.search .search_down input{
width: 368px;
height: 20px;
padding: 7px 10px;
border: 1px solid #ccc;
border-right: none;
float: left;
}
.search .search_down .button{
width: 80px;
height: 36px;
background: #3686f1;
font-size: 16px;
float: right;
color: #ffffff;
text-align: center;
line-height: 36px;
}
.icon{
margin-top: calc(16px + 18px + 8px - 2px);
float: left;
margin-left: 12px;
}
.icon li{
display: inline-block;
font-size: 12px;
text-align: center;
}
.icon li:nth-child(2){
margin: 0 18px;
}
.icon li a{}
.icon li a img{
width: 20px;
height: 20px;
}
.icon li a div{}

View File

@@ -0,0 +1,261 @@
.clear{
clear: both;
}
.head{
width: 1200px;
overflow: hidden;
margin: 0 auto;
}
.head p{
font-size: 24px;
font-weight: 100;
float: left;
margin-bottom: 6px;
}
.head p span{
font-weight: bold;
font-size: 24px;
}
.head ul{
float: right;
}
.head ul li {
display: inline-block;
}
.head ul li a{
color: #333;
font-size: 12px;
}
.head ul li a:hover{
color: crimson;
text-decoration: underline;
}
.head ul li span{
margin: 7.5px;
color: #ccc;
font-weight: 100;
font-size: 14px;
}
.head ul li i {
font-size: 12px;
font-weight: 100;
}
.content{
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.content_l{
width: 300px;
float: left;
}
.content_l_up_head{
background: #1d89bf;
padding-left: 20px;
overflow: hidden;
color: #fff;
height: 38px;
line-height: 38px;
}
.content_l_up .one{
float: left;
font-size: 16px;
margin-right: 38px;
}
.content_l_up .two{
font-size: 14px;
float: left;
}
.two li{
float: left;
height: 100%;
width: 55px;
text-align: center;
}
.two li:hover{
background-color: #3495c6;
}
.two .two_active{
background-color: #52a7d9;
}
.content_l_up_all{
background-color:#52a7d9 ;
}
.middle{
overflow: hidden;
padding: 20px 0 10px 20px;
box-sizing: border-box;
}
.middle p{
display: inline-block;
color: #fff;
font-size: 12px;
margin-left: 10px;
margin-bottom: 5px;
}
.middle_l{
float: left;
}
.middle_l li , .middle_r li{
margin-bottom: 8px;
}
.middle li p:nth-child(2):hover{
text-decoration: underline;
}
.middle_top p:nth-child(1){
width: 16px;
height: 16px;
background-color: #fff;
color: #52a7d9;
text-align: center;
line-height: 16px;
}
.middle_r{
float: left;
margin-left: 42px;
}
.content_l_up_all .more{
width: 260px;
height: 22px;
margin: 0 auto;
padding: 15px 0;
font-size: 14px;
color: #fff;
text-align: center;
border-top: 1px dashed #1d89bf;
}
.more i{
font-size: 14px;
font-weight: 100;
}
.content_l_down{
height: 208px;
padding: 25px 0 0 20px;
border: 1px solid #ebebeb;
background-color: #f5f5f5;
}
.content_l_down .title{
height: 26px;
color: #666;
font-size: 16px;
}
.content_l_down .kind{
margin: 5px 0 0;
line-height: 30px;
overflow: hidden;
}
.content_l_down .kind li a{
color: #333;
font-size: 14px;
margin-right: 20px;
float: left;
}
.kind li a:hover{
color: crimson;
text-decoration: underline;
}
/* 右边部分css */
.content_r{
float: left;
width: 900px;
}
.content_r .page{
overflow: hidden;
border-top: 1px solid #ebebeb;
}
.page li{
width: 184px;
height: 195px;
padding: 20px 20px 15px;
border-right: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
float: left;
}
.page li img{
width: 160px;
height: 120px;
margin: 0 calc((100% - 160px)/2);
}
.page li p{
height: 40px;
font-size: 14px;
color: #333;
/* 去除保持单词完整性 */
word-break: break-all;
/* 设置多行超出显示省略号 */
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.page li p:nth-child(2):hover{
color: crimson;
text-decoration: underline;
}
.page li p:nth-child(3){
height: 24px;
font-size: 12px;
margin-top: 5px;
line-height: 24px;
color: #999;
}
.page li p span{
font-size: 18px;
color: #f33;
}
.icon{
text-align: center;
padding: 13px;
border-right: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
}
.icon li{
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #e6e6e6;;
display: inline-block;
margin:0 6px;
}
.icon .active{
background: #1d89bf;
}

View File

@@ -0,0 +1,268 @@
<!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_3447676_7v6ms986hiu.css">
<link rel="stylesheet" href="clear.css">
<link rel="stylesheet" href="Jpublic.css">
<link rel="stylesheet" href="Zmenu.css">
</head>
<body>
<div class="head">
<p><span>2F</span>&nbsp笔记本电脑</p>
<ul>
<li>
<a href="">联想</a>
<span>|</span>
</li>
<li>
<a href="">惠普</a>
<span>|</span>
</li>
<li>
<a href="">戴尔</a>
<span>|</span>
</li>
<li>
<a href="">华为</a>
<span>|</span>
</li>
<li>
<a href="">华硕</a>
<span>|</span>
</li>
<li>
<a href="">Acer宏碁</a>
<span>|</span>
</li>
<li>
<a href="">微软</a>
<span>|</span>
</li>
<li>
<a href="">苹果</a>
<span>|</span>
</li>
<li>
<a href="">Thinkpad</a>
<span>|</span>
</li>
<li>
<a href="">外星人</a>
<span>|</span>
</li>
<li>
<a href="">神舟</a>
<span>|</span>
</li>
<li>
<a href="">更多</a>
<i class="iconfont icon-z044"></i>
</li>
</ul>
</div>
<div class="content">
<div class="content_l">
<div class="content_l_up">
<div class="content_l_up_head">
<div class="one">热度排行</div>
<ul class="two">
<li class="two_active">品牌</li>
<li>型号</li>
<li>新品</li>
</ul>
</div>
<!-- (清除浮动) -->
<div class="clear"></div>
<div class="content_l_up_all">
<div class="middle">
<ul class="middle_l">
<li class="middle_top">
<p>1</p>
<p>联想(385款)</p>
</li>
<li class="middle_top">
<p>2</p>
<p>联想(385款)</p>
</li>
<li class="middle_top">
<p>3</p>
<p>联想(385款)</p>
</li>
<li>
<p>4</p>
<p>联想(385款)</p>
</li>
<li>
<p>5</p>
<p>联想(385款)</p>
</li>
</ul>
<ul class="middle_r">
<li>
<p>6</p>
<p>联想(385款)</p>
</li>
<li>
<p>7</p>
<p>联想(385款)</p>
</li>
<li>
<p>8</p>
<p>联想(385款)</p>
</li>
<li>
<p>9</p>
<p>联想(385款)</p>
</li>
<li>
<p>10</p>
<p>联想(385款)</p>
</li>
</ul>
</div>
<div class="more">
查看更多排行榜<i class="iconfont icon-z044"></i>
</div>
</div>
</div>
<div class="content_l_down">
<div class="title">热门搜索</div>
<ul class="kind">
<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>
<li>
<a href="">惠普</a>
</li>
<li>
<a href="">Acer</a>
</li>
<li>
<a href="">时尚轻薄本</a>
</li>
<li>
<a href="">游戏本</a>
</li>
<li>
<a href="">RTX 30系列</a>
</li>
<li>
<a href="">商务本</a>
</li>
<li>
<a href="">十一代i7</a>
</li>
<li>
<a href="">酷睿i9</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">
<ul class="page">
<li>
<img src="https://2d.zol-img.com.cn/product/205_160x120/447/ceWTvcP3iBwH6.jpg" alt="显示错误">
<p>荣耀MagicBook Pro 2020款(i7 10510U/16GB/512GB/MX350)</p>
<p>最低价:
<span>¥8699</span>
</p>
</li>
<li>
<img src="https://2d.zol-img.com.cn/product/205_160x120/447/ceWTvcP3iBwH6.jpg" alt="显示错误">
<p>荣耀MagicBook Pro 2020款(i7 10510U/16GB/512GB/MX350)</p>
<p>最低价:
<span>¥8699</span>
</p>
</li>
<li>
<img src="https://2d.zol-img.com.cn/product/205_160x120/447/ceWTvcP3iBwH6.jpg" alt="显示错误">
<p>荣耀MagicBook Pro 2020款(i7 10510U/16GB/512GB/MX350)</p>
<p>最低价:
<span>¥8699</span>
</p>
</li>
<li>
<img src="https://2d.zol-img.com.cn/product/205_160x120/447/ceWTvcP3iBwH6.jpg" alt="显示错误">
<p>荣耀MagicBook Pro 2020款(i7 10510U/16GB/512GB/MX350)</p>
<p>最低价:
<span>¥8699</span>
</p>
</li>
<li>
<img src="https://2d.zol-img.com.cn/product/205_160x120/447/ceWTvcP3iBwH6.jpg" alt="显示错误">
<p>荣耀MagicBook Pro 2020款(i7 10510U/16GB/512GB/MX350)</p>
<p>最低价:
<span>¥8699</span>
</p>
</li>
<li>
<img src="https://2d.zol-img.com.cn/product/205_160x120/447/ceWTvcP3iBwH6.jpg" alt="显示错误">
<p>荣耀MagicBook Pro 2020款(i7 10510U/16GB/512GB/MX350)</p>
<p>最低价:
<span>¥8699</span>
</p>
</li>
<li>
<img src="https://2d.zol-img.com.cn/product/205_160x120/447/ceWTvcP3iBwH6.jpg" alt="显示错误">
<p>荣耀MagicBook Pro 2020款(i7 10510U/16GB/512GB/MX350)</p>
<p>最低价:
<span>¥8699</span>
</p>
</li>
<li>
<img src="https://2d.zol-img.com.cn/product/205_160x120/447/ceWTvcP3iBwH6.jpg" alt="显示错误">
<p>荣耀MagicBook Pro 2020款(i7 10510U/16GB/512GB/MX350)</p>
<p>最低价:
<span>¥8699</span>
</p>
</li>
</ul>
<ul class="icon">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>

View File

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

View File

@@ -0,0 +1,51 @@
<!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="clear.css">
<link rel="stylesheet" href="Jpublic.css">
<style>
.menu > li{
float: left;
margin-left: 15px;
position: relative;
}
.menu .dish {
display: none;
/* 绝对定位脱离文档流就不会影响上面的菜单 */
position: absolute;
/* 但是需要手动加宽度 */
width: 124px;
}
/* li标签悬浮的时候作用于dish */
.menu > li:hover .dish{
display: block;
}
.menu{
font-size: 14px;
}
</style>
</head>
<body>
<ul class="menu">
<li>首页1</li>
<li class="top">首页2
<ul class="dish">
<li>菜单2-1</li>
<li>菜单2-2</li>
<li>菜单2-3</li>
<li>菜单2-4</li>
<li>菜单2-5</li>
</ul>
</li>
<li>首页3</li>
<li>首页4</li>
<li>首页5</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,60 @@
<!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="clear.css">
<link rel="stylesheet" href="Jpublic.css">
<link rel="stylesheet" href="Z.css">
</head>
<body>
<div class="top">
<div class="logo">
<img src="https://icon.zol-img.com.cn/mainpage/2019logo/festival/2022duanwu-logo_2x.png" alt="">
</div>
<div class="search">
<div class="search_up">
<ul>
<li class="ps">综合</li>
<li>产品</li>
<li>资讯</li>
<li>论坛</li>
<li>下载</li>
<li>问答</li>
<li>图片</li>
<li>视频</li>
<li>口碑</li>
</ul>
</div>
<div class="search_down">
<input type="text" placeholder="请输入查找内容">
<div class="button">搜索</div>
</div>
</div>
<ul class="icon">
<li>
<a href="https://www.zol.com.cn/help/index.html">
<img src="https://icon.zol-img.com.cn/mainpage/iconfont/201909/down-APPicon@2x.png" alt="">
<div>下载APP</div>
</a>
</li>
<li>
<a href="https://labs.zol.com.cn/rich.html">
<img src="https://icon.zol-img.com.cn/mainpage/iconfont/201909/youliaopingce-logo@2x.png" alt="">
<div>有料评测</div>
</a>
</li>
<li>
<a href="https://zj.zol.com.cn/">
<img src="https://icon.zol-img.com.cn/mainpage/iconfont/201909/icon_zj.svg" alt="">
<div>模拟攒机</div>
</a>
</li>
</ul>
</div>
</body>
</html>