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

53
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/box.html Normal file
View File

@@ -0,0 +1,53 @@
<!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,
ul {
margin: 0;
padding: 0;
}
.box_1 {
width: 200px;
height: 200px;
background: red;
/* display: inline-block; */
/* float: left; */
}
.box_2 {
width: 200px;
height: 200px;
background: green;
/* display: inline-block; */
}
.box_1-1 {
width: 50px;
height: 50px;
background: blue;
}
</style>
</head>
<body>
<div>
<div class="box_1">
<div class="box_1-1"></div>
</div>
<div class="box_2"></div>
</div>
</body>
</html>

59
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/下拉菜单/1.html Normal file
View File

@@ -0,0 +1,59 @@
<!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,ul {
margin: 0;
padding: 0;
}
.main {
height: 40px;
}
li {
list-style: none;
float: left;
line-height: 40px;
margin-right: 20px;
position: relative;
}
.main li:hover .main_list {
display: block;
}
.main_list {
position: absolute;
width: 150px;
background: rgb(177, 177, 182);
display: none;
}
.main_item {
cursor: pointer;
}
.main_item:hover {
background: red;
color: cornsilk;
}
</style>
</head>
<body>
<ul class="main">
<li>首页</li>
<li>HTML学习</li>
<li>CSS学习
<div class="main_list">
<div class="main_item">CSS学习1CSS学习1</div>
<div class="main_item">CSS学习2CSS学习2</div>
<div class="main_item">CSS学习3CSS学习3</div>
</div>
</li>
<li>JS学习</li>
</ul>
</body>
</html>

72
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/下拉菜单/index.html Normal file
View File

@@ -0,0 +1,72 @@
<!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,
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
margin-left: 20px;
margin-bottom: 20px;
position: relative;
}
.main {
width: 100px;
}
.main_item {
padding-left: 15px;
width: 125px;
cursor: pointer;
}
.main_list {
position: absolute;
background: #bdb8b8;
display: none;
left: 80px;
top: 0;
}
.main_item:hover {
background: blue;
color: rgb(220, 229, 230);
}
.main li:hover .main_list {
display:inline-block;
}
</style>
</head>
<body>
<ul class="main">
<li>首页</li>
<li>HTML学习
<div class="main_list">
<div class="main_item">HTML学习学习1</div>
<div class="main_item">HTML学习学习2</div>
<div class="main_item">HTML学习学习3</div>
</div>
</li>
<li>CSS学习</li>
<li>JS学习
<div class="main_list">
<div class="main_item">JS学习1</div>
<div class="main_item">JS学习2</div>
<div class="main_item">JS学习3</div>
</div>
</li>
</ul>
</body>
</html>

88
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/定位/index.html Normal file
View File

@@ -0,0 +1,88 @@
<!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_2884651_zynkd7ls8fp.css">
<style>
body,ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.main {
width: 290px;
height: 280px;
background: yellow;
position: relative;
}
.icon-zuojiantou {
color: #969696;
position: absolute;
left: 10px;
top: 100px;
}
.icon-youjiantou {
color: #969696;
position: absolute;
right: 10px;
top: 100px;
}
p {
position: absolute;
left: 15px;
bottom: 30px;
}
ul {
position: absolute;
width: 40px;
left: 50%;
bottom: 5px;
transform: translateX(-50%);
}
.one, .the {
float: left;
width: 5px;
height: 5px;
background: red;
border-radius: 5px;
}
.two {
float: left;
width: 10px;
height: 5px;
background: red;
border-radius: 5px;
}
.one {
margin-right: 10px;
}
.the {
margin-left: 10px;
}
</style>
</head>
<body>
<div class="main">
<i class="iconfont icon-zuojiantou"></i>
<i class="iconfont icon-youjiantou"></i>
<p>猪肉价格继续降11111111</p>
<ul>
<li class="one"></li>
<li class="two"></li>
<li class="the"></li>
</ul>
</div>
</body>
</html>

14
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/快手/css/clear.css Normal file
View File

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

38
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/快手/css/index.css Normal file
View File

@@ -0,0 +1,38 @@
.header {
background: black;
width: 100%;
height: 70px;
position: fixed;
z-index: 99;
align-items: center;
}
.head {
width: 100%;
height: 70px;
}
.logo {
background-image: url(../img/logo.svg);
width: 81px;
height: 31px;
}
.menu {
float: left;
width: 450px;
}
.menu li {
float: left;
margin-left: 30px;
font-size: 14px;
}
.dropmenu {
}
.meun_list {
}

0
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/快手/css/public.css Normal file
View File

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/快手/img/ks.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 803 KiB

BIN
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/快手/img/kuai.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

1
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/快手/img/logo.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="81" height="31" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M46.872 6.105h-.032l-2.027.003.002 1.886h-3.901a.64.64 0 0 0-.644.603l-.001.032v2.008h4.548v3.603l-.007 1.463-.003.163-.004.159c-.008.267-.02.603-.039.853l-.011.149-.03.346h-4.73a.64.64 0 0 0-.645.604v2.039h5.212c-.958 2.675-2.749 4.425-5.213 5.39l.645 2.173c.063.21.372.27.52.21 1.769-.698 4.89-2.459 6.474-6.655 1.402 3.99 4.65 5.85 6.125 6.511l.124.055c.491.213.7 0 .779-.264l.607-2.03c-.997-.395-3.95-1.672-5.203-5.39H54.005a.64.64 0 0 0 .62-.603v-2.04h-1.28V8.63a.64.64 0 0 0-.614-.634l-.032-.001h-5.212l-.002-1.268V6.705a.638.638 0 0 0-.58-.598l-.033-.002zm-9.504 0H35.34v21.017c0 .34.271.618.612.634l.032.001 2.028-.012V14.987h1.609a.64.64 0 0 0 .62-.603v-2.04h-2.23V6.716a.64.64 0 0 0-.612-.61h-.032zm38.923.252c-.355.507-1.04 1.083-2.048 1.095h-15.6V9.46c0 .329.254.6.58.631l.033.003h8.243v3.463h-7.462a.64.64 0 0 0-.644.604v.032l-.001 2.007h8.107v3.15h-9.78a.64.64 0 0 0-.645.603v2.039h10.425v2.345l-.002.043-.002.022-.004.036a.795.795 0 0 1-.755.674l-.037.001H63.1l.583 2.157a.66.66 0 0 0 .56.483l.033.002h2.509l.055-.002.059-.003c1.814-.102 3.242-1.574 3.272-3.37v-2.388h9.434a.64.64 0 0 0 .62-.603v-2.04H70.171V16.2h7.032a.64.64 0 0 0 .62-.603l.001-.031v-2.008H70.17v-3.463c.885.005 2.223.004 4.014-.004 2.918.012 4.411-2.102 4.808-3.076l-1.93-.825c-.367-.157-.638-.024-.772.167zM33.574 8.98h-2.028v7.203l-.002.23-.002.145a16.74 16.74 0 0 1-.761 4.544.632.632 0 0 0 .354.765l.031.012 1.97.658c.678-1.875 1.041-3.843 1.08-5.99l.001-.174.001-.17.002-.708-.002-.001v-5.91a.64.64 0 0 0-.58-.6l-.032-.003-.032-.001zm13.916 1.656h3.182v6.737h-3.264l.029-.402c.025-.383.04-.86.046-1.279l.001-.18.002-.447.004-4.429z" fill="#FFF" fill-rule="nonzero"/><path d="M21.02 16.34c2.903 0 5.255 2.34 5.255 5.225v4.15c0 2.885-2.352 5.224-5.255 5.224h-7.728a5.255 5.255 0 0 1-4.995-3.597l-4.604 2.294a2.557 2.557 0 0 1-3.423-1.13A2.523 2.523 0 0 1 0 27.37v-7.442c0-1.4 1.142-2.535 2.55-2.535.4 0 .795.093 1.152.273l4.584 2.307a5.254 5.254 0 0 1 5.006-3.632h7.728zm-.033 2.69H13.37a2.62 2.62 0 0 0-2.628 2.569v4.038a2.62 2.62 0 0 0 2.584 2.612h7.617a2.62 2.62 0 0 0 2.627-2.568v-4.039a2.62 2.62 0 0 0-2.583-2.612zM3.4 20.65a.694.694 0 0 0-.695.679v4.678a.697.697 0 0 0 1 .622l.011-.006 4.321-2.191v-1.55l-4.325-2.158a.699.699 0 0 0-.312-.074zM9.815.975A7.114 7.114 0 0 1 16.02 4.59a6.1 6.1 0 0 1 4.15-1.619c3.372 0 6.105 2.718 6.105 6.07 0 3.352-2.733 6.07-6.105 6.07a6.108 6.108 0 0 1-4.934-2.495 7.112 7.112 0 0 1-5.421 2.495c-3.927 0-7.11-3.165-7.11-7.069S5.888.975 9.815.975zm0 2.842c-2.348 0-4.25 1.892-4.25 4.226s1.902 4.226 4.25 4.226c2.347 0 4.25-1.892 4.25-4.226s-1.903-4.226-4.25-4.226zM20.17 5.815a3.236 3.236 0 0 0-3.245 3.227 3.236 3.236 0 0 0 3.245 3.227 3.236 3.236 0 0 0 3.246-3.227 3.236 3.236 0 0 0-3.246-3.227z" fill="#FF4906"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

53
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/快手/index.html Normal file
View File

@@ -0,0 +1,53 @@
<!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_oloxghv8vrk.css">
</head>
<body>
<div class="header">
<div class="head">
<div class="logo"></div>
<ul class="menu">
<li>
<a href="">我的关注</a>
</li>
<li>
<a href="">短视频</a>
</li>
<li>
<div class="menu_list">
<span>全部</span>
<i class="iconfont icon-xiangxia"></i>
<div class="dropmenu">
<a href="">直播</a>
<a href="">同城</a>
<a href="">长视频</a>
<a href="">小剧场</a>
<a href="">电影</a>
<a href="">AcFun</a>
</div>
</div>
</li>
</ul>
<input placeholder="请输入你要搜索的内容" type="text">
<ul class="right"></ul>
</div>
</div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>

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>

56
历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/css/简书搜索条/index.html Normal file
View File

@@ -0,0 +1,56 @@
<!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_2880382_7kt93o3bmh2.css">
<style>
li {
list-style: none;
/* 清除li标签的小圆点 */
}
a {
text-decoration: none;
/* 清除a标签的下划线 */
}
body,
ul {
margin: 0;
padding: 0;
}
input {
padding: 0;
border: none;
}
.main {
position: relative;
width: 150px;
height: 50px;
}
.search {
width: 100%;
height: 100%;
border: 2px solid #eee;
border-radius: 10px;
padding-left: 80px;
box-sizing: border-box;
}
.icon-sousuo {
position: absolute;
}
</style>
</head>
<body>
<div class="main">
<input class="search" placeholder="百度一下" />
<i class="iconfont icon-sousuo"></i>
</div>
</body>
</html>