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

16
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/搜狐新闻/css/clear.css Normal file
View File

@@ -0,0 +1,16 @@
li {
list-style: none;
}
a {
text-decoration: none;
}
body,ul,p,h1,h2,h3,h4,h5,h6{
margin: 0;
padding: 0;
}
input, textarea {
border: none;
outline: none;
}

518
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/搜狐新闻/css/index.css Normal file
View File

@@ -0,0 +1,518 @@
.header {
width: 100%;
height: 40px;
line-height: 40px;
background: #222;
position: fixed;
left: 0;
top: 0%;
z-index: 999;
}
.title {
width: 1180px;
margin: 0 auto;
}
.souhu {
background: url(../img/souhu.png);
background-repeat: no-repeat;
height: 20px;
width: 44px;
float: left;
margin-top: 10px;
}
.logo {
width: 86px;
height: 40px;
float: left;
}
.logo i {
float: left;
font-size: 18px;
color: #ccc;
margin: 1px 7px 0 0;
}
.logo:hover i {
color: #fdd000;
}
.logo:hover .souhu {
background-position: 0 -30px;
}
.logo::after {
content: " ";
width: 1px;
height: 15px;
background: #666;
display: inline-block;
margin-top: 13px;
float: right;
}
.menu {
float: left;
height: 40px;
}
.menu li {
float: left;
width: 74px;
height: 40px;
text-align: center;
position: relative;
}
.menu li a,.menu_list {
color: #fff;
}
.menu li:last-child {
width: 150px;
}
.dropmenu {
width: 290px;
height: 136px;
border: 1px solid #ddd;
background: #fff;
position: absolute;
top: 40px;
left: -110px;
padding: 5px 10px;
display: none;
}
.dropmenu .item {
color: #191919;
display: inline-block;
width: 67px;
}
.icon-xiangxia {
display: inline-block;
transition: all 0.2s ease;
}
.menu li:hover{
background: #444;
}
.menu_list:hover .dropmenu {
display: block;
}
.dropmenu .item:hover {
color: red;
}
.menu li:hover i {
transform: rotate(180deg);
}
.content {
margin-top: 80px;
}
.center {
width: 1180px;
margin: 0 auto;
}
.center .left {
width: 140px;
float: left;
}
.user {
width: 138px;
height: 217px;
border: 1px solid #ddd;
background: #fff;
text-align: center;
position: relative;
}
.userimg {
border-radius: 100%;
position: relative;
top: -25px;
}
.user_title {
font-size: 16px;
line-height: 20px;
margin-top: -15px;
}
.user_logo {
margin-top: 5px;
margin-bottom: 5px;
}
.user_nm li {
float: left;
width: 50%;
}
.user_nm li p {
font-size: 16px;
color: black;
}
.user_nm li span {
font-size: 12px;
color: #666;
}
.user_bottom {
font-size: 12px;
color: #666;
background: #ddd;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
line-height: 31px;
}
.comment {
margin-top: 30px;
text-align: center;
}
.comment_title {
font-size: 14px;
color: #303030;
}
.comment i {
font-size: 30px;
display: inline-block;
margin-top: 10px;
}
.comment p {
font-family: Georgia,Arial;
color: #da2128;
font-size: 24px;
}
.comment_title::before,.comment_title::after {
content: " ";
width: 48px;
height: 1px;
background: #666;
display: inline-block;
position: relative;
top: -3px;
}
.comment_title::before {
left: -7px;
}
.comment_title::after {
left: 7px;
}
.share {
margin-top: 30px;
text-align: center;
}
.share_title {
font-size: 14px;
color: black;
}
.share_title::before,.share_title::after {
content: " ";
width: 48px;
height: 1px;
background: #666;
display: inline-block;
position: relative;
top: -3px;
}
.share_title::before {
left: -7px;
}
.share_title::after {
left: 7px;
}
.share ul li {
margin-top: 20px;
}
.share ul li img {
vertical-align: middle;
}
.share ul li span {
font-size: 12px;
color: #666;
}
.center .mid {
width: 640px;
margin-left: 30px;
float: left;
}
.mid_title h2 {
font-size: 28px;
line-height: 38px;
}
.mid_title p {
font-size: 14px;
color: #666;
margin-top: 20px;
}
.mid_comment_say {
}
.say_title {
height: 28px;
line-height: 24px;
margin: 15px 0 5px 0;
}
.say_name {
font-size: 18px;
color: black;
float: left;
}
.say_name::before {
content: " ";
width: 4px;
height: 19px;
background: #fdd000;
display: inline-block;
border-radius: 2px;
margin-top: 3px;
margin-right: 15px;
float: left;
}
.say_list {
float: right;
}
.say_list .one {
font-size: 22px;
font-family: "Georgia Regular",Georgia;
color: #d92227;
}
.say_list img {
margin-top: -20px;
float: left;
}
.say_put {
border: 1px solid #b7b7b7;
height: 123px;
}
.say_put textarea {
width: 100%;
height: 84px;
resize: none;
box-sizing: border-box;
}
.say_one {
height: 35px;
line-height: 35px;
background: #f8f8f8;
padding-left: 10px;
}
.say_two span {
font-size: 13px;
float: left;
}
.say_two ul li {
float: left;
}
.say_the {
width: 90px;
height: 35px;
font-size: 14px;
color: #fff;
background: red;
float: right;
text-align: center;
margin-right: -1px;
}
.say_two ul li img {
margin-left: 10px;
margin-top: 9px;
}
.say_four {
font-size: 12px;
color: #999;
margin: 12px 0 28px 0;
}
.hot_title {
font-size: 16px;
height: 17px;
line-height: 17px;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
}
.hot_title::before {
content: " ";
width: 4px;
height: 19px;
background: #fdd000;
display: inline-block;
border-radius: 2px;
margin-top: 3px;
margin-right: 15px;
float: left;
}
.hot_list {
margin-top: 10px;
}
.hot_list img {
border-radius: 100%;
width: 50px;
height: 50px;
float: left;
}
.hot_list_one {
float: left;
width: 570px;
margin-left: 14px;
}
.hot_list_one .five {
font-size: 13px;
color: red;
margin-bottom: 10px;
}
.hot_list_one .six {
font-size: 14px;
color: #333;
}
.hot_date span {
font-size: 12px;
color: #b7b7b7;
float: left;
}
.hot_date_one {
float: right;
}
.hot_date_two {
float: left;
font-size: 12px;
color: #7e7e7e;
margin: 0 5px;
padding: 0 10px;
}
.hot_date {
margin-top: 15px;
}
.hot_list li {
border-bottom: 1px dashed #e5e5e5;
overflow: hidden;
margin-bottom: 15px;
padding-bottom: 10px;
}
.left .mid .right {
height: 700px;
}
.right {
width: 300px;
float: right;
}
.search input {
width: 236px;
height: 34px;
box-sizing: border-box;
float: left;
border: 1px solid silver;
border-right: none;
padding-left: 10px;
}
.search i {
width: 53px;
height: 34px;
line-height: 34px;
background: yellow;
display: inline-block;
text-align: center;
}
.hot_pic p {
font-size: 20px;
font-weight: 700;
margin-top: 40px;
margin-bottom: 20px;
}
.pic_one {
width: 300px;
height: 200px;
position: relative;
margin-bottom: 10px;
}
.icon-zuojiantou {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: #333;
display: none;
}
.icon-youjiantou {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
background: #333;
display: none;
}
.pic_one:hover .icon-zuojiantou {
display: inline-block;
}
.pic_one:hover .icon-youjiantou {
display: inline-block;
}
.pic_one p {
font-size: 15px;
color:black;
position: absolute;
left: 5px;
bottom: 20px;
}
.hot_pic .pic_two {
position: absolute;
left: 5px;
bottom: 10px;
}
.hot_pic .pic_two li {
width: 5px;
height: 2px;
background: #333;
float: left;
margin-right: 5px;
}
.hot_pic .two {
width: 10px;
height: 2px;
}
.hot_item img {
width: 145px;
height: 110px;
}
.hot_item p {
font-size: 12px;
color: black;
margin-top: 3px;
}
.hot_item li {
float: left;
width: 150px;
}
.hot_item {
overflow: hidden;
}
.hot_art_title {
font-size: 20px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
}
.hot_art_list li {
position: relative;
margin-bottom: 10px;
}
.art_list img {
width: 90px;
height: 60px;
}
.art_list {
float: left;
margin-right: 13px;
}
.art_list .one {
font-size: 24px;
font-weight: 700;
position: absolute;
left: 15px;
top: 25px;
}
.art_one p {
font-size: 14px;
color: black;
}
.art_one span {
font-size: 10px;
color: #333;
}
.art_one {
margin-left: 10px;
}

0
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/搜狐新闻/css/public.css Normal file
View File

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/搜狐新闻/img/aaa.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/搜狐新闻/img/bbb.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/搜狐新闻/img/cm.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/搜狐新闻/img/gt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/搜狐新闻/img/new.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/搜狐新闻/img/souhu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/搜狐新闻/img/tip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 829 B

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/搜狐新闻/img/wx.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 729 B

361
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/搜狐新闻/index.html Normal file
View File

@@ -0,0 +1,361 @@
<!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/index.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2884651_7iiqntpl2iw.css">
</head>
<body>
<div class="header">
<div class="title">
<div class="logo">
<i class="iconfont icon-home-page"></i>
<div class="souhu"></div>
</div>
<ul class="menu">
<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>
<div class="menu_list">
更多
<i class="iconfont icon-xiangxia"></i>
<div class="dropmenu">
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
</div>
</div>
</li>
<li>
<a href="">无障碍</a>
</li>
<li>
<a href="">
<i class="iconfont icon-denglu"></i>
登录
</a>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="center">
<div class="left">
<div class="user">
<img class="userimg" src="./img/new.png" alt="">
<p class="user_title">中国新闻网</p>
<div class="user_logo">
<img src="./img/tip.png" alt="">
<img src="./img/tip.png" alt="">
</div>
<ul class="user_nm">
<li>
<p>112万</p>
<span>文章</span>
</li>
<li>
<p>685亿</p>
<span>总阅读</span>
</li>
</ul>
<div class="user_bottom">查看TA的文章></div>
</div>
<div class="comment">
<div class="comment_title">评论</div>
<i class="iconfont icon-pinglun"></i>
<p>126</p>
</div>
<div class="share">
<div class="share_title">分享</div>
<ul>
<li>
<img src="./img/wx.png" alt="">
<span>微信分享</span>
</li>
<li>
<img src="./img/wx.png" alt="">
<span>微信分享</span>
</li>
<li>
<img src="./img/wx.png" alt="">
<span>微信分享</span>
</li>
<li>
<img src="./img/wx.png" alt="">
<span>微信分享</span>
</li>
</ul>
</div>
</div>
<div class="mid">
<div class="mid_title">
<h2>猪肉价格会继续下降？秋收秋种如何？权威回应来了</h2>
<p>2021-10-20 14:30</p>
</div>
<div class="mid_comment">
<div class="mid_comment_say">
<div class="say_title">
<div class="say_name">我来说两句</div>
<div class="say_list">
<img src="./img/gt.png" alt="">
<span>
<span class="one">126</span>人参与，<span class="one">50</span>条评论
</span>
</div>
</div>
<div class="say_put">
<textarea name="" id="" cols="30" rows="10"></textarea>
<div class="say_one">
<div class="say_two">
<span>快速登录：</span>
<ul>
<li>
<img src="./img/wx.png" alt="">
</li>
<li>
<img src="./img/wx.png" alt="">
</li>
<li>
<img src="./img/wx.png" alt="">
</li>
<li>
<img src="./img/wx.png" alt="">
</li>
</ul>
</div>
<div class="say_the">登录并发表</div>
</div>
</div>
</div>
<p class="say_four">搜狐“我来说两句” 用户公约</p>
<div class="mid_comment_hot">
<div class="hot_title">热门评论</div>
<ul class="hot_list">
<li>
<img src="./img/cm.jpeg" alt="">
<div class="hot_list_one">
<p class="five">执著</p>
<p class="six">特别是秋收还能增长？种粮食全在北方，北方那么多地区水灾看不到吗？还增产了居然，呵呵！</p>
<div class="hot_date">
<span>10月20日 19:52</span>
<div class="hot_date_one">
<div class="hot_date_two">回复</div>
<div class="hot_date_two">
<i class="iconfont icon-dianzan"></i>
2
</div>
</div>
</div>
</div>
</li>
<li>
<img src="./img/cm.jpeg" alt="">
<div class="hot_list_one">
<p class="five">执著</p>
<p class="six">特别是秋收还能增长？种粮食全在北方，北方那么多地区水灾看不到吗？还增产了居然，呵呵！</p>
<div class="hot_date">
<span>10月20日 19:52</span>
<div class="hot_date_one">
<div class="hot_date_two">回复</div>
<div class="hot_date_two">
<i class="iconfont icon-dianzan"></i>
2
</div>
</div>
</div>
</div>
</li>
<li>
<img src="./img/cm.jpeg" alt="">
<div class="hot_list_one">
<p class="five">执著</p>
<p class="six">特别是秋收还能增长？种粮食全在北方，北方那么多地区水灾看不到吗？还增产了居然，呵呵！</p>
<div class="hot_date">
<span>10月20日 19:52</span>
<div class="hot_date_one">
<div class="hot_date_two">回复</div>
<div class="hot_date_two">
<i class="iconfont icon-dianzan"></i>
2
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="right">
<div class="search">
<input type="text" placeholder="大家都在搜">
<i class="iconfont icon-sousuo"></i>
</div>
<div class="hot_pic">
<p>热门精选</p>
<div class="pic_one">
<img src="./img/aaa.jpeg" alt="">
<i class="iconfont icon-zuojiantou"></i>
<i class="iconfont icon-youjiantou"></i>
<p>他被蛇追杀了5年</p>
<ul class="pic_two">
<li></li>
<li class="two"></li>
<li></li>
</ul>
</div>
<ul class="hot_item">
<li>
<a href="">
<img src="./img/bbb.jpeg" alt="">
<p>敲诈公职人员的女辅警照片曝光</p>
</a>
</li>
<li>
<a href="">
<img src="./img/bbb.jpeg" alt="">
<p>敲诈公职人员的女辅警照片曝光</p>
</a>
</li>
<li>
<a href="">
<img src="./img/bbb.jpeg" alt="">
<p>敲诈公职人员的女辅警照片曝光</p>
</a>
</li>
<li>
<a href="">
<img src="./img/bbb.jpeg" alt="">
<p>敲诈公职人员的女辅警照片曝光</p>
</a>
</li>
</ul>
</div>
<div class="hot_art">
<p class="hot_art_title">24小时热文</p>
<ul class="hot_art_list">
<li>
<div class="art_list">
<img src="./img/bbb.jpeg" alt="">
<div class="one">1</div>
</div>
<div class="art_one">
<p>不让下车去厕所 司机劝返新冠确诊游客被赞</p>
<span>1334万 阅读</span>
</div>
</li>
<li>
<div class="art_list">
<img src="./img/bbb.jpeg" alt="">
<div class="one">1</div>
</div>
<div class="art_one">
<p>不让下车去厕所 司机劝返新冠确诊游客被赞</p>
<span>1334万 阅读</span>
</div>
</li>
<li>
<div class="art_list">
<img src="./img/bbb.jpeg" alt="">
<div class="one">1</div>
</div>
<div class="art_one">
<p>不让下车去厕所 司机劝返新冠确诊游客被赞</p>
<span>1334万 阅读</span>
</div>
</li>
<li>
<div class="art_list">
<img src="./img/bbb.jpeg" alt="">
<div class="one">1</div>
</div>
<div class="art_one">
<p>不让下车去厕所 司机劝返新冠确诊游客被赞</p>
<span>1334万 阅读</span>
</div>
</li>
<li>
<div class="art_list">
<img src="./img/bbb.jpeg" alt="">
<div class="one">1</div>
</div>
<div class="art_one">
<p>不让下车去厕所 司机劝返新冠确诊游客被赞</p>
<span>1334万 阅读</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>