CSS快速入门-前端布局1(抽屉）

作者：@skyflask
转载本文请注明出处：https://www.cnblogs.com/skyflask/p/8987996.html

目录

一、效果图
二、实现步骤

一、效果图

前面对CSS基础知识有了一定的了解，是时候开始实战了！以下我对抽屉（https://dig.chouti.com/）主页进行模拟布局。

官方网站效果图：

 

模拟网站图：

 

二、实现步骤

1、整体布局（header、body、footer）

抽屉的首页主要分为三块：头部、网页内容、底部内容。

 

2、header实现

header由logo、内容菜单、登录菜单、搜索框四部分组成。

代码架构为：

CSS代码：

　　

3、body实现

body分为左边内容和右边内容，通过float：right和float：left来实现。

 

代码架构为：

 

CSS代码为：

　　

4、footer实现

 

footer分为友情链接和备案信息两部分，代码结构如下：

 

CSS代码为：

　　

5、其他（回到最顶部）

 

大部分网站都有回到顶部这一功能，而且我个人认为这是一个用户体验很好的小功能，尤其是对非常长的页面而言。实现起来其实非常简单，就是一个div，设定一个onclick动作。

 

CSS实现代码如下：

　　

JS实现代码如下：

?
1
2
3
4
5
<script>
    function Top(){
        $(window).scrollTop(0);
    }
</script>

　　

posted @   skyflask  阅读(3043)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
· AI 智能体引爆开源社区「GitHub 热点速览」
点击右上角即可分享
微信分享提示