18.12.05Java学习

最新推荐文章于 2024-09-12 15:54:28 发布

原创最新推荐文章于 2024-09-12 15:54:28 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

通过实战学习，尝试制作了简易版百度页面，体验前端技术复杂性，掌握HTML与CSS基础应用，提升网页设计技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

制作一个百度页面

通过这几天的学习，自己尝试制作了一个百度页面，看上去还是比较粗糙的，前端里面包含的东西比较杂而多，需要我们在不断地实战运用中积累，才能达到一个熟能生巧的效果。

源代码

baidu

<link rel="stylesheet" type="text/css" href="1201.css">

换肤
消息
显示频道

	<div id="right-part">
		<ul>
			<li>新闻</li>
            <li>hao123</li>
            <li>地图</li>
            <li>视频</li>
            <li>贴吧</li>
            <li>学术</li>
            <li>账号</li>
            <li>设置</li>
		</ul>
		<input type="button" value="更多产品">	
	</div>
	
</header>
<main>
	<div id="logo">
		<img src="file://E:\我的桌面\1811\1201\bd_logo1.png">
	</div>
	<div id="search">
		<input id="box" type="text" placeholder="这是我们要百度的内容" >
		<input id="btn" type="button" value="百度一下">
	<div id="pic">
		<img src="file://E:\我的桌面\java\125.png">
	</div>
	</div>
</main>
<footer>
	<p><a href="#">设为首页</a>&nbsp&nbsp©2018百度使用百度前必读意见反馈</p>
	<p>备案信息：京公安网安备份11001100111号</p>
</footer>

以上是HTML骨架，我们制作一个页面肯定还是需要各种修饰，所以接下来我们会用到css样式。

header {
height: 30px;
width: 100%;
border-bottom: 1px solid gray;
line-height: 1px;
}

header #left-part {
float: left;
left: 0;
top: 0;
width: 25%;
height: 100%;
}

header li {
float: left;
margin: 0 10px;
list-style: none;
}

header #right-part {
float: right;
right: 0;
top: 0;
width: 50%;
height: 100%;
}

#logo {
width: 350px;
height: 150px;
margin: 20px auto;
}

#logo img {
width: 100%;
height: 100%;
}

#search {
width: 400px;
height: 300px;
margin: 20px auto;
}

#search #box {
width: 300px;
height: 25px;
}

#search #btn {
background: blue;
width: 80px;
height: 30px;
}

#pic img {
width: 20%;
height: 20%;
margin: 150px;

}