用html+css仿照github中文社区首页
代码地址:GitHub: 用html+css仿照github中文社区首页 (gitee.com)
一.框架构建
大体构建为头部,菜单,内容
1.1图标寻找
1.2头部构建
<div class="top">
<span class="iconfont icon-caidan
"></span>
<div>
<span class="iconfont icon-github-fill
"></span>
<div>GitHub<div>中文社区</div></div>
</div>
<span class="iconfont icon-sousuo
"></span>
<input type="text" class="search" placeholder="搜索">
<span>论坛</span>
<span>排行榜</span>
<span>趋势</span>
</div>-
使用
<div>标签创建一个顶部导航栏的容器：<div class="top"> -
在导航栏中，使用
<span>标签创建一个图标，图标使用了自定义的字体图标库中的"icon-caidan"图标：<span class="iconfont icon-caidan"></span> -
使用
<div>标签创建一个包含GitHub图标和文本的容器：<div> -
在该容器中，使用
<span>标签创建一个GitHub图标，图标使用了自定义的字体图标库中的"icon-github-fill"图标：<span class="iconfont icon-github-fill"></span> -
在该容器中，使用
<div>标签创建一个包含"GitHub"文本和"中文社区"文本的容器：<div>GitHub<div>中文社区</div></div> -
使用
<span>标签创建一个搜索图标，图标使用了自定义的字体图标库中的"icon-sousuo"图标：<span class="iconfont icon-sousuo"></span> -
使用
<input>标签创建一个文本输入框，类型为"text"，具有"class"属性为"search"，并设置占位符为"搜索"：<input type="text" class="search" placeholder="搜索"> -
使用
<span>标签创建一个"论坛"文本：<span>论坛</span> -
使用
<span>标签创建一个"排行榜"文本：<span>排行榜</span> -
使用
<span>标签创建一个"趋势"文本：<span>趋势</span> -
结束顶部导航栏的容器标签：
</div>
1.2菜单构建
<div class="body">
<div class="menu">
<div>
<div>
<span class="iconfont icon-remen
"></span>
<span>趋势</span>
</div>
<div>
<span class="iconfont icon-good
"></span>
<span>精选</span>
</div>
<div>
<span class="iconfont icon-paihang
"></span>
<span>排行榜</span>
</div>
<div>
<span class="iconfont icon-suoyin
"></span>
<span>索引</span>
</div>
<div>
<span class="iconfont icon-sousuo
"></span>
<span>搜索</span>
</div>
<div>
<span class="iconfont icon-weixingbiao
"></span>
<span>实战项目</span>
</div>
<div>
<span class="iconfont icon-paihang
"></span>
<span>开发者榜单</span>
</div>
</div>
</div>代码中的<div class="body">表示一个包含菜单选项的主体部分。在这个主体部分中，有一个<div class="menu">元素，表示菜单的容器。
在菜单容器中，有多个<div>元素，每个<div>元素都包含一个图标和一个文本。图标使用了<span>元素，并且通过class属性指定了不同的CSS类，以便显示不同的图标样式。文本则直接使用了<span>元素。
这段代码中的菜单选项有以下几个：
- "趋势"：使用了
<span class="iconfont icon-remen"></span>来显示一个热门图标，然后使用<span>元素显示文本"趋势"。 - "精选"：使用了
<span class="iconfont icon-good"></span>来显示一个好评图标，然后使用<span>元素显示文本"精选"。 - "排行榜"：使用了
<span class="iconfont icon-paihang"></span>来显示一个排行榜图标，然后使用<span>元素显示文本"排行榜"。 - "索引"：使用了
<span class="iconfont icon-suoyin"></span>来显示一个索引图标，然后使用<span>元素显示文本"索引"。 - "搜索"：使用了
<span class="iconfont icon-sousuo"></span>来显示一个搜索图标，然后使用<span>元素显示文本"搜索"。 - "实战项目"：使用了
<span class="iconfont icon-weixingbiao"></span>来显示一个实战项目图标，然后使用<span>元素显示文本"实战项目"。 - "开发者榜单"：使用了
<span class="iconfont icon-paihang"></span>来显示一个排行榜图标，然后使用<span>元素显示文本"开发者榜单"。
1.2内容构建
<div class="details">
<div class="title">
<div class="theme">GitHub中文社区</div>
<div class="about">GitHub是世界上最大的代码托管平台，超7千万开发者正在使用。GitHub中文社区是一个致力于分享和传播GitHub上优质开源项目的中文社区平台。</div>
</div>
<div class="gird">
<div class="gird3-2">
<div class="girditem">
<div class="bule">新手训练营</div>
<div>适合所有人的交互式课程</div>
</div>
<div class="girditem">
<div class="bule">GitHub趋势</div>
<div>查看当前流行和历史趋势</div>
</div>
<div class="girditem">
<div class="bule">排行榜</div>
<div>查看GitHub 上最受欢迎的开源项目</div>
</div>
</div>
<div class="gird3-2">
<div class="girditem">
<div class="bule">GitHub精选</div>
<div>精选优质开源项目和学习资源</div>
</div>
<div class="girditem">
<div class="bule">GitHub 官网</div>
<div>GitHub英文官网入口</div>
</div>
<div class="girditem">
<div class="bule">论坛</div>
<div>开发者论坛</div>
</div>
</div>
</div>
</div><div class="details"> 是一个包含详细信息的容器元素。
<div class="title"> 是一个标题容器，包含了两个子元素。
<div class="theme"> 是一个包含GitHub中文社区主题的元素。
<div class="about"> 是一个包含GitHub中文社区介绍的元素。
<div class="gird"> 是一个包含网格布局的容器元素。
<div class="gird3-2"> 是一个包含两列的网格布局容器。
<div class="girditem"> 是一个网格项容器，包含了两个子元素。
<div class="bule"> 是一个包含蓝色文本的元素。
二.样式调整
.top{
display: flex;
width: 1850px;
background-color: #000;
color: #fff;
height: 80px;
font-size: 20px;
align-items: center;
}
.top span{
margin-left: 20px;
font-weight: bold;
}
.top .icon-caidan{
font-size: 20px;
color: #6e7781;
}
.top .icon-github-fill{
font-size: 40px;
}
.top div{
display: flex;
align-items: center;
}
.top div div{
margin-left: 10px;
}
.top .icon-sousuo{
position: relative;
left: 30px;
}
.top input{
width: 250px;
text-indent: 35px;
height: 35px;
color: #6e7781;
border-color: #6e7781;
background: #000;
border-radius: 10px;
}
.body{
display: flex;
}
.menu{
font-size: 15px;
width: 160px;
}
.menu div{
margin: 25px 25px 0 25px;
width: 110px;
}
.details{
display: flex;
flex-direction: column;
}
.details .title{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 220px;
text-align: center;
}
.details .title .theme{
font-size: 30px;
font-weight: bold;
}
.details .title .about{
font-size: 20px;
color: #6e7781;
margin-top: 10px;
}
.details .gird{
width: 1,200px;
background: #f6f8fa;
padding: 160px 330px 0 160px;
}
.details .gird .gird3-2{
display: flex;
flex-wrap: wrap;
width: 1200px;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.details .gird .gird3-2 .girditem{
width: 390px;
height: 110px;
text-align: center;
font-size: 20px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 20px;
border: 1px #6e7781 solid;
}
.details .gird .gird3-2 .girditem .bule{
color: #3366d5;
}重要样式:
给文字加缩进后把图标定位在指定位置
借鉴自css实现在input框中放置小图标的例子_css input添加图标-CSDN博客
.top .icon-sousuo{
position: relative;
left: 30px;
}
.top input{
width: 250px;
text-indent: 35px;
height: 35px;
color: #6e7781;
border-color: #6e7781;
background: #000;
border-radius: 10px;
}
将菜单部分与内容部分用di住,用flex布局放在一行,设置大小避免平分
.body{
display: flex;
}
.menu{
font-size: 15px;
width: 160px;
}
.details .gird .gird3-2{
display: flex;/*将div放在一行*/
flex-wrap: wrap;/*超过大小放在一行*/
width: 1200px;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.details .gird .gird3-2 .girditem{
width: 390px;
height: 110px;/*设置宫格大小,使调整其为3行2列的宫格*/
text-align: center;
font-size: 20px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 20px;
border: 1px #6e7781 solid;
}
.details .gird .gird3-2 .girditem .bule{
color: #3366d5;
}
717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
