仿php中文网首页
以下是html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>仿php首页</title>
<link rel="stylesheet" href="./0325/css/main.css" />
<link rel="stylesheet" href="./0325/css/header.css" />
<link rel="stylesheet" href="./0325/css/body.css" />
<link
rel="stylesheet"
href="//at.alicdn.com/t/font_3336421_9myre1c64du.css"
/>
</head>
<body>
<!-- 顶部 -->
<header>
<div class="top">
<!-- 上半部分 -->
<div class="top-in">
<div class="title">php-程序员梦开始的地方</div>
<div class="right">
<a class="iconfont icon-lingdang"></a>
<a href=""><img src="./0325/img/logo.png" alt="" /></a>
</div>
</div>
<!-- 下半部分 导航-->
<div class="navs">
<div class="content">
<a href=""><img src="./0325/img/logo1.png" alt="" /></a>
<nav>
<a href="1">首页</a>
<a href="2">视频教程</a>
<a href="3">学习路径</a>
<a href="4">资源下载</a>
<a href="4">技术文章</a>
</nav>
<div class="search">
<input type="search" value="输入关键词搜索" />
<span class="iconfont icon-Magnifier"></span>
</div>
</div>
</div>
</div>
</header>
<!-- 内容区 -->
<main>
<div class="center">
<!-- 两行三列 -->
<!-- 左上导航 -->
<div class="left">
<a href="">php开发</a>
<a href="">大前端</a>
<a href="">后端开发</a>
<a href="">数据库</a>
<a href="">移动端</a>
<a href="">运维开发</a>
<a href="">UI设计</a>
<a href="">计算机基础</a>
</div>
<!-- 中间图片 -->
<div class="slider">
<a href="">
<img src="./0325/img/b.jpg" alt="" />
</a>
</div>
<!-- 右边 -->
<div class="right">xxx</div>
<!-- 下左 -->
<div class="bottom-left">
<div class="desc">
<div class="title">学习路径</div>
<span>全部7个></span>
</div>
<ul class="detail">
<li onclick="">
<img src="./0325/img/dgjj.png" alt="" />
<a href="">独孤九贱</a>
<span>9门课程</span>
</li>
<li onclick="">
<img src="./0325/img/phpkjkf.png" alt="" />
<a href="">独孤九贱</a>
<span>9门课程</span>
</li>
<li onclick="">
<img src="./0325/img/phpkjkf.png" alt="" />
<a href="">独孤九贱</a>
<span>9门课程</span>
</li>
<li onclick="">
<img src="./0325/img/phpkjkf.png" alt="" />
<a href="">独孤九贱</a>
<span>9门课程</span>
</li>
<!-- <li onclick="">
<img src="./0325/img/phpkjkf.png" alt="" />
<a href="">独孤九贱</a>
<span>9门课程</span>
</li> -->
</ul>
</div>
<!-- 下右 -->
<div class="bottom-right">公众号</div>
</div>
</main>
</body>
</html>
以下是css代码
/* 格式化 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
/* 取消横线 */
text-decoration: none;
color: #555;
}
li {
/* 去掉原点 */
list-style: none;
}
body {
background-color: rgb(243, 245, 247);
}
/* 顶部样式 */
header .top {
background-color: #343434;
width: 100vm;
height: 40px;
color: #aaa;
}
header .top .top-in {
/* 定义宽度 */
width: 1200px;
display: grid;
grid-template-columns: 200px 140px;
grid-auto-rows: 40px;
margin: auto;
place-content: space-between;
place-items: center start;
}
header .top .top-in .title {
font-size: 16px;
font-weight: bolder;
}
/* 头像 */
header .top .top-in img {
width: 50%;
border-radius: 50%;
}
/* 登录框 */
header .top .top-in .right {
display: grid;
grid-template-columns: repeat(2, 1fr);
place-items: center center;
}
.iconfont.icon-lingdang {
color: aliceblue;
font-size: 20px;
}
header .navs {
width: 100vm;
height: 80px;
background-color: #fff;
font-size: 20px;
}
/* 设置中间区域 */
header .navs .content {
width: 1200px;
margin: auto;
display: grid;
grid-template-columns: 140px 1fr 200px;
grid-auto-flow: 45px;
gap: 10px;
place-items: center start;
}
/* 设置logo */
header .navs .content a img {
width: 100%;
}
header .navs .content nav {
display: flex;
}
/* 设置导航 */
header .navs .content nav a:first-of-type,
header .navs .content nav a:hover,
header .navs .content nav a:active {
color: red;
font-weight: bold;
}
/* 增加间距 */
header .navs .content nav a {
padding: 0 30px;
}
/* 小搜索框 */
header .navs .content .search {
display: flex;
}
header .navs .content .search input[type="search"] {
/* border: none; */
width: 180px;
height: 40px;
background-color: #f7f8fa;
border-radius: 20px;
border: none;
outline: none;
color: #9999;
font-size: 12px;
}
header .navs .content .search .icon-Magnifier {
font-size: 20px;
color: #ccc;
position: relative;
left: -40px;
top: 10px;
}
main {
font-size: 14px;
}
main .center {
display: grid;
grid-template-columns: 160px 810px 190px;
grid-template-rows: 400px 80px;
place-content: center;
gap: 20px;
margin: 100px 0;
/* place-items: center start; */
}
/* 统一框架 方便看到统一样式 */
main .center > * {
background-color: #fff;
border-radius: 10px;
}
main .center .bottom-left {
grid-column: span 2;
}
/* 上左导航 */
main .center .left {
display: grid;
place-items: center;
padding: 20px 0;
}
main .center .left a {
padding: 10px 20px;
}
main .center .left a:hover {
color: lightcoral;
background-color: rgb(250, 223, 227);
border-radius: 20px;
}
/* 轮播图 */
main .center .slider img {
width: 100%;
/* height: 400px; */
border-radius: 20px;
}
/* 底部小图 */
main .bottom-left {
display: grid;
grid-template-columns: 140px 1fr;
gap: 10px;
}
main .bottom-left .desc {
display: grid;
place-items: center;
padding: 20px 0;
}
main .bottom-left .desc span {
font-size: 12px;
color: #aaa;
}
/* 中间 */
main .bottom-left .detail {
display: flex;
place-content: space-between;
place-items: center start;
}
main .bottom-left .detail li img {
width: 100%;
grid-row: span 2;
}
main .bottom-left .detail li {
display: grid;
grid-template-columns: 36px 84px;
gap: 0 10px;
place-items: center start;
}