第四次前端培训

最新推荐文章于 2024-06-30 12:46:56 发布

Hya_Y

最新推荐文章于 2024-06-30 12:46:56 发布

阅读量376

点赞数

文章标签：前端 html5 css3

本文链接：https://blog.csdn.net/qq_52056451/article/details/122831032

版权

1 CSS常用属性

1.1 背景

CSS背景属性常用于定义HTML元素的背景效果。

1.1.1 background-color

设置元素的背景颜色。

body {
	background-color: #1A4481;
}

1.1.2 background-image

设置一个元素的背景图像。

元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

body {
    background-image:url('paper.gif');
    background-color:#cccccc;
}

1.1.3 background-repeat

设置如何平铺对象的 background-image 属性。

默认情况下，重复background-image的垂直和水平方向。

body {
    background-image:url('paper.gif');
    background-repeat:repeat-y;
}

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image 不会重复
inherit	指定 background-repeat 属性设置应该从父元素继承

1.2 文本

1.2.1 color

color属性指定文本的颜色。

body {
    color:red;
}
h1 {
    color:#00ff00;
}
p {
    color:rgb(0,0,255);
}

1.2.2 text-align

指定元素文本的水平对齐方式。

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

1.2.3 text-decoration

text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等。

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

1.2.4 text-indent

规定文本块中首行文本的缩进。

p {
text-indent:50px;
}

1.3 display属性

display 属性规定元素应该生成的框的类型。

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。
list-item	此元素会作为列表显示。

1.4 浮动

float属性指定一个盒子（元素）是否应该浮动。

绝对定位的元素忽略float属性。

属性值

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

2 盒子模型

padding、border、margin三个属性构成了盒子模型。

2.1 border

设置所有的边框属性。

可同时设置边框的宽度、样式和颜色，也可以使用border-width、border-style、border-style单独设置。

border-style：

none：默认无边框

border-collapse：

设置是否将表格边框折叠为单一边框。

值	描述
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit	规定应该从父元素继承 border-collapse 属性的值。

2.2 padding

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

Padding属性，可以有一到四个值。

padding:25px 50px 75px 100px;

上填充为25px
右填充为50px
下填充为75px
左填充为100px

padding:25px 50px 75px;

上填充为25px
左右填充为50px
下填充为75px

padding:25px 50px;

上下填充为25px
左右填充为50px

padding:25px;

所有的填充都是25px

2.3 margin

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

3 CSS下拉菜单

例：

HTML：

        <ul>
			<li>
				<div class="navside"></div>
			</li>
			<li>
				<a class="active" href="#">
					<font color="white">网站首页</font>
				</a>
			</li>
			<div class="dropdown">
				<a href="#" class="dropbtn">
					<font color="white">&nbsp;&nbsp;学校概况</font>
				</a>
				<div class="dropdown-content">
					<a href="#">
						<font size="2" color="white">学校简介</font>
					</a>
					<a href="#">
						<font size="2" color="white">校徽校训</font>
					</a>
					<a href="#">
						<font size="2" color="white">校风教风学风</font>
					</a>
					<a href="#">
						<font size="2" color="white">校歌</font>
					</a>
					<a href="#">
						<font size="2" color="white">现任领导</font>
					</a>
					<a href="#">
						<font size="2" color="white">校园风光</font>
					</a>
				</div>
			</div>
			<div class="dropdown">
				<a href="#" class="dropbtn">
					<font color="white">&nbsp;&nbsp;机构设置</font>
				</a>
				<div class="dropdown-content">
					<a href="#">
						<font size="2" color="white">院系设置</font>
					</a>
					<a href="#">
						<font size="2" color="white">党政机关</font>
					</a>
					<a href="#">
						<font size="2" color="white">直属单位</font>
					</a>
				</div>
			</div>
			<div class="dropdown">
				<a href="#" class="dropbtn">
					<font color="white">&nbsp;&nbsp;师资队伍</font>
				</a>
				<div class="dropdown-content">
					<a href="#">
						<font size="2" color="white">领军人才</font>
					</a>
					<a href="#">
						<font size="2" color="white">教学名师</font>
					</a>
					<a href="#">
						<font size="2" color="white">优秀教师</font>
					</a>
				</div>
			</div>
			<div class="dropdown">
				<a href="#" class="dropbtn">
					<font color="white">&nbsp;&nbsp;人才培养</font>
				</a>
				<div class="dropdown-content">
					<a href="#">
						<font size="2" color="white">研究生教育</font>
					</a>
					<a href="#">
						<font size="2" color="white">本科生教育</font>
					</a>
					<a href="#">
						<font size="2" color="white">国际教育</font>
					</a>
					<a href="#">
						<font size="2" color="white">继续教育</font>
					</a>
				</div>
			</div>
			<div class="dropdown">
				<a href="#" class="dropbtn">
					<font color="white">&nbsp;&nbsp;学术研究</font>
				</a>
				<div class="dropdown-content">
					<a href="#">
						<font size="2" color="white">学科建设</font>
					</a>
					<a href="#">
						<font size="2" color="white">学科平台</font>
					</a>
					<a href="#">
						<font size="2" color="white">创新团队</font>
					</a>
					<a href="#">
						<font size="2" color="white">学术刊物</font>
					</a>
					<a href="#">
						<font size="2" color="white">产学研究合作</font>
					</a>
				</div>
			</div>
			</div>
			<div class="dropdown">
				<a href="#" class="dropbtn">
					<font color="white">&nbsp;&nbsp;招生与就业</font>
				</a>
				<div class="dropdown-content">
					<a href="#">
						<font size="2" color="white">招生信息</font>
					</a>
					<a href="#">
						<font size="2" color="white">本科生招生</font>
					</a>
					<a href="#">
						<font size="2" color="white">研究生招生</font>
					</a>
					<a href="#">
						<font size="2" color="white">就业创业</font>
					</a>
				</div>
			</div>
			<div class="dropdown">
				<a href="#" class="dropbtn">
					<font color="white">&nbsp;&nbsp;合作交流</font>
				</a>
				<div class="dropdown-content">
					<a href="#">
						<font size="2" color="white">国际交流</font>
					</a>
					<a href="#">
						<font size="2" color="white">合作办学</font>
					</a>
				</div>
			</div>
			<div class="dropdown">
				<a href="#" class="dropbtn">
					<font color="white">&nbsp;&nbsp;学校概况</font>
				</a>
				<div class="dropdown-content">
					<a href="#">
						<font size="2" color="white">学校简介</font>
					</a>
					<a href="#">
						<font size="2" color="white">校徽校训</font>
					</a>
					<a href="#">
						<font size="2" color="white">校风教风学风</font>
					</a>
					<a href="#">
						<font size="2" color="white">校歌</font>
					</a>
					<a href="#">
						<font size="2" color="white">现任领导</font>
					</a>
					<a href="#">
						<font size="2" color="white">校园风光</font>
					</a>
				</div>
			</div>
			<div class="dropdown">
				<a href="#" class="dropbtn">
					<font color="white">&nbsp;&nbsp;校园文化</font>
				</a>
				<div class="dropdown-content">
					<a href="#">
						<font size="2" color="white">学生活动</font>
					</a>
					<a href="#">
						<font size="2" color="white">生活服务</font>
					</a>
					<a href="#">
						<font size="2" color="white">网络服务</font>
					</a>
					<a href="#">
						<font size="2" color="white">工会活动</font>
					</a>
					<a href="#">
						<font size="2" color="white">讲座论坛</font>
					</a>
					<a href="#">
						<font size="2" color="white">校园地图</font>
					</a>
					<a href="#">
						<font size="2" color="white">在线展厅</font>
					</a>
				</div>
			</div>
			<div class="dropdown">
				<!--
					搜索框
				-->
				<form action="#" name="form">
					<input type="text" name="search" value="请输入关键字" id="search" />
					<input type="image" value="图片按钮" src="img/搜索.png" style="width: 30px; height: 30px; " />
				</form>
			</div>
		</ul>

CSS：

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #1A4481;
}

/*设置块元素浮动在一行*/
li {
	float: left;
}

.navside {
	padding: 10px;
	width: 200px;
}

/*设置标题栏*/
li a,
.dropbtn {
	/*设置display的值为block使得各个标题以块的形式分布在一行，这里主要是为了美观*/
	display: block;
	color: #1A4481;
	text-align: center;
	padding: 20px 12px 18px 12px;
	text-decoration: none;
}

.dropdown {
	/*这里设置display的值为inline-block是为了使标题排列在一行上*/
	display: inline-block;
}

/*设置下拉菜单*/
.dropdown-content {
	/*设置菜单内容初始为隐藏*/
	display: none;
	/*定位*/
	position: absolute;
	background-color: #1A4481;
	/* min-width: 160px; */
	/*设置透明度*/
	opacity: 0.9;
}

/*设置下拉菜单中的超链接*/
.dropdown-content a {
	width: 80px;
	text-align: center;
	padding: 8px 16px;
	text-decoration: none;
	display: block;
	/* width: 100%; */
}

/*使用hover元素，使用后代选择器定位到鼠标选定的dropdown类下的dropdown-content，使其显示出来*/
.dropdown:hover .dropdown-content {
	display: block;
}

/*连续使用后代选择器，定位到下拉菜单中被鼠标选中的字体，改变其颜色*/
.dropdown-content a:hover font {
	color: gray;
}

实现效果如下：

当鼠标放在菜单中的相应选项上时，菜单会出现变化，比如出现下拉框，这主要是hover选择器的功能。下拉菜单能精确对应各个标题，主要是position属性的功能。下来菜单是半透明的，这里用到了opacity属性。

hover：

a:hover { 
    background-color:yellow;
}

:hover在鼠标移到链接上时添加的特殊样式。

:hover 选择器器可用于所有元素，不仅是链接。

position：

position 属性规定元素的定位类型，定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

position一般分为三种，一种是相对定位relative，一种是绝对定位absolute，一种是固定定位fixed。这里的代码主要用到绝对定位。

opacity：

设置 div 元素的不透明级别。

div {
opacity:0.5;
}

这是设定不透明度为0.5，数字越大则不透明度越大。

4 CSS导航栏

这个功能在下拉菜单中已经实现，主要是运用了table标签，并设置其中的li属性的浮动状态即可。

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

</body>
</html>

实现效果：

5 网页布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo。

菜单导航条包含了一些链接，可以引导用户浏览其他页面。

内容区域一般有三种形式:

1 列：一般用于移动端
2 列：一般用于平板设备
3 列：一般用于 PC 桌面设备

底部区域在网页的最下方，一般包含版权信息和联系方式等。

Hya_Y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第四次前端培训

1 CSS常用属性1.1 背景CSS背景属性常用于定义HTML元素的背景效果。1.1.1 background-color设置元素的背景颜色。body { background-color: #1A4481;}1.1.2 background-image设置一个元素的背景图像。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。body { background
复制链接

扫一扫