Html/CSS最终章（L）网页制作和布局

最新推荐文章于 2024-04-17 16:01:10 发布

原创

最新推荐文章于 2024-04-17 16:01:10 发布 · 533 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端 #html #javascript

本文介绍了网页布局的四个关键部分：头部区域、菜单导航、内容区域和底部区域，并探讨了响应式网页布局的重要性。提供了HTML/CSS的学习成品代码，适合前端开发者参考。

网页布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

头部区域

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo

菜单导航区域

菜单导航条包含了一些链接，可以引导用户浏览其他页面

内容区域

内容区域一般有三种形式:

1 列：一般用于移动端
2 列：一般用于平板设备
3 列：一般用于 PC 桌面设备

底部区域

底部区域在网页的最下方，一般包含版权信息和联系方式等

响应式网页布局

通过以上等学习我们来创建一个响应式等页面，页面的布局会根据屏幕的大小来调整

--Html/CSS的应用学习成品代码--

以下代码为ITX的个人网页，内容自己更改哦o(*￣▽￣*)o

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Interstellar-X</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<style>
* {
  box-sizing: border-box;
}
 
body {
  font-f

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

浏览器/html/css面试题----3

MingL520的博客

05-24

536

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明的viewport。参数是scroll时候，必会出现滚动条。参数是auto时候，子元素内容大于父元素时出现滚动条。参数是visible时候，溢出的内容出现在父元素之外。参数是hidden时候，溢出隐藏。

div+css网页布局设计模板源代码

04-09

div+css网页布局设计模板源代码。比较精炼，纯div和css布局，色彩搭配的很好。共6个网站。

参与评论您还未登录，请先登录后发表或查看评论

Css 常用布局方式

m0_73302873的博客

08-16

6122

Css 常用布局方式

CSS3中li元素自动横向排列、多栏div自动横向排列的简单方法

热门推荐

07-26

2万+

在传统的的css中，要想实现li元素横向排列，需要用到float属性，如果使用不熟练往往引起布局的错乱。css3中提供了一种非常好的实现机制。li元素的宽度、换行等都可自动完成，并根据窗口尺寸自动调整，呈现出一定程度的响应式布局。在Chrome，Edge，IE11中显示结果都一样。而多栏div自动横向排列的方法与上面的相似。完整代码<!DOCTYPE html> <html> <head

结合html和css制作页面的布局结构,CSS Div网页布局中的结构与表现

weixin_34457571的博客

06-28

460

在Web标准中一个很重要的概念就是强调页面的结构与表现分离。说的通俗一点就是XHTML中应该没有样式化的东西，而且Web在浏览器中除内容外都应该由CSS表现，这包括布局与其它样式。一旦一个标准的XHTML代码写完之后，那么CSS可以实现其实百变面孔。其实XHTML是一个演员，CSS是编剧，XHTML演什么角色，都由CSS来决定的。这听起来似乎有点理想主义，实现起来似乎就没有那么容易了。不过我还是想...

分享 10 个常见的 CSS 页面布局代码片段

前端达人

02-20

7452

大家好，本篇文章将分享我们业务中很常见的10个页面布局代码片段，这10 种页面布局很常见，实现方式也有很多种，本篇文章将用最简单的新方式进行实现，希望对大家有所启发。1、Card layo...

Pagina_Web_LOL：基于HTML和CSS的LOL风格网页制作

标题中提到的“Pagina_Web_LOL”指的是一种基于HTML和CSS的网页设计，意在模拟或复制“L Prima”网站上的《英雄联盟》（League of Legends，简称LOL）的网页风格。《英雄联盟》是一款由Riot Games开发的多人在线战斗...

HTML5和CSS3 WEB技术开发

张晨光老师的播客

01-02

7798

B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup

构建简历：从Figma设计到HTML/CSS实现

### 知识点详细解读 ...结合描述中的步骤和标签内容，可以看出这个简历制作过程涵盖了从规划到设计、从HTML编码到CSS样式的应用，最后通过软件工具进行草图绘制和设计，确保简历既符合视觉美感，也满足功能性需求。

html+css页面布局

qq_42108313的博客

08-27

2261

文章目录页面布局笔记css盒模型（Box Model）W3C和IE盒子模型display属性设置属性值的简写形式行内元素注意正常盒和怪异盒区别初始化标签float引起高度塌陷浮动什么意思?解决高度塌陷方法clear: left / right /both定义和用法说明可能的值margin和padding写法简写margin-top的传递问题margin上下重叠问题行高img问题img水平垂直居中img和nav同比例增大缩小精灵图列表序号按钮button导航栏书写列表书写伪类选择器1.动态伪类选择器语法2.U

css和html怎么布局页面,css怎么布局？

weixin_31236935的博客

06-04

353

CSS 的布局应该是 CSS 体系中的重中之重了，主要的布局方式有 table 表格布局(早期)，float 浮动布局和 flex 布局，还有针对于移动端的响应式布局。下面我们来看一下css布局的几种方法：一、table 布局table 布局是最简单的布局方式了，下面我们来看一个简单的例子CSS 布局.container{height:200px;width: 200px;}.left{backg...

html+css——网页布局

lengyuefengqing的博客

06-28

1383

1、一列布局 meta charset="UTF-8"> title>Titletitle> style type="text/css"> body{ margin: 0; padding: 0; } .top{ height: 100px;

html+css布局

sh2001824的博客

07-26

3117

布局

HTML+CSS页面布局方法介绍

最新发布

pblh123的专栏

04-17

1054

HTML和CSS是构建网页的两个核心技术。HTML负责网页的结构和内容，而CSS负责网页的布局和样式。以下是一些常用的HTML和CSS布局方法，以及相应的经典布局示例。

CSS的用法与HTML的布局方法

Xiaoming10hao的博客

01-01

566

熟悉HTML页面布局的方法以及掌握CSS用法

CSS的l

weixin_59163379的博客

10-19

633

https://www.gxlsystem.com/qianduan-7505.html 修改滚动条样式来判断页面大小引入css不同的样式。

HTML+CSS各类布局模式介绍

2401_84150137的博客

04-12

1037

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可获取一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

如何利用html和css布局,最全Html和CSS布局技巧

weixin_39542477的博客

06-07

235

1.单列布局1.1水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素1.1.1使用inline-block 和 text-align实现.parent{text-align: center;}.child{display: inline-...

css比较常见的li布局

chengxue_123的博客

11-11

585

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>li布局</title> <style> * { ma...