前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
腾讯云架构师技术同盟
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP腾讯云架构师技术同盟
返回腾讯云官网
社区首页 >专栏 >第2章 WEB02-CSS&JS篇-视频教程-第一部分

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

作者头像
Java帮帮
发布于 2022-11-25 16:41:49
发布于 2022-11-25 16:41:49
68300
代码可运行
举报
文章被收录于专栏：Java帮帮-微信公众号-技术文章全总结Java帮帮-微信公众号-技术文章全总结
运行总次数：0
代码可运行

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
代码运行次数：0
复制
语法：
选择器{属性1:属性值;属性2:属性值;..}
<style>
h2{
color:red;
font-size:100px;
}
</style>

【CSS的引入方式】

  • 行内样式：

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

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

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

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

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

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

【CSS的基本选择器】

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

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

HTML:

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

CSS:

代码语言：javascript
代码运行次数：0
复制
<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
代码运行次数：0
复制
<!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
代码运行次数：0
复制
		<style>
input[type="text"]{
background-color: yellow;
}
input[type="password"]{
background-color: green;
}
</style>
  • 层次选择器：

父选择器 子选择器 { }

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

主要用来描述超链接

代码语言：javascript
代码运行次数：0
复制
<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
代码运行次数：0
复制
<!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
代码运行次数：0
复制
ul li{
list-style-image: url(../img/reg4.gif);
}

【颜色取值】

  • 英文取值：

color：red

  • 十六进制数：

color：#ff0000

  • Rgb方式：

color：rgb(255,0,0)

本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2022-09-03，如有侵权请联系 cloudcommunity@tencent.com 删除
css
网站
图片标签
html

本文分享自 Java帮帮 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

css
网站
图片标签
html
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
目录
  • 1.1 上次课内容回顾
  • 1.2 使用CSS对首页进行重新布局：
    • 1.2.1 需求分析：
    • 1.2.2 分析：
      • 1.2.2.1 技术分析
      • 1.2.2.2 步骤分析：
    • 1.2.3 代码实现：
    • 1.2.4 扩展：
      • 1.2.4.1 CSS的其他的选择器：
  • 1.3 使用DIV+CSS对注册页面进行布局：
    • 1.3.1 需求分析：
    • 1.3.2 分析：
      • 1.3.2.1 技术分析：
      • 1.3.2.2 步骤分析：
    • 1.3.3 代码实现：
    • 1.3.4 扩展：
      • 1.3.4.1 扩展属性：
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论