<!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>
.a {
text-decoration: none;
color: black;
font-size: 14px;
}
.aa {
text-decoration: none;
color: black;
font-size: 17px;
}
.b {
display: block;
text-decoration: none;
text-align: center;
color: rgb(248, 245, 245);
background-color: #2147f0;
font-size: 14px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
width: 50px;
height: 20px;
}
.c {
width: 600px;
height: 40px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.d {
width: 100px;
height: 46px;
color: rgb(248, 245, 245);
background-color: #2147f0;
left:-100px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.none {
font-size: 10px;
color: gray;
text-decoration: none;
}
.juzhong {
display: table-cell;
vertical-align: middle;
text-align: center;
}
div {
background-image: url(baidu.png);
width: 500px;
height: 300px;
background-position: center;
background-repeat: no-repeat;
}
a:hover {
color: skyblue;
}
aa:hover {
color: skyblue;
}
.img:hover {
color: skyblue;
}
.myway li {
margin-bottom: 20px;
}
.bo {
vertical-align:baseline;
/* 在整个网页的位置 */
position: absolute;
/* 在整个网页的位置的相对性*/
}
body {
white-space: nowrap;
}
.jiantou {
background-image: url(jiantou.png);
background-repeat: no-repeat;
width: 10px;
height: 30px;
text-indent: 4em;
background-position: 38px center;
vertical-align: middle;
}
.tupian2 {
display: block;
background-image: url(resou.png);
background-repeat: no-repeat;
text-indent: 3em;
background-position: 0 center;
}
.re {
display: block;
background-image: url(re.png);
background-repeat: no-repeat;
text-indent: 3em;
background-position: 0 center;
}
.liebiao {
list-style: none;
}
.bianju {
margin-right: -5.1px;
}
.xiangji {
position: absolute;
right: 470px;
top: 360px;
}
.tupian {
background-image: url(换一换.png);
background-repeat: no-repeat;
width: 10px;
height: 30px;
text-indent: 15em;
background-position: 280px center;
background-size: 20px;
}
input:focus{
/* 输入表单边框变色 */
outline:0;
border: 2px solid #315efb;
}
.youduiqi {
text-align: right;
}
.color {
color: grey;
font-size: 14px;
}
.jianju {
border-collapse: separate;
border-spacing: 10px;
}
.hot{
display:inline-block;
background-color:red;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
color:white;
}
.xin{
display:inline-block;
background-color:orange;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
color:white;
}
</style>
</head>
<body>
<!-- 菜单栏 -->
<table cellpadding="10px">
<tr>
<td><a href="#" class="a">新闻</a></td>
<td> <a href="#" class="a">hao123</a></td>
<td><a href="#" class="a">地图</a></td>
<td><a href="#" class="a">贴吧</a></td>
<td><a href="#" class="a">视频</a></td>
<td><a href="#" class="a">图片</a></td>
<td><a href="#" class="a">网盘</a></td>
<td width="500"><a href="#" class="a">更多</a></td>
<td width="400" align="right"><a href="#" class="a">设置</a></td>
<td><a href="#" class="b">登录</a></td>
</tr>
</table>
<!-- 插入百度图片 -->
<center>
<div></div>
</center>
<!-- 搜索栏 -->
<table>
<tr>
<center>
<input type="text" class="c bianju biankuang">
<img src="xiangji.png" class="xiangji bo" width="60px" height="35px">
<input type="button" value="百度一下" class="d">
</center>
</tr>
<br>
<br>
</table>
<!-- 新闻栏 -->
<center>
<table width="100px" class="jianju">
<tr>
<td class="tupian1"><a href="#"
class="aa"><strong>        百度热搜  ></a></td>
<td class="tupian youduiqi"><a href="#" class="aa color"><strong >   换一换</a></td>
</tr>
<tr>
<td >
<ol class=" myway liebiao">
<li>
<a href="#" class="aa "><span style=color:red>1</span>.北京十二个区域开展三天三轮核酸 <span class="hot">热</span></a>
</li>
<li>
<a href="#" class="aa">2.北京1人3次上公厕引发近40人感染</a>
</li>
<li>
<a href="#" class="aa">3.倒塌事故被困者:敲了三天三夜管子</a>
</li>
</ol>
</td>
<td align="left" width="40">
<ol class="myway liebiao">
<li>
<a href="#" class="aa">4.中央政治局会议为当前经济工作定调</a>
</li>
<li>
<a href="#" class="aa"><span span style=color:orange>5</span>.媒体:马某某被杭州公安局采取措施 <span class="xin">新</span></a>
</li>
<li>
<a href="#" class="aa">6.上海新增本土“274+5395”死亡20例</a>
</li>
</ol>
</td>
</tr>
</table>
</center>
<!-- 小结 -->
<table cellpadding="10">
<tr class="bo">
<td><a href="#" class="none">关于百度</a></td>
<td><a href="#" class="none">About baidu</a></td>
<td><a href="#" class="none">使用百度前必读</a></td>
<td><a href="#" class="none">帮助中心</a></td>
<td><a href="#" class="none">京公网安备110000020000011号</a></td>
<td><a href="#" class="none">京ICP证030173号</a></td>
<td><a href="#" class="none">@2022baidu</a></td>
<td><a href="#" class="none">互联网药品信息服务资格证书(京)-经营性-2017-0020</a></td>
<td><a href="#" class="none">信息网络传播视听节目许可证0110516</a></td>
<td>
<image src="bbb.png">
</td>
</tr>
</table>
</body>
</html>
本次作业是百度界面,我感觉一个网页的制作也是一件不容易的事,我们得在脑子里有具体的框架,知道在哪一部分要用什么形式写,怎样让整个界面看起来美观,整齐,这都是我们需要思考的问题。
通过这次作业我学会了css的一些基础知识,并能够自行摸索使用在作业中,但还是不够熟练,可能要反复观看pink老师的视频才能记住,于是我开始记笔记,不仅便于记忆,还方便查找。本次百度静态页面的制作,我发现自己对排版方面的技巧还是掌握不够,希望在下次作业中能够得到提高,一次又一次的收获。
这次的学习涉及到了css的知识,难度在加深,但是制作网页是一件很有趣的事情
更多推荐
百度网页的制作
发布评论