【HTML_CSS笔记】HTML_CSS入坑

RSer_gis

已于 2024-04-18 23:02:17 修改

阅读量817

点赞数 20

分类专栏： web前端文章标签： html css 笔记

于 2023-12-02 12:00:26 首次发布

本文链接：https://blog.csdn.net/m0_37609748/article/details/134024451

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML_CSS笔记

1 HTML示例杂记
2 CSS
3 百度页面搭建

1 HTML示例杂记

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>这是一个标题</title>
		
		<!--CSS引入的三种方式  当样式冲突的时候采用就近原则   就近：指代的是加载顺序-->
		
		<!--[2]内嵌式-->
		<style>
			/* h1是代表的是页面中所有的h1标签  h1是标签名称 */
			h1{
				color: red;
				font-size: 90px;
			}			
		</style>
		
		<!--外联式 rel:引入文件的类型  href:引入文件的地址-->
		<link rel="stylesheet" href="css/sxt.css">
	</head>
	<h1>html学习</h1>
	<h2>html学习</h2>
	<body>
		<!--[1]行内样式  style="样式名称:值;样式名称2:值2"-->
		<h1 style="color: blue;">html学习_样式使用</h1>
		
		<b>字体加粗</b>
		<i>斜体标题</i>
		H<sub>2</sub>  <!--下角标签-->
		3<sup>2</sup>  <!--上角标签-->
		<del>199</del>  <!--删除标签-->
		<span>专门结合css样式使用的</span>
		
		<br>
		<!--锚点功能-->
		顶部：<a name="top" href="#bottom">跳转至底部</a>
		<!--页面跳转-->
		<a href="http://www.baidu.com" target="_blank">百度一下</a>
		<a href="http://www.taobao.com" target="_self">淘宝购物</a>
		
		<!--分割线-->
		<hr>
		
		<a href="http://www.taobao.com" target="abc">淘宝一下</a>
		<a href="https://www.mi.com/" target="abc">小米官网</a>
		<a href="https://www.baidu.com" target="abc">百度官网</a>
		
		<a href="http://www.baidu.com">
			<img src="img/1.jpg" width="200px" border="2px" title="这是一张图片" alt="图片加载失败">
		</a>
		
		<!--内联框架-->
		<iframe width="900px" height="200px" name="abc" frameborder="1" src="https://www.jd.com/"></iframe>
		
		<!--有序、无序、定义列表-->
		<ul type="circle">
			<li>女装/家具/内衣</li>
			<li>Java ME</li>
			<li>Java SE</li>
			<li>Java EE</li>			
		</ul>
		<ol type="a">
			<li>女装/家具/内衣</li>
			<li>Java ME</li>
			<li>Java SE</li>
			<li>Java EE</li>	
		</ol>
		<dl>
			<dt>xxxxx</dt>
			<dd>java 01</dd>
			<dd>java 02</dd>
			<dd>java 03</dd>
		</dl>
		
		<!--音频、视频audio video-->
		<audio src="img/Lesson 2 - Holidays.mp3" controls="controls" loop="loop">您的浏览器不支持自动播放音频文件</audio><!--属性名和属性值相同时可以只写属性名-->
		<video src="img/061论一只爬虫的自我修养9：异常处理.mp4" controls width="400px" heigt="300" poster="img/1.jpg">
			您的浏览器不支持自动播放视频
		</video>
		
		<!--form表单-->
		<form action="">
			<!---隐藏域标签-->
			<input type="hidden" value="123" /> <br/>
			<!-- 图片标签作用也可以提交表单，和submit的区别是在提交表单的同时可以引入图片-->
			<input type="image" src="img/2.jpg" width="40px" title="image" /> <br/>
			
			<!--就是一个普通按钮，不具备任何的功能  结合js事件使用-->
			<input type="button" value="我是一个按钮"/> <br/>
			<button type="button">我是一个按钮</button>
			
			<input type="date" /><br/>
			<input type="datetime-local" /><br/>
			<input type="number" min="1" max="100" /> <br/>
			<input type="range" min="1" max="15" step="2" /> <br/>
			<input type="color" /> <br/>
			<input type="email" title="email"/> <br/>
			<input type="url" title="url"/> <br/>
			<input type="submit" /> 
			<input type="reset" /> <br/>			
		</form>
		
		<hr/>
		<!--个人简历实现案例-->
		<form>
			<table border="1px" cellspacing="0px">
				<tr>
					<th>用户名</th>
					<th><input type="text"></th>
				</tr>
				<tr>
					<th>照片</th>
					<th><input type="file"></th>
				</tr>
				<tr>
					<th>密码</th>
					<th><input type="password"></th>
				</tr>
				<tr>
					<th>确认密码</th>
					<th><input type="password"></th>
				</tr>
				<tr>
					<th>性别</th>
					<th>
						<!--单选框-->
						<input type="radio" name="sex" checked>男
						<input type="radio" name="sex" >女
					</th>
				</tr>
				<tr>
					<th>爱好</th>
					<th>
						<!--复选框-->
						<input type="checkbox" checked>音乐
						<input type="checkbox" >篮球
						<input type="checkbox" >看书
					</th>
				</tr>
				<tr>
					<th>学历</th>
					<th>
						<!--下拉框-->
						<select name="combox">
							<option >学士</option>
							<option >硕士</option>
							<option selected>博士</option>
						</select>
					</th>
				</tr>
				<tr>
					<th>手机号码</th>
					<th><input type="text"></th>
				</tr>
				<tr>
					<th>自我介绍</th>
					<th><textarea cols="20" placeholder="自我介绍"></textarea></th>
				</tr>
				<tr>
					<th colspan="2">
					<input type="submit" value="提交">
					<input type="reset" value="重置">
					</th>	
				</tr>
			</table>
		</form>
		
				
		<br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
		底部：<a name="bottom" href="#top">回到顶部</a>
	</body>
</html>

2 CSS

2.1 常用选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* ID选择器  #p1 获得id名称为p1的标签 */
			/* 建议：ID命名采用 字母+数字方式或者纯字母a_b */
			#p1{
				color: red;
				font-size: 20px;
				font-style: italic;				
			}
			/* class选择器 .a1获得类名称为a1的标签 */
			.a1{
				color: green;
			}
			/* 标签选择器  p获得页面中所有的p标签 */
		/* 	p{
				color: yellow;
			} */
			
			/* 后代选择器 获得的是包含所有的子类 */
		/* 	.p3 span{
				color:pink;
			} */
			/* 子选择器 获得是直接子节点的所有元素 */
			.p3>span{
				color: blue; 
			}
			/* 并列选择器/分组选择器 */
			h1,#sp1,.p4{
				color: gold;
			}
		</style>
	</head>
	<body>
		<!--选择器的作用：就是获得需要增加样式元素的方式-->
		<!--选择器优先级：id>class>标签-->
		<!--注：假如ID的权重为100，则class为10，标签为1-->
		<P id="p1">百度一下</P>
		<P class="a1">百度一下2</P>
		<P class="a1">百度一下3</P>
		
		<hr/>
		
		<p class="p3">
			<span>baidu</span>
			<i>
				<span>百度</span>
			</i>
			<a>小米</a>
			<span>小米</span>
			<span>小米</span>
		</p>
		<hr/>
		<h1>taobao</h1>
		<span id="sp1">淘宝</span>
		<p class="p4">xiaomi</p>
		
		<br/><hr/>

	</body>
	
	<a href="">京ICP证030173号</a>
	
</html>

2.2 span和div标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#d3{
				height: 100px;
				width: 500px;
				background-color: yellow;
			}
			#d4{
				height: 50px;
				width: 500px;
				background-color: pink;
			}
			html,body{
				height: 100%;
			}
			div{
				height: 30%;    /* 注释掉显示不了div容器 */
				width: 20%;    /* 注释掉和默认浏览器网页同宽 */
				min-width: 400px; /* 指定最小宽度   随着页面缩小，不再跟随缩小的最小宽度 */
				background-color: red;
			}
			span{
				background-color: green;
				height: 200px;
				width: 300px;
			}
			img{
				width: 200px;
				height: 200px;
			}
			.div01{
				width: 200px;
				height: 200px;
				background-color: red;
				/* display: none;  none:把块元素转成行内元素  */
				display: inline;  /* inline:把块元素转成行内元素 */
			}
			.span01{
				width: 200px;
				height: 200px;
				background-color: green;
				display: inline-block;   /* block把元素转成块元素  inline-block:把元素转成行内块 */
			}
		</style>
	</head>
	<body>
		<!--span/div:本身没有含义 就是为了布局提供的-->
		<!--div:本身没也有含义 就是把网页在布局之前进行模块性划分-->
		<span>© mi.com</span>
	<!-- 	<div style="background-color: black;width: 40px;height: 40px;"></div>
		<div style="background-color: blue;width: 40px;height: 40px;"></div> -->
		<div id="d3"></div>
		<div id="d4"></div>
		<!--
		行内元素：标签本身不会自动换行的标签称为行内元素 行内元素没有默认的宽和高 宽和高和标签中文本内容有关系，无法设置宽和高
		（a  b  i  sub  sup..span）
		
		行内块：指代的是元素本身不会换行但是可以指定宽和高的元素称为行内块
		（img）
		
		块元素：标签本身会自动换行的标签称为块元素  宽度认为是父容器的宽度  高度没有默认值
		（p  h1-h6  hr  div...）
		
		宽和高都可以指定百分比 但是使用百分比进行布局必须指定谁是100%
		-->
		<div></div>
		<img src="img/人行道2.jpg" alt="">
		<hr/><br/>
		<div class="div01">123</div>
		<span class="span01">123</span>
		
	</body>
</html>

2.3 浮动的实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS_浮动的实现</title>
		<style>
			.div1{
				height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 元素浮动完成会释放之前位置的空间  如果元素不浮动不会把当前空间让出 -->
		<!-- <div class="div1" style="background-color: red;float: right;">1</div>
		<div class="div1" style="background-color: green;float: right;">2</div>
		<div class="div1" style="background-color: blue;float: right;">3</div> -->
		
		<!--注意浮动结束会释放之前的位置，这个时候对下方布局位置产生影响-->
		<!-- 解决方案：在浮动元素外层套用div 给外层div高度撑开整个内容 -->
		<div class="div1" style="background-color: red;float: left;">1</div>
		<div style="height:100px;background-color: pink;">
			<div class="div1" style="background-color: green;float: right;">2</div>
		</div>
		<div class="div1" style="background-color: yellow;">3</div>  <!-- (如果2不嵌套div)1和2浮动后，3区域上移动，与1区域重合 -->
	</body>
</html>

2.4 盒模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS_盒模型</title>
		<style>
			.div1{
				width: 200px;
				height: 200px;
				background-color: red;		
				
				/* ------第1种方法------ */
				/* margin-top: 20px; */
				/* margin-right: 40px; */
				margin-bottom: 50px;
				/* margin-left: 30px; */
				
				/* 给指定元素水平居中 */
				margin: 60px auto;
				
				/* ----第2种方法表示------ */
				/* 上下左右边距 */
				/* margin: 10px; */
				/* 上下  左右 */
				/* margin: 10px 20px; */
				/* 上  左右  右  下 */
				/* margin: 10px 20px 30px; */
				/* 上 右 下 左 */
				/* margin: 10px 20px 30px 40px; */				
			}
			.div2{
				width: 200px;
				height: 200px;
				background-color: green;
			}
			span{
				margin-top: 200px;
				margin-left: 100px;
				display: inline-block; /* 如果不转化为行内块元素,距顶端200px不会生效 */
			}
		</style>
	</head>
	<body>
		<!--在html中所有的元素都可以看成是一个盒子-->
		<div class="div1"></div>
		<div class="div2">123</div>
		<span>baidu</span>
	</body>
</html>

2.5 边框属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS_边框属性</title>
		<style>
			.div1{
				width: 200px;
				height: 200px;
				background-color: darkred;
				/* 边框大小 (不常用)*/
				/* border-top-width: 5px;
				border-right-width: 5px;
				border-bottom-width: 5px;
				border-left-width: 5px; */
				/* 边框样式 */
			/* 	border-style: solid; 
				border-color: red; */
				
				/* 边框的粗细  边框风格  边框颜色  （常用）*/
				border: 5px solid black;	
				/* 指定四个角为倒圆角  上下左右都是20px */
				/* border-radius: 100px;   50%为圆形 */
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				border-bottom-left-radius: 10px;
				border-bottom-right-radius: 10px;
			}
		</style>
	</head>
	<body>
		<div class="div1"></div>
	</body>
</html>

2.6 内边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS_内边距</title>
		<style>
			.div1{
				width: 90px;
				height: 90px;
				background-color: darkgoldenrod;
				border: 2px solid red;
			/* 	内边距:是真实内容和边框之间的距离  内边距变大给用户的感觉整个盒子变大
				作用:如果感觉内容和边框之间距离比较近  就可以通过调整内边距来扩大距离 */
				
				/* ----使用命令:---- */
				/* 上下左右 */
				/* padding: 5px; */
				/* 上下  左右 */
				/* padding: 5px 10px; */
				/* 上  左右  下 */
				/* padding: 5px 10px 15px; */
				/* 上右  下左 */
				/* padding: 5px 10px 15px 20px; */
				
				/* 调整每一个位置的值 */
				padding-top: 10px;
				padding-left: 20px;
				padding-right: 20px;
				padding-bottom: 10px;
				
			}
		</style>
	</head>
	<body>
		<div class="div1">123</div>
	</body>
</html>

2.7 定位的实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS_定位的实现</title>
<!-- 	A、静态定位 默认
		B、绝对定位 （absolute）
		基于外层【已经定位{既可以是绝对 又可以是相对}】的父容器进行定位  如果外层父容器没有定位会一直找父容器的父容器，如果都没有定位基于浏览器的左上角
		注意：定位结束会释放之前的位置
		C、相对定位
		基于现在的位置进行定位
		注意：定位结束不会释放之前的位置
		D、固定定位 -->
		<style>
			.div1{
				width:200px;
				height: 200px;
				background-color: darkgoldenrod;
				position: absolute;   /* 绝对定位 */
				/* position: relative; */
				top:40px;
				left:200px;
			}
			.div2{
				width:200px;
				height: 200px;
				background-color: crimson;
		/* 		position: relative;
				top:50px;
				left:50px; */
			}
			.div3{
				width:200px;
				height: 200px;
				background-color: black;
				position: fixed;
				top: 600px;
				z-index: 3;  /* 优先级/层级  可以取正数 负数 0 控制层的顺序，正数往顶层，负数底层*/
			}
			.div4{
				width:200px;
				height: 200px;
				background-color: yellow;
				/* 固定定位 */
				position: fixed;
				top: 700px;
			}
		</style>
	</head>
	<body>
		<!-- 绝对定位 -->
	<!-- 	<div class="div1">
			<div style="width:100px;height: 100px;background-color: green;
			position: absolute;top:50px;left:50px;">123</div>
		</div> -->
		
		<div class="div1"></div>
	<!-- 	相对定位
		基于现在的位置进行定位
		注意：定位结束不会释放之前的位置 -->
		<div class="div2"></div>
		
		<div class="div3"></div>
		<div class="div4">固定定位</div>
		1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
		1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
		1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
		1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
		1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
	</body>
</html>

2.8 伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS_伪类选择器</title>
	</head>
	<style>
		/* 未访问连接 */
		a:link{
			color: red; /* 谷歌浏览器失效 */
		}
		/* 已访问连接 */
		a:visited{
			color: green;
		}
		/* 鼠标悬停连接 */
		a:hover{
			color: blue;
		}
		/* 已选择连接 */
		a:active{
			color: pink;
		}
		
		.inp{
			width: 500px;
			height:80px;
		}
		.inp:focus{
			border: 2px solid red;
			outline:none; /* 必须去掉自带的outline样式  否则上面不生效 */
		}
		
	</style>
	<body>
		<a href="">百度一下</a>
		<input type="text" class="inp"></input>
	</body>
</html>

3 百度页面搭建

3.1 色块定位法

在这里插入图片描述

3.2 实现效果

在这里插入图片描述

3.3 实现代码

baidu.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>百度一下，你就知道</title>
		<link rel="stylesheet" href="css/baidu.css">
		<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
		<script src="./font/iconfont.js"></script>
	</head>
	<body>
		<!-- 顶部布局 -->
		<div class="top">
			<div class="top_left">
				<a href="">新闻</a>
				<a href="">hao123</a>
				<a href="">地图</a>
				<a href="">贴吧</a>
				<a href="">视频</a>
				<a href="">图片</a>
				<a href="">网盘</a>
				<a href="">更多</a>
			</div>
			<div class="top_right">
				<!-- <div class="top_right_img"> -->
					<img class="top_right_img" src="img/ai.png" />
				<!-- </div>		 -->
				<a href="" id="top_right_setting">设置</a>
				<a href="" id="top_right_login">登录</a>
			</div>
		</div>
		
		<!-- 中间布局 -->
		<div class="body">
			<!-- 中间图标 -->
			<img class="body_logo" src="img/baidu_logo.png" />
			<!-- 搜索框 -->
			<div class="body_sh">
				<form action="https://www.baidu.com/s">
					<input type="text" class="body_inp1" name="wd"/>
					<input type="submit" value="百度一下" class="body_inp2"/>
				</form>
			</div>
			<!-- 百度热搜 -->
			<div class="body_hot">
				<div class="body_hot_left">
					<a href="">百度热搜</a>
					<span>&gt;</span>
				</div>
				<div class="body_hot_right">
					<a href="">&#10227;换一换</a>
				</div>
			</div>
			<!-- 百度新闻 -->
			<div class="body_new">
				<ul>
					<li class="aa">
						<!-- <span class="iconfont"></span> -->
						<svg class="icon" aria-hidden="true">
						  <use xlink:href="#icon-zhiding"></use>
						</svg>
						<a href="">共建一带一路走的是人间正道</a>
					</li>
					<li class="aa">
						<span style="color:#fe2d46">1</span>
						<a href="">外交部回应中国海警拦阻菲律宾船只</a>
						<span class="re">热</span>
					</li>
					<li class="aa">
						<span style="color:#f60">2</span>
						<a href="">菲律宾船只蓄意挑事现场画面曝光</a>
						<span class="re">热</span>
					</li>
				</ul>
				<ul>
					<li class="aa">
						<span style="color:#faa90e">3</span>
						<a href="">同享大健康 共赴新时代</a>
					</li class="aa">
					<li class="aa">
						<span style="color:#9195a3">4</span>
						<a href="">巴勒斯坦代表团比V字手势入场</a>
						<span class="re">热</span>
					</li>
					<li class="aa">
						<span style="color:#9195a3">5</span>
						<a href="">可可西里一头狼被投喂变胖成网红</a>
						<span class="re">热</span>
					</li>
				</ul>
			</div>

		</div>

		<!-- 底部布局 -->
		<div class="foot">
			<div id="foot_div">
				<p><a href="" target="_blank">关于百度</a></p>
				<p><a href="" target="_blank">About Baidu</a></p>
				<p><a href="" target="_blank">使用百度前必读</a></p>
				<p><a href="" target="_blank">帮助中心</a></p>
				<p><a href="" target="_blank">企业推广</a></p>
				<p><a href="" target="_blank">京公网安备11000002000001号</a></p>
				<p><a href="" target="_blank">京ICP证030173号</a></p>
				<p><span>互联网新闻信息服务许可证11220180008</span></p>
				<p><span>网络文化经营许可证： 京网文〔2023〕1034-029号</span></p>
				<p><a href="" target="_blank">信息网络传播视听节目许可证 0110516</a></p>
				<p><span>互联网宗教信息服务许可证编号：京（2022）0000043</span></p>
			</div>
		</div>
	</body>
</html>

baidu.css

*{margin: 0px;padding: 0px;}  /* 清除所有元素内外边距 */

/* 顶部布局样式 */
.top{
	height: 60px;

	/* background-color: cornsilk; */
}
.top_left{
	height: 60px;
	width: 442px;  /* 442 */
	float: left;   /* 浮动的实现 */
/* 	background-color: brown; */
}
.top_left a{
	font-size: 13px;
	color: #222222;
	text-decoration: none; /* 去除文本下划线 */
	display: inline-block;  /* 转成行内块,默认a标签对外边距失效 */
	margin-top: 19px;
	margin-left: 22px;
}

.top_right a{   /* 可以和左侧用并列选择器 */
	font-size: 13px;
	color: #222222;
	text-decoration: none; /* 去除文本下划线 */
	display: inline-block;  /* 转成行内块,默认a标签对外边距失效 */
	margin-top: 19px;
	margin-left: 25px;
}
.top_right img{
	display: inline-block;
	width: 24px;
	height: 24px;
	position: relative;
	top: 5px;
}
#top_right_login{
	width: 48px;
	height: 21px;
	background-color: #4e6ef2;
	border-radius: 6px;
	text-align: center;  /* 里面文本居中 */
	padding-top: 3px;
	color: #FFFFFF;  /* 选择器优先级 ，改用id表示*/
}
.top_left a:hover{
	color: #3154fb;
}
#top_right_setting:hover{
	color: #3154fb;
}
.top_right{
	height: 60px;
	width: 190px;  
	float: right;      /* 浮动的实现 */
	/* background-color: green; */
}


/* 中间布局样式 */
.body{
	height: 830px;
	width: 654px;
	/* background-color: aqua; */
	margin: 0px auto;  /* 元素居中 */
	text-align: center;  /* 文本内容(即div中的图片)居中 */
}
.body_logo{
	width: 270px;
}
.body_sh{
	height: 45px;
	width: 100%;
/* 	background-color: gray; */
	margin-top: 10px;
}
.body_inp1{
	width: 537px;
	height: 40px;
	border-radius: 10px 0 0 10px;
	border:2px solid #c4c7ce;
	font-size: 18px;
	margin-right: 0px;
}
.body_inp1:focus{
	outline: none;
	border-color: #4e6ef2;
}
.body_inp1:hover{
	border-color: #a7aab5;
	border-right-color: #4e6ef2;
}
.body_inp2{
	width: 108px;
	height: 44px;
	border-radius: 0px 10px 10px 0;
	background-color: #4e6ef2;
	border: 1px solid #4e6ef2;
	font-size: 17px;
	color: #fff;
	margin-left: -5px;
}
.body_inp2:hover{
	background-color: #4662d9;
}
.body_hot{
	height: 25px;
	width: 100%;
	/* background-color: gray; */
	margin-top: 50px;
}
.body_hot_left{
	float: left;
}
.body_hot_right{
	float: right;
}
.body_hot_left a{
	font-weight: bold; /* 字体加粗 */
	font-family: "微软雅黑"; /* 字体系类 */
	color: #222222;
	text-decoration: none;
	font-size: 15px;
}
.body_hot_left span{
	font-size: 18px;
	color: #9195a3;

}
.body_hot_right a{
	font-size: 14px;
	color: #626675;
	text-decoration: none;
}
.body_new{
	height: 120px;
	width: 100%;
	/* background-color: pink; */
}
.body_new ul{
	height: 120px;
	width: 325px;
	border: 0px solid red;
	float: left;
}
.aa{
	list-style: none;   /* 去除列表前符号 */
	text-align: left;
	margin-bottom: 20px;
}
.icon{
	width: 15px;
	height: 15px;
	vertical-align: -2.15px;
	line-height: 15px;
	color: #f63051;
	fill: currentColor;
	overflow: hidden;
}
.body_new a{
	margin-left: 20px;
	font-size: 16px;
	color: #222;
	text-decoration: none;
}
.re{
	display: inline-block;
	width: 16px;
	height: 16px;
	background-color: #ff6600;
	font-size: 12px;
	color: #FFFFFF;
	text-align: center;
	border-radius: 3px;
	position: relative;
	top: -2px;
}
.body_hot a:hover{
	color: #3154fb;
}
.body_new a:hover{
	color: #3154fb;
}

/* 底部样式 */
.foot{
	height: 40px;
	width: 100%;
/* 	background-color: gold; */
}
#foot_div{
	width: 92%;
	height: 40px;
	/* background-color: peru; */
	margin: 0px auto;
}
#foot_div p{
	float: left;
}
#foot_div a,#foot_div span{
	height: 40px;
	font-size: 12px;
	color: #BBB;
	margin-right: 15px;
	text-decoration: none;
	line-height: 40px;
}

RSer_gis

关注

20
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
【HTML_CSS笔记】HTML_CSS入坑

HTML_CSS笔记1 HTML示例杂记2 CSS2.1 常用选择器2.2 span和div标签2.3 浮动的实现2.4 盒模型2.5 边框属性2.6 内边距2.7 定位的实现2.8 伪类选择器3 百度页面搭建3.1 色块定位法3.2 实现效果3.3 实现代码1 HTML示例杂记<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>这是一个标题</title&
复制链接

扫一扫

专栏目录