HTML&&CSS-白红宇

HTML&&CSS

阅读量：5240 次

发布时间：2019-06-14

本文共 12898 字，大约阅读时间需要 42 分钟。

一、网站注册页面显示案例

1.需求分析

用户如果想要在改商城购买商品，必须成为该网站会员，首先得注册，这个注册页面显

示的效果如下：

2.技术分析

2.1 表单标签

表单标签：所有需要提交到服务器端的表单项必须使用<form></form>括起来！

form标签属性：

action,整个表单提交的位置(可以是一个页面，也可以是一个后台 java代码)

method,表单提交的方式(get/post/delete……等 7种)

文本输入项

批注 [ThinkPad1]: 提交到服务端必须指定的属性，其

<input

type=”text”

name=””

size=””

maxlenght=””

readonly=””

值可以任意，建议见文知意

placehoder=””/>

批注 [ThinkPad2]: 指定输入框的宽度

批注 [ThinkPad3]: 指定输入内容的长度

批注 [ThinkPad4]: 设置为只读

批注 [ThinkPad5]: 输入内容的提示信息

密码输入项

批注 [ThinkPad6]: 提交到服务端必须指定的属性，其

值可以任意，建议见文知意

单选按钮

批注 [ThinkPad7]: 分组

批注 [ThinkPad8]: 提交到服务端必须指定的属性，其

值可以任意，建议见文知意

多选按钮

批注 [ThinkPad9]: 默认选中

下拉列表

批注 [ThinkPad10]: 分组

</select>

批注 [ThinkPad11]: 提交到服务端必须指定的属性，

其值可以任意，建议见文知意

批注 [ThinkPad12]: 默认选中

文件上传项

文本输入域

提交按钮

批注 [ThinkPad13]: 具备将整个表单提交到服务器的

功能

普通按钮

批注 [ThinkPad14]: 修改按钮上面的内容

重置按钮

隐藏项

用于用户比较敏感的一些信息。

面试题：

Get与 post提交方式的区别？【默认提交方式为 get】

Get提交方式，所有的内容显示在地址栏，不够安全，长度有限制。

Post提交方式，所有的内容不会显示在地址栏，比较安全，长度没有限制。

如果想了解其它属性查看相关的手册即可。

3.步骤分析

第一步：创建一个五行一列的表格，然后分别对每一行进行实现

第二步：直接复制之前的代码(第一行、第二行、第四行、第五行)

第三步：第三行(放置一个表单，通过表格标签进行布局)

4.代码实现

<html>

<head>

</head>

<body>

<table border="1px" width="1300px" cellpadding="0px"

cellspacing="0px" align="center">

<tr>

<td>

<table border="0px" width="100%" cellpadding="0px"

cellspacing="0px">

<tr>

</td>

</td>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<td height="600px" align="center"

background="../img/regist_bg.jpg">

<table border="5px" width="800px" height="450px"

bgcolor="white">

<tr>

<td colspan="2">会员注册 USER REGISTER </td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>Email</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

<input type="radio" name="sex" value="男" />男

<input type="radio" name="sex" value="女"/>女

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<p>

<a href="../案例一：网站信息显示页面/网站信息显示页

面.html">关于我们</a>

<a href="../案例三：网站友情链接显示页面/网站友情链接显示

页面.html">友情链接 </a>

</p>

</td>

</tr>

</table>

</body>

</html>

二、使用 CSS完成网站首页重构

1.需求分析

昨天我们已经使用 table进行首页的一个布局，但是使用 table进行布局存在缺陷，

而一般的布局都会采用 DIV+CSS来进行布局。显示的效果如下：

2.技术分析

2.1 DIV相关的技术

Div 它是一个 html 标签，一个块级元素(单独显示一行)。它单独使用没有任何意义，

必须结合 CSS来使用。它主要用于页面的布局。

Span 它是一个 html 标签，一个内联元素(显示一行)。它单独使用没有任何意义，必

须结合 CSS来使用。它主要用于对括起来的内容进行样式的修饰。

2.2 CSS相关的知识

什么是 CSS？

Ø CSS的作用？

HTML：它是整个网站的骨架。

CSS：它是对整个网站骨架的内容进行美化(修饰)

Ø CSS如何使用？

语法和规范

选择器{

属性名 1:属性值 1;

属性名 2:属性值 2;

属性名 3:属性值 3;

}

批注 [ThinkPad15]: 此处分号不能省略

批注 [ThinkPad16]: 此处的分号可以省略，建议写

上。

Ø CSS的引入方式

CSS的引入方式分为三种

第一种：行内引入

JavaEE0516就业班

</div>

第二种：内部引入方式

div{

color:red;

font-size: 100px;

}

</style>

第三种方式：外部引入

如果<style type=”text/css”></style>

批注 [ThinkPad17]: 可以省略不写，默认值就是

text/css

优先级问题:

谁离需要修饰的元素近，谁的样式生效，其它的被覆盖掉。(就近原则)

Ø CSS的选择器

CSS基本选择器有三种(元素选择器、类选择器、id选择器)

l ID选择器

#id属性名{

属性名 1:属性值 1;

属性名 2:属性值 2;

属性名 3:属性值 3;

}

批注 [ThinkPad18]: 此处分号不能省略

批注 [ThinkPad19]: 此处的分号可以省略，建议写

上。

Id保证唯一。

元素选择器

元素名{

属性名 1:属性值 1;

批注 [ThinkPad20]: 此处分号不能省略

属性名 2:属性值 2;

属性名 3:属性值 3;

批注 [ThinkPad21]: 此处的分号可以省略，建议写

}

上。

如果多个相同的元素设置相同的样式，使用此种方式最为合适。

类选择器

.类名{

属性名 1:属性值 1;

批注 [ThinkPad22]: 此处分号不能省略

属性名 2:属性值 2;

属性名 3:属性值 3;

批注 [ThinkPad23]: 此处的分号可以省略，建议写

}

上。

对多个元素设置相同的样式，此时使用类选择器比较合适。

Ø CSS的浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为

止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在

一样。

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到

包含框的右边缘：

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到

包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使

框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左

浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向

下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它

浮动元素“卡住”：

清除浮动

我们要对网站进行布局，显示效果希望是上图左边的效果，此时我们会将框 1和框 2向

左进行浮动，由于使用了浮动，它们已经脱离了文档流，框 3会上移至原来框 1的位置，导

致的现象是框 3隐藏在框 1下面。

那么此时，我们可以清除浮动来清除之前框 1和框 2使用浮动后造成的问题！

解决办法：

在框 3的前面定义一个 div(<div id=”three”></div>)

定义 CSS样式：

#three{

clear:both;

}

Ø CSS 中如何让块级元素成为内联元素

我们可以使用个 CSS中的 display属性(inline)进行设置

3.步骤分析

第一步：先定义个大的 div，然后嵌套 8个小的 div。

第二步：(第一行)在第一个 div里面嵌套 3个小的 div

第三步：(第二行)在小 div里面写一个列表标签(需要使用 css的 display属性的 inline)

第四步：(第三行)在小 div里面放置一张图片

第五步：(第四行)在小 div里面嵌套 2个 div(在下面的 div再嵌套 2个 div，最后一在右

边的 div里面嵌套 10个 div)

第六步：(第五行)在小 div里面放置一张广告图片

第七步：(第六行)复制第四行的代码

第八步：(第七行)在小 div里面放置一张广告图片

第九步：(第八行) 在小 div里面放置超链接和文字内容。

4.代码实现

<html>

<head>

#logo{

border: 1px solid red;

width: 1300px;

height: 50px;

}

.top{

border: 1px solid blue;

width: 33.1%;

height: 48px;

float: left;

}

#menu{

border: 1px solid black;

width: 1300px;

height: 50px;

}

ul li{

display: inline;

color: white;

}

#product{

border: 1px solid red;

width: 1300px;

height: 564px;

}

#product_top{

border: 1px solid blue;

width: 1300px;

height: 60px;

}

#product_botttom{

border: 1px solid black;

width: 1300px;

height: 500px;

}

#product_botttom_left{

border: 1px solid green;

width: 190px;

height: 500px;

float: left;

}

#product_botttom_right{

border: 1px solid red;

width: 1105px;

height: 500px;

float: left;

}

#big{

border: 1px solid black;

width: 550px;

height: 248px;

float: left;

}

.small{

border: 1px solid blue;

width:182px ;

height: 248px;

float: left;

/*让块级元素文本内容居中*/

text-align: center;

}

#bottom{

text-align: center;

}

/*去掉超链接的下划线*/

text-decoration: none;

}

</style>

</head>

<body>

</div>

</div>

</div>

<ul>

</ul>

</div>

</div>

<span style="font-size: 30px;">最新商品

</span>

</div>

<img src="../img/big01.jpg" width="100%" height="100%"

</div>

<a href="#"><img src="../img/middle01.jpg"

width="100%" height="100%"/></a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<span style="font-size: 30px;">热门商品

</span>

</div>

<img src="../img/big01.jpg" width="100%" height="100%"

</div>

<a href="#"><img src="../img/middle01.jpg"

width="100%" height="100%"/></a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<p>

<a href="../案例一：网站信息显示页面/网站信息显示页面.html">关

于我们</a>

<a href="../案例三：网站友情链接显示页面/网站友情链接显示页

面.html">友情链接 </a>

</p>

</div>

</body>

</html>

此案例使用了 CSS的哪些内容：

去掉超链接的下划线：

text-decoration: none;

}

让 div居中

margin：0px auto;

让块级元素成为内联元素

display:inline;

块级元素内容居中

text-align:center;

5.总结

5.1 盒子模型

Ø 1.盒子的组成

单个盒子

白话解说：

上图中，红色边框为手机的外包装盒，而且外包装盒有一定的厚度(border)，为了保

护手机在运送的过程中不被磕坏，我们在盒子里面四周填充了一层泡沫，并且泡沫也有一定

的厚度(padding)，这层泡沫将手机包裹住，手机就是整个盒子的核心内容(content)。

可以这么对比记忆：

手机------>>>内容(content)

泡沫------>>>padding

包装盒---->>>boder

外包装间距-->>>margin

aaaa

多个盒子：

Ø 2.盒子取值计算

我们在修改页面元素位置的时候，需要设定它相对于盒子的位置，那么我们有必要清楚

关于盒子模型里面的取值相关问题。

在 CSS中，width和 height指的是内容区域的宽度和高度。增加内边距、边框和外边

距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。而默认情况下，内边距、边框和

外边距的值均为 0.

占据页面大小的区域是整个元素框的总尺寸！默认情况，padding、margin、border

均为 0，假如我们设定了区域内容的 width和 height，那么此时整个元素框的总尺寸就是

该区域内容的宽高了，此时，如果设定了 margin值，那么整个元素框的总尺寸会发生变化

(变大了)，但是我们希望它的整体布局不发生变化！所有我们可以修改区域内容的尺寸(原

有大小减去设定的 margin值)。

附：图解说明盒子模型取值问题

5.2 其它选择器

层级选择器

可以使用层级选择器设置列表的样式

元素名子元素名{

属性名 1:属性值 1;

属性名 2:属性值 2;

属性名 3:属性值 3;

}

批注 [ThinkPad24]: 此处分号不能省略

批注 [ThinkPad25]: 此处的分号可以省略，建议写

上。

属性选择器

语法：

元素名[属性名=”属性值”]{

属性名 1:属性值 1;

属性名 2:属性值 2;

属性名 3:属性值 3;

}

批注 [ThinkPad26]: 此处分号不能省略

批注 [ThinkPad27]: 此处的分号可以省略，建议写

上。

<html>

<head>

<style>

input[type="text"]{

}

input[type="password"]{

}

</style>

</head>

<body>

用户名：<input type="text" name="username"/><br />

密码：<input type="password" name="password" />

</body>

</html>

显示效果：

转载于:https://www.cnblogs.com/pro-simian/p/7210948.html

你可能感兴趣的文章