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

19
历届学生/fontendseven/项目练习/上课项目/新浪/css/clear.css Normal file
View File

@@ -0,0 +1,19 @@
body,p,ul,li,h1,h2,h3,h4,h5,h6,input{
margin: 0;
padding: 0;
border: none;
}
li {
list-style: none;
}
input {
/* 去除选中input时候产生的外边框 */
outline: none;
}
a {
text-decoration: none;
color: #000;
}

232
历届学生/fontendseven/项目练习/上课项目/新浪/css/index.css Normal file
View File

@@ -0,0 +1,232 @@
.header {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
line-height: 41px;
margin-bottom: 19px;
}
.header ul > li {
float: left;
padding: 0 9px 0 16px;
font-size: 12px;
color: #4c4c4c;
position: relative;
}
.header ul>li a{
color: #4c4c4c;
}
.header ul > li:hover {
border-color: #edeef0;
background-color: #edeef0;
color: #ff8400;
}
.header ul > li:hover>a {
color: #ff8400;
}
.header ul > li:hover .dropmenu {
display: block;
}
.header ul>li span{
cursor: pointer;
}
.header ul>li i{
color: #ff8400;
vertical-align: middle;
cursor: pointer;
}
.header .dropmenu{
position: absolute;
width: 112px;
background: #fff;
border: 1px solid #ebbe7a;
box-shadow: 3px 3px 3px rgb(0 0 0 / 10%);
left: 0;
display: none;
z-index: 999;
}
.header .dropmenu li{
padding: 0 15px;
border-bottom: 1px solid #fecc5b;
width: 100%;
box-sizing: border-box;
line-height: 32px;
}
.header .dropmenu li:hover{
background: #fff5da;
}
.header .dropmenu li:hover a{
color: #e67902;
}
.right_menu li {
float: left;
}
.logo {
width: 100%;
margin-bottom: 10px;
}
.logo .xl_logo{
width: 111px;
height: 47px;
margin-left: 19px;
}
.logo .search{
margin-left: 23px;
margin-top: 6px;
width: 407px;
height: 38px;
}
.logo .search .search_left{
width: 74px;
height: 100%;
line-height: 33px;
padding-left: 15px;
box-sizing: border-box;
border: 1px solid #c1c1c1;
border-radius: 3px 0 0 3px;
}
.logo .search .search_left span{
font-size: 14px;
color: #666;
}
.logo .search .search_left i{
color: #ff8400;
font-size: 12px;
}
.logo .search .search_input{
height: 100%;
border-top: 1px solid #c1c1c1;
border-bottom: 1px solid #c1c1c1;
box-sizing: border-box;
padding-left: 14px;
width: 244px;
box-sizing: border-box;
color: #666;
font-size: 14px;
}
.logo .search .icon-sousuo{
width: 66px;
height: 38px;
display: inline-block;
text-align: center;
line-height: 38px;
background: #ff8400;
color: #fff;
font-size: 20px;
font-weight: bolder;
}
.menus {
margin-bottom: 18px;
}
.menu_item {
width: 182px;
padding: 2px 5px 18px 0;
position: relative;
}
.menu_item::after {
content: "";
width: 1px;
height: 70px;
background: #e6e6e6;
position: absolute;
right: 0;
top: 10px;
}
.menu_item li {
float: left;
width: 32px;
margin-left: 13px;
line-height: 26px;
text-align: center;
}
.menu_item li:nth-child(4n+1) {
font-weight: bolder;
}
.menu_item li a,
.menu_items li a {
font-size: 12px;
color: #000;
}
.menu_items li {
margin-left: 13px;
line-height: 26px;
text-align: center;
}
.news {
width: 360px;
}
.news .news_title {
height: 34px;
border: 1px solid #dbdee1;
line-height: 34px;
margin-bottom: 19px;
background: url("http://i2.sinaimg.cn/dy/deco/2013/0321/bg1px.png") 0 -33px repeat-x;
}
.news .news_title .active{
background-color: #fff;
border-top: 3px solid #ff8400;
border-right: 1px solid #dbdee1;
border-left: 1px solid #dbdee1;
height: 34px;
line-height: 29px;
}
.no_bl {
border-left: none !important;
}
.news .news_title li:nth-child(1) {
border-left: none;
}
.news .news_title li{
float: left;
width: 60px;
padding: 0 12px;
box-sizing: border-box;
}
.news .news_title li a{}
.news .news_img{}
.news .news_img li{
float: left;
width: 105px;
height: 90px;
border: 1px solid #fff;
font-size: 0;
margin-left: 19px;
margin-bottom: 12px;
}
.news .news_img li:nth-child(1) {
margin-left: 0;
}
.news .news_img li img{
width: 105px;
height: 70px;
}
.news .news_img li span{
width: 105px;
display: inline-block;
color: #fff;
background: #000;
font-size: 12px;
text-align: center;
height: 20px;
line-height: 20px;
}
.news .news_list{}
.news .news_list li{
padding-left: 10px;
line-height: 26px;
height: 26px;
overflow: hidden;
font-size: 14px;
background: url("http://i0.sinaimg.cn/home/main/index2013/0403/icon.png") no-repeat 0 -880px;
}
.news .news_list li a{
background: url("http://i1.sinaimg.cn/dy/main/icon/photoNewsLeft2.gif") no-repeat 0 center;
padding-left: 23px;
color: #122e67;
}

18
历届学生/fontendseven/项目练习/上课项目/新浪/css/public.css Normal file
View File

@@ -0,0 +1,18 @@
/* 存放使用率高的css代码 */
.left {
float: left;
}
.right {
float: right;
}
.hidden {
overflow: hidden;
}
.center {
width: 1000px;
margin: 0 auto;
}

336
历届学生/fontendseven/项目练习/上课项目/新浪/index.html Normal file
View File

@@ -0,0 +1,336 @@
<!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_2915751_2q90ct8ysi3.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<div class="center">
<ul class="left_menu left">
<li><a href="">设为首页</a></li>
<li><a href="">手机新浪网</a></li>
<li>
<span>移动客户端</span>
<i class="iconfont icon-jiantou_liebiaozhankai"></i>
<ul class="dropmenu">
<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>
</li>
</ul>
<ul class="right_menu right">
<li><a href="">登录</a></li>
<li>
<span>微博</span>
<i class="iconfont icon-jiantou_liebiaozhankai"></i>
<ul class="dropmenu">
<li><a href="">新浪</a></li>
<li><a href="">新浪</a></li>
<li><a href="">新浪</a></li>
</ul>
</li>
<li>
<span>博客</span>
<i class="iconfont icon-jiantou_liebiaozhankai"></i>
<ul class="dropmenu">
<li><a href="">新浪微博</a></li>
<li><a href="">新浪新闻</a></li>
</ul>
</li>
<li>
<span>邮箱</span>
<i class="iconfont icon-jiantou_liebiaozhankai"></i>
</li>
<li><a href="">网站导航</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="center">
<div class="logo hidden">
<img class="left xl_logo" src="https://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png" alt="">
<div class="left search">
<div class="search_left left">
<span>新闻</span>
<i class="iconfont icon-jiantou_liebiaozhankai"></i>
</div>
<input type="text" class="left search_input" placeholder="请输入关键字">
<i class="left iconfont icon-sousuo"></i>
</div>
<div class="right ad">
<img src="https://i0.sinaimg.cn/home/2014/1030/hxjzg103.jpg" alt="">
<img src="https://i2.sinaimg.cn/home/2014/1030/jb5.jpg" alt="">
</div>
</div>
<div class="menus hidden">
<ul class="menu_item left">
<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="">国际</a>
</li>
</ul>
<ul class="menu_item left">
<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="">国际</a>
</li>
</ul>
<ul class="menu_item left">
<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="">国际</a>
</li>
</ul>
<ul class="menu_item left">
<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="">国际</a>
</li>
</ul>
<ul class="menu_item left">
<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="">国际</a>
</li>
</ul>
<ul class="menu_items left">
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">军事</a>
</li>
<li>
<a href="">国内</a>
</li>
</ul>
</div>
<div class="news">
<ul class="news_title no_bl">
<li class="active">
<a href="">图片</a>
</li>
<li >
<a href="">专栏</a>
</li>
<li>
<a href="">热点</a>
</li>
</ul>
<ul class="news_img hidden">
<li>
<img src="https://n.sinaimg.cn/news/transform/240/w140h100/20211103/a889-9a0fe492e4a5ca1acbd62c485dff2647.jpg" alt="">
<span>秋染潭柘寺</span>
</li>
<li>
<img src="https://n.sinaimg.cn/news/transform/240/w140h100/20211103/a889-9a0fe492e4a5ca1acbd62c485dff2647.jpg" alt="">
<span>秋染潭柘寺</span>
</li>
<li>
<img src="https://n.sinaimg.cn/news/transform/240/w140h100/20211103/a889-9a0fe492e4a5ca1acbd62c485dff2647.jpg" alt="">
<span>秋染潭柘寺</span>
</li>
</ul>
<ul class="news_list">
<li>
<a href="">直击第77集团军某旅实弹射击</a>
</li>
<li>
<a href="">直击第77集团军某旅实弹射击</a>
</li>
<li>
<a href="">直击第77集团军某旅实弹射击</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>