吉软-人文精英班-第6次作业

最新推荐文章于 2021-03-25 03:33:33 发布

chongduibin0871

最新推荐文章于 2021-03-25 03:33:33 发布

阅读量105

点赞数

原文链接：https://my.oschina.net/u/4013240/blog/2936891

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
       /* 先定义无边框编剧 */
*{
           margin:0;
           padding:0;
overflow-x:hidden;
       }
/* body背景图片大小 */
body{
width:1580px;
height:950px;
background-image:url("pic/gyy.jpg");
background-size:1580px 950px;
background-repeat:no-repeat;
background-attachment: fixed;
}
/* 全局只定义li的无下划线其他li分别定义*/
li{
list-style:none;
}
.left li{
float:left;
}
/* ul向右排列 */
ul{float:left;}
       .top{
           width:1610px;
           height:33px;
           background-color:#254969;
       }
.top h5{
text-align:center;
margin-top:3px;
font-weight:normal;
color:white;
}
.top .left a{
font-size:90%;
color:white;
}
.top .right li{
float:right;
margin-top:3px;
}
.top .left img{
margin-top:3px;
}
.right{
padding-left:780px;
}
.top .right a{
color:white;
font-size:90%;
}
/* 图片的位置 */
.baidu{
margin-top:20px;
margin-left:610px;
}
/* 输入文本框的位置大小 */
input{
width:500px;
height:38px;
margin-left:450px;
margin-top: 9px;
}
/* 中路导航位置大小背影颜色（测试位置） */
.daohang{
width:900px;
height:42px;
background-color:greenyellow;
margin:70px 300px;
}
/* */
.search{
width:100px;
height:40px;
}
.middleU li{
float:left;
}
.daohang .nav{
width:900px;
height:41px;
background-color:white;
}
.daohang .nav li{
float:left;
}
/* 图片位置 */
.daohang .nav .head{
margin-top: 8px;
margin-left: 10px;
}
.daohang .nav a{
float:left;
text-decoration:none;
margin-top:10px;
}
.daohang .nav li{
float:left;
margin-left: 10px;
}
/* 定义推荐位置鼠标点击变色-轻灰色 */
.daohang .nav .tuijian:hover{
font-weight:bolder;
background-color:lightgray;
width:50px;
height:41px;
}
.daohang .nav a{
margin-left:5px;
}
/* 齿轮图片位置 */
.daohang .nav .wheel{
margin-top:6px;
margin-left: 640px;
}
/* 下方div位置大小背景颜色 */
.house{
width:900px;
height:500px;
margin:-68px 300px;
/* margin-top:10px;
margin-left:350px; */
background-color:white;
}
/* 图片、段落位置大小字体颜色 */
.house .house_left p,img{
float:left;
margin-top:9px;
font-size:85%;
color:gray;
font-weight:lighter;
}
/* 左边ul位置大小 */
.house .house_left{
margin-left:20px;
width:450px;
height:500px;
}
.house .house_left li{
margin-top:6px;
}
.house .house_left img{
font-size:70%;
}
.house .house_left a{
text-decoration:none;
display:block;
color:black;
font-size:150%;
font-weight:bolder;
margin-top: 10px;
margin-left: 20px;
}
/* 鼠标变色 */
.house .house_left a:hover{
text-decoration:normal;
}
.house .house_right{
margin-left:20px;
width:400px;
height:500px;
}
.house .house_right h5{
font-size:120%;
margin-left:20px;
margin-top:10px;
}
.house .house_right a{
display:block;
text-decoration:none;
margin-top:5px;
}
.house .house_right li{
float:left;
margin-left: 20px;
margin-top:10px;
}
span{
color:red;
border:1px solid red;
font-size:50%;
}
</style>
</head>
<body>
<div class="top">
   <ul class="left">
       <li>
<h5>长春:</h5>
</li>
<li>
<img src="pic/thesun.png">
</li>
<li><p>&nbsp&nbsp</p></li>
<li>
<h5>-6°C</h5>
</li>
<li><p>&nbsp&nbsp</p></li>
<li>
<img src="pic/you111.png">
</li>
<li><p>&nbsp&nbsp</p></li>
<li>
<h5>30&nbsp|</h5>
</li>
<li><p>&nbsp&nbsp</p></li>
<li>
<a href="#">换肤</a>
</li>
<li><p>&nbsp&nbsp&nbsp&nbsp</p></li>
<li>
<a href="#">消息</a>
</li>
   </ul>
<ul class="right">
<li>
<a href="#" class="more">更多选项</a>
</li>
<li><p>&nbsp&nbsp&nbsp</p></li>
<li>
<a href="#">设置</a>
</li>
<li><p>&nbsp&nbsp&nbsp</p></li>
<li>
<a href="#">猫左卫门QAQ</a>
</li>
<li><p>&nbsp&nbsp&nbsp</p></li>
<li>
<a href="#">学术</a>
</li>
<li><p>&nbsp&nbsp&nbsp</p></li>
<li>
<a href="#">贴吧</a>
</li>
<li><p>&nbsp&nbsp&nbsp</p></li>
<li>
<a href="#">视频</a>
</li>
<li><p>&nbsp&nbsp&nbsp</p></li>
<li>
<a href="#">地图</a>
</li>
<li>
<p>&nbsp&nbsp&nbsp</p>
</li>
<li>
<a href="#">hao123</a>
</li>
<li><p>&nbsp&nbsp&nbsp</p></li>
<li>
<a href="#">新闻</a>
</li>
</ul>
</div>
<div class="middle">
<img src="pic/baidu.png" height="129" width="270" class="baidu">
<ul class="middleU">
<li>
<input type="text">
</li>
<li>
<img src="pic/search.png" class="search">
</li>
</ul>
</div>
<div class="daohang" >
<ul class="nav">
<li>
<img src="pic/head1.png" class="head">
</li>
<li>
<a href="#">我的关住</a>
</li>
<li class="tuijian">
<a href="#">推荐</a>
</li>
<li>
<a href="#">导航</a>
</li>
<li>
<img src="pic/wheel.png" class="wheel">
</li>
</ul>
</div>
<div class="house">
<ul class="house_left">
<li>
<p>————————</p><img src="pic/littlebaidu.png"><p>&nbsp以下内容根据您的兴趣推荐————————</p>
</li>
<li>
<img src="pic/guanwei.jpg" height="96" width="143"><a href="#">耍官威频繁曝光,如何让学生干部回到该有的样子？</a>
<p>人民日报&nbsp2018.11.11</p>
</li>
<li>
<p>—————————————————————————————</p>
</li>
<li>
<img src="pic/guanwei.jpg" height="96" width="143"><a href="#">耍官威频繁曝光,如何让学生干部回到该有的样子？</a>
<p>人民日报&nbsp2018.11.11</p>
</li>
<li>
<p>—————————————————————————————</p>
</li>
</ul>
<ul class="house_right">
<h5>实时热点</h5>
<li><a href="#">52岁林忆莲发福</a>
<a href="#">南京整治出租车<span>新</span></a>
<a href="#">萧伟强病重入院</a>
<a href="#">准新郎酒驾被抓<span>新</span></a>
<a href="#">雄鹿胜开拓者<span>新</span></a>
<a href="#">男教师夜闯宿舍</a>
<a href="#">孙红雷艾特田馥甄</a>
<a href="#">董明珠宁波闯红灯</a>
</li>
<li><a href="#">玛莎拉蒂撞护栏</a>
<a href="#">SpaceX载人飞船</a>
<a href="#">iG 鲁豫有约</a>
<a href="#">詹姆斯回克利夫兰</a>
<a href="#">德罗巴宣布退役</a>
<a href="#">妇女报回应俞敏洪</a>
<a href="#">4岁女童被狗追</a>
<a href="#">小S脸冒神秘黑点</a>
</li>
</ul>
</div>
</body>
</html>