02-CSS&JS

番茄西红柿发布于2019-04-23 13:07 / 1879人阅读

摘要：今日目标使用完成网站首页的优化使用完成网站注册页面的优化使用完成简单的数据校验使用完成图片轮播效果教学目标了解的概念了解的引入方式了解的基本用法和常用的选择器了解的盒子模型，悬浮和定位了解的概念掌握的基本语法，数据类型，能够使用完成简单的页

今日目标

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

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

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

使用JS完成图片轮播效果

教学目标：

了解CSS的概念

了解CSS的引入方式

了解CSS的基本用法和常用的选择器

了解CSS的盒子模型，悬浮和定位

了解JS的概念

掌握JS的基本语法，数据类型，能够使用JS完成简单的页面交互

去年的内容简单回顾

什么HTML : 超文本标记语言

p标签: 段落标签

br标签: 简单换行

h1-h6: 标题标签

hr标签: 水平分割线, 华丽的分割线

font标签: color属性改变颜色 , size

b标签: 加粗

i标签: 斜体

strong标签: 带语义的加粗

em标签: 斜体标签,带语义

img标签: 图片标签显示图片

src: 指定图片路径(相对路径)

width: 宽度

height: 高度

alt: 图片加载失败时的提示

相对路径:

./ 代表当前路径

…/ 代表的是上一级路径

…/…/ 代表的是上上一级路径

ul标签: 无序列表

ol标签: 有序列表

li标签: 列表项

a标签: 超链接标签:

target: 打开方式

href: 指定要跳转的链接地址

table标签: table > tr > td

tr标签: 行

td标签: 列

合并行: rowspan

合并列: colspan

网站注册案例:

form 标签: 表单标签,主要是用来向服务器提交数据

method: 提交方式 get post

action : 提交的路径

input 标签:

type:

password: 密码框

text : 文本

submit: 提交

button: 普通的按钮

reset: 重置按钮

radio: 单选按钮设置name属性让它们是一组

checkbox: 复选按钮

email:

date:

tel:

frameset : 框架标签

rows:

cols:

frame:

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

需求分析:

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

表格布局的缺陷:

1. 嵌套层级太多, 一旦出现嵌套顺序错乱, 整个页面达不到预期效果

2. 采用表格布局,页面不够灵活, 动其中某一块,整个表格布局的结构全都要变

技术分析

HTML的块标签:

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

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

CSS概述:

Cascading Style Sheets : 层叠样式表

红砖, 抹了一层水泥, 白灰

主要用作用:

用来美化我们的HTML页面的

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

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

CSS的简单语法:

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

<style>

选择器{

属性名称:属性的值;

属性名称2: 属性的值2;

}

</style>

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

元素选择:

元素的名称{

属性名称:属性的值;

}

ID选择器:

以#号开头 ID在整个页面中必须是唯一的s

#ID的名称{

属性名称:属性的值;

}

类选择器:

以 . 开头

.类的名称{

属性名称:属性的值;

}

CSS的引入方式:

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

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

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

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

float属性:

left

right

clear属性: 清除浮动

both : 两边都不允许浮动

left: 左边不允许浮动

right : 右边不允许浮动

流式布局

步骤分析:

创一个最外层div

第一部份: LOGO部分: 嵌套三个div

第二部分: 导航栏部分 : 放置5个超链接

第三部分: 轮播图

第四部分:

第五部分: 直接放一张图片

第六部分: 抄第四部分的

第七部分: 放置一张图片

第八部分: 放一堆超链接

代码实现:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.logo{
float: left;
width: 33%;
/*border-width: 1px;
border-style: solid;
border-color: red;*/
height: 60px;
line-height: 60px;
/*border: 1px solid red;*/
}
.amenu{
color: white;
text-decoration: none;
height: 50px;
line-height: 50px;
}
.product{
float: left; text-align: center; width: 16%; height: 240px;
}
</style>
</head>
<body>
<!--
1. 创一个最外层div
2. 第一部份: LOGO部分: 嵌套三个div
3. 第二部分: 导航栏部分 : 放置5个超链接
4. 第三部分: 轮播图 
5. 第四部分: 
6. 第五部分: 直接放一张图片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一张图片
9. 第八部分: 放一堆超链接
-->
<div>
<!--2. 第一部份: LOGO部分: 嵌套三个div-->
<div>
<div class="logo">
<img src="../img/logo2.png"/>
</div>
<div class="logo">
<img src="../img/header.png"/>
</div>
<div class="logo">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--清除浮动-->
<div style="clear: both;"></div>
<!--3. 第二部分: 导航栏部分 : 放置5个超链接-->
<div style="background-color: black; height: 50px;">
<a href="#" class="amenu">首页</a>
<a href="#" class="amenu">手机数码</a>
<a href="#" class="amenu">电脑办公</a>
<a href="#" class="amenu">鞋靴箱包</a>
<a href="#" class="amenu">香烟酒水</a>
</div>
<!--4. 第三部分: 轮播图--> 
<div>
<img src="../img/1.jpg" width="100%"/>
</div>
<!--5. 第四部分:--> 
<div>
<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
<!--左侧广告图-->
<div style="width: 15%; height: 480px;  float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--
                右侧商品
                -->
                <div style="width: 84%; height: 480px;float: left;">
                <div style="height: 240px; width: 50%; float: left;">
                <img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                </div>
<div class="product">
                <img src="../products/hao/small08.jpg" />
                <p>高压锅</p>
                <p style="color: red;">$998</p>
                </div>
<div class="product">
                <img src="../products/hao/small08.jpg" />
                <p>高压锅</p>
                <p style="color: red;">$998</p>
                </div>
<div class="product">
                <img src="../products/hao/small08.jpg" />
                <p>高压锅</p>
                <p style="color: red;">$998</p>
                </div>
<div class="product">
                <img src="../products/hao/small08.jpg" />
                <p>高压锅</p>
                <p style="color: red;">$998</p>
                </div>
<div class="product">
                <img src="../products/hao/small08.jpg" />
                <p>高压锅</p>
                <p style="color: red;">$998</p>
                </div>
<div class="product">
                <img src="../products/hao/small08.jpg" />
                <p>高压锅</p>
                <p style="color: red;">$998</p>
                </div>
<div class="product">
                <img src="../products/hao/small08.jpg" />
                <p>高压锅</p>
                <p style="color: red;">$998</p>
                </div>
<div class="product">
                <img src="../products/hao/small08.jpg" />
                <p>高压锅</p>
                <p style="color: red;">$998</p>
                </div>
<div class="product">
                <img src="../products/hao/small08.jpg" />
                <p>高压锅</p>
                <p style="color: red;">$998</p>
                </div>
                </div>
</div>
<!--6. 第五部分: 直接放一张图片-->
<div>
<img src="../products/hao/ad.jpg" width="100%"/>
</div>
<!--7. 第六部分: 抄第四部分的-->
<div>
<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
<!--左侧广告图-->
<div style="width: 15%; height: 480px;  float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--
                右侧商品
                -->
                <div style="width: 84%; height: 480px;float: left;">
                <div style="height: 240px; width: 50%; float: left;">
                <img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                </div>
<div class="product">
                <img src="../products/hao/small08.jpg" />
                <p>高压锅</p>
                <p style="color: red;">$998</p>
                </div>
<div class="product">
                <img src="../products/hao/small08.jpg" />
                <p>高压锅</p>
                <p style="color: red;">$998</p>
                </div>
<div class="product">
                <img src="../products/hao/small08.jpg" />
                <p>高压锅</p>
                <p style="color: red;">$998</p>
                </div>
<div class="product">
                <img src="../products/hao/small08.jpg" />
                <p>高压锅</p>
                <p style="color: red;">$998</p>
                </div>
<div class="product">
                <img src="../products/hao/small08.jpg" />
                <p>高压锅</p>
                <p style="color: red;">$998</p>
                </div>
<div class="product">
                <img src="../products/hao/small08.jpg" />
                <p>高压锅</p>
                <p style="color: red;">$998</p>
                </div>
<div class="product">
                <img src="../products/hao/small08.jpg" />
                <p>高压锅</p>
                <p style="color: red;">$998</p>
                </div>
<div class="product">
                <img src="../products/hao/small08.jpg" />
                <p>高压锅</p>
                <p style="color: red;">$998</p>
                </div>
<div class="product">
                <img src="../products/hao/small08.jpg" />
                <p>高压锅</p>
                <p style="color: red;">$998</p>
                </div>
                </div>
</div>
<!--8. 第七部分: 放置一张图片-->
<div>
<img src="../img/footer.jpg" width="100%"/>
</div>
<!--9. 第八部分: 放一堆超链接-->
<div style="text-align: center;">
        
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<br />
Copyright © 2005-2016 传智商城 版权所有
</div>
</div>
</body>
</html>

专线服务私有云 js调用js js和js js编码js解码 js到js传值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1460.html

[新手坑] 02.Vue开发环境和生产环境样式不一致的问题

摘要：新手坑开发环境和生产环境样式不一致的问题上次提到作用域问题导致样是不生效这次讲的是我之前遇到的一个小坑稍不留神就完蛋前阵子做的一个小项目引入了的库外加自己写的很多样式在开发环境下测试完美直接就出来上正式环境发现竟然有多处样式未生效的问题还好 [新手坑] 02.Vue开发环境和生产环境样式不一致的问题上次提到作用域问题, 导致样是不生效, 这次讲的是我之前遇到的一个小坑, 稍不留神就完...

RdouTyping 2019-08-29 15:07 评论0 收藏0
JavaWEB开发02——CSS&JS

摘要：今日目标使用完成网站首页的优化使用完成网站注册页面的优化使用完成简单的数据校验使用完成图片轮播效果教学目标了解的概念了解的引入方式了解的基本用法和常用的选择器了解的盒子模型，悬浮和定位了解的概念掌握的基本语法，数据类型，能够使用完成简单的页今日目标使用CSS完成网站首页的优化使用CSS完成网站注册页面的优化使用JS完成简单的数据校验使用JS完成图片轮播效果教学目标：了解...

MorePainMoreGain 2019-08-29 17:03 评论0 收藏0
JavaWEB开发02——CSS&JS

摘要：今日目标使用完成网站首页的优化使用完成网站注册页面的优化使用完成简单的数据校验使用完成图片轮播效果教学目标了解的概念了解的引入方式了解的基本用法和常用的选择器了解的盒子模型，悬浮和定位了解的概念掌握的基本语法，数据类型，能够使用完成简单的页今日目标使用CSS完成网站首页的优化使用CSS完成网站注册页面的优化使用JS完成简单的数据校验使用JS完成图片轮播效果教学目标：了解...

高胜山 2019-08-02 11:49 评论0 收藏0
Linux基础：xargs命令

摘要：命令收到输入参数后，对参数进行解析，以空格换行作为分隔符，拆分成多个参数，这里变成。运行之前的命令会报错，因为是以空格换行作为分隔符，于是就会出现预期之外的行为。简介 xargs可以将输入内容（通常通过命令行管道传递），转成后续命令的参数，通常用途有：命令组合：尤其是一些命令不支持管道输入，比如ls。避免参数过长：xargs可以通过-nx来将参数分组，避免参数过长。使用语法...

fai1017 2019-07-01 18:12 评论0 收藏0
webpack-demos：全网最贴心webpack系列教程和配套代码

摘要：全网最贴心系列教程和配套代码欢迎关注个人技术博客。所以我花费了个多月整理了这份教程，一共分成节，每节都有讲解，并且准备了配套代码。奈何深感水平不够，只有一腔热情，所以直接开放了教程和源码。 webpack-demos：全网最贴心 webpack 系列教程和配套代码欢迎关注个人技术博客：godbmw.com。每周 1 篇原创技术分享！开源教程(webpack、设计模式）、面试刷题（偏前...

LMou 2019-08-23 12:25 评论0 收藏0