第2章 WEB02-CSS&JS篇-视频教程-第一部分

2022-11-25 16:41:49 浏览数 (2)

01-上次课内容回顾

02-案例一：网站首页重新布局的需求分析

03-案例一：网站首页重新布局的技术分析-CSS的概述

04-案例一：网站首页重新布局的技术分析-CSS的引入方式

05-案例一：网站首页重新布局的技术分析-CSS的基本选择器

06-案例一：网站首页重新布局的技术分析-CSS的浮动

07-案例一：网站首页重新布局的代码实现一

08-案例一：网站首页重新布局的代码实现二

09-案例一：网站首页重新布局的扩展-CSS的其他选择器

10-案例二：网站注册页面重新布局-需求和分析

1.1 上次课内容回顾

HTML：

HTML：超文本标记语言

HTML的字体标签：

<font>标签

* 标签内部 属性名称=”属性的值”

* size：控制字体的大小.从1-7

* color：控制字体颜色.使用英文单词，使用#16进制数的形式来进行设置。

* face：字体

HTML的排版标签：

<h>标签：标题标签

<p>标签：段落标签

<b>标签：加粗. 等价于<strong>

<i>标签：斜体.

<u>标签：下划线.

<br/>标签：换行

<hr/>标签：水平线标签

HTML的图片标签：

<img/>标签：图片标签。

  • src：图片的路径
    • 图片在下一级目录 使用下一级路径/文件名
    • 图片在同一级目录 使用./ 或者 直接写文件名
    • 图片是在上一级目录 使用../
  • width：图片的宽度
  • height：图片的高度
  • alt：提示信息

HTML的列表标签：

无序列表

  • <ul>
    • 子标签<li>
    • type属性：

有序列表

  • <ol>
    • start属性：从哪开始
    • type属性：显示属性还是英文 取值：1，a，A，i，I

HTML的超链接的标签：

<a>标签：

  • href :链接路径
  • target :打开的方式 _self _blank _parent

HTML的表格标签：

<table>

  • border属性
  • background属性
  • width：宽度
  • height：高度
  • align：水平位置
    • rowspan：跨行
    • colspan：跨列
    • <td>
    • <tr>

HTML的表单标签：

<form>标签：

  • action：提交路径
  • method：提交的方式
    • get和post

表单标签：

文本框：<input type=”text” name=”” />

密码框：<input type=”password” name=””/>

单选按钮：<input type=”radio” name=”sex” value=””/>男

复选框：<input type=”checkbox” name=”hobby” valu=””/>

提交按钮：<input type=”submit” value=””/>

重置按钮：<input type=”reset” value=””/>

普通按钮：<input type=”button” value=””/>

文件上传：<input type=”file” name=””/>

隐藏字段：<input type=”hidden” name=””/>

下拉列表：<select name=””><option value=””></option></select>

文本区：<textarea name=”” rows=”” cols=””></textarea>

HTML的框架页面：

<frameset rows=”” cols=””>

<frame src=”” name=””/>

1.2 使用CSS对首页进行重新布局：

1.2.1 需求分析：

在上次的HTML课程中已经使用表格标签对页面进行布局显示了，但是表格标签有一定的缺陷。实际开发中都会采用DIV CSS的方式进行布局。使用DIV CSS重新布局网站的首页：

1.2.2 分析：

1.2.2.1 技术分析

【HTML的DIV标签】

HTML中有两个块标记：

  • <div></div>
  • <span></span>

【CSS的概述】

  • 什么是CSS：

Cascading Style Sheets 层叠样式表.

  • CSS的作用：

CSS主要用来修饰HTML的显示.代码复用.将页面元素与样式进行分离.

  • CSS的使用：
代码语言：javascript复制
语法：
选择器{属性1:属性值;属性2:属性值;..}
<style>
h2{
color:red;
font-size:100px;
}
</style>

【CSS的引入方式】

  • 行内样式：

直接在html的元素上使用style的属性编写CSS：

代码语言：javascript复制
<span style="color:#00FF00 ;font-size: 100px;">黑马训练营</span>
  • 内部样式：

在html的<head>标签中使用<style>标签来定义CSS

代码语言：javascript复制
<style>
span{
color:blue;
font-size: 200px;
}
</style>
  • 外部样式：

将CSS定义成一个.css的文件，在html中将该文件引入到html中

代码语言：javascript复制
<link href="style.css" rel="stylesheet" type="text/css"/>

【CSS的基本选择器】

CSS的选择器为了更能精确的找个某个元素来设计的

  • 元素选择器：
代码语言：javascript复制
div{
color: red;
}
  • id选择器：
代码语言：javascript复制
		<style>
#d1{
color: red;
}
</style><div id="d1">王凤</div>
***** id通常都是唯一的.
  • 类选择器：

HTML:

代码语言：javascript复制
<div class="d1">王守义</div>
<div>王凤</div>
<div class="d1">王如花</div>

CSS:

代码语言：javascript复制
<style>
.d1{
color: green;
}
</style>

【CSS的悬浮】

  • CSS的float属性：

float属性中常用取值:

  • Left :悬浮到左边
  • Right :悬浮到右边

使用clear属性清除浮动：

  • Left ：清除左侧浮动
  • Right ：清除右侧浮动
  • Both ：清除两侧的浮动
1.2.2.2 步骤分析：
  • 创建一个外层的div元素
  • 在div中创建代表每块区域div
  • 在每块div引入需要的元素的内容

1.2.3 代码实现：

代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站的首页</title>
<link href="../css/main.css" rel="stylesheet" type="text/css" />
<style>
.product{
border:1px solid gray;
width:16%;
height:250px;
float:left;
}
</style>
</head>
<body>
<!-- 整体的DIV -->
<div>
<!-- LOGO部分的DIV -->
<div>
<!--分成三个小的DIV-->
<div class="top">
<img src="../img/logo2.png" height="48"/>
</div>
<div class="top">
<img src="../img/header.png" height="48" />
</div>
<div class="top" style="padding-top: 10px;height: 40px;">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--清除浮动-->
<div class="clear"></div>
<!-- 菜单部分的DIV-->
<div class="menu">
<ul>
<li style="display: inline;">首页</li>
<li style="display: inline;">电脑办公</li>
<li style="display: inline;">手机数码</li>
<li style="display: inline;">鞋靴箱包</li>
</ul>
</div>
<!-- 图片轮播的DIV -->
<div style="width: 99%;">
<img src="../img/1.jpg" width="100%">
</div>
<!-- 商品展示的DIV -->
<div style="border:1px solid green;width: 99%;">
<!--标题的DIV-->
<div><h2>最新商品<img src="../img/title2.jpg"></h2></div>
<!-- 左侧的广告位的DIV -->
<div style="width:15%;height:500px;border: 1px solid red;float:left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!-- 右侧的商品显示的DIV -->
<div style="border:1px solid blue;width:84%;float: left;">
<div>
<!-- 横向广告部分 -->
<div style="border:1px solid blue;width:50%;height: 250px;float:left;">
<img src="../products/hao/middle01.jpg" width="100%" height="100%"/>
</div>
<!--商品的DIV-->
<div class="product">
<img src="../products/hao/small04.jpg"/>
<p>电饭煲</p>
<p style="color:red;">￥299</p>
</div>
<div class="product">
<img src="../products/hao/small04.jpg"/>
<p>电饭煲</p>
<p style="color:red;">￥299</p>
</div>
<div class="product">
<img src="../products/hao/small04.jpg"/>
<p>电饭煲</p>
<p style="color:red;">￥299</p>
</div>
<div class="product">
<img src="../products/hao/small04.jpg"/>
<p>电饭煲</p>
<p style="color:red;">￥299</p>
</div>
<div class="product">
<img src="../products/hao/small04.jpg"/>
<p>电饭煲</p>
<p style="color:red;">￥299</p>
</div>
<div class="product">
<img src="../products/hao/small04.jpg"/>
<p>电饭煲</p>
<p style="color:red;">￥299</p>
</div><div class="product">
<img src="../products/hao/small04.jpg"/>
<p>电饭煲</p>
<p style="color:red;">￥299</p>
</div>
<div class="product">
<img src="../products/hao/small04.jpg"/>
<p>电饭煲</p>
<p style="color:red;">￥299</p>
</div>
<div class="product">
<img src="../products/hao/small04.jpg"/>
<p>电饭煲</p>
<p style="color:red;">￥299</p>
</div>
</div>
</div>
</div>
<div style="width:99%;">
<img src="../products/hao/ad.jpg" width="100%"/>
</div>
<div style="border:1px solid green;width: 99%;">
<!--标题的DIV-->
<div><h2>最新商品<img src="../img/title2.jpg"></h2></div>
<!-- 左侧的广告位的DIV -->
<div style="width:15%;height:500px;border: 1px solid red;float:left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!-- 右侧的商品显示的DIV -->
<div style="border:1px solid blue;width:84%;float: left;">
<div>
<!-- 横向广告部分 -->
<div style="border:1px solid blue;width:50%;height: 250px;float:left;">
<img src="../products/hao/middle01.jpg" width="100%" height="100%"/>
</div>
<!--商品的DIV-->
<div class="product">
<img src="../products/hao/small04.jpg"/>
<p>电饭煲</p>
<p style="color:red;">￥299</p>
</div>
<div class="product">
<img src="../products/hao/small04.jpg"/>
<p>电饭煲</p>
<p style="color:red;">￥299</p>
</div>
<div class="product">
<img src="../products/hao/small04.jpg"/>
<p>电饭煲</p>
<p style="color:red;">￥299</p>
</div>
<div class="product">
<img src="../products/hao/small04.jpg"/>
<p>电饭煲</p>
<p style="color:red;">￥299</p>
</div>
<div class="product">
<img src="../products/hao/small04.jpg"/>
<p>电饭煲</p>
<p style="color:red;">￥299</p>
</div>
<div class="product">
<img src="../products/hao/small04.jpg"/>
<p>电饭煲</p>
<p style="color:red;">￥299</p>
</div>
<div class="product">
<img src="../products/hao/small04.jpg"/>
<p>电饭煲</p>
<p style="color:red;">￥299</p>
</div>
<div class="product">
<img src="../products/hao/small04.jpg"/>
<p>电饭煲</p>
<p style="color:red;">￥299</p>
</div>
<div class="product">
<img src="../products/hao/small04.jpg"/>
<p>电饭煲</p>
<p style="color:red;">￥299</p>
</div>
</div>
</div>
</div>
<div>
<img src="../img/footer.jpg" />
</div>
<div align="center">
<a href="../案例一：网站信息页面显示/网站信息页面显示.html">关于我们</a>
<a href="">联系我们</a>
<a href="">招贤纳士</a>
<a href="">法律声明</a>
<a href="link.html">友情链接</a>
<a href="">支付方式</a>
<a href="">配送方式</a>
<a href="">服务声明</a>
<a href="">广告声明</a>
<br/>
Copyright © 2005-2016 传智商城 版权所有
</div>
</div>
</body>
</html>

1.2.4 扩展：

1.2.4.1 CSS的其他的选择器：

【CSS的其他选择器】

  • 属性选择器

选中带有某个属性的元素：

代码语言：javascript复制
		<style>
input[type="text"]{
background-color: yellow;
}
input[type="password"]{
background-color: green;
}
</style>
  • 层次选择器：

父选择器 子选择器 { }

代码语言：javascript复制
		<style>
#d1 div{
color: red;
}
</style>
  • 伪类选择器：

主要用来描述超链接

代码语言：javascript复制
<style>
a:link{
color:blue;
font-size: 40px;
}
a:visited{
color: red;
font-size: 40px;
}
a:hover{
color: green;
font-size: 100px;
}
a:active{
color: brown;
font-size: 200px;
}
</style>

1.3 使用DIV CSS对注册页面进行布局：

1.3.1 需求分析：

使用DIV CSS对注册页面进行布局。更加灵活！

1.3.2 分析：

1.3.2.1 技术分析：

【CSS的盒子模型】

设置盒子的外边距：margin

  • Margin-top
  • Margin-right
  • Margin-bottom
  • Margin-left

设置盒子的内边距：padding

  • Padding-top
  • Padding-right
  • Padding-bottom
  • Padding-left
1.3.2.2 步骤分析：
  • 创建一个整体div元素
  • 在里面创建5个分别代表某个部分的DIV
  • 在每个部分中完成单独内容的显示

1.3.3 代码实现：

代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="../css/main.css" rel="stylesheet" type="text/css" />
<style>
.content{
border:1px solid blue;
height: 600px;
background: url(../img/regist_bg.jpg);
margin: 10px 0px;
}
</style>
</head>
<body>
<!-- 创建一个整体的DIV -->
<div>
<div>
<div class="top">
<img src="../img/logo2.png" height="48"/>
</div>
<div class="top">
<img src="../img/header.png"  height="48"/>
</div>
<div class="top" style="padding-top: 10px;height: 40px;">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--清除浮动-->
<div class="clear"></div>
<!-- 菜单部分的DIV-->
<div class="menu">
<ul>
<li style="display: inline;">首页</li>
<li style="display: inline;">电脑办公</li>
<li style="display: inline;">手机数码</li>
<li style="display: inline;">鞋靴箱包</li>
</ul>
</div>
<div class="content">
<div style="position: absolute;left:400px;top:150px;background-color: white;border:5px solid gray;width: 700px;height: 500px;">
<h3>用户注册</h3>
<form>
<table width="100%" height="100%" border="0" align="center" cellspacing="10">
<tr>
<td>用户名</td>
<td><input type="text" name="username" placeholder="请输入用户名"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="repassword"/></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女</td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"/></td>
</tr>
<tr>
<td>姓名</td>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<td>生日</td>
<td><input type="text" name="birthday"/></td>
</tr>
<tr>
<td>验证码</td>
<td><input type="text" name="checkcode" size="10"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册" style="background: url(../img/register.gif);"/></td>
</tr>
</table>
</form>
</div>
</div >
<div>
<img src="../img/footer.jpg" />
</div>
<div align="center">
<a href="../案例一：网站信息页面显示/网站信息页面显示.html">关于我们</a>
<a href="">联系我们</a>
<a href="">招贤纳士</a>
<a href="">法律声明</a>
<a href="link.html">友情链接</a>
<a href="">支付方式</a>
<a href="">配送方式</a>
<a href="">服务声明</a>
<a href="">广告声明</a>
<br/>
Copyright © 2005-2016 传智商城 版权所有
</div>
</div>
</body>
</html>

1.3.4 扩展：

1.3.4.1 扩展属性：

【列表属性】

代码语言：javascript复制
ul li{
list-style-image: url(../img/reg4.gif);
}

【颜色取值】

  • 英文取值：

color：red

  • 十六进制数：

color：#ff0000

  • Rgb方式：

color：rgb(255,0,0)

css 网站 图片标签 html

0 人点赞