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

first commit

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

21
历届学生/font-end-nine/项目练习/学生项目/冯文焌/2css练习和作业/css练习/笔记本商城/clear.css Normal file
View File

@@ -0,0 +1,21 @@
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
/* list-style: none; */
}
html{
font-size: 0;
}

9
历届学生/font-end-nine/项目练习/学生项目/冯文焌/2css练习和作业/css练习/笔记本商城/public.css Normal file
View File

@@ -0,0 +1,9 @@
.left{
float: left;
}
.right{
float: right;
}
.hidden{
overflow: hidden;
}

235
历届学生/font-end-nine/项目练习/学生项目/冯文焌/2css练习和作业/css练习/笔记本商城/笔记本.css Normal file
View File

@@ -0,0 +1,235 @@
.content{
width: 1200px;
margin: 0 auto;
}
.content .title{
height: 44px;
line-height: 44px;
}
.content .title .tltle_l{
font-size: 24px;
font-weight: 400;
color: #333;
}
.content .title .tltle_l span{
font-size: 24px;
font-weight: bold;
font-family: 'Microsoft YaHei';
margin-right: 8px;
}
.content .title .title_r{
overflow: hidden;
}
.content .title .title_r li{
display: inline-block;
float: left;
}
.content .title .title_r li:hover{
text-decoration:underline
}
.content .title .title_r li::after{
content:" ";
background: black;
width: 0.5px;
height: 12px;
display: inline-block;
margin-top: 2px;
margin-left: 7.5px;
margin-right: 7.5px;
}
.content .title .title_r li a{
text-decoration:none;
color:black;
font-size: 12px;
}
.content .title .title_r li a i{
font-size: 12px;
zoom: 0.9;
}
.content .title .title_r li:last-child::after{
width: 0 !important;
background: white !important;
}
.ddd{
height: 516px;
width: 100%;
}
.wrap{
width: 300px;
height: 100%;
}
.warp_top{
width: 100%;
height: 281px;
background: #1d89bf;
}
.warp_top .kkkkk{
background: #0f4b69 !important;
width: 100%;
height: 38px;
}
.warp_top .kkkkk .guding{
font-size: 16px;
color: #f5f5f5;
margin-right: 50px;
text-align: center;
height: 100%;
line-height: 38px;
padding-left: 17px;
padding-right: 2px;
box-sizing: border-box;
}
.warp_top .kkkkk .three{
font-size: 16px;
color: #f5f5f5;
}
.warp_top .kkkkk .three li{
float: left;
width: 50px;
text-align: center;
line-height: 38px;
}
.warp_top .kkkkk .three li:hover{
background: #333;
}
.warp_top .kkkkk .three .active{
background: red !important;
}
.warp_top .xuanze{
padding: 20px 0 10px 20px;
}
.warp_top .xuanze li{
height: 30px;
line-height: 30px;
padding-left: 26px;
}
.warp_top .xuanze li:nth-child(1) span,
.warp_top .xuanze li:nth-child(2) span,
.warp_top .xuanze li:nth-child(3) span{
background: #f5f5f5;
color: blue;
}
.warp_top .xuanze li span{
width: 16px;
height: 16px;
display: inline-block;
font-size: 12px;
line-height: 16px;
text-align: center;
margin-right: 10px;
color: #f5f5f5;
}
.warp_top .xuanze li a{
font-size: 12px;
color: #f5f5f5;
}
.warp_top .end{
height: 53px;
text-align: center;
line-height: 53px;
font-size: 12px;
color: rgb(238, 237, 237);
border-top: 1px dashed black;
width: 260px;
margin: 0 auto;
}
.warp_down{
height: 235px;
background:#333;
padding-top: 25px;
padding-left: 20px;
font-size: 14px;
color: #333;
}
.tt{
font-size: 16px;
color: #666;
margin-bottom: 5px;
}
.warp_down li{
float: left;
margin-right: 20px;
line-height: 30px;
}
.warp_down li a{
color: black;
}
.picture{
width: 900px;
height: 100%;
border-top: 1px solid;
}
.picture .picture_top{
}
.picture .picture_top li{
padding: 20px 0px 20px 0;
border-right: 1px solid;
border-bottom: 1px solid;
display: inline-block;
font-size: 14px;
color: #999;
text-align: center;
width: 224px;
}
.picture .picture_top img{
width: 160px;
}
.picture .picture_top li .title{
height: 44px;
line-height: 44px;
}
.picture .picture_top li .price{
float: left;
}
.picture .picture_top li .price span{
font-weight: 500;
color: red;
}
.picture .picture_down{
border-right: 1px solid;
text-align: center;
padding-top: 26px;
border-bottom: 1px solid;
padding-bottom: 20px;
}
.picture .picture_down li{
width: 12px;
height: 12px;
margin: 0 6px;
background: yellow;
display: inline-block;
border-radius: 50%;
cursor: pointer;
}
.picture .picture_down .active{
background: red !important;
}
.picture .picture_down li:hover{
background: blue!important;
}

217
历届学生/font-end-nine/项目练习/学生项目/冯文焌/2css练习和作业/css练习/笔记本商城/笔记本.html Normal file
View File

@@ -0,0 +1,217 @@
<!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_o5pox8tpzh.css">
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./笔记本.css">
</head>
<body>
<div class="content">
<!-- 标题 -->
<div class="title">
<div class="tltle_l left">
<span>2F</span>笔记本电脑
</div>
<ul class="title_r right">
<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="">外星人</a>
</li>
<li>
<a href="">神州</a>
</li>
<li>
<a href="">联想</a>
</li>
<li>
<a href="">联想</a>
</li>
<li>
<a href="">更多
<i class="iconfont icon-z044"></i>
</a>
</li>
</ul>
</div>
<div class="ddd hidden">
<!-- 左半边 -->
<div class="wrap left">
<!-- 左上边 -->
<div class="warp_top">
<!-- 菜单 -->
<div class="kkkkk hidden">
<div class="guding left">热度排行</div>
<ul class="three left">
<li class="active">品牌</li>
<li>型号</li>
<li>新品</li>
</ul>
</div>
<!-- 内容 -->
<ul class="xuanze">
<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="end">
查看更多排行榜
<em>>></em>
</div>
</div>
<!-- 左下边 -->
<div class="warp_down">
<div class="tt">热门搜索</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>
<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="picture right">
<!-- 右上 -->
<ul class="picture_top">
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/156GB)</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/156GB)</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/156GB)</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/156GB)</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/156GB)</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/156GB)</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/156GB)</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/156GB)</div>
<div class="price">
最低价：<span>¥3699</span>
</div>
</li>
</ul>
<!-- 右下 -->
<ul class="picture_down">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
</html>