Canvas is not supported in your browser.
首页 课程 文章
无痕注入 APC注入 线程注入 读写驱动 注入技术 句柄表 进程线程 系统调用 保护模式 内存管理 远程CALL 软件调试 驱动封装 云下发 驱动开发 FPS数据 方框透视 FPS方框 FPS自瞄 CE D3DHOOK D3D绘制 Imgui绘制 DWM
内核课程 驱动出租 学习路线 聊天室 免责声明 提问技巧

css-CSS 网页布局

推荐 原创

周杰伦

文章分类 其他 css 前端 html javascript css3 阅读数 : 368 阅读时长 : 9分钟


【css-CSS 网页布局】此文章归类为：["css","前端","html","javascript","css3"]。

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

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

<style>

body {

  margin: 0;

}

/* 头部样式 */

.header {

  background-color: #f1f1f1;

  padding: 20px;

  text-align: center;

}

</style>

</head>

<body>

<div class="header">

  <h1>头部区域</h1>

</div>

</body>

2）、菜单导航栏包含一些链接，可以引导用户浏览其他网页：

<style>

* {

  box-sizing: border-box;

}

body {

  margin: 0;

}

/* 头部样式 */

.header {

  background-color: #f1f1f1;

  padding: 20px;

  text-align: center;

}

/* 导航条 */

.topnav {

  overflow: hidden;

  background-color: #333;

}

/* 导航链接 */

.topnav a {

  float: left;

  display: block;

  color: #f2f2f2;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}

/* 链接 - 修改颜色 */

.topnav a:hover {

  background-color: #ddd;

  color: black;

}

</style>

</head>

<body>

<div class="header">

  <h1>头部区域</h1>

</div>

<div class="topnav">

  <a href="#">主页</a>

  <a href="#">产品</a>

  <a href="#">关于</a>

</div>

3）、内容区域一般有2种形式；1列（一般用于移动端）；2列（一般用于平板设备）；3列（一般用于PC设备）。

<style>

* {

  box-sizing: border-box;

}

body {

  margin: 0;

}

/* 头部样式 */

.header {

  background-color: #f1f1f1;

  padding: 20px;

  text-align: center;

}

/* 导航条 */

.topnav {

  overflow: hidden;

  background-color: #333;

}

/* 导航链接 */

.topnav a {

  float: left;

  display: block;

  color: #f2f2f2;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}

/* 链接 - 修改颜色 */

.topnav a:hover {

  background-color: #ddd;

  color: black;

}

/* 创建三个相等的列 */

.column {

  float: left;

  width: 33.33%;

}

/* 列后清除浮动 */

.row:after {

  content: "";

  display: table;

  clear: both;

}

/* 响应式布局 - 小于 600 px 时改为上下布局 */

@media screen and (max-width: 600px) {

  .column {

    width: 100%;

  }

}

</style>

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

/* 底部样式 */

.footer {

  background-color: #f1f1f1;

  padding: 10px;

  text-align: center;

}


更多【css-CSS 网页布局】相关视频教程：www.yxfzedu.com




相关文章推荐

记录自己的技术轨迹
文章规则：
1)：文章标题请尽量与文章内容相符
2)：严禁色情、血腥、暴力
3)：严禁发布任何形式的广告贴
4)：严禁发表关于中国的政治类话题
5)：严格遵守中国互联网法律法规
6)：有侵权,疑问可发邮件至service@yxfzedu.com
近期原创 更多
友情链接
内核结构 FAQ
免责声明
课程目录
Windows内核
游戏逆向(FPS)
技术交流QQ群
342478842 215039827 137189196
314055665 159620936
微信公众号
www.yxfzedu.com是一个分享游戏安全,游戏外挂与反外挂,游戏驱动保护的视频网站！
接各种驱动定制如：游戏读写驱动，软件内存保护，防止调试等功能定制。
出租读写驱动，调试驱动，无痕注入支持各种游戏。
邮箱：service@yxfzedu.com
QQ：851920120
特别说明：不接游戏数据分析，外挂编写，登陆协议等类似业务。