WEB快速学习（二）

最新推荐文章于 2024-01-27 00:57:51 发布

Aming_he

最新推荐文章于 2024-01-27 00:57:51 发布

阅读量321

点赞数

分类专栏： java基础（七玄门历程）

本文链接：https://blog.csdn.net/qq_33278885/article/details/82530863

版权

本次目标：

使用CSS完成网站首页的优化

使用CSS完成网站注册页面的优化

使用JS完成简单的数据校验

使用JS完成图片轮播效果

A:使用CSS完成网站首页的优化

需求分析:

由于我们昨天使用表格布局存在缺陷,那么我们要来考虑使用DIV+CSS来对页面进行优化

表格布局的缺陷:

1. 嵌套层级太多, 一旦出现嵌套顺序错乱, 整个页面达不到预期效果
2.  采用表格布局,页面不够灵活, 动其中某一块,整个表格布局的结构全都要变

技术分析

HTML的块标签:

 div标签: 默认占一行,自动换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div style="border: 5px solid  red ; width: 500px;">这是一个div块</div>
		<div style="border: 5px solid  red ; width: 500px;">这是一个div块</div>
	</body>
</html>

 span标签: 内容显示在同一行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span style="border:5px solid yellowgreen; with=500px">这是一个span块</span>
		<span style="border:5px solid yellowgreen; with=500px">这是一个span块</span>
	</body>
</html>

CSS概述:

 Cascading Style Sheets : 层叠样式表

就像装修，给上面红砖, 抹了一层水泥, 白灰

主要用作用:

A:用来美化我们的HTML页面的

B:HTML 决定网页的骨架 ,CSS 化妆

C:将页面的HTML和美化进行分离

CSS的简单语法:

在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中

<style>
  选择器{
    属性名称:属性的值;
    属性名称2: 属性的值2;
  }
</style>

CSS选择器: 帮助我们找到我们要修饰的标签或者元素

元素选择:

元素的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

ID选择器:

以#号开头  ID在整个页面中必须是唯一的
#ID的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

类选择器:

以 . 开头 
.类的名称{
   属性名称:属性的值;
  	属性名称:属性的值;
}

CSS的引入方式:

外部样式: 通过link标签引入一个外部的css文件

内部样式: 直接在style标签内编写CSS代码

行内样式: 直接在标签中添加一个style属性, 编写CSS样式

<!-- css文件 -->

.shuiguo{	
color:red;
}




<!-- HTML文件   外部样式-->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
        	A 在html文件外专门建一个css文件来配置css样式   

                rel:声明这是一个css文件
                href:css文件路径
                -->
        <link rel="stylesheet" href="css.css" />
	</head>
	<body>
		<div class="shuiguo">苹果</div>
		<div class="shucai">南瓜</div>
		<div class="shuiguo">香蕉</div>
		<div class="shucai">冬瓜</div>
		<div class="shucai">木耳</div>
	</body>
</html>

<!-- HTML文件   内部样式-->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.shuiguo{
				color:yellowgreen;
			}
		</style>
	</head>
	<body>
		<div class="shuiguo">苹果</div>
		<div class="shucai">南瓜</div>
		<div class="shuiguo">香蕉</div>
		<div class="shucai">冬瓜</div>
		<div class="shucai">木耳</div>
	</body>
</html>



<!--  行内样式  -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="shucai" style="color: cyan;">南瓜</div>
		<div class="shucai">青瓜</div>
		<div class="shuiguo">苹果</div>
		<div class="shucai">茄子</div>
		<div class="shuiguo">橘子</div>
	</body>
</html>

CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间

float属性:
				left
				right
			
			clear属性: 清除浮动
				both : 两边都不允许浮动
				left: 左边不允许浮动
				right : 右边不允许浮动
			流式布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	浮动：float   流氏布局
        			左浮动 left
        			右浮动  right
        	clear 属性  清除浮动
        		both : 两边都不允许浮动
				left: 左边不允许浮动
				right : 右边不允许浮动
         -->
         <div style=" background: yellowgreen; widt

最低0.47元/天解锁文章

Aming_he

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WEB快速学习（二）

本次目标：使用CSS完成网站首页的优化使用CSS完成网站注册页面的优化使用JS完成简单的数据校验使用JS完成图片轮播效果 A:使用CSS完成网站首页的优化需求分析: 由于我们昨天使用表格布局存在缺陷,那么我们要来考虑使用DIV+CSS来对页面进行优化表格布局的缺陷:1. 嵌套层级太多, 一旦出现嵌套顺序错乱, 整个页面达不到预期效果2. 采用表格布局...
复制链接

扫一扫