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

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

转载最新推荐文章于 2021-03-25 03:33:33 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3962295/blog/2934971

本文详细介绍了使用HTML和CSS进行网页布局与样式设计的方法，包括背景图片自适应、导航栏设计、搜索框与按钮样式、内容板块划分等，通过具体代码实现页面美观与功能性的统一。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
           body{
background: #404040 url(images/baidu_bg.jpg) no-repeat 0 0;
/* 背景图片宽与浏览器自适应，高不变*/
background-size:100% ;
background-attachment: fixed;
           }
li{
list-style: none;
}
/* 顶部导航栏*/
.top_nav{
width: 1349px;
height: 32px;
background-color: #8A969C;
}
.top_nav div{
float: left;
}
/* 顶部导航栏左边*/
.top_nav_left{
width: 260px;
height: 32px;
font: 12px arial;
}
.top_nav_left li{
float: left;
}
.left_left{
margin-left: 10px;
}
.left_left a{
text-decoration: none;
color: #fff;
}
.left_left a span{
padding-left: 5px;
line-height: 32px;
}
/* 天气：下雪的图标*/
.xuehua{
float: left;
display: inline-block;
width: 18px;
height: 18px;
padding-top: 5px;
}
/* 空气质量“优”变蓝*/
em{
color: blue;
font-weight: bold;
font: 12px arial;
}
/* 顶部导航栏右边*/
.top_nav_right{
width: 590px;
height: 32px;
margin-left: 499px;
text-align: right;
}
.left_right a{
color: #fff;
margin-left: 15px;
line-height: 32px;
}
.top_nav_right a{
color: #fff;
font: 12px arial;
font-weight: bold;
line-height: 32px;
margin-left: 19px;
}
/* 更多产品*/
.top_nav_right .r_more{
display: inline-block;
width: 86px;
height:32px;
margin-left: 10px;
background-color: #398bfb;
text-align: center;
text-decoration: none;
}
/* 搜索板块*/
.search{
width: 641px;
height: 262px;
margin: 0 auto 0 auto;
}
.search img{
margin: 10px 0 5px 186px;
}
/* 输入框*/
.search input{
border: none;
width: 537px;
height: 40px;
float: left;
box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
/* 相机图标*/
.search span{
display: inline-block;
width: 18px;
height: 16px;
background: url("images/camera_new_5606e8f.png") no-repeat;
position: absolute;
top: 193px;
left: 867px;
}
/* 百度一下按钮*/
.search button{
border: none;
width: 104px;
height: 40px;
font-size: 16px;
background: url("images/button.png") no-repeat -206px 0;
float: left;
box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
/* 中间主要板块*/
.center_main{
width: 895px;
height: 530px;
margin: 0 auto;
background-color:#fff;
}
.center_main a{
text-decoration: none;
}
/* 主要板块的菜单*/
.center_menus{
width: 895px;
height: 40px;
font-size: 14px;
line-height: 40px;
border-bottom: 1px solid #e9e9e9;
}
/* 菜单下的内容板块*/
.center_contents{
width: 895px;
height: 490px;
}
/* 我的关注板块*/
.menu_mine{
width: 124px;
height: 40px;
float: left;
}
/* 推荐与导航板块*/
.menu_outer{
width: 721px;
height: 40px;
float: left;
text-align: center;
}
/* 设置板块*/
.menu_set{
width: 50px;
height: 40px;
float: left;
}
.mine_img{
width: 20px;
height: 18px;
margin: 11px 0 0 20px;
background: url("images/mine.png") -15px 0;
}
.mine_focus{
width: 56px;
height: 39px;
}
.center_menus ul li{
float: left;
color: #333;
}
/* 推荐*/
.out_recom{
width: 80px;
height: 40px;
font-weight: bold;
background-color: #9a9da2;
}
/* 导航*/
.out_nav{
width: 80px;
height: 40px;
}
/* 设置图标*/
.set_icon{
width: 18px;
height: 18px;
margin: 11px 0 0 13px;
background: url("images/mine.png") no-repeat -121px -49px;
}
/* 内容左板块*/
.content_left{
width: 538px;
height: 490px;
float: left;
margin-left: 27px;
}
/* 内容左板块开头*/
.news_top{
width: 540px;
height: 38px;
}
/* 内容左板块开头左边横线*/
.left_line{
height: 0;
width: 172px;
float: left;
border-bottom: 1px solid #e2e2e2;
margin-top: 21px;
}
/* 内容左板块开头右边横线*/
.right_line{
height: 0;
width: 172px;
float: left;
border-bottom: 1px solid #e2e2e2;
margin-top: 21px;
}
/* 内容左板块开头中间文字*/
.tips_content{
width: 187px;
height: 18px;
padding: 11px 3px 0 3px;
margin: 0 auto;
float: left;
}
/* 内容左板块开头中间百度图标*/
.tips_icon{
float: left;
display: inline-block;
height: 14px;
width: 12px;
margin: 4px 6px 0 6px;
background: url("images/tips.png") -45px -1px;
}
.tips_word{
font-size: 13px;
color: rgba(0, 0, 0, .4);
}
/* 第一条推荐新闻*/
.news1{
width: 540px;
height: 223px;
border-bottom: 1px solid #f0f0f0;
}
/* 推荐新闻标题*/
.content_left h2{
font-size: 18px;
width: 540px;
height: 20px;
float: left;
line-height: 20px;
margin: 21px 0 12px 0;
}
/* 推荐新闻标题修饰，加省略号*/
.content_left h2 a{
color: #666;
float: left;
width: 508px;
height: 20px;
/* 强制显示在一行 */
white-space: nowrap;
/* 隐藏溢出文本 */
overflow: hidden;
/* 文本带省略号 */
text-overflow:ellipsis;
}
.content_left ul li{
float: left;
}
/* 推荐新闻三张图片插入*/
.l1{
width: 179px;
height: 119px;
padding-right: 1px;
}
/* 新闻三张图片后面用为类选择器清除浮动*/
.news1:after{
content:'';
display: block;
clear: both;
}
/* 推荐新闻来源及时间*/
.l2{
display: inline-block;
width: 540px;
height: 14px;
margin-top: 17px;
color: rgba(0,0,0,0.4);
line-height: 15px;
font-size: 13px;
}
/* 推荐新闻来源*/
.net{
padding-right:11px;
color: rgba(0,0,0,0.4);
}
/* 第二条推荐新闻*/
.news2{
width: 540px;
height: 223px;
border-bottom: 1px solid #f0f0f0;
}
/* 第二条推荐新闻后面的加红框热点*/
.hot_point{
width: 30px;
font-size: 12px;
margin-left: 5px;
color: #f13f40;
border: 1px solid #efb9b9;
border-radius: 3px;
}
/* 内容右边板块*/
.content_right{
width: 300px;
height: 302px;
float: left;
margin: 20px 0 0 25px;
font-size: 13px;
}
.content_right a{
color: #333;
}
/* 内容右边开头*/
.r_title{
width: 270px;
height: 30px;
}
.r_title li{
float: left;
color: #333;
}
/* 内容右边开头：实时热点*/
.title_text{
width: 94px;
height: 25px;
padding-top: 3px;
font-size: 14px;
font-weight: bold;
}
/* 刷新图标*/
.re_icon{
display: inline-block;
width: 20px;
height: 16px;
float: left;
margin-top: 2px;
background: url("images/huan.png") no-repeat -23px -25px;
}
/* 刷新：换一换*/
.hot_refresh{
width: 80px;
height: 25px;
font-size: 13px;
padding-top: 5px;
margin-left: 96px;
}
/* 内容右边热点依次排名*/
.r_content{
width: 300px;
height: 272px;
font-size: 14px;
}
.r_content li{
display: inline-block;
width: 145px;
height: 34px;
margin-right: 2px;
line-height: 35px;
}
/* 加红框新字*/
.new_identity{
display: inline-block;
width: 18px;
height: 20px;
margin: 7px 0 0 5px;
background: url("images/huan.png") -57px -98px no-repeat;
position: absolute;
}
</style>
</head>
<body>

<div class="top_nav">

<div class="top_nav_left">
<ul>

<li class="left_left">
<a href="#" target="_blank">
<span>长春:</span>
</a>
</li>
<li class="left_left">

<a href="#" target="_blank">
<span class="xuehua">
<img src="images/xuehua.png" height="18" width="18" alt="图片">
</span>
<span>-2℃ </span>
<em>优</em>
<span>33</span>
<span>|</span>
</a>
</li>

<li class="left_right">
<a href="#" target="_blank">换肤</a>
<a href="#" target="_blank">消息</a>
</li>
</ul>
</div>

<div class="top_nav_right">
<a href="#" target="_blank">新闻</a>
<a href="#" target="_blank">hao123</a>
<a href="#" target="_blank">地图</a>
<a href="#" target="_blank">视频</a>
<a href="#" target="_blank">贴吧</a>
<a href="#" target="_blank">学术</a>
<a href="#" target="_blank">173******67</a>
<a href="#" target="_blank">设置</a>
<a href="#" class="r_more" target="_blank">更多产品</a>
</div>
</div>

<div class="search">

<img src="images/baidu_logo.png" height="129" width="270" alt="图片">

<input type="text">

<span></span>

<button>百度一下</button>
</div>

<div class="center_main">

<div class="center_menus">
<a href="#" target="_blank">
<ul class="menu_mine">
<li class="mine_img"></li>
<li class="mine_focus">我的关注</li>
</ul>
</a>
<ul class="menu_outer">
<a href="#" target="_blank">
<li class="out_recom">推荐</li>
</a>
<a href="#" target="_blank">
<li class="out_nav">导航</li>
</a>
</ul>

<ul class="menu_set">
<a href="#" target="_blank">
<li class="set_icon"></li>
</a>
</ul>
</div>

<div class="center_contents">

<div class="content_left">

<div class="news_top">
<div class="left_line"></div>
<div class="tips_content">
<span class="tips_icon"></span>
<span class="tips_word">以下内容根据您的兴趣推荐</span>
</div>
<div class="right_line"></div>
</div>

<ul class="news1">

<h2>
<a href="#" target="_blank">D&G辱华致其中国重要销售渠道被切断：八大电商已下架相关产品！</a>
</h2>

<li class="l1">
<a href="#" target="_blank">
<img src="images/1-1.jpg" height="119" width="179" alt="图片">
</a>
</li>
<li class="l1">
<a href="#" target="_blank">
<img src="images/1-2.jpg" height="119" width="179" alt="图片">
</a>
</li>
<li class="l1">
<a href="#" target="_blank">
<img src="images/1-3.jpg" height="119" width="179" alt="图片">
</a>
</li>

<li class="l2">
<a href="#" target="_blank" class="net">金融虎</a>
<span class="time">04-22 11:42</span>
</li>
</ul>

<ul class="news2">
<h2>

<a href="#" target="_blank">田协就“马拉松选手被干扰”事件表态：任何仪式活动不得影响比赛</a>
</h2>

<li class="l1">
<a href="#" target="_blank">
<img src="images/2-1.jpg" height="119" width="179" alt="图片">
</a>
</li>
<li class="l1">
<a href="#" target="_blank">
<img src="images/2-2.jpg" height="119" width="179" alt="图片">
</a>
</li>
<li class="l1">
<a href="#" target="_blank">
<img src="images/2-3.jpg" height="119" width="179" alt="图片">
</a>
</li>

<li class="l2">
<a href="#" target="_blank" class="net">宏堃来评体育啦</a>
<span class="time">04-22 20:42</span>
<span class="hot_point">热点</span>
</li>
</ul>
</div>

<div class="content_right">

<ul class="r_title">
<li class="title_text">
<a href="#" target="_blank">实时热点</a>
</li>
<li class="hot_refresh">
<a href="#" target="_blank">
<span class="re_icon"></span>
<span>换一换</span>
</a>
</li>
</ul>

<ul class="r_content">
<li>
<a href="#" target="_blank">非自然死亡翻拍</a>

<span class="new_identity"></span>
</li>
<li>
<a href="#" target="_blank">Jasper做作业</a>
<span class="new_identity"></span>
</li>
<li>
<a href="#" target="_blank">Selina为妹妹庆生 </a>
<span class="new_identity"></span>
</li>
<li>
<a href="#" target="_blank">
赵丽颖老公视角</a>
</li>
<li>
<a href="#" target="_blank">王大陆亲Jeffrey</a>
</li>
<li>
<a href="#" target="_blank">周琦吐露心声</a>
</li>
<li>
<a href="#" target="_blank">ofo回应退押金难</a>
<span class="new_identity"></span>
</li>
<li>
<a href="#" target="_blank">周杰伦戒奶茶</a>
</li>
<li>
<a href="#" target="_blank">薛之谦哭了</a>
<span class="new_identity"></span>
</li>
<li>
<a href="#" target="_blank">辽宁通报撞人事件</a>
</li>
<li>
<a href="#" target="_blank">富士康回应裁员</a>
</li>
<li>
<a href="#" target="_blank">哈林再当爸</a>
</li>
<li>
<a href="#" target="_blank">郑嘉颖升级当爸</a>
</li>
<li>
<a href="#" target="_blank">真人版狮子王</a>
<span class="new_identity"></span>
</li>
<li>
<a href="#" target="_blank">宜家裁员7500人</a>
</li>
<li>
<a href="#" target="_blank">试点无痛分娩</a>
<span class="new_identity"></span>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>