html做一个甜品登录注册页面,html西式甜品网制作.docx

PAGE

PAGE # / 13

西式甜品网”首页面制作

、案例描述

1、考核知识点

? 盒子模型

? 元素的浮动与定位

2、练习目标

? 掌握盒子的相关属性。

? 掌握元素的浮动与定位。

3、需求分析

盒子模型这样的布局方式代替了传统的表格布局，同时结合元素的浮动与定位，可使网页的结构更加多样化，通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点。

4、案例展示

效果如图 4-1 所示。

图 4-1 “西式甜品网”效果展示

、布局及定义基础样式

1、效果分析

HTML结构分析

“西式甜品网”首页面从上到下可以分为5个模块，如图4-2所示。

图4-2“西式甜品网”结构分析

CSS样式分析

页面中的各个模块居中显示，页面的版心为980px。另外，页面中的所有字体均为微软雅黑，字体大

小为16px，这些可以通过 CSS公共样式进行定义。

2、页面布局

新建indexO4.html文件，在indexO4.html文件内书写 HTML结构代码，具体代码如下。

/p>

" /TR/xhtml1/DTD/xhtml1-transitional.dtd">

西式甜品网

v/div>

在上述代码中，通过给div添加不同的类名来定义页面中的各个模块。

3、定义公共样式

css文为了清除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首先要做的就是对CSS样式进行初始化并声明一些通用的样式。在index04.html

css文

件夹用于存放样式表文件style04.css,使用链入式引入样式表文件。然后定义页面的基础样式，具体如下:

/*重置浏览器的默认样式*/

*{margin:0; padding:0;border:0; background:none;}

/*全局控制*/

body{font-family:"微软雅黑";font-size:16px;}

三、案例制作

1、制作头部模块

(1)HTML结构分析

"头部”模块整体由一个大盒子

进行控制。内部嵌套和

分别用来搭建左侧logo和右

侧文字内容部分。“头部”模块的具体结构如图4-3所示。

几爱磔徂炉嗣4 !

1 If 1

1—1

图4-3“头部”模块结构图

(2)样式分析

“头部”模块的宽为980px，通过设置外边距属性使其在页面中居中显示，并设置相对定位。左侧logo

和右侧文字内容部分相对外层大盒子设置绝对定位，最后还需设置文字的相关样式等。

(3)搭建结构

在index04.html文件内书写“头部”模块的 HTML结构代码。具体如下：

(4)定义样式

在样式表文件style04.css中书写CSS样式代码，用于控制“头部”模块。具体如下:

.head{

width:9

html做一个甜品登录注册页面,html西式甜品网制作.docx相关推荐

用html做一个15页的页面,html西式甜品网制作（15页）-原创力文档
. "西式甜品网"首页面制作一.案例描述 1.考核知识点盒子模型元素的浮动与定位 2.练习目标掌握盒子的相关属性. 掌握元素的浮动与定位. 3.需求分析盒子模型这样的布局 ...
【新手向】Python做一个简易登录注册GUI界面(无事件绑定)
Python做一个简易登录注册GUI界面一,效果展示 (1)运行结果: (2)点击登录: 注:只有用户名:123 密码123456 会提示登录成功. 登录成功示范: 登录失败示范: (3)点击注册 ...
用layui做一个简易的登录注册页面
用layui做一个简易的登录注册页面 1.首先在主页绑定一个点击事件,点击登录按钮就可以弹出一个弹出窗,一般商场登录页面不会跳转一个新页面,因为如果进入一个新页面,登录后需要跳转会原来的页面,这样会导 ...
做登录/注册页面需考虑哪些问题？
[文章摘要]现在人手一部手机的前提下,手机号登录/注册的方式无疑是最简单直接的方式.而且现在很多其他注册方式,到后面还是会引导用户去绑定手机. 这几天在做登录/注册页面.做之前看了很多其他公司的登录/ ...
jsf登录注册页面_您将在下一个项目中使用JSF吗？
jsf登录注册页面上周有一篇很棒的stackoverflow博客文章,主题是" Javascript框架的残酷生命周期" . 这篇文章是关于Javascript UI框架(ang ...
html登录页面用idea,利用IDEA怎么制作一个登录注册页面
利用IDEA怎么制作一个登录注册页面发布时间:2020-12-19 14:02:09 来源:亿速云阅读:186 作者:Leah 利用IDEA怎么制作一个登录注册页面?很多新手对此不是很清楚,为了帮 ...
Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（登录注册页面，验证码）
基于 Vue3.x + Vant UI 的多功能记账本(四) 文章目录基于 Vue3.x + Vant UI 的多功能记账本(四) 项目演示 1.登录注册页面 2.图片验证码 3.修改 axios ...
php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
如何做WP的登录/注册功能
2019独角兽企业重金招聘Python工程师标准>>> 首先我要做的效果如下思路一:page 在WP里Page是最基本的东西,你第一想法肯定是用Page来做登录注册.但是登录注册其 ...

html做一个甜品登录注册页面,html西式甜品网制作.docx

html做一个甜品登录注册页面,html西式甜品网制作.docx相关推荐

最新文章

热门文章