2021-06-10

最新推荐文章于 2022-02-14 09:25:29 发布

Hugge .

最新推荐文章于 2022-02-14 09:25:29 发布

阅读量56

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_53887067/article/details/117774853

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前端第三次作业修改

HTML代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>百度一下,你就知道</title>
    <link rel="stylesheet" href="sss.css" type="text/css"/ >
</head>
<body>
    <!--百度导航栏 开始 -->
    <div class="baidu_nav">
        <!--nav导航栏标签-->
        <nav class="top_nav">
            <a href="javascript:void (0)" class="jiacu">新闻</a>
            <a href="javascript:void (0)" class="jiacu">hao123</a>
            <a href="javascript:void (0)" class="jiacu">地图</a>    
            <a href="javascript:void (0)" class="jiacu">视频</a>
            <a href="javascript:void (0)" class="jiacu">贴吧</a>
            <a href="javascript:void (0)" class="jiacu">学术</a>
            <a href="javascript:void (0)">登陆</a>
            <a href="javascript:void (0)">设置</a>
            <a href="javascript:void (0)" class="more_product">更多产品</a>
        </nav>    
    </div>
    <!--百度顶部导航栏   结束-->
    
    <!--百度中间部分 开始-->
    <div class="middle">
        <div class="logo"><img src="baidu.png"></div>
        <div class="search_box">
            <input type="text" class="search_input"/ >
            <input type="button" class="search_button" value="百度一下"/ >
        </div>
		</div>
    <!--百度中间部分  结束-->
	
    <!--热搜部分 开始-->
	<div class="container">
		<div class="con">
			<div class="con-r">百度热榜</div>
			<div class="con-l"><a href="#" id="huan">换一换</a></div>
		</div>
		<div id="rs">
			<ul>
				<li><a><span>1.</span>热榜1</a></li>
				<li><a><span>4.</span>热榜4</a></li>
				<li><a><span>2.</span>热榜2</a></li>
				<li><a><span>5.</span>热榜5</a></li>
				<li><a><span>3.</span>热榜3</a></li>
				<li><a><span>6.</span>热榜6</a></li>
			</ul>
		</div>
	</div>
	<!--热搜部分 结束-->
	
    <!--百度底部部分 开始-->
    <div class="bottom">
        <ul>
            <li class="ewm">
                <img src="image/ewm.png" width="60" height="60"/ >
            </li>
            <li class=phone_bd>百度</li>
        </ul>
        <div class="lj_bd">
            <p>
                <a href="javascript:void (0)">把百度设为主页</a>
                <a href="javascript:void (0)">关于百度</a>
                <a href="javascript:void (0)">About  Baidu</a>
                <a href="javascript:void (0)">百度推广</a>
            </p>
            <p class="bottom_bottom">
                <a>&copy;2018 Baidu</a>
                <a href="javascript:void (0)">使用百度前必读 意见反馈</a>
                <a>京ICP证030173号</a>
                <span class="icon"></span>
                <a href="javascript:void (0)">京公网安备11000002000001号</a>
                <span class="icon icon_1"></span>
            </p>
        </div>
    </div>
    <!--百度底部部分  结束-->
</body>
<html>

css代码:

*{
    margin:0 auto;
    padding:0px;
}
.baidu_nav{
    width:100%;
    height:24px;
    margin-top:19px;
}
.top_nav{
    height:24px;
    float:right;
}
.top_nav a{
    display:block;
    line-height:24px;
    padding:0px 9px;
    font-size:13px;
    color:black;
    float:left;
	text-decoration: none;
}
.top_nav a:hover{
    color:#00c;
}
.jiacu{
    font-weight:bold;
}
.more_product{
    display:block;
    width:60px;
    height:24px;
    background-color:#38f;
    text-decoration:none;
    color:white!important;
    float:left;
}
.middle{
    width:100%;
    height:191px;
    margin-top:50px;
}
.logo{
    height:129px;
    width:270px;
    background-image: url("logo.png");
    background-size: 270px 129px;
}
.search_box{
    width:641px;
    height:37px;
    margin-top:20px;
}
.search_input{
    width:539px;
    height:34px;
    border:1px solid darkgray;
    float:left;
	border-radius: 5px;
}
.search_button{
    width:100px;
    height:37px;
    font-size:15px;
    background-color:#3385ff;
    color:white;
    font-family:"Microsoft YaHei";
    border:0px;
	border-radius: 5px;
    float:left;
}
.search_button:hover{
    background-color:#2d78f4;
}
.container{text-align: center;}
		.con{
			margin: 100px auto 0;
			text-align: center;
			width: 658px;
			height: 20px;
		}
		#huan{color: #bbb;}
		#huan:hover{color: blue;}
		.con-r{
			display: block;
			float: left;
			overflow: hidden;
		}
		.con-l{
			display: block;
			float: right;
		}
		#rs ul{
			width: 654px;
			margin: 10px auto;
			text-align: center;
		}
		#rs ul li{
			display: inline;
			padding: 10px 0;
			width: 50%;
			float: left;
			height: 20px; 
			overflow: hidden;
			text-align: left;
		}
		#rs span{margin-right: 5px;}
		#rs ul li a:hover{color: #4e71f2;}
.bottom{
    width:640px;
    height:200px;
    margin-top:150px;
}
.ewm{
    width:60px;
    height:60px;
}
.phone_bd{
    text-align:center;
    width:60px;
    height:23px;
    color:#666;
    font-size:12px;
    font-weight:bold;
}
.lj_bd{
    width:100%;
    height:46px; 
}
.lj_bd p{
    width:640px;
    text-align: center;
    font-size: 12px;
    color:#999;
    margin-top:10px;
}
.lj_bd p a{
    padding:0px 10px;  
    font-size: 12px;
    color:#999;
	text-decoration: none;
}
.bottom_bottom{
    width:640px;
    height:17px;
}
.bottom_bottom a{
    display:block;
    float:left;
	text-decoration: none;
}
.icon{
    display:block;
    width:14px;
    height:17px;
    background-image:url("../image/icon.png");
    float:left;
    background-position:-600px -96px;
}
.icon_1{
    background-position:-623px -96px;
}