CSS记忆——仿百度首页

n南x星

已于 2022-07-08 14:00:32 修改

阅读量749

点赞数 1

文章标签： css html

于 2022-07-08 13:57:44 首次发布

本文链接：https://blog.csdn.net/weixin_50517509/article/details/125674997

版权

CSS记忆——仿百度首页

CSS主要控制HTML网页的样式和布局。
本文主要列举一些常用的CSS知识，并制作了简单的百度首页，由于还是run noob，不足之处请指出。

编译器选用HBuilder X，该软件原本的代码注释行为灰色，显示效果不好，我们可以自己修改成喜欢的颜色。

1.打开_defaults.json的路径：F:\Hbuider\HBuilderX.3.4.18.20220630\HBuilderX\plugins\theme-default\themes
2.light_defaults.json为白色主题，可将文件中所有的"#93A1A1"修改为"#00AA00"并保存
3.dark_defaults.json为黑色主题，将所有的"#75715E" 替换成 "#00AA00"即可

效果如图：
在这里插入图片描述

下面简单介绍一些CSS的用法

1. CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来

2. CSS注释以 /* 开始, 以 */ 结束

3. id选择器      #id{}         id 为 id="id_name"    
   class选择器   .class()      class 为 class="class_name"
   伪类选择器 				   使选中的标签在不同场景下的某个状态
   		a.两个通用状态
 			hover 	 		   鼠标悬停
 			active  		   鼠标在某个元素上按下
 
 		b.超链接a标签特有的
 			link 			   超链接地址不能被成功访问展示的状态
 			visited  		   超链接地址能被成功访问展示的状态

4. 外部样式  <link> 标签
	<head>
		<link ...>
	</head>

5. 内部样式   <style> 标签
	<head>
		<style>
			...
		</style>
	</head>

6. 内联样式  添加style属性即可
	<p style="...">hello world!</p>

7. 背景
	background-color		背景颜色
	background-position		背景图像的位置
	background-size			图片大小
	background-image		图像

8. 字体、文字
	font					属性
	font-family				字体系列
	font-size				大小
	font-style				样式
	text-align 				位置(left、right、center)
	tex-decoration 			在文字的下方或上方或中间添加一条横线(underline、overline、line-throught)

9. 边框
	border
		solid				单实线 
		double				双实线 
		dashed				虚线 
		dotted				点
	border-style
	border-color
	border-left \ border-right
	border-wieth \ border-height 
	border-top
	border-radius    		圆角边框：可以设置百分比，也可以设置多少px

10. 边距
	margin					外边距
		margin-top \ margin-bottom	\ margin-left \  margin-right	
							(上、下、左、右边距）	
	padding					内边距
		a b c d         	上 右 下 左 依次为 a b c d
		a b c				上 左、右 下 依次为 a b c 
		a b 				上、下 左、右 依次为 a b
		a					所有都为 a

11. 浮动(Float，会使元素向左或向右移动，其周围的元素也会重新排列，比如一列可以靠浮动转变为一行显示)
	clear      				清除浮动

12. 定位
		absolute 			绝对定位
		relative 			相对定位
		fixed 				固定定位(返回顶部、网站右下角联系咨询窗口)

下面是我通过CSS实现的百度页面
仿百度.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度一下，你就知道</title>
		<link rel="shortcut icon" href="./img/baidu.png" type="image/x-icon"/>
		<!-- 引入外部样式 -->
		<link rel="stylesheet" type="text/css" href="./css/style.css">
	</head>
	<body>
		<!-- top -->
		<div class="top">
			<div class="top_left">
				<a href="">新闻&emsp;</a>
				<a href="">hao123&emsp;</a>
				<a href="">地图&emsp;</a>
				<a href="">贴吧&emsp;</a>
				<a href="">视频&emsp;</a>
				<a href="">图片&emsp;</a>
				<a href="">网盘&emsp;</a>
				<a href="">更多&emsp;</a>
			</div>
			<!-- top-right -->
			<div class="top_right">
				<a href="" class="set">设置&emsp;</a>
				<input type="submit" value="登录" class="login">
			</div>
		</div>
		<!-- crnter -->
		<div class="center"></div>
		<!-- bottom -->
		<div class="bottom"></div>
		<br>
		<br>
		<div class="img">
			<p class="img"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""
					height="130px">
			</p>
		</div>

		<div class="imf">
			<p class="imf">
				<img src="./img/1.png" alt="" height="80px">
			</p>
		</div>

		<div class="resou">
			<p class="resou">百度热搜 >&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
				&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;↺换一换&emsp;
			</p>
		</div>
		<div class="table">
			<span>
				↑ &emsp;今日中国再不是去37年的中国&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;&nbsp;
				3 &emsp;多措并举助企稳就业&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<br>
			</span>
			<span>
				1 &emsp;英国首相约翰逊将宣布辞职&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
				4 &emsp;BA.5或“重拾”肺部感染能力&emsp;&emsp;&emsp;&emsp;<br>
			</span>
			<span>
				&numsp;2 &emsp;遇害女大学生父母将判决书烧给女儿&emsp;&emsp;&emsp;
				5 &emsp;博士被岳父举报嫖娼成瘾 &nbsp; &nbsp;校方回应&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
			</span>
		</div>
		<div class="bottoe">
			<span>关于百度&emsp;&emsp;About Baidu&emsp;&emsp;京公网安备11000002000001号&emsp;&emsp;京ICP证030173号&emsp;&emsp;药品医疗器械网络信息服务备案（京）网药械信息备字（2021）第00159号&emsp;&nbsp;^
			</span>
		</div>
	</body>
</html>

style.css

.top_left{
	float: left;
}

.top_right{
	float: right;
	right: 20px
}
a{
	/* 修改文字颜色 */
	color: black;
	/* 去掉超链接下划线 */
	text-decoration: none;
	font: 15px Arial,sans-serif;
	margin-left: 10px;
}

.top_right > a,.top_right > input{
	margin-right: 10px;
}

.top_right > input{
	background-color: rgba(61, 83, 239, 0.9);
	color: white;
	border: 0px;
	border-radius: 6px;
	font-size: 15px;
}
/* .login{
	float: right;
	margin-right: 13px;
}
.set{
	float: right;
	right: 100px;
} */

.img > .img{
	margin: 0;
	height: 130px;
	text-align: center;
	
}

.imf > .imf{
	margin: 0;
	height: 80px;
	text-align: center;
}

.resou > .resou {
    text-decoration: none;
    font: 17px Arial;
    margin-left: 10px;
	text-align: center;
}

.table{
	font-size: 16px;
	height: 50px;
	line-height: 40px;
	text-decoration: none;
	margin-left: 10px;
	text-align: center;
}

	
.bottoe{
	width: 100%;
	margin: 0;
	display: block;
	color: rgb(187, 187, 187);
	font-size: 10px;
	text-align: center;
	position: fixed;
	bottom: 10px;
}

img

标签页图片:1.png
https://img-blog.csdnimg.cn/6cd60c61c1414193a14af9cde89da595.png#pic_center
搜索框图片:baidu.png
https://img-blog.csdnimg.cn/1502134870e3473fb475679cad3a0534.png#pic_center

运行结果：
在这里插入图片描述
百度官网：

效果拉满！！！